Leo_Ding/JinShan_uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改互助详情评论列表

Browse Source
This commit is contained in:
qiuyuan 2025-07-28 12:03:59 +08:00
parent 62235ef6fb
commit 7a3a2d50da
2 changed files with 383 additions and 323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/index/index.vue
View File

@ -87,7 +87,7 @@
<view class="card-bg"></view> <view class="card-bg"></view>
</view> </view>
<image class="card-icon" src="/static/imgs/index/bangzhu.png" <image class="card-icon" src="/static/imgs/index/bangzhu.png"
style="width: 76rpx;height: 76rpx;"></image> style="width: 76rpx;height: 76rpx; bottom: 32rpx;" ></image>
</view> </view>
<view class="service-card card-2" @click="goDetail('serviceTickets')" hover-class="card-hover"> <view class="service-card card-2" @click="goDetail('serviceTickets')" hover-class="card-hover">
@ -503,7 +503,7 @@
width: 90rpx; width: 90rpx;
height: 90rpx; height: 90rpx;
right: 24rpx; right: 24rpx;
bottom: 24rpx; bottom: 20rpx;
transition: all 0.3s ease; transition: all 0.3s ease;
} }

654
pages/neighborDetail/index.vue
View File

@ -55,8 +55,7 @@
<!-- 只在一级评论显示折叠按钮 --> <!-- 只在一级评论显示折叠按钮 -->
<text class="fold-btn" v-if="comment.level === 0 && hasChildren(comment)" <text class="fold-btn" v-if="comment.level === 0 && hasChildren(comment)"
@click="toggleFold(comment.id)"> @click="toggleFold(comment.id)">
{{ foldedComments.includes(comment.id) ? '展开' : '折叠' }} {{ getChildCount(comment) }}条回复{{ foldedComments.includes(comment.id) ? '展开' : '折叠' }}
{{ getChildCount(comment) }}条回复
</text> </text>
</view> </view>
</view> </view>
@ -85,233 +84,268 @@
</template> </template>
<script> <script>
import { import {
get, get,
post post
} from '@/utils/request'; } from '@/utils/request';
import { import {
formatTime formatTime
} from '@/utils/timeFormat'; } from '@/utils/timeFormat';
// import uniIcons from '@/components/uni-icons/uni-icons.vue'; // import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default { export default {
components: { components: {
// uniIcons // uniIcons
}, },
data() { data() {
return { return {
Id: '', Id: '',
flatComments: [], flatComments: [],
newComment: "", newComment: "",
replyingTo: null, replyingTo: null,
postData: { postData: {
histories: [] histories: []
}, },
loading: false, loading: false,
error: '', error: '',
submitting: false, submitting: false,
foldedComments: [], // 存储被折叠的评论ID foldedComments: [], // 存储被折叠的评论ID
showLoadMore: false, // 是否显示加载更多 showLoadMore: false, // 是否显示加载更多
currentPage: 1, currentPage: 1,
pageSize: 10, pageSize: 10,
}; };
}, },
onLoad(options) { onLoad(options) {
if (options && options.Id) { if (options && options.Id) {
this.Id = options.Id; this.Id = options.Id;
this.getDetail(); this.getDetail();
} else { } else {
this.error = '缺少内容ID'; this.error = '缺少内容ID';
this.loading = false; this.loading = false;
} }
}, },
methods: { methods: {
// 图片预览 // 检查用户是否已登录
previewImage(index) { checkLogin() {
if (!this.postData.images || !this.postData.images.length) return; const token = uni.getStorageSync('token'); // 假设token存储在本地
return !!token;
},
uni.previewImage({ // 跳转到登录页面
current: index, goToLogin() {
urls: this.postData.images uni.showModal({
}); title: '提示',
}, content: '请先登录再进行评论',
confirmText: '前往登录',
success: (res) => {
if (res.confirm) {
uni.navigateTo({
url: '/pages/mine/index' // 替换为实际的个人中心页面路径
});
}
}
});
},
// 检查评论是否有子评论 // 图片预览
hasChildren(comment) { previewImage(index) {
return comment.children && comment.children.length > 0; if (!this.postData.images || !this.postData.images.length) return;
},
// 获取子评论数量 uni.previewImage({
getChildCount(comment) { current: index,
if (!this.hasChildren(comment)) return 0; urls: this.postData.images
return comment.children.length; });
}, },
// 切换折叠状态 // 检查评论是否有子评论
toggleFold(commentId) { hasChildren(comment) {
const index = this.foldedComments.indexOf(commentId); return comment.children && comment.children.length > 0;
if (index === -1) { },
this.foldedComments.push(commentId);
} else {
this.foldedComments.splice(index, 1);
}
this.updateFlatComments();
},
// 更新平铺评论列表（处理折叠逻辑） // 获取子评论数量
updateFlatComments() { getChildCount(comment) {
const flattenWithFold = (comments, level = 0, parentFolded = false) => { if (!this.hasChildren(comment)) return 0;
return comments.reduce((arr, comment) => { return comment.children.length;
// 只有一级评论才检查折叠状态 },
const isFolded = level === 0 && this.foldedComments.includes(comment.id);
const currentFolded = parentFolded || isFolded;
if (!parentFolded) { // 切换折叠状态
arr.push({ toggleFold(commentId) {
...comment, const index = this.foldedComments.indexOf(commentId);
level, if (index === -1) {
isFolded this.foldedComments.push(commentId);
}); } else {
} this.foldedComments.splice(index, 1);
}
this.updateFlatComments();
},
// 如果是一级评论且被折叠，则不显示子评论 // 更新平铺评论列表（处理折叠逻辑）
if (comment.children && comment.children.length && !(level === 0 && isFolded)) { updateFlatComments() {
arr.push(...flattenWithFold(comment.children, level + 1, currentFolded)); const flattenWithFold = (comments, level = 0, parentFolded = false) => {
} return comments.reduce((arr, comment) => {
// 只有一级评论才检查折叠状态
const isFolded = level === 0 && this.foldedComments.includes(comment.id);
const currentFolded = parentFolded || isFolded;
return arr; if (!parentFolded) {
}, []); arr.push({
}; ...comment,
level,
isFolded
});
}
this.flatComments = flattenWithFold(this.postData.histories || []); // 如果是一级评论且被折叠，则不显示子评论
}, if (comment.children && comment.children.length && !(level === 0 && isFolded)) {
// 加载更多评论 arr.push(...flattenWithFold(comment.children, level + 1, currentFolded));
loadMoreComments() { }
this.currentPage++;
// 这里应该调用API获取更多评论，示例中简化处理
this.getDetail();
},
// 获取帖子详情 return arr;
async getDetail() { }, []);
try { };
this.loading = true;
const res = await get(`/api/v1/apps/home/reciprocities/${this.Id}`, {
page: this.currentPage,
pageSize: this.pageSize
});
if (!res?.success) throw new Error(res?.message || '获取详情失败');
if (this.currentPage === 1) { this.flatComments = flattenWithFold(this.postData.histories || []);
this.postData = res.data; },
} else { // 加载更多评论
// 合并评论数据 loadMoreComments() {
this.postData.histories = [...this.postData.histories, ...res.data.histories]; this.currentPage++;
} // 这里应该调用API获取更多评论，示例中简化处理
this.getDetail();
},
this.updateFlatComments(); // 获取帖子详情
this.showLoadMore = (res.data.histories.length >= this.pageSize); async getDetail() {
} catch (err) { try {
console.error('获取详情失败:', err); this.loading = true;
this.error = '加载失败，请重试'; const res = await get(`/api/v1/apps/home/reciprocities/${this.Id}`, {
} finally { page: this.currentPage,
this.loading = false; pageSize: this.pageSize
} });
}, if (!res?.success) throw new Error(res?.message || '获取详情失败');
formatTime(isoTime) { if (this.currentPage === 1) {
if (!isoTime) return ''; this.postData = res.data;
return formatTime(isoTime); // 使用统一的格式化方法 } else {
}, // 合并评论数据
this.postData.histories = [...this.postData.histories, ...res.data.histories];
}
// 计算总评论数 this.updateFlatComments();
getTotalComments() { this.showLoadMore = (res.data.histories.length >= this.pageSize);
const count = (comments) => { } catch (err) {
return comments.reduce((total, comment) => { console.error('获取详情失败:', err);
return total + 1 + (comment.children ? count(comment.children) : 0); this.error = '加载失败，请重试';
}, 0); } finally {
}; this.loading = false;
return count(this.postData.histories || []); }
}, },
// 提交评论/回复 formatTime(isoTime) {
async submitComment() { if (!isoTime) return '';
const content = this.newComment.trim(); return formatTime(isoTime); // 使用统一的格式化方法
if (!content || this.submitting) return; },
try { // 计算总评论数
this.submitting = true; getTotalComments() {
const requestData = { const count = (comments) => {
content: content, return comments.reduce((total, comment) => {
reciprocityId: this.postData.id, return total + 1 + (comment.children ? count(comment.children) : 0);
rootHistoryId: this.replyingTo || 0 }, 0);
}; };
return count(this.postData.histories || []);
},
const response = await post( // 提交评论/回复
'/api/v1/app_auth/reciprocities/send', async submitComment() {
requestData // 检查用户是否已登录
); if (!this.checkLogin()) {
this.goToLogin();
this.newComment = "";
return;
}
if (response.success) { const content = this.newComment.trim();
this.newComment = ''; if (!content || this.submitting) return;
this.replyingTo = null;
uni.showToast({
title: '评论成功',
icon: 'success',
duration: 1500
});
setTimeout(() => {
this.currentPage = 1;
this.getDetail();
}, 500);
} else {
throw new Error('评论提交失败，请重试');
}
} catch (err) {
console.error('评论失败:', err);
uni.showToast({
title: err.message || '评论失败，请重试',
icon: 'none',
duration: 2000
});
} finally {
this.submitting = false;
}
},
// 处理回复按钮点击 try {
handleReply(commentId) { this.submitting = true;
this.replyingTo = commentId; const requestData = {
this.$nextTick(() => { content: content,
uni.createSelectorQuery().select('.comment-input') reciprocityId: this.postData.id,
.fields({ rootHistoryId: this.replyingTo || ""
focus: true };
}, () => {}).exec();
});
},
// 取消回复 const response = await post(
cancelReply() { '/api/v1/app_auth/reciprocities/send',
this.replyingTo = null; requestData
this.newComment = ''; );
},
// 获取被回复人的用户名 if (response.success) {
getReplyUsername(commentId) { this.newComment = '';
const findUser = (comments) => { this.replyingTo = null;
for (const c of comments) { uni.showToast({
if (c.id === commentId) return c.pusherName; title: '评论成功',
if (c.children && c.children.length) { icon: 'success',
const user = findUser(c.children); duration: 1500
if (user) return user; });
} setTimeout(() => {
} this.currentPage = 1;
return ""; this.getDetail();
}; }, 500);
return findUser(this.postData.histories); } else {
} throw new Error('评论提交失败，请重试');
} }
}; } catch (err) {
console.error('评论失败:', err);
uni.showToast({
title: err.message || '评论失败，请重试',
icon: 'none',
duration: 2000
});
} finally {
this.submitting = false;
}
},
// 处理回复按钮点击
handleReply(commentId) {
// 检查用户是否已登录
if (!this.checkLogin()) {
this.goToLogin();
return;
}
this.replyingTo = commentId;
this.$nextTick(() => {
uni.createSelectorQuery().select('.comment-input')
.fields({
focus: true
}, () => {}).exec();
});
},
// 取消回复
cancelReply() {
this.replyingTo = null;
this.newComment = '';
},
// 获取被回复人的用户名
getReplyUsername(commentId) {
const findUser = (comments) => {
for (const c of comments) {
if (c.id === commentId) return c.pusherName;
if (c.children && c.children.length) {
const user = findUser(c.children);
if (user) return user;
}
}
return "";
};
return findUser(this.postData.histories);
}
}
};
</script> </script>
<style lang="scss"> <style lang="scss">
/* 使用SCSS增强样式能力 */ /* 使用SCSS增强样式能力 */
@ -322,33 +356,35 @@
$border-color: #e2e8f0; // 更柔和的边框色 $border-color: #e2e8f0; // 更柔和的边框色
$bg-color: #f7fafc; // 浅灰色背景 $bg-color: #f7fafc; // 浅灰色背景
$comment-bg: #ffffff; // 白色评论背景 $comment-bg: #ffffff; // 白色评论背景
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); // 小阴影 $shadow-sm: 0 1rpx 3rpx rgba(0, 0, 0, 0.05); // 小阴影
$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08); // 中等阴影 $shadow-md: 0 4rpx 6rpx rgba(0, 0, 0, 0.08); // 中等阴影
$radius-lg: 12px; // 大圆角 $radius-lg: 24rpx; // 大圆角
$radius-md: 8px; // 中圆角 $radius-md: 16rpx; // 中圆角
$radius-sm: 4px; // 小圆角 $radius-sm: 8rpx; // 小圆角
$transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); // 平滑过渡 $transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); // 平滑过渡
.content { .content {
padding: 16px; padding: 32rpx;
background-color: $bg-color; background-color: $bg-color;
/* 增加底部内边距，确保内容不被输入框遮挡 */
padding-bottom: 240rpx;
min-height: 100vh; min-height: 100vh;
padding-bottom: 120px; box-sizing: border-box;
} }
/* 主帖样式优化 */ /* 主帖样式优化 */
.post-container { .post-container {
background-color: white; background-color: white;
border-radius: $radius-lg; border-radius: $radius-lg;
padding: 24px; padding: 48rpx;
margin-bottom: 20px; margin-bottom: 40rpx;
box-shadow: $shadow-sm; box-shadow: $shadow-sm;
transition: $transition; transition: $transition;
border: 1px solid $border-color; border: 1rpx solid $border-color;
&:hover { &:hover {
box-shadow: $shadow-md; box-shadow: $shadow-md;
transform: translateY(-1px); transform: translateY(-1rpx);
} }
&:active { &:active {
@ -359,15 +395,15 @@
.post-header { .post-header {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 40rpx;
} }
.avatar { .avatar {
width: 48px; width: 96rpx;
height: 48px; height: 96rpx;
border-radius: 50%; border-radius: 50%;
margin-right: 16px; margin-right: 32rpx;
border: 2px solid white; border: 2rpx solid white;
box-shadow: $shadow-sm; box-shadow: $shadow-sm;
background-color: #f5f5f5; background-color: #f5f5f5;
transition: $transition; transition: $transition;
@ -384,34 +420,34 @@
} }
.username { .username {
font-size: 16px; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: $text-color; color: $text-color;
line-height: 1.5; line-height: 1.5;
} }
.time { .time {
font-size: 13px; font-size: 26rpx;
color: $light-text; color: $light-text;
line-height: 1.5; line-height: 1.5;
} }
.post-content { .post-content {
.title { .title {
font-size: 18px; font-size: 36rpx;
font-weight: 600; font-weight: 600;
color: #1a1a1a; color: #1a1a1a;
margin-bottom: 16px; margin-bottom: 32rpx;
display: block; display: block;
line-height: 1.6; line-height: 1.6;
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.content-text { .content-text {
font-size: 15px; font-size: 30rpx;
color: $text-color; color: $text-color;
line-height: 1.7; line-height: 1.7;
margin-bottom: 20px; margin-bottom: 40rpx;
display: block; display: block;
word-break: break-word; word-break: break-word;
} }
@ -420,8 +456,8 @@
.images { .images {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px; gap: 24rpx;
margin-top: 16px; margin-top: 32rpx;
} }
.post-image { .post-image {
@ -443,17 +479,17 @@
&.single-img { &.single-img {
width: 100%; width: 100%;
height: 300px; height: 600rpx;
} }
&.double-img { &.double-img {
width: calc(50% - 6px); width: calc(50% - 12rpx);
height: 180px; height: 360rpx;
} }
&.multi-img { &.multi-img {
width: calc(33.33% - 8px); width: calc(33.33% - 16rpx);
height: 120px; height: 240rpx;
} }
} }
@ -461,27 +497,27 @@
.comments-container { .comments-container {
background-color: white; background-color: white;
border-radius: $radius-lg; border-radius: $radius-lg;
padding: 0 20px; padding: 0 40rpx;
margin-bottom: 16px; margin-bottom: 32rpx;
box-shadow: $shadow-sm; box-shadow: $shadow-sm;
border: 1px solid $border-color; border: 1rpx solid $border-color;
} }
.comments-title { .comments-title {
font-size: 16px; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: $text-color; color: $text-color;
padding: 20px 0; padding: 40rpx 0;
border-bottom: 1px solid $border-color; border-bottom: 1rpx solid $border-color;
position: relative; position: relative;
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
bottom: -1px; bottom: -1rpx;
width: 40px; width: 80rpx;
height: 2px; height: 4rpx;
background-color: $primary-color; background-color: $primary-color;
} }
} }
@ -493,26 +529,27 @@
.comment-item { .comment-item {
position: relative; position: relative;
padding: 20px 0; padding: 20rpx 0;
border-bottom: 1px solid $border-color;
transition: $transition; transition: $transition;
margin-bottom: 8rpx;
&:hover { &:not(:last-child) {
background-color: rgba($primary-light, 0.3); border-bottom: 1rpx solid rgba($border-color, 0.5);
} }
&:last-child { &:hover {
border-bottom: none; background-color: rgba($primary-light, 0.2);
border-radius: $radius-md;
} }
} }
.comment-level-indicator { .comment-level-indicator {
position: absolute; position: absolute;
top: 50px; top: 70rpx;
width: 2px; width: 4rpx;
background-color: #e5e5e5; background-color: rgba($border-color, 0.5);
left: calc(30px + var(--indent) - 20px); left: calc(60rpx + var(--indent) - 40rpx);
height: calc(100% - 50px); height: calc(100% - 70rpx);
} }
.comment-content-wrapper { .comment-content-wrapper {
@ -522,13 +559,13 @@
} }
.comment-avatar { .comment-avatar {
width: 36px; width: 64rpx;
height: 36px; height: 64rpx;
border-radius: 50%; border-radius: 50%;
margin-right: 12px; margin-right: 24rpx;
flex-shrink: 0; flex-shrink: 0;
background-color: #f5f5f5; background-color: #f5f5f5;
border: 1px solid $border-color; border: 1rpx solid $border-color;
transition: $transition; transition: $transition;
&:hover { &:hover {
@ -538,50 +575,52 @@
.comment-main { .comment-main {
flex: 1; flex: 1;
padding-top: 0;
} }
.comment-meta { .comment-meta {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 8px; margin-bottom: 8rpx;
} }
.comment-username { .comment-username {
font-size: 14px; font-size: 28rpx;
color: $text-color; color: $text-color;
font-weight: 500; font-weight: 500;
} }
.comment-time { .comment-time {
font-size: 12px; font-size: 24rpx;
color: $light-text; color: $light-text;
} }
.comment-text { .comment-text {
font-size: 14px; font-size: 28rpx;
color: $text-color; color: $text-color;
line-height: 1.6; line-height: 1.6;
margin-bottom: 12px; margin-bottom: 12rpx;
padding: 4px 0; padding: 8rpx 0;
word-break: break-word; word-break: break-word;
} }
.comment-actions { .comment-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 32rpx;
padding: 4px 0; padding: 4rpx 0;
} }
.reply-btn, .reply-btn,
.fold-btn { .fold-btn {
font-size: 13px; font-size: 24rpx;
color: $primary-color; color: $primary-color;
padding: 4px 8px; padding: 6rpx 12rpx;
border-radius: $radius-sm; border-radius: $radius-sm;
transition: $transition; transition: $transition;
cursor: pointer; cursor: pointer;
background-color: rgba($primary-color, 0.05);
&:hover { &:hover {
background-color: rgba($primary-color, 0.1); background-color: rgba($primary-color, 0.1);
@ -594,6 +633,11 @@
.fold-btn { .fold-btn {
color: $light-text; color: $light-text;
background-color: rgba($light-text, 0.05);
&:hover {
background-color: rgba($light-text, 0.1);
}
} }
/* 评论输入框样式优化 */ /* 评论输入框样式优化 */
@ -603,9 +647,9 @@
left: 0; left: 0;
right: 0; right: 0;
background-color: white; background-color: white;
padding: 16px; padding: 24rpx 32rpx;
border-top: 1px solid $border-color; border-top: 1rpx solid $border-color;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
z-index: 100; z-index: 100;
} }
@ -613,11 +657,11 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 8px 12px; padding: 16rpx 24rpx;
background-color: $primary-light; background-color: $primary-light;
border-radius: $radius-md; border-radius: $radius-md;
margin-bottom: 12px; margin-bottom: 16rpx;
font-size: 13px; font-size: 26rpx;
} }
.replying-text { .replying-text {
@ -627,29 +671,30 @@
.cancel-reply { .cancel-reply {
color: $primary-color; color: $primary-color;
padding: 4px 8px; padding: 8rpx 16rpx;
border-radius: $radius-sm; border-radius: $radius-sm;
cursor: pointer; cursor: pointer;
transition: $transition; transition: $transition;
background-color: rgba($primary-color, 0.1);
&:hover { &:hover {
background-color: rgba($primary-color, 0.1); background-color: rgba($primary-color, 0.2);
} }
} }
.input-wrapper { .input-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 16rpx;
} }
.comment-input { .comment-input {
flex: 1; flex: 1;
height: 48px; height: 88rpx;
padding: 0 16px; padding: 0 32rpx;
font-size: 14px; font-size: 28rpx;
border: 1px solid $border-color; border: 1rpx solid $border-color;
border-radius: 24px; border-radius: 48rpx;
background-color: #f5f5f5; background-color: #f5f5f5;
transition: $transition; transition: $transition;
outline: none; outline: none;
@ -657,7 +702,7 @@
&:focus { &:focus {
border-color: $primary-color; border-color: $primary-color;
background-color: #fff; background-color: #fff;
box-shadow: 0 0 0 2px rgba($primary-color, 0.1); box-shadow: 0 0 0 4rpx rgba($primary-color, 0.1);
} }
&::placeholder { &::placeholder {
@ -666,20 +711,20 @@
} }
.send-btn { .send-btn {
min-width: 80px; min-width: 140rpx;
height: 48px; height: 88rpx;
background-color: $primary-color; background-color: $primary-color;
color: white; color: white;
border: none; border: none;
border-radius: 24px; border-radius: 48rpx;
font-size: 14px; font-size: 28rpx;
font-weight: 500; font-weight: 500;
transition: $transition; transition: $transition;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 16px; padding: 0 32rpx;
&:hover { &:hover {
background-color: darken($primary-color, 5%); background-color: darken($primary-color, 5%);
@ -704,9 +749,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 16px 0; padding: 32rpx 0;
color: $light-text; color: $light-text;
font-size: 14px; font-size: 28rpx;
cursor: pointer; cursor: pointer;
transition: $transition; transition: $transition;
@ -715,13 +760,13 @@
} }
text { text {
margin-right: 8px; margin-right: 16rpx;
} }
} }
/* 添加一些动画效果 */ /* 添加一些动画效果 */
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); } from { opacity: 0; transform: translateY(20rpx); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }
@ -732,15 +777,30 @@
/* 响应式调整 */ /* 响应式调整 */
@media (max-width: 480px) { @media (max-width: 480px) {
.content { .content {
padding: 12px; padding: 24rpx;
padding-bottom: 220rpx;
} }
.post-container { .post-container {
padding: 16px; padding: 32rpx;
} }
.comment-input-container { .comment-input-container {
padding: 12px; padding: 24rpx;
}
.comment-item {
padding: 16rpx 0;
margin-bottom: 8rpx;
}
.comment-avatar {
width: 56rpx;
height: 56rpx;
}
.comment-text {
font-size: 26rpx;
} }
} }
</style> </style>