|
|
|
@ -2,11 +2,13 @@
|
|
|
|
<div class="post-detail-container">
|
|
|
|
<div class="post-detail-container">
|
|
|
|
<!-- 作者信息栏 -->
|
|
|
|
<!-- 作者信息栏 -->
|
|
|
|
<div class="author-info" v-if="author && author.userName">
|
|
|
|
<div class="author-info" v-if="author && author.userName">
|
|
|
|
<img
|
|
|
|
<img
|
|
|
|
:src="author.userAvatar || require('@/assets/default-avatar/boy_1.png')"
|
|
|
|
:src="(author.userName === '匿名用户' || postDetailStore.post?.status === 1 )
|
|
|
|
|
|
|
|
? require('@/assets/default-avatar/boy_4.png')
|
|
|
|
|
|
|
|
: author.userAvatar|| require('@/assets/default-avatar/boy_1.png') "
|
|
|
|
alt="头像"
|
|
|
|
alt="头像"
|
|
|
|
class="author-avatar"
|
|
|
|
class="author-avatar"
|
|
|
|
:style="{ cursor: postDetailStore.post?.status === 1 ? 'not-allowed' : 'pointer' }"
|
|
|
|
:style="{ cursor: (author.userName === '匿名用户' || postDetailStore.post?.status === 1 ) ? 'not-allowed' : 'pointer' }"
|
|
|
|
@click="handleAuthorAvatarClick"
|
|
|
|
@click="handleAuthorAvatarClick"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<div class="author-details">
|
|
|
|
<div class="author-details">
|
|
|
|
@ -18,128 +20,138 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 帖子内容 -->
|
|
|
|
<!-- 主内容区：帖子内容+评论区+发送评论 -->
|
|
|
|
<div class="post-content">
|
|
|
|
<div class="main-content">
|
|
|
|
<img
|
|
|
|
<!-- 帖子内容 -->
|
|
|
|
v-if="postDetailStore.post?.image"
|
|
|
|
<div class="post-content">
|
|
|
|
:src="postDetailStore.post.image"
|
|
|
|
<img
|
|
|
|
alt="帖子封面"
|
|
|
|
v-if="postDetailStore.post?.image"
|
|
|
|
class="post-cover"
|
|
|
|
:src="postDetailStore.post.image"
|
|
|
|
/>
|
|
|
|
alt="帖子封面"
|
|
|
|
<h1 class="post-title">{{ postDetailStore.post?.title || '' }}</h1>
|
|
|
|
class="post-cover"
|
|
|
|
<p class="post-body">{{ postDetailStore.post?.content || '' }}</p>
|
|
|
|
/>
|
|
|
|
<div class="post-stats">
|
|
|
|
<h1 class="post-title">{{ postDetailStore.post?.title || '' }}</h1>
|
|
|
|
<span> 👁 {{ postDetailStore.post?.viewCount ?? 0 }}</span>
|
|
|
|
<p class="post-body">{{ postDetailStore.post?.content || '' }}</p>
|
|
|
|
<span> 🗨 {{ postDetailStore.post?.commentCount ?? 0 }}</span>
|
|
|
|
<div class="post-stats">
|
|
|
|
<span>
|
|
|
|
<span> 👁 {{ postDetailStore.post?.viewCount ?? 0 }}</span>
|
|
|
|
<button
|
|
|
|
<span> 🗨 {{ postDetailStore.post?.commentCount ?? 0 }}</span>
|
|
|
|
@click="postDetailStore.PostLike"
|
|
|
|
<span>
|
|
|
|
class="like-btn"
|
|
|
|
<button
|
|
|
|
:class="{ liked: postDetailStore.isLike }"
|
|
|
|
@click="postDetailStore.PostLike"
|
|
|
|
>
|
|
|
|
class="like-btn"
|
|
|
|
<span v-if="!postDetailStore.isLike">♡</span>
|
|
|
|
:class="{ liked: postDetailStore.isLike }"
|
|
|
|
<span v-else>♥</span>
|
|
|
|
>
|
|
|
|
{{ postDetailStore.post?.likeCount ?? 0 }}
|
|
|
|
<span v-if="!postDetailStore.isLike">♡</span>
|
|
|
|
</button>
|
|
|
|
<span v-else>♥</span>
|
|
|
|
</span>
|
|
|
|
{{ postDetailStore.post?.likeCount ?? 0 }}
|
|
|
|
</div>
|
|
|
|
</button>
|
|
|
|
<div class="post-time">
|
|
|
|
</span>
|
|
|
|
发布时间：{{ postDetailStore.post?.createTime ? formatTime(postDetailStore.post.createTime) : '' }}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="post-time">
|
|
|
|
|
|
|
|
发布时间：{{ postDetailStore.post?.createTime ? formatTime(postDetailStore.post.createTime) : '' }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 评论区 -->
|
|
|
|
|
|
|
|
<div class="comments-section">
|
|
|
|
<!-- 评论区 -->
|
|
|
|
<h2 class="comments-title">评论</h2>
|
|
|
|
<div class="comments-section">
|
|
|
|
<ul class="comments-list">
|
|
|
|
<h2 class="comments-title">评论</h2>
|
|
|
|
<li v-if="postDetailStore.comments.length === 0" class="comments-finished-tip">
|
|
|
|
<ul class="comments-list">
|
|
|
|
暂时没有评论哦，快来发表吧！！！
|
|
|
|
<li v-for="comment in postDetailStore.comments" :key="comment.id" class="comment-item">
|
|
|
|
</li>
|
|
|
|
<img
|
|
|
|
<li v-for="comment in postDetailStore.comments" :key="comment.id" class="comment-item">
|
|
|
|
:src="comment.userAvatar || require('@/assets/default-avatar/boy_1.png')"
|
|
|
|
<img
|
|
|
|
alt="评论者头像"
|
|
|
|
:src="comment.userAvatar || require('@/assets/default-avatar/boy_1.png')"
|
|
|
|
class="comment-avatar"
|
|
|
|
alt="评论者头像"
|
|
|
|
@click="goUserHome(comment.userId)"
|
|
|
|
class="comment-avatar"
|
|
|
|
style="cursor: pointer;"
|
|
|
|
@click="goUserHome(comment.userId)"
|
|
|
|
/>
|
|
|
|
style="cursor: pointer;"
|
|
|
|
<div class="comment-content">
|
|
|
|
/>
|
|
|
|
<p class="comment-name">{{ comment.userName || '匿名用户' }}</p>
|
|
|
|
<div class="comment-content">
|
|
|
|
<p class="comment-text">{{ comment.content || '' }}</p>
|
|
|
|
<p class="comment-name">{{ comment.userName || '匿名用户' }}</p>
|
|
|
|
<div class="comment-meta">
|
|
|
|
<p class="comment-text">{{ comment.content || '' }}</p>
|
|
|
|
<span class="comment-time">{{ comment.createTime ? formatTime(comment.createTime) : '' }}</span>
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
@click="postDetailStore.CommentLike(comment)"
|
|
|
|
|
|
|
|
:class="['like-btn', { liked: comment.isLike }]"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<span v-if="!comment.isLike">♡</span>
|
|
|
|
|
|
|
|
<span v-else>♥</span>
|
|
|
|
|
|
|
|
{{ comment.likeCount ?? 0 }}
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<span v-if="comment.replyCount > 0">
|
|
|
|
|
|
|
|
<button @click="loadReplies(comment)">
|
|
|
|
|
|
|
|
{{ comment.showReplies> 0 ? '收起回复' : '展开回复' }} ({{ comment.replyCount }})
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<button class="reply-btn" @click="startReply(comment)">回复</button>
|
|
|
|
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
class="delete-btn"
|
|
|
|
class="delete-btn"
|
|
|
|
v-if="String(comment.userId) === String(userStore.userInfo?.userid)"
|
|
|
|
v-if="String(comment.userId) === String(userStore.userInfo?.userid)"
|
|
|
|
@click="handleDelete(comment)"
|
|
|
|
@click="handleDelete(comment)"
|
|
|
|
>删除</button>
|
|
|
|
>✖</button>
|
|
|
|
</div>
|
|
|
|
<div class="comment-meta">
|
|
|
|
<!-- 子评论列表 -->
|
|
|
|
<span class="comment-time">{{ comment.createTime ? formatTime(comment.createTime) : '' }}</span>
|
|
|
|
<ul v-if="comment.showReplies && comment.replies && comment.replies.length > 0" class="replies-list">
|
|
|
|
<button class="reply-btn" @click="startReply(comment)">回复</button>
|
|
|
|
<li v-for="reply in comment.replies" :key="reply.id" class="comment-item reply-item">
|
|
|
|
<span v-if="comment.replyCount > 0">
|
|
|
|
<img
|
|
|
|
<button @click="loadReplies(comment)" class="expand-reply-btn">
|
|
|
|
:src="reply.userAvatar || require('@/assets/default-avatar/boy_1.png')"
|
|
|
|
{{ comment.showReplies> 0 ? '收起回复' : '展开回复' }} ({{ comment.replyCount }})
|
|
|
|
alt="评论者头像"
|
|
|
|
</button>
|
|
|
|
class="comment-avatar"
|
|
|
|
</span>
|
|
|
|
@click="goUserHome(reply.userId)"
|
|
|
|
<button
|
|
|
|
style="cursor: pointer;"
|
|
|
|
@click="postDetailStore.CommentLike(comment)"
|
|
|
|
/>
|
|
|
|
:class="['like-btn', { liked: comment.isLike }]"
|
|
|
|
<div class="comment-content">
|
|
|
|
>
|
|
|
|
<p class="comment-name">
|
|
|
|
<span v-if="!comment.isLike">♡</span>
|
|
|
|
{{ reply.userName || '匿名用户' }}
|
|
|
|
<span v-else>♥</span>
|
|
|
|
<span v-if="reply.replyUserName" class="reply-user">回复 @{{ reply.replyUserName }}</span>
|
|
|
|
{{ comment.likeCount ?? 0 }}
|
|
|
|
</p>
|
|
|
|
</button>
|
|
|
|
<p class="comment-text">{{ reply.content || '' }}</p>
|
|
|
|
</div>
|
|
|
|
<div class="comment-meta">
|
|
|
|
<!-- 子评论列表 -->
|
|
|
|
<span class="comment-time">{{ reply.createTime ? formatTime(reply.createTime) : '' }}</span>
|
|
|
|
<ul v-if="comment.showReplies && comment.replies && comment.replies.length > 0" class="replies-list">
|
|
|
|
<button
|
|
|
|
<li v-for="reply in comment.replies" :key="reply.id" class="comment-item reply-item">
|
|
|
|
@click="postDetailStore.CommentLike(reply)"
|
|
|
|
<img
|
|
|
|
:class="['like-btn', { liked: reply.isLike }]"
|
|
|
|
:src="reply.userAvatar || require('@/assets/default-avatar/boy_1.png')"
|
|
|
|
>
|
|
|
|
alt="评论者头像"
|
|
|
|
<span v-if="!reply.isLike">♡</span>
|
|
|
|
class="comment-avatar"
|
|
|
|
<span v-else>♥</span>
|
|
|
|
@click="goUserHome(reply.userId)"
|
|
|
|
{{ reply.likeCount ?? 0 }}
|
|
|
|
style="cursor: pointer;"
|
|
|
|
</button>
|
|
|
|
/>
|
|
|
|
<button class="reply-btn" @click="startReply(reply)">回复</button>
|
|
|
|
<div class="comment-content">
|
|
|
|
|
|
|
|
<p class="comment-name">
|
|
|
|
|
|
|
|
{{ reply.userName || '匿名用户' }}
|
|
|
|
|
|
|
|
<span v-if="reply.replyUserName" class="reply-user">回复 @{{ reply.replyUserName }}</span>
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<p class="comment-text">{{ reply.content || '' }}</p>
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
class="delete-btn"
|
|
|
|
class="delete-btn"
|
|
|
|
v-if="String(reply.userId) === String(userStore.userInfo?.userid)"
|
|
|
|
v-if="String(reply.userId) === String(userStore.userInfo?.userid)"
|
|
|
|
@click="handleDelete(reply)"
|
|
|
|
@click="handleDelete(reply)"
|
|
|
|
>删除</button>
|
|
|
|
>✖</button>
|
|
|
|
|
|
|
|
<div class="comment-meta">
|
|
|
|
|
|
|
|
<span class="comment-time">{{ reply.createTime ? formatTime(reply.createTime) : '' }}</span>
|
|
|
|
|
|
|
|
<button class="reply-btn" @click="startReply(reply)">回复</button>
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
@click="postDetailStore.CommentLike(reply)"
|
|
|
|
|
|
|
|
:class="['like-btn', { liked: reply.isLike }]"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<span v-if="!reply.isLike">♡</span>
|
|
|
|
|
|
|
|
<span v-else>♥</span>
|
|
|
|
|
|
|
|
{{ reply.likeCount ?? 0 }}
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
<li v-if="comment.repliesLoading" class="reply-loading">加载中...</li>
|
|
|
|
<li v-if="comment.repliesLoading" class="reply-loading">加载中...</li>
|
|
|
|
<li v-if="comment.repliesFinished" class="reply-finished">没有更多回复了</li>
|
|
|
|
<li v-if="comment.repliesFinished" class="reply-finished">没有更多回复了</li>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
<li v-if="postDetailStore.comments.length > 0 && postDetailStore.commentsFinished" class="comments-finished-tip">
|
|
|
|
</ul>
|
|
|
|
没有更多评论啦......
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 发送评论 -->
|
|
|
|
<!-- 发送评论 -->
|
|
|
|
<div class="comment-box">
|
|
|
|
<div class="comment-box">
|
|
|
|
<div v-if="replyingComment" class="replying-tip">
|
|
|
|
<div v-if="replyingComment" class="replying-tip">
|
|
|
|
正在回复 @{{ replyingComment.userName || '匿名用户' }}
|
|
|
|
正在回复 @{{ replyingComment.userName || '匿名用户' }}
|
|
|
|
<button class="cancel-reply-btn" @click="cancelReply">取消回复</button>
|
|
|
|
<button class="cancel-reply-btn" @click="cancelReply">取消回复</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div style="position:relative;">
|
|
|
|
|
|
|
|
<textarea
|
|
|
|
|
|
|
|
v-model="newComment"
|
|
|
|
|
|
|
|
placeholder="写下你的评论..."
|
|
|
|
|
|
|
|
class="comment-input"
|
|
|
|
|
|
|
|
></textarea>
|
|
|
|
|
|
|
|
<button @click="sendComment" class="send-button" style="position:absolute; right:16px; bottom:16px;">发送</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<textarea
|
|
|
|
|
|
|
|
v-model="newComment"
|
|
|
|
|
|
|
|
placeholder="写下你的评论..."
|
|
|
|
|
|
|
|
class="comment-input"
|
|
|
|
|
|
|
|
></textarea>
|
|
|
|
|
|
|
|
<button @click="sendComment" class="send-button">发送</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
@ -280,15 +292,14 @@ onUnmounted(() => {
|
|
|
|
.post-detail-container {
|
|
|
|
.post-detail-container {
|
|
|
|
display: grid;
|
|
|
|
display: grid;
|
|
|
|
grid-template-areas:
|
|
|
|
grid-template-areas:
|
|
|
|
"post-content author-info"
|
|
|
|
"main-content author-info";
|
|
|
|
"comments-section author-info"
|
|
|
|
grid-template-columns: 3fr 1fr;
|
|
|
|
"comment-box author-info";
|
|
|
|
|
|
|
|
grid-template-columns: 3fr 1fr; /* 左侧内容占 3/4，右侧作者信息占 1/4 */
|
|
|
|
|
|
|
|
gap: 20px;
|
|
|
|
gap: 20px;
|
|
|
|
padding: 20px;
|
|
|
|
padding: 20px;
|
|
|
|
box-sizing: border-box;
|
|
|
|
box-sizing: border-box;
|
|
|
|
max-width: 1200px; /* 设置页面最大宽度 */
|
|
|
|
max-width: 1200px;
|
|
|
|
margin: 0 auto; /* 居中页面并添加左右留白 */
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
|
|
height: 100vh;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.author-info {
|
|
|
|
.author-info {
|
|
|
|
@ -344,10 +355,20 @@ onUnmounted(() => {
|
|
|
|
background-color: #4a8a5a;
|
|
|
|
background-color: #4a8a5a;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.main-content {
|
|
|
|
|
|
|
|
grid-area: main-content;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
gap:20px;
|
|
|
|
|
|
|
|
min-width: 0;
|
|
|
|
|
|
|
|
min-height: 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.post-content {
|
|
|
|
.post-content {
|
|
|
|
grid-area: post-content;
|
|
|
|
grid-area: post-content;
|
|
|
|
background-color: #ffffff;
|
|
|
|
background-color: #ffffff;
|
|
|
|
padding: 20px;
|
|
|
|
padding: 5px;
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
border-radius: 8px;
|
|
|
|
border-radius: 8px;
|
|
|
|
position: relative; /* 为绝对定位的元素提供参考 */
|
|
|
|
position: relative; /* 为绝对定位的元素提供参考 */
|
|
|
|
@ -365,15 +386,18 @@ onUnmounted(() => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.post-title {
|
|
|
|
.post-title {
|
|
|
|
font-size: 24px;
|
|
|
|
font-size: 32px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
text-align: left; /* 设置居左 */
|
|
|
|
text-align: left;
|
|
|
|
|
|
|
|
padding-left: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.post-body {
|
|
|
|
.post-body {
|
|
|
|
font-size: 16px;
|
|
|
|
font-size: 16px;
|
|
|
|
line-height: 1.5;
|
|
|
|
line-height: 1.5;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
|
|
padding-left: 16px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.post-stats {
|
|
|
|
.post-stats {
|
|
|
|
@ -387,18 +411,20 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
|
|
|
|
.post-time {
|
|
|
|
.post-time {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 20px; /* 距离底部 20px */
|
|
|
|
bottom: 5px; /* 距离底部 20px */
|
|
|
|
right: 20px; /* 距离右侧 20px */
|
|
|
|
right: 20px; /* 距离右侧 20px */
|
|
|
|
font-size: 12px;
|
|
|
|
font-size: 12px;
|
|
|
|
color: #999;
|
|
|
|
color: #999;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.comments-section {
|
|
|
|
.comments-section {
|
|
|
|
grid-area: comments-section;
|
|
|
|
flex: 1 1 0;
|
|
|
|
|
|
|
|
min-height: 0;
|
|
|
|
background-color: #ffffff;
|
|
|
|
background-color: #ffffff;
|
|
|
|
padding: 20px;
|
|
|
|
padding: 20px;
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
border-radius: 8px;
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.comments-title {
|
|
|
|
.comments-title {
|
|
|
|
@ -434,6 +460,7 @@ onUnmounted(() => {
|
|
|
|
flex: 1;
|
|
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
padding-left: 12px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.comment-name {
|
|
|
|
.comment-name {
|
|
|
|
@ -445,6 +472,7 @@ onUnmounted(() => {
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
|
|
color: #333;
|
|
|
|
color: #333;
|
|
|
|
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.comment-meta {
|
|
|
|
.comment-meta {
|
|
|
|
@ -459,32 +487,50 @@ onUnmounted(() => {
|
|
|
|
font-size: 12px;
|
|
|
|
font-size: 12px;
|
|
|
|
color: #666;
|
|
|
|
color: #666;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.expand-reply-btn {
|
|
|
|
|
|
|
|
background: none;
|
|
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
|
|
color: #409eff;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
|
|
|
padding: 2px 8px;
|
|
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
|
|
}
|
|
|
|
.comment-likes {
|
|
|
|
.comment-likes {
|
|
|
|
font-size: 12px;
|
|
|
|
font-size: 12px;
|
|
|
|
color: #666;
|
|
|
|
color: #666;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.comments-finished-tip {
|
|
|
|
|
|
|
|
color: #999;
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
padding: 16px 0 8px 0;
|
|
|
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
|
|
|
}
|
|
|
|
.comment-box {
|
|
|
|
.comment-box {
|
|
|
|
grid-area: comment-box;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
gap: 10px;
|
|
|
|
gap: 10px;
|
|
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
|
|
padding: 6px 24px 12px 24px;
|
|
|
|
|
|
|
|
box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
|
|
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.comment-input {
|
|
|
|
.comment-input {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 80px;
|
|
|
|
height: 80px;
|
|
|
|
padding: 10px;
|
|
|
|
padding: 10px 80px 32px 10px; /* 右下留空间给按钮 */
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
border-radius: 8px;
|
|
|
|
border-radius: 8px;
|
|
|
|
resize: none;
|
|
|
|
resize: none;
|
|
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.send-button {
|
|
|
|
.send-button {
|
|
|
|
align-self: flex-end;
|
|
|
|
/* 位置已由内联style控制 */
|
|
|
|
padding: 10px 20px;
|
|
|
|
padding: 8px 20px;
|
|
|
|
background-color: #5aa76f;
|
|
|
|
background-color: #5aa76f;
|
|
|
|
color: white;
|
|
|
|
color: white;
|
|
|
|
border: none;
|
|
|
|
border: none;
|
|
|
|
@ -508,7 +554,7 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
|
|
|
|
.replies-list {
|
|
|
|
.replies-list {
|
|
|
|
list-style: none;
|
|
|
|
list-style: none;
|
|
|
|
padding-left: 48px; /* 更明显的缩进 */
|
|
|
|
padding-left: 48px;
|
|
|
|
margin: 8px 0 0 0;
|
|
|
|
margin: 8px 0 0 0;
|
|
|
|
border-left: 2px solid #e0e0e0;
|
|
|
|
border-left: 2px solid #e0e0e0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -576,17 +622,23 @@ onUnmounted(() => {
|
|
|
|
border: none;
|
|
|
|
border: none;
|
|
|
|
color: #f56c6c;
|
|
|
|
color: #f56c6c;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
font-size: 13px;
|
|
|
|
font-size: 18px;
|
|
|
|
margin-left: 10px;
|
|
|
|
margin-left: 10px;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
|
|
z-index: 2;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.delete-btn:hover {
|
|
|
|
.delete-btn:hover {
|
|
|
|
text-decoration: underline;
|
|
|
|
color: #ff2222;
|
|
|
|
|
|
|
|
background: #f9eaea;
|
|
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.like-btn {
|
|
|
|
.like-btn {
|
|
|
|
margin-left: 8px;
|
|
|
|
margin-left: 8px;
|
|
|
|
background: none;
|
|
|
|
background: none;
|
|
|
|
border: none;
|
|
|
|
border: none;
|
|
|
|
color: #409eff;
|
|
|
|
color: #222323;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
