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