修改促销、优化页面布局
Change-Id: Iae813b5b6557efa7059fe6d94bc32e96c984e4ea
diff --git a/src/pages/Forum/posts-main/components/CreatePostButton.css b/src/pages/Forum/posts-main/components/CreatePostButton.css
index 225ddde..c5cc906 100644
--- a/src/pages/Forum/posts-main/components/CreatePostButton.css
+++ b/src/pages/Forum/posts-main/components/CreatePostButton.css
@@ -1,13 +1,18 @@
.create-post {
display: flex;
justify-content: center;
- margin: 20px 0;
+ margin-top: 3%;
+ margin-bottom: -1%;
}
.create-btn {
- background-color: #BA929A;
- color: white;
- padding: 10px 20px;
+ /* background-color: #BA929A;
+ color: white; */
+ /* background-color: #e9ded2; */
+ /* 使用浅色背景，符合整体风格 */
+ background: none;
+ color: #5F4437;
+ padding: 7px 15px;
border-radius: 8px;
border: none;
cursor: pointer;
@@ -18,7 +23,24 @@
}
.create-btn:hover {
- background-color: #a17b83;
+ background-color: #e9ded2;
+}
+
+.view-btn {
+ background: none;
+ color: #0f5e51;
+ padding: 7px 15px;
+ border-radius: 8px;
+ border: none;
+ cursor: pointer;
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ transition: background-color 0.3s ease;
+}
+
+.view-btn:hover {
+ background-color: #e9ded2;
}
/* Modal 样式 */
diff --git a/src/pages/Forum/posts-main/components/PostList.css b/src/pages/Forum/posts-main/components/PostList.css
index ee4d951..f6d6c2a 100644
--- a/src/pages/Forum/posts-main/components/PostList.css
+++ b/src/pages/Forum/posts-main/components/PostList.css
@@ -5,13 +5,68 @@
padding: 30px;
}
-.post-actions {
- justify-content: flex-end; /*靠右对齐*/
+.dianzan-shoucang {
+ /*靠左对齐*/
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ margin-left: -30px;
}
- .post-card {
- background-color: #e9ded2;
- border: 1px solid #000000;
- padding: 16px;
- border-radius: 8px;
- }
-
\ No newline at end of file
+.post-card {
+ background-color: #e9ded2;
+ padding: 16px;
+ border-radius: 8px;
+ /* 移除固定高度 */
+ /* height: 230px; */
+ /* 添加阴影效果增强视觉层次感 */
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ /* 添加过渡效果使交互更流畅 */
+ transition: transform 0.2s ease;
+}
+
+/* 鼠标悬停效果 */
+.post-card:hover {
+ transform: translateY(-2px);
+}
+
+/* 新增：内容包装器，使用flex布局 */
+.post-content-wrapper {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+/* 新增：左侧内容区域 */
+.post-content-left {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+/* 新增：右侧内容区域 */
+.post-content-right {
+ flex: 0 0 30%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+/* 调整封面图片样式 */
+.cover {
+ /* max-width: 100%;
+ max-height: 200px; */
+ width: 50%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 8px;
+}
+
+.custom-link {
+ color: #2196F3; /* 浅蓝色 */
+ text-decoration: none; /* 去除下划线 */
+}
+
+.custom-link:hover {
+ text-decoration: underline; /* 鼠标悬停时显示下划线 */
+}
diff --git a/src/pages/Forum/posts-main/components/PostList.jsx b/src/pages/Forum/posts-main/components/PostList.jsx
index d5ff736..cf0a424 100644
--- a/src/pages/Forum/posts-main/components/PostList.jsx
+++ b/src/pages/Forum/posts-main/components/PostList.jsx
@@ -159,45 +159,55 @@
return (
<div key={post.postNo} className="post-card" style={{ backgroundColor: '#e9ded2' }}>
+ {/* 用户信息 */}
<div className="user-info">
<Link href={`/information/${post.user_id}`}>
<img
- className="avatar"
+ style={{ width: '80px', height: '80px', borderRadius: '50%', cursor: 'pointer', border: '4px solid #d2b48c' }}
src={post.avatarUrl}
alt="头像"
- style={{ cursor: 'pointer' }}
/>
</Link>
- <span className="nickname" style={{ color: '#755e50' }}>{post.username}</span>
+ <span className="nickname" style={{ color: '#755e50', marginLeft: '10px', fontSize: '20px' }}>{post.username}</span>
</div>
- {coverImage && <img className="cover-image" src={coverImage} alt="封面" />}
-
- <h3 style={{ color: '#000000' }}>{post.title || '无标题'}</h3>
- <div className="post-meta">
- <span>发布时间：{timeText}</span>
- <div className="post-actions">
- <button className="icon-btn" onClick={() => toggleLike(post.postNo, post.liked,user.userId
-)}>
- <GoodTwo theme="outline" size="24" fill={post.liked ? '#f00' : '#fff'} />
- <span>{post.likeCount}</span>
- </button>
- <button className="icon-btn" onClick={() => toggleCollect(post.postNo, post.collected, user.userId
-)}>
- <Star theme="outline" size="24" fill={post.collected ? '#ffd700' : '#fff'} />
- <span>{post.collectCount}</span>
- </button>
-
- {canDelete && (
- <button className="icon-btn" onClick={() => handleDeletePost(post.postNo, user.userId
-)}>
- <Delete theme="outline" size="24" fill="#333" />
+ {/* 内容区 - 使用flex布局 */}
+ <div className="post-content-wrapper">
+ {/* 左侧内容：标题和元信息 */}
+ <div className="post-content-left">
+ <h3 style={{ color: '#000000' }}>{post.title || '无标题'}</h3>
+ <div className="post-meta">
+ <span>发布时间：{timeText}</span>
+ </div>
+
+ {/* 点赞和收藏按钮 - 移至内容下方 */}
+ <div className="dianzan-shoucang">
+ <button className="icon-btn" onClick={() => toggleLike(post.postNo, post.liked, user.userId)}>
+ <GoodTwo theme="outline" size="24" fill={post.liked ? '#f00' : '#fff'} />
+ <span>{post.likeCount}</span>
</button>
- )}
+ <button className="icon-btn" onClick={() => toggleCollect(post.postNo, post.collected, user.userId)}>
+ <Star theme="outline" size="24" fill={post.collected ? '#ffd700' : '#fff'} />
+ <span>{post.collectCount}</span>
+ </button>
+
+ {canDelete && (
+ <button className="icon-btn" onClick={() => handleDeletePost(post.postNo, post.user_id)}>
+ <Delete theme="outline" size="24" fill="#333" />
+ </button>
+ )}
+ </div>
+
+ {/* 查看详情按钮 */}
+ <div>
+ <Link href={`/forum/post/${post.postNo}`} className="custom-link">查看详情</Link>
+ </div>
</div>
- </div>
- <div className="detail-button-wrapper">
- <Link href={`/forum/post/${post.postNo}`} className="detail-button">查看详情</Link>
+
+ {/* 右侧内容：封面图片 */}
+ <div className="post-content-right">
+ {coverImage && <img className="cover" src={coverImage} alt="封面" />}
+ </div>
</div>
</div>
);
@@ -213,5 +223,4 @@
);
};
-export default PostList;
-
+export default PostList;