package com.example.job.controller.api;
imp
ort com.baomidou.mybatisplus.c
ore.conditions.query.QueryWrapper;
imp
ort com.baomidou.mybatisplus.extension.plugins.pagination.Page;
imp
ort com.example.job.entity.Comment;
imp
ort com.example.job.entity.Fav
oritePost;
imp
ort com.example.job.entity.Post;
imp
ort com.example.job.entity.ReplyComment;
imp
ort com.example.job.entity.Student;
imp
ort com.example.job.service.ICommentService;
imp
ort com.example.job.service.IFav
oritePostService;
imp
ort com.example.job.service.IPostService;
imp
ort com.example.job.service.IReplyCommentService;
imp
ort com.example.job.service.IStudentService;
imp
ort
org.springframew
ork.beans.fact
ory.annotation.Autowired;
imp
ort
org.springframew
ork.http.ResponseEntity;
imp
ort
org.springframew
ork.util.StringUtils;
imp
ort
org.springframew
ork.web.bind.annotation.*;
imp
ort java.time.LocalDate;
imp
ort java.util.HashMap;
imp
ort java.util.List;
imp
ort java.util.Map;
imp
ort java.util.Set;
/**
* 小程序端
- 论坛帖子接口
*/
@RestController
@R
equestMapping
("/api/posts"
)
public class PostApiController {
@Autowired
private IPostService postService;
@Autowired
private ICommentService commentService;
@Autowired
private IReplyCommentService replyCommentService;
@Autowired
private IFav
oritePostService fav
oritePostService;
@Autowired
private IStudentService studentService;
/**
* 获取帖子列表
(分页 + 搜索
)
* @param page 页码
* @param size 每页数量
* @param keyw
ord 搜索关键词
(匹配标题或内容, 可选
)
* @return 分页后的帖子列表
*/
@GetMapping
public ResponseEntity<?> getPosts
(
@R
equestParam
(defaultValue = "
1"
) int page,
@R
equestParam
(defaultValue = "
10"
) int size,
@R
equestParam
(r
equired = false
) String keyw
ord
) {
Page<Post> postPage = new Page<>
(page, size
);
QueryWrapper<Post> queryWrapper = new QueryWrapper<>
();
// 只查询已发布的帖子
queryWrapper.
eq("show_state", "已发布"
);
// 添加关键词搜索
if
(StringUtils.hasText
(keyw
ord
)) {
queryWrapper.and
(qw
-> qw.like
("title", keyw
ord
).
or().like
("content", keyw
ord
));
}
// 按发布日期降序排列
queryWrapper.
orderByDesc
("publish_date"
);
Page<Post> resultPage = postService.page
(postPage, queryWrapper
);
// 批量查发帖人信息，防止IN
()报错
Set<Integer> stuidSet = resultPage.getRec
ords
().stream
()
.map
(Post
::getStuid
)
.filter
(java.util.Objects
::nonNull
)
.collect
(java.util.stream.Collect
ors.toSet
());
Map<Integer, Student> studentMap = stuidSet.isEmpty
() ? new HashMap<>
() :
studentService.listByIds
(stuidSet
)
.stream
().collect
(java.util.stream.Collect
ors.toMap
(Student
::getStuid, s
-> s
));
// 组装DTO
List<Map<String, Object>> dtoList = resultPage.getRec
ords
().stream
().map
(post
-> {
Map<String, Object> dto = new HashMap<>
();
dto.put
("post", post
);
Student stu = studentMap.get
(post.getStuid
());
dto.put
("userName", stu != null ? stu.getName
() : "未知用户"
);
dto.put
("userAvatar", "/static/avatar/default.png"
); // 默认头像
return dto;
}
).collect
(java.util.stream.Collect
ors.toList
());
Map<String, Object> pageResult = new HashMap<>
();
pageResult.put
("rec
ords", dtoList
);
pageResult.put
("total", resultPage.getTotal
());
pageResult.put
("size", resultPage.getSize
());
pageResult.put
("current", resultPage.getCurrent
());
return ResponseEntity.ok
(pageResult
);
}
/**
* 获取帖子详情
* @param postid 帖子ID
* @param stuid 学生ID
(可选
)，用于判断是否已收藏
* @return 帖子详情
*/
@GetMapping
("/{postid}"
)
public ResponseEntity<?> getPostDetail
(@PathVariable Integer postid, @R
equestParam
(r
equired = false
) Integer stuid
) {
Post post = postService.getById
(postid
);
if
(post != null && "已发布".
equals
(post.getShowState
())) {
Student student = studentService.getById
(post.getStuid
());
Map<String, Object> result = new HashMap<>
();
result.put
("post", post
);
result.put
("userName", student != null ? student.getName
() : "未知用户"
);
result.put
("userAvatar", "/static/avatar/default.png"
); // 默认头像
// 检查当前用户是否已收藏该帖子
if
(stuid != null
) {
QueryWrapper<Fav
oritePost> queryWrapper = new QueryWrapper<>
();
queryWrapper.
eq("postid", postid
).
eq("stuid", stuid
);
boolean isFav
orited = fav
oritePostService.count
(queryWrapper
) > 0;
result.put
("isFav
orited", isFav
orited
);
} else {
result.put
("isFav
orited", false
);
}
return ResponseEntity.ok
(result
);
} else {
return ResponseEntity.notFound
().build
();
}
}
/**
* 发布新帖子
* @param post 帖子内容
(需要包含 title, content
)
* @param stuid 学生ID
(实际应用中应从认证信息获取
)
* @return 创建的帖子信息
*/
@PostMapping
public ResponseEntity<?> createPost
(@R
equestBody Post post, @R
equestParam Integer stuid
) {
if
(!StringUtils.hasText
(post.getTitle
()) || !StringUtils.hasText
(post.getContent
())) {
return ResponseEntity.badR
equest
().body
("标题和内容不能为空"
);
}
post.setStuid
(stuid
);
post.setPublishDate
(LocalDate.now
());
post.setShowState
("已发布"
); // 默认直接发布
// post.setAdminid
(null
); // 管理员ID默认为空
// post.setHideDate
(null
);
boolean success = postService.save
(post
);
// 返回创建后的帖子，包含生成的 postid
return success ? ResponseEntity.ok
(post
) : ResponseEntity.internalServerErr
or().body
("发布失败"
);
}
//
--- 收藏相关
---
/**
* 收藏帖子
* @param postid 帖子ID
* @param stuid 学生ID
* @return 操作结果
*/
@PostMapping
("/{postid}/fav
orite"
)
public ResponseEntity<?> fav
oritePost
(@PathVariable Integer postid, @R
equestParam Integer stuid
) {
QueryWrapper<Fav
oritePost> checkWrapper = new QueryWrapper<>
();
checkWrapper.
eq("postid", postid
).
eq("stuid", stuid
);
if
(fav
oritePostService.count
(checkWrapper
) > 0
) {
return ResponseEntity.badR
equest
().body
("已收藏该帖子"
);
}
Fav
oritePost fav
oritePost = new Fav
oritePost
();
fav
oritePost.setPostid
(postid
);
fav
oritePost.setStuid
(stuid
);
fav
oritePost.setFav
oriteDate
(LocalDate.now
());
boolean success = fav
oritePostService.save
(fav
oritePost
);
return success ? ResponseEntity.ok
("收藏成功"
) : ResponseEntity.internalServerErr
or().body
("收藏失败"
);
}
/**
* 取消收藏帖子
* @param postid 帖子ID
* @param stuid 学生ID
* @return 操作结果
*/
@DeleteMapping
("/{postid}/fav
orite"
)
public ResponseEntity<?> unfav
oritePost
(@PathVariable Integer postid, @R
equestParam Integer stuid
) {
QueryWrapper<Fav
oritePost> deleteWrapper = new QueryWrapper<>
();
deleteWrapper.
eq("postid", postid
).
eq("stuid", stuid
);
boolean success = fav
oritePostService.remove
(deleteWrapper
);
return success ? ResponseEntity.ok
("取消收藏成功"
) : ResponseEntity.internalServerErr
or().body
("取消收藏失败"
);
}
//
--- 评论相关
---
/**
* 获取帖子的评论列表
(分页
)
* @param postid 帖子ID
* @param page 页码
* @param size 每页数量
* @return 评论列表
*/
@GetMapping
("/{postid}/comments"
)
public ResponseEntity<?> getComments
(
@PathVariable Integer postid,
@R
equestParam
(defaultValue = "
1"
) int page,
@R
equestParam
(defaultValue = "
10"
) int size
) {
Page<Comment> commentPage = new Page<>
(page, size
);
QueryWrapper<Comment> queryWrapper = new QueryWrapper<>
();
queryWrapper.
eq("postid", postid
);
queryWrapper.
eq("show_state", "已发布"
); // 只显示已发布的评论
queryWrapper.
orderByAsc
("publish_date"
); // 按发布时间升序
Page<Comment> resultPage = commentService.page
(commentPage, queryWrapper
);
// 批量查评论人信息，防止IN
()报错
Set<Integer> stuidSet = resultPage.getRec
ords
().stream
()
.map
(Comment
::getStuid
)
.filter
(java.util.Objects
::nonNull
)
.collect
(java.util.stream.Collect
ors.toSet
());
Map<Integer, Student> studentMap = stuidSet.isEmpty
() ? new HashMap<>
() :
studentService.listByIds
(stuidSet
)
.stream
().collect
(java.util.stream.Collect
ors.toMap
(Student
::getStuid, s
-> s
));
// 组装DTO
List<Map<String, Object>> dtoList = resultPage.getRec
ords
().stream
().map
(comment
-> {
Map<String, Object> dto = new HashMap<>
();
dto.put
("comment", comment
);
Student stu = studentMap.get
(comment.getStuid
());
dto.put
("userName", stu != null ? stu.getName
() : "匿名用户"
);
dto.put
("userAvatar", "/static/avatar/default.png"
); // 默认头像
return dto;
}
).collect
(java.util.stream.Collect
ors.toList
());
Map<String, Object> pageResult = new HashMap<>
();
pageResult.put
("rec
ords", dtoList
);
pageResult.put
("total", resultPage.getTotal
());
pageResult.put
("size", resultPage.getSize
());
pageResult.put
("current", resultPage.getCurrent
());
return ResponseEntity.ok
(pageResult
);
}
/**
* 发布评论
* @param postid 帖子ID
* @param comment 评论内容
(需要包含 content
)
* @param stuid 学生ID
* @return 创建的评论信息
*/
@PostMapping
("/{postid}/comments"
)
public ResponseEntity<?> createComment
(@PathVariable Integer postid, @R
equestBody Comment comment, @R
equestParam Integer stuid
) {
if
(!StringUtils.hasText
(comment.getContent
())) {
return ResponseEntity.badR
equest
().body
("评论内容不能为空"
);
}
comment.setPostid
(postid
);
comment.setStuid
(stuid
);
comment.setPublishDate
(LocalDate.now
());
comment.setShowState
("已发布"
);
boolean success = commentService.save
(comment
);
return success ? ResponseEntity.ok
(comment
) : ResponseEntity.internalServerErr
or().body
("评论失败"
);
}
//
--- 回复评论相关
---
/**
* 获取评论的回复列表
(分页
)
* @param commentid 评论ID
* @param page 页码
* @param size 每页数量
* @return 回复列表
*/
@GetMapping
("/comments/{commentid}/replies"
)
public ResponseEntity<?> getReplies
(
@PathVariable Integer commentid,
@R
equestParam
(defaultValue = "
1"
) int page,
@R
equestParam
(defaultValue = "
10"
) int size
) {
Page<ReplyComment> replyPage = new Page<>
(page, size
);
QueryWrapper<ReplyComment> queryWrapper = new QueryWrapper<>
();
queryWrapper.
eq("comid", commentid
);
queryWrapper.
eq("show_state", "已发布"
);
queryWrapper.
orderByAsc
("reply_date"
);
Page<ReplyComment> resultPage = replyCommentService.page
(replyPage, queryWrapper
);
// 批量查学生信息，防止IN
()报错
Set<Integer> stuidSet = resultPage.getRec
ords
().stream
()
.map
(ReplyComment
::getStuid
)
.filter
(java.util.Objects
::nonNull
)
.collect
(java.util.stream.Collect
ors.toSet
());
Map<Integer, Student> studentMap = stuidSet.isEmpty
() ? new HashMap<>
() :
studentService.listByIds
(stuidSet
)
.stream
().collect
(java.util.stream.Collect
ors.toMap
(Student
::getStuid, s
-> s
));
// 组装DTO
List<Map<String, Object>> dtoList = resultPage.getRec
ords
().stream
().map
(reply
-> {
Map<String, Object> dto = new HashMap<>
();
dto.put
("replyid", reply.getStuid
());
dto.put
("content", reply.getContent
());
dto.put
("replyDate", reply.getReplyDate
());
Student stu = studentMap.get
(reply.getStuid
());
dto.put
("userName", stu != null ? stu.getName
() : "匿名用户"
);
return dto;
}
).collect
(java.util.stream.Collect
ors.toList
());
Map<String, Object> pageResult = new HashMap<>
();
pageResult.put
("rec
ords", dtoList
);
pageResult.put
("total", resultPage.getTotal
());
pageResult.put
("size", resultPage.getSize
());
pageResult.put
("current", resultPage.getCurrent
());
return ResponseEntity.ok
(pageResult
);
}
/**
* 回复评论
* @param commentid 评论ID
* @param reply 回复内容
(需要包含 content
)
* @param stuid 学生ID
* @return 创建的回复信息
*/
@PostMapping
("/comments/{commentid}/replies"
)
public ResponseEntity<?> createReply
(@PathVariable Integer commentid, @R
equestBody ReplyComment reply, @R
equestParam Integer stuid
) {
if
(!StringUtils.hasText
(reply.getContent
())) {
return ResponseEntity.badR
equest
().body
("回复内容不能为空"
);
}
// 检查父评论是否存在且可见
Comment parentComment = commentService.getById
(commentid
);
if
(parentComment == null || !"已发布".
equals
(parentComment.getShowState
())) {
return ResponseEntity.badR
equest
().body
("评论不存在或已被隐藏"
);
}
reply.setComid
(commentid
);
reply.setStuid
(stuid
);
reply.setReplyDate
(LocalDate.now
());
reply.setShowState
("已发布"
);
boolean success = replyCommentService.save
(reply
);
return success ? ResponseEntity.ok
(reply
) : ResponseEntity.internalServerErr
or().body
("回复失败"
);
}
/**
* 获取当前学生发布的帖子列表（分页）
* @param stuid 学生ID
* @param page 页码
* @param size 每页数量
* @return 分页后的帖子列表（带userName、userAvatar等）
*/
@GetMapping
("/my"
)
public ResponseEntity<?> getMyPosts
(
@R
equestParam Integer stuid,
@R
equestParam
(defaultValue = "
1"
) int page,
@R
equestParam
(defaultValue = "
10"
) int size
) {
Page<Post> postPage = new Page<>
(page, size
);
QueryWrapper<Post> queryWrapper = new QueryWrapper<>
();
queryWrapper.
eq("stuid", stuid
);
queryWrapper.
eq("show_state", "已发布"
);
queryWrapper.
orderByDesc
("publish_date"
);
Page<Post> resultPage = postService.page
(postPage, queryWrapper
);
// 查学生信息
Student stu = studentService.getById
(stuid
);
String userName = stu != null ? stu.getName
() : "未知用户";
String userAvatar = "/static/avatar/default.png";
// 组装DTO
List<Map<String, Object>> dtoList = resultPage.getRec
ords
().stream
().map
(post
-> {
Map<String, Object> dto = new HashMap<>
();
dto.put
("postid", post.getPostid
());
dto.put
("title", post.getTitle
());
dto.put
("content", post.getContent
());
dto.put
("publishTime", post.getPublishDate
());
dto.put
("stuid", post.getStuid
());
dto.put
("showState", post.getShowState
());
dto.put
("adminid", post.getAdminid
());
dto.put
("hideDate", post.getHideDate
());
dto.put
("userName", userName
);
dto.put
("userAvatar", userAvatar
);
return dto;
}
).collect
(java.util.stream.Collect
ors.toList
());
Map<String, Object> pageResult = new HashMap<>
();
pageResult.put
("rec
ords", dtoList
);
pageResult.put
("total", resultPage.getTotal
());
pageResult.put
("size", resultPage.getSize
());
pageResult.put
("current", resultPage.getCurrent
());
return ResponseEntity.ok
(pageResult
);
}
}
<template>
<view class="container">
<view class="post
-detail
-card">
<!
-- 头部：文字头像、用户名、发布时间
-->
<view class="card
-header">
<TextAvatar
:userName="post.userName" class="main
-avatar" />
<view class="user
-info">
<text class="username">{{ post.userName }}</text>
<text class="publish
-time">{{ post.publishTime }}</text>
</view>
</view>
<!
-- 帖子标题
-->
<text class="post
-title">{{ post.title }}</text>
<!
-- 内容
-->
<view class="card
-content">
<text class="content
-text">{{ post.content }}</text>
</view>
<!
-- 图片
-->
<view class="card
-images" v
-if="post.images && post.images.length > 0">
<image v
-f
or="
(img, idx
) in post.images"
:key="idx"
:src="img" mode="aspectFill" class="post
-image"></image>
</view>
</view>
<!
-- 操作栏：只保留收藏和评论，图标样式
-->
<view class="icon
-action
-bar">
<uni
-icons type="star" size="28"
:col
or="isFav
orited ? '#ffc
107'
: '#bbb'" @click="toggleFav
orite" class="icon
-btn"></uni
-icons>
<uni
-icons type="chatbubble" size="28" col
or="#9BC6FC" class="icon
-btn" @click="onToggleCommentInput"></uni
-icons>
</view>
<!
-- 评论列表
-->
<view class="comment
-section">
<view v
-f
or="item in commentList"
:key="item.comment.comid" class="comment
-item">
<TextAvatar
:userName="item.userName"
:isSmall="true" class="comment
-avatar" />
<view class="comment
-content" @click="onCommentClick
(item
)">
<text class="comment
-username">{{ item.userName }}</text>
<text class="comment
-text">{{ item.comment.content }}</text>
<text class="comment
-time">{{ item.comment.publishDate }}</text>
<!
-- 回复区
-->
<view v
-if="item.replies && item.replies.length" class="reply
-list">
<view v
-f
or="reply in item.replies"
:key="reply.replyid" class="reply
-item">
<TextAvatar
:userName="reply.userName"
:isSmall="true" class="reply
-avatar" />
<text class="reply
-username">{{ reply.userName }}</text>
<text class="reply
-content">{{ reply.content }}</text>
<text class="reply
-time">{{ reply.replyDate }}</text>
</view>
</view>
</view>
</view>
<view v
-if="!commentList.length && !loadingComments" class="no
-comment">暂无评论</view>
</view>
<!
-- 评论输入框
-->
<view class="comment
-input
-bar" v
-if="showCommentInput">
<input v
-model="commentContent" placeholder="写下你的评论..." class="comment
-input"/>
<button class="send
-btn" @click="submitComment">发送</button>
</view>
<!
-- 回复输入框，仅发帖人可见
-->
<view class="reply
-input
-bar" v
-if="showReplyInput">
<input v
-model="replyContent" placeholder="回复内容..." class="reply
-input" />
<button class="send
-btn" @click="submitReply">发送</button>
</view>
</view>
</template>
<script>
imp
ort { getPostDetail, fav
oritePost, unfav
oritePost, getComments, createComment, getReplies } from '@/api/index.js';
imp
ort uniIcons from '@/uni_modules/uni
-icons/components/uni
-icons/uni
-icons.vue';
imp
ort TextAvatar from '@/components/TextAvatar.vue';
exp
ort default {
components
: {
uniIcons,
TextAvatar
},
data
() {
return {
postId
: null,
post
: {},
defaultAvatar
: '/static/avatar/default.png',
isFav
orited
: false,
commentList
: [],
commentContent
: '',
loadingComments
: false,
showCommentInput
: false,
replyToCommentId
: null, // 当前要回复的评论ID
replyContent
: '', // 回复内容
showReplyInput
: false // 是否显示回复输入框
};
},
onLoad
(options
) {
this.postId = options.id;
this.fetchPostDetail
(this.postId
);
},
methods
: {
async fetchPostDetail
(id
) {
try {
const stuid = uni.getSt
orageSync
('stuid'
);
const res = await getPostDetail
(id, stuid
);
// 适配后端返回结构
this.post = {
id
: res.post?.postid || res.postid || res.id,
stuid
: res.post?.stuid || res.stuid || '',
title
: res.post?.title || res.title || '',
userName
: res.userName || res.username || '匿名用户',
publishTime
: res.post?.publishDate || res.publishDate || res.publishTime || '',
content
: res.post?.content || res.content,
images
: res.post?.images || res.images || []
};
// 明确处理收藏状态
this.isFav
orited = res.isFav
orited === true;
this.fetchComments
();
if
(this.post.userName
) {
uni.setNavigationBarTitle
({ title
: this.post.userName + '的帖子' }
);
}
} catch
(err
) {
uni.showToast
({ title
: '获取帖子详情失败', icon
: 'none' }
);
}
},
async toggleFav
orite
() {
const stuid = uni.getSt
orageSync
('stuid'
) ||
1000
1;
try {
if
(!this.isFav
orited
) {
await fav
oritePost
(this.postId, stuid
);
this.isFav
orited = true;
uni.showToast
({ title
: '收藏成功', icon
: 'none' }
);
} else {
await unfav
oritePost
(this.postId, stuid
);
this.isFav
orited = false;
uni.showToast
({ title
: '取消收藏', icon
: 'none' }
);
}
} catch
(err
) {
uni.showToast
({ title
: '操作失败', icon
: 'none' }
);
}
},
async fetchComments
() {
this.loadingComments = true;
try {
const res = await getComments
(this.postId, { page
: 1, size
: 20 }
);
const commentArr = res.rec
ords || res.data || [];
// 并发获取每条评论的回复
await Promise.all
(commentArr.map
(async
(item
) => {
const replyRes = await getReplies
(item.comment.comid, { page
: 1, size
: 10 }
);
item.replies =
(replyRes.rec
ords || replyRes.data || []
).map
(r =>
({
...r,
userName
: r.userName || '匿名用户'
}
));
}
));
this.commentList = commentArr;
} catch
(err
) {
uni.showToast
({ title
: '获取评论失败', icon
: 'none' }
);
} finally {
this.loadingComments = false;
}
},
async submitComment
() {
if
(!this.commentContent.trim
()) {
uni.showToast
({ title
: '评论不能为空', icon
: 'none' }
);
return;
}
const stuid = uni.getSt
orageSync
('stuid'
) ||
1000
1;
try {
await createComment
(this.postId, { content
: this.commentContent, stuid }
);
this.commentContent = '';
this.fetchComments
();
uni.showToast
({ title
: '评论成功', icon
: 'success' }
);
} catch
(err
) {
uni.showToast
({ title
: '评论失败', icon
: 'none' }
);
}
},
// 点击评论图标
onToggleCommentInput
() {
if
(this.showReplyInput
) {
// 如果回复框已显示，先关闭回复框
this.showReplyInput = false;
this.replyContent = '';
}
// 切换评论框显示状态
this.showCommentInput = !this.showCommentInput;
},
// 点击评论内容，显示回复输入框
onCommentClick
(item
) {
console.log
('点击了评论内容', item
);
// 只有发帖人才可以回复
const stuid = uni.getSt
orageSync
('stuid'
);
console.log
('当前登录stuid
:', stuid, '帖子stuid
:', this.post.stuid
);
if
(stuid && String
(stuid
) === String
(this.post.stuid
)) {
console.log
('允许回复，显示回复输入框'
);
// 如果评论框已显示，先关闭评论框
if
(this.showCommentInput
) {
this.showCommentInput = false;
this.commentContent = '';
}
this.replyToCommentId = item.comment.comid;
this.showReplyInput = true;
this.replyContent = '';
} else {
console.log
('非发帖人点击，不做任何操作'
);
// 非发帖人点击不做任何操作
return;
}
},
// 发送回复
async submitReply
() {
if
(!this.replyContent.trim
()) {
uni.showToast
({ title
: '回复不能为空', icon
: 'none' }
);
return;
}
const stuid = uni.getSt
orageSync
('stuid'
);
try {
await this.$api.createReply
(this.replyToCommentId, { content
: this.replyContent, stuid }
);
this.replyContent = '';
this.showReplyInput = false;
this.fetchComments
();
uni.showToast
({ title
: '回复成功', icon
: 'success' }
);
} catch
(err
) {
uni.showToast
({ title
: '回复失败', icon
: 'none' }
);
}
}
}
}
</script>
<style lang="scss" scoped>
.container {
background
-col
or: #f8f8f8;
min
-height
: 100vh;
padding
-bottom
: 70px;
}
.post
-detail
-card {
background
-col
or: #fff;
b
order
-radius
: 8px;
padding
: 15px;
margin
: 15px;
margin
-bottom
: 20px;
box
-shadow
: 0
1px 3px rgba
(0, 0, 0, 0.05
);
}
.post
-title {
display
: block;
font
-size
: 17px;
font
-weight
: bold;
col
or: #222;
margin
-bottom
: 10px;
letter
-spacing
: 1px;
margin
-top
: 2px;
}
.card
-header {
display
: flex;
align
-items
: center;
margin
-bottom
: 6px;
.main
-avatar {
width
: 40px;
height
: 40px;
font
-size
: 18px;
margin
-right
: 10px;
}
.user
-info {
flex
: 1;
display
: flex;
flex
-direction
: column;
}
.username {
font
-size
: 14px;
font
-weight
: bold;
col
or: #333;
margin
-bottom
: 2px;
}
.publish
-time {
font
-size
: 12px;
col
or: #999;
}
}
.card
-content {
margin
-bottom
: 10px;
.content
-text {
display
: block;
font
-size
: 15px;
col
or: #333;
line
-height
: 1.6;
}
}
.card
-images {
margin
-bottom
: 10px;
display
: flex;
flex
-wrap
: wrap;
.post
-image {
max
-width
: 48%;
margin
-right
: 2%;
margin
-bottom
: 8px;
max
-height
: 200px;
b
order
-radius
: 6px;
background
-col
or: #f0f0f0;
}
.post
-image
:nth-child(2n
) {
margin
-right
: 0;
}
}
.icon
-action
-bar {
display
: flex;
justify
-content
: flex
-start;
align
-items
: center;
margin
: 10px 20px
10px 20px;
.icon
-btn {
margin
-right
: 28px;
curs
or: pointer;
transition
: col
or 0.2s;
}
.icon
-btn
:active {
col
or: #9BC6FC;
}
}
.comment
-section {
margin
: 10px 0;
padding
: 0
16px;
.comment
-item {
display
: flex;
align
-items
: flex
-start;
margin
-bottom
: 14px;
padding
-left
: 2px;
padding
-right
: 2px;
.comment
-avatar {
/* 由TextAvatar的small类控制尺寸 */
}
.comment
-content {
flex
: 1;
display
: flex;
flex
-direction
: column;
justify
-content
: center;
.comment
-username {
font
-size
: 12px;
font
-weight
: bold;
col
or: #333;
margin
-bottom
: 2px;
}
.comment
-text {
font
-size
: 12px;
col
or: #444;
margin
-bottom
: 2px;
display
: block;
margin
-top
: 4px;
margin
-left
: 2px;
}
.comment
-time {
font
-size
: 10px;
col
or: #aaa;
margin
-top
: 2px;
}
}
}
.no
-comment {
col
or: #aaa;
text
-align
: center;
padding
: 20px 0;
}
}
.comment
-input
-bar {
display
: flex;
align
-items
: center;
padding
: 10px
15px;
background
-col
or: #ffffff;
b
order
-top
: 1px solid #eeeeee;
position
: fixed;
bottom
: 0;
left
: 0;
right
: 0;
z
-index
: 100;
.comment
-input {
flex
: 1;
b
order
: 1px solid #eee;
b
order
-radius
: 16px;
padding
: 6px
12px;
margin
-right
: 8px;
}
.send
-btn {
background
: #9BC6FC;
col
or: #fff;
b
order
-radius
: 16px;
padding
: 0 20px;
height
: 36px;
line
-height
: 36px;
b
order
: none;
font
-weight
: bold;
box
-shadow
: 0
1px 3px rgba
(155,
198,252,0.08
);
transition
: background 0.2s;
}
.send
-btn
:active {
background
: #7bb0f7;
}
}
.reply
-input
-bar {
display
: flex;
align
-items
: center;
padding
: 8px
16px;
background
: #f7f7f7;
b
order
-top
: 1px solid #eee;
.reply
-input {
flex
: 1;
height
: 32px;
b
order
: 1px solid #ddd;
b
order
-radius
: 16px;
padding
: 0
12px;
font
-size
: 14px;
margin
-right
: 8px;
background
: #fff;
}
.send
-btn {
background
: #9BC6FC;
col
or: #fff;
b
order
: none;
b
order
-radius
: 16px;
padding
: 0
16px;
height
: 32px;
font
-size
: 14px;
}
}
.reply
-list {
margin
-top
: 6px;
padding
-left
: 32px;
b
order
-left
: 2px solid #f0f0f0;
}
.reply
-item {
display
: flex;
align
-items
: center;
margin
-bottom
: 4px;
.reply
-avatar {
width
: 20px;
height
: 20px;
font
-size
: 10px;
margin
-right
: 6px;
}
.reply
-username {
font
-size
: 11px;
col
or: #6a8bad;
font
-weight
: bold;
margin
-right
: 4px;
}
.reply
-content {
font
-size
: 11px;
col
or: #666;
margin
-right
: 4px;
}
.reply
-time {
font
-size
: 10px;
col
or: #bbb;
}
}
</style> 回复失败，什么原因，怎么解决
本文探讨了JavaScript中使用`:eq`和`:nth-child`选择器的用法，具体展示了如何通过这些选择器来实现隐藏表格中特定列的`<span>`元素。代码示例清晰地说明了如何定位并操作表格内的元素。
扫一扫
1050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
