refactor(views): 重构多个视图组件代码和样式
重构了多个视图组件的代码结构和样式，包括： 1. 重命名变量和类名以提高可读性 2. 优化CSS样式结构和响应式设计 3. 添加过渡动画和悬停效果 4. 统一组件命名规范 5. 改进表单验证和交互体验 6. 增强代码注释和文档 feat(types): 修改Article接口定义 更新Article接口字段，将categoryId改为attributeid，并将categoryName和tags改为数组类型 fix(services): 修改文章服务接口 更新getAllArticles方法，改为获取已发布文章 style(layouts): 调整主布局样式 修改导航栏背景透明度和布局间距 chore(assets): 更新背景图片 替换旧的背景图片文件
This commit is contained in:
qingfeng1121
@@ -1,80 +1,79 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="message-board">
|
||||
<div class="message-board-container">
|
||||
<!-- 留言内容区 -->
|
||||
<div class="message-list">
|
||||
<h3 class="title">留言板</h3>
|
||||
<div class="message-list-wrapper">
|
||||
<h3 class="message-board-title">留言板</h3>
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading-container">
|
||||
<div v-if="loading" class="loading-state-container">
|
||||
<el-skeleton :count="5" />
|
||||
</div>
|
||||
|
||||
<!-- 留言列表 -->
|
||||
<div class="comment-list">
|
||||
<div v-for="comment in messageBoardData" :key="comment.messageid" class="comment-item">
|
||||
<div class="comment-header">
|
||||
<!-- <img :src="getAvatar(comment.nickname)" :alt="" class="avatar"> -->
|
||||
<img :src="getAvatar()" class="avatar">
|
||||
<div class="user-info">
|
||||
<div class="username">{{ comment.displayName || comment.nickname }}</div>
|
||||
<div class="time">{{ formatDate(comment.createdAt) || '刚刚' }}</div>
|
||||
<div class="comment-list-container">
|
||||
<div v-for="comment in messageBoardData" :key="comment.messageid" class="comment-item-wrapper">
|
||||
<div class="comment-header-info">
|
||||
<!-- 头像 -->
|
||||
<img :src="getAvatar()" class="user-avatar">
|
||||
<div class="user-meta-info">
|
||||
<div class="user-nickname">{{ comment.displayName || comment.nickname }}</div>
|
||||
<div class="comment-time">{{ formatDate(comment.createdAt) || '刚刚' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-content" v-html="comment.content"></div>
|
||||
<div class="comment-actions">
|
||||
<span class="likes-btn" @click="handleLike(comment)">
|
||||
<span v-if="comment.likes && comment.likes > 0" class="likes-count">{{ comment.likes }}</span>
|
||||
<div class="comment-content-text" v-html="comment.content"></div>
|
||||
<div class="comment-actions-bar">
|
||||
<span class="like-button" @click="handleLike(comment)">
|
||||
<span v-if="comment.likes && comment.likes > 0" class="like-count">{{ comment.likes }}</span>
|
||||
👍 赞
|
||||
</span>
|
||||
<span class="reply-btn" @click="handleReply(null, comment)">回复</span>
|
||||
<span class="reply-button" @click="handleReply(null, comment)">回复</span>
|
||||
</div>
|
||||
<!-- 回复列表 -->
|
||||
<div v-if="comment.replies && comment.replies && comment.replies.length > 0" class="reply-list">
|
||||
<div v-for="reply in comment.replies" :key="reply.messageid" class="reply-item">
|
||||
<div class="reply-header">
|
||||
<img :src="getAvatar()" class="avatar">
|
||||
<div class="user-info">
|
||||
<div class="username">{{ reply.displayName || reply.nickname }}</div>
|
||||
<div class="time">{{ formatDate(reply.createdAt) || '刚刚' }}</div>
|
||||
<div v-if="comment.replies && comment.replies && comment.replies.length > 0" class="reply-list-container">
|
||||
<div v-for="reply in comment.replies" :key="reply.messageid" class="reply-item-wrapper">
|
||||
<div class="reply-header-info">
|
||||
<img :src="getAvatar()" class="user-avatar">
|
||||
<div class="user-meta-info">
|
||||
<div class="user-nickname">{{ reply.displayName || reply.nickname }}</div>
|
||||
<div class="comment-time">{{ formatDate(reply.createdAt) || '刚刚' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reply-content">{{ reply.content }}</div>
|
||||
<div class="reply-actions">
|
||||
<span class="likes-btn" @click="handleLike(reply)">
|
||||
<span v-if="reply.likes && reply.likes > 0" class="likes-count">{{ reply.likes }}</span>
|
||||
<div class="reply-content-text">{{ reply.content }}</div>
|
||||
<div class="reply-actions-bar">
|
||||
<span class="like-button" @click="handleLike(reply)">
|
||||
<span v-if="reply.likes && reply.likes > 0" class="like-count">{{ reply.likes }}</span>
|
||||
👍 赞
|
||||
</span>
|
||||
<span class="reply-btn" @click="handleReply(comment, reply)">回复</span>
|
||||
<span class="reply-button" @click="handleReply(comment, reply)">回复</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 无留言提示 -->
|
||||
<div v-if="!loading && messageBoardData.length === 0 "
|
||||
class="message-empty">
|
||||
<div v-if="!loading && messageBoardData.length === 0" class="empty-message-state">
|
||||
还没有留言，快来抢沙发吧！
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 留言输入区 -->
|
||||
<div class="message-form-section">
|
||||
<h2>发送评论（请正确填写邮箱地址，否则将会当成垃圾评论处理）</h2>
|
||||
<div v-if="replyingTo.id" class="reply-preview">
|
||||
<div class="comment-form-section">
|
||||
<h2 class="comment-form-title">发送评论（请正确填写邮箱地址，否则将会当成垃圾评论处理）</h2>
|
||||
<div v-if="replyingTo.id" class="reply-preview-container">
|
||||
<span>
|
||||
正在回复 <b>{{ replyingTo.nickname }}</b> 的评论:
|
||||
</span>
|
||||
<div class="reply-preview-content">
|
||||
<div class="reply-preview-text">
|
||||
{{ replyingTo.content }}
|
||||
</div>
|
||||
<button class="reply-cancel-btn" @click="cancelReply">取消回复</button>
|
||||
<button class="cancel-reply-button" @click="cancelReply">取消回复</button>
|
||||
</div>
|
||||
<el-form :model="form" :rules="rules" ref="formRef" label-width="0">
|
||||
<el-form-item prop="content">
|
||||
<el-input v-model="form.content" placeholder="评论内容" type="textarea" rows="4" clearable
|
||||
:disabled="submitting" />
|
||||
</el-form-item>
|
||||
<div class="form-input-row">
|
||||
<div class="form-input-row form-input-row--inline">
|
||||
<el-form-item prop="nickname">
|
||||
<el-input v-model="form.nickname" placeholder="昵称" clearable :disabled="submitting" />
|
||||
</el-form-item>
|
||||
@@ -82,7 +81,7 @@
|
||||
<el-input v-model="form.email" placeholder="邮箱/QQ号" clearable :disabled="submitting" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="captcha">
|
||||
<div class="captcha-container">
|
||||
<div class="captcha-input-wrapper">
|
||||
<el-input
|
||||
v-model="form.captcha"
|
||||
placeholder="验证码"
|
||||
@@ -91,7 +90,7 @@
|
||||
@focus="showCaptchaHint = true"
|
||||
@blur="showCaptchaHint = false"
|
||||
/>
|
||||
<div class="captcha-hint" @click="generateCaptcha" v-show="showCaptchaHint">
|
||||
<div class="captcha-hint-popup" @click="generateCaptcha" v-show="showCaptchaHint">
|
||||
{{ captchaHint }}
|
||||
<span class="refresh-icon">↻</span>
|
||||
</div>
|
||||
@@ -464,442 +463,274 @@ const handleLike = async (msg) => {
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.message-board {
|
||||
<style scoped lang="scss">
|
||||
/* 主容器样式 */
|
||||
.message-board-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.message-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.message-section h4 {
|
||||
color: #3498db;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #3498db;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.message-item:hover {
|
||||
background-color: #e9ecef;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.message-avatar-container {
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.message-content-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.message-item-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.message-nickname {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 0.8rem;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
color: #34495e;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.reply-to {
|
||||
color: #e74c3c;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.message-item-bottom {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
.reply-btn:hover {
|
||||
color: #2980b9;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.likes-btn {
|
||||
margin-right: 15px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.likes-btn:hover {
|
||||
color: #e74c3c;
|
||||
background-color: rgba(231, 76, 60, 0.1);
|
||||
}
|
||||
|
||||
.likes-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.likes-count {
|
||||
margin-right: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.replies {
|
||||
margin-top: 15px;
|
||||
padding-left: 20px;
|
||||
border-left: 3px solid #3498db;
|
||||
}
|
||||
|
||||
.reply-item {
|
||||
margin-bottom: 15px;
|
||||
/* padding: 10px; */
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.reply-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.message-empty {
|
||||
text-align: center;
|
||||
color: #7f8c8d;
|
||||
padding: 40px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.message-form-section {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.message-form-section h2 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.reply-preview {
|
||||
background-color: #e8f4fd;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.reply-preview-content {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 4px;
|
||||
font-style: italic;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.reply-cancel-btn {
|
||||
background: none;
|
||||
border: 1px solid #e74c3c;
|
||||
color: #e74c3c;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.reply-cancel-btn:hover {
|
||||
background-color: #e74c3c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.form-input-row {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-input-row .el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.article-message-group {
|
||||
margin-bottom: 25px;
|
||||
padding: 15px;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.article-message-header {
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ecf0f1;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
color: #3498db;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.form-input-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message-avatar-container {
|
||||
margin-right: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.message-list {
|
||||
/* 留言列表容器 */
|
||||
.message-list-wrapper {
|
||||
margin-bottom: 24px;
|
||||
background: #f8fafd;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.replies {
|
||||
margin-left: 40px;
|
||||
border-top: 2px solid #eee;
|
||||
padding: 12px;
|
||||
/* 留言板标题 */
|
||||
.message-board-title {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 16px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 14px 18px;
|
||||
/* 加载状态样式 */
|
||||
.loading-state-container {
|
||||
padding: 40px 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 评论列表容器 */
|
||||
.comment-list-container {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 评论项容器 */
|
||||
.comment-item-wrapper {
|
||||
background-color: #fff;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.comment-item-wrapper:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 评论头部信息 */
|
||||
.comment-header-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
position: relative;
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
/* 用户头像 */
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
float: left;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.message-item-top {
|
||||
/* 用户元信息 */
|
||||
.user-meta-info {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 用户名 */
|
||||
.user-nickname {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #409eff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* 评论时间 */
|
||||
.comment-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 评论内容文本 */
|
||||
.comment-content-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 12px;
|
||||
word-break: break-word;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 评论操作栏 */
|
||||
.comment-actions-bar {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 点赞按钮 */
|
||||
.like-button {
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.like-button:hover {
|
||||
color: #e74c3c;
|
||||
background-color: rgba(231, 76, 60, 0.1);
|
||||
}
|
||||
|
||||
.like-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 点赞数量 */
|
||||
.like-count {
|
||||
margin-right: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 回复按钮 */
|
||||
.reply-button {
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.reply-button:hover {
|
||||
color: #409eff;
|
||||
background-color: rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 回复列表容器 */
|
||||
.reply-list-container {
|
||||
margin-top: 16px;
|
||||
padding-left: 52px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 16px;
|
||||
}
|
||||
/**
|
||||
* 内联表单输入行样式
|
||||
* 用于将表单输入项与标签或其他元素对齐
|
||||
*/
|
||||
.form-input-row--inline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message-nickname {
|
||||
font-weight: bold;
|
||||
color: #409eff;
|
||||
.form-input-row--inline div:nth-child(2) {
|
||||
margin-left: 9%;
|
||||
margin-right: 9%;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
/* 回复项容器 */
|
||||
.reply-item-wrapper {
|
||||
background-color: #fafafa;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.reply-item-wrapper:hover {
|
||||
background-color: #f0f0f0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 回复头部信息 */
|
||||
.reply-header-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 回复内容文本 */
|
||||
.reply-content-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
/* 回复操作栏 */
|
||||
.reply-actions-bar {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
color: #666;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.message-item-bottom {
|
||||
height: 45px;
|
||||
/* 固定高度以防跳动 */
|
||||
/* 空状态提示 */
|
||||
.empty-message-state {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.message-empty {
|
||||
color: #bbb;
|
||||
text-align: center;
|
||||
padding: 32px 0;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.message-form-section {
|
||||
/* 评论表单区域 */
|
||||
.comment-form-section {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.message-form-section h2 {
|
||||
font-size: 1.1rem;
|
||||
/* 评论表单标题 */
|
||||
.comment-form-title {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 18px;
|
||||
color: #333;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.reply-preview {
|
||||
/* 回复预览容器 */
|
||||
.reply-preview-container {
|
||||
background: #f0f9ff;
|
||||
border-left: 4px solid #409eff;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.reply-preview-content {
|
||||
/* 回复预览文本 */
|
||||
.reply-preview-text {
|
||||
margin-top: 6px;
|
||||
padding: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 4px;
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.reply-cancel-btn {
|
||||
/* 取消回复按钮 */
|
||||
.cancel-reply-button {
|
||||
background: #fff;
|
||||
color: #409eff;
|
||||
border: 1px solid #409eff;
|
||||
border-radius: 6px;
|
||||
padding: 2px 10px;
|
||||
padding: 4px 12px;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
margin-top: 10px;
|
||||
font-size: 0.95rem;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.reply-cancel-btn:hover {
|
||||
.cancel-reply-button:hover {
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.form-input-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-input-row .el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.el-form-item .el-input__inner,
|
||||
.el-form-item .el-textarea__inner {
|
||||
min-height: 45px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-container {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
/* 过渡动画 */
|
||||
.message-item-enter-active,
|
||||
.message-item-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.message-item-enter-from,
|
||||
.message-item-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.comment-list {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.comment-item {
|
||||
background-color: #fff;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 12px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* 验证码相关样式 */
|
||||
.captcha-container {
|
||||
/* 验证码输入包装器 */
|
||||
.captcha-input-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.captcha-hint {
|
||||
/* 验证码提示弹窗 */
|
||||
.captcha-hint-popup {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
right: 0;
|
||||
@@ -918,85 +749,43 @@ const handleLike = async (msg) => {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.captcha-hint:hover {
|
||||
.captcha-hint-popup:hover {
|
||||
background-color: #e6f7ff;
|
||||
border-color: #91d5ff;
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.captcha-hint:hover .refresh-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.comment-actions {
|
||||
text-align: right;
|
||||
gap: 20px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.comment-actions .likes {
|
||||
margin-right: 86%;
|
||||
}
|
||||
|
||||
.likes,
|
||||
.reply-btn {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-list {
|
||||
margin-top: 16px;
|
||||
padding-left: 52px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.reply-item {
|
||||
background-color: #fafafa;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.reply-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.reply-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.reply-actions {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.message-board {
|
||||
.message-board-container {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.message-form-section {
|
||||
|
||||
.message-list-wrapper {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
|
||||
.comment-form-section {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.form-input-row {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.comment-header-info,
|
||||
.reply-header-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
margin-right: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.reply-list-container {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user