From 7a3a2d50daf59dd1b19bcd848b2fce843afa8bf4 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Mon, 28 Jul 2025 12:03:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=92=E5=8A=A9=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E8=AF=84=E8=AE=BA=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.vue          |   4 +-
 pages/neighborDetail/index.vue | 702 ++++++++++++++++++---------------
 2 files changed, 383 insertions(+), 323 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index 2683ef8..8656f72 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -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;
 					}
 
diff --git a/pages/neighborDetail/index.vue b/pages/neighborDetail/index.vue
index 8867a8b..631c108 100644
--- a/pages/neighborDetail/index.vue
+++ b/pages/neighborDetail/index.vue
@@ -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>
\ No newline at end of file