diff --git a/pages/activeDetail/index.vue b/pages/activeDetail/index.vue
index 55d41b2..dd91b96 100644
--- a/pages/activeDetail/index.vue
+++ b/pages/activeDetail/index.vue
@@ -127,8 +127,8 @@
         <u-icon name="share" size="30" color="#666"></u-icon>
         <text>分享</text>
       </view>
-      <button class="signup-btn" @click="handleSignUp" disabled>
-        {{isSignedUp ? '已报名' : '线下报名'}}
+      <button class="signup-btn" @click="handleSignUp" >
+       立即报名
       </button>
     </view>
   </view>
@@ -146,11 +146,7 @@ export default {
 	  Id:null,
       isFavorite: false,
       isSignedUp: false,
-      bannerImages: [
-        // '/static/night-run-1.jpg',
-        // '/static/night-run-2.jpg',
-        // '/static/night-run-3.jpg'
-      ],
+      bannerImages: [],
       activityInfo: {},
       // timeline: [
       //   {time: '19:00-19:20', desc: '签到领取装备'},
@@ -190,13 +186,26 @@ export default {
         icon: 'none'
       })
     },
-    handleSignUp() {
-      this.isSignedUp = true
-      uni.showToast({
-        title: '报名成功！',
-        icon: 'success'
-      })
-    },
+ 
+	async handleSignUp(){
+		try {
+			const res = await get(`/api/v1/app_auth/activities/${this.Id}`);
+			if ( !res.success) {
+				uni.showToast({
+				  title: res.msg || '报名失败',
+				  icon: 'error'
+				})
+			}else{
+				uni.showToast({
+				  title: '报名成功！',
+				  icon: 'success'
+				})	
+			}
+			
+		} catch (err) {
+			console.error('获取详情失败:', err);
+		}
+	},
     shareActivity() {
       uni.share({
         title: this.activityInfo.title,
@@ -518,7 +527,7 @@ $shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
     .signup-btn {
       flex: 1;
       height: 80rpx;
-      background-color: #ccc;
+      background-color: #5b9cf8;
       color: #fff;
       border-radius: 40rpx;
       font-size: 32rpx;
diff --git a/pages/index/index.vue b/pages/index/index.vue
index d0d0713..f6d4a7a 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -29,38 +29,47 @@
 				</u-swiper>
 			</view>
 
-			<!-- 天气和穿搭建议 -->
-			<!-- 天气和穿搭建议 -->
-			<view class="weather-outfit-section">
-			    <view class="weather-card">
-			        <view class="weather-header">
-			            <text class="location">{{weather.province}}·{{weather.area}}</text>
-			            <text class="date">{{weather.date}} {{weather.week}}</text>
-			        </view>
-			        <view class="weather-content">
-			            <view class="temperature">
-			                <text class="temp-value">{{weather.lowest}}~{{weather.highest}}</text>
-			             <!--   <text class="temp-unit">°C</text> -->
-			            </view>
-			            <view class="weather-info">
-			                <text class="weather-desc">{{weather.weather}}</text>
-			            </view>
-			        </view>
-			        <view class="weather-footer">
-			            <view class="weather-detail-item">
-			                <text>东风 {{weather.wind}}</text>
-			            </view>
-			            <view class="weather-detail-item">
-			                <text>湿度 {{weather.humidity}}%</text>
-			            </view>
-			            <view class="weather-detail-item">
-			                <text>空气质量 {{weather.quality}}</text>
-			            </view>
-			            <view class="weather-detail-item">
-			                <text>紫外线 {{weather.uv_index}}</text>
-			            </view>
-			        </view>
-			    </view>
+			<!-- 天气和穿搭建议 -->
+			<view class="weather-outfit-section">
+				<view class="weather-card">
+					<view class="weather-header">
+						<text class="location">{{weather.province}}·{{weather.area}}</text>
+						<text class="date">{{weather.date}} {{weather.week}}</text>
+					</view>
+					<view class="weather-content">
+						<view class="weather-main">
+							<view class="current-weather">
+								<image class="weather-icon" :src="getWeatherIcon(weather.weather)" mode="aspectFit">
+								</image>
+								<text class="current-temp">{{weather.real}}°</text>
+							</view>
+							<text class="weather-desc">{{weather.weather}}</text>
+						</view>
+						<view class="temperature-range">
+							<text class="temp-item">最高温 {{weather.highest}}°</text>
+							<text class="temp-item">最高温 {{weather.lowest}}°</text>
+						</view>
+					</view>
+					<view class="weather-footer">
+					    <view class="footer-item">
+					        <text class="footer-icon">🌬️东风</text>
+					        <text class="footer-text">{{weather.wind}}</text>
+					    </view>
+					    <view class="footer-item">
+					        <text class="footer-icon">💧湿度</text>
+					        <text class="footer-text">{{weather.humidity}}%</text>
+					    </view>
+					    <view class="footer-item">
+					        <text class="footer-icon">🌫️空气质量</text>
+					        <text class="footer-text">{{weather.quality}}</text>
+					    </view>
+					    <view class="footer-item">
+					        <text class="footer-icon">☀️紫外线</text>
+					        <text class="footer-text">{{weather.uv_index}}</text>
+					    </view>
+					</view>
+
+				</view>
 			</view>
 			<!-- 便捷服务中心 -->
 			<view class="service-section">
@@ -125,8 +134,8 @@
 		data() {
 			return {
 				list1: [],
-				currentDate: this.formatDate(new Date()),
-				weather:{},
+				currentDate: this.formatDate(new Date()),
+				weather: {},
 			}
 		},
 		mounted() {
@@ -178,13 +187,44 @@
 					const res = await get('/api/v1/apps/home/weather');
 					if (!res || !res.success) {
 						throw new Error('获取天气失败');
-					}
-					this.weather = {...res.data};
+					}
+					this.weather = {
+						...res.data
+					};
 				} catch (err) {
 					console.error('获取轮播图失败:', err);
 				}
 			},
 
+			getWeatherIcon(weather) {
+				const weatherMap = {
+					'晴': '/static/imgs/index/sunny.png',
+					'多云': '/static/imgs/index/cloudy.png',
+					'阴': '/static/imgs/index/overcast.png',
+					'雨': '/static/imgs/index/rain.png',
+					'小雨': '/static/imgs/index/light-rain.png',
+					'中雨': '/static/imgs/index/moderate-rain.png',
+					'大雨': '/static/imgs/index/heavy-rain.png',
+					'暴雨': '/static/imgs/index/storm-rain.png',
+					'雪': '/static/imgs/index/snow.png',
+					'雾': '/static/imgs/index/fog.png',
+					'霾': '/static/imgs/index/fog.png',
+				};
+
+				// 默认图标
+				const defaultIcon = '/static/imgs/weather/default.png';
+
+				// 遍历天气关键词，匹配最合适的图标
+				for (const key in weatherMap) {
+					if (weather.includes(key)) {
+						return weatherMap[key];
+					}
+				}
+
+				return defaultIcon;
+			}
+
+
 		}
 	}
 </script>
@@ -252,97 +292,115 @@
 		}
 
 		/* 天气和穿搭区域 */
-		.weather-outfit-section {
-		    margin-bottom: 40rpx;
-		
-		    .weather-card {
-		        width: 92%;
-		        background: #85b0ed;
-		        border-radius: 20rpx;
-		        padding: 30rpx;
-		        color: #fff;
-		        box-shadow: 0 8rpx 24rpx rgba(133, 176, 237, 0.3);
-		
-		        .weather-header {
-		            display: flex;
-		            justify-content: space-between;
-		            margin-bottom: 20rpx;
-		            padding-bottom: 20rpx;
-		            border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
-		
-		            .date {
-		                font-size: 26rpx;
-		                opacity: 0.9;
-						font-weight: bold;
-		            }
-		
-		            .location {
-		                font-size: 28rpx;
-		                font-weight: 500;
-		            }
-		        }
-		
-		        .weather-content {
-		            display: flex;
-		            align-items: center;
-		            justify-content: space-between;
-		            margin: 30rpx 0;
-		            padding: 20rpx 0;
-		
-		            .temperature {
-		                display: flex;
-		                align-items: flex-start;
-		
-		                .temp-value {
-		                    font-size: 60rpx;
-		                    font-weight: 600;
-		                    line-height: 1;
-		                }
-		
-		                .temp-unit {
-		                    font-size: 36rpx;
-		                    margin-top: 8rpx;
-		                }
-		            }
-		
-		            .weather-info {
-		                display: flex;
-		                flex-direction: column;
-		                align-items: center;
-		
-		                .weather-icon {
-		                    width: 80rpx;
-		                    height: 80rpx;
-		                    margin-bottom: 10rpx;
-		                }
-		
-		                .weather-desc {
-		                    font-size: 28rpx;
-		                    opacity: 0.9;
-		                }
-		            }
-		        }
-		
-		        .weather-footer {
-		            display: flex;
-		            justify-content: space-between;
-		            padding-top: 20rpx;
-		            border-top: 1rpx solid rgba(255, 255, 255, 0.2);
-		            font-size: 24rpx;
-		            
-		            .weather-detail-item {
-		                display: flex;
-		                align-items: center;
-		                opacity: 0.9;
-		                
-		                .detail-icon {
-		                    width: 28rpx;
-		                    height: 28rpx;
-		                    margin-right: 8rpx;
-		                }
-		            }
-		        }
-		    }
+		.weather-outfit-section {
+			margin-bottom: 40rpx;
+
+			.weather-card {
+				width: 92%;
+				background: #85b0ed;
+				border-radius: 20rpx;
+				padding: 30rpx;
+				color: #fff;
+				box-shadow: 0 8rpx 24rpx rgba(133, 176, 237, 0.3);
+
+				.weather-header {
+					display: flex;
+					justify-content: space-between;
+					margin-bottom: 20rpx;
+					padding-bottom: 20rpx;
+					border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
+
+					.date {
+						font-size: 26rpx;
+						opacity: 0.9;
+						font-weight: bold;
+					}
+
+					.location {
+						font-size: 28rpx;
+						font-weight: 500;
+					}
+				}
+
+				.weather-content {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					margin: 20rpx 0;
+					padding: 20rpx 0;
+
+					.weather-main {
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+
+						.current-weather {
+							display: flex;
+							align-items: center;
+
+							.weather-icon {
+								width: 80rpx;
+								height: 80rpx;
+								margin-right: 15rpx;
+							}
+
+							.current-temp {
+								font-size: 64rpx;
+								font-weight: bold;
+								line-height: 1;
+							}
+						}
+
+						.weather-desc {
+							font-size: 28rpx;
+							margin-top: 10rpx;
+							opacity: 0.9;
+						}
+					}
+
+					.temperature-range {
+						display: flex;
+						flex-direction: column;
+						align-items: flex-end;
+
+						.temp-item {
+							font-size: 28rpx;
+							margin-bottom: 10rpx;
+							opacity: 0.8;
+
+							&:last-child {
+								margin-bottom: 0;
+							}
+						}
+					}
+				}
+				.weather-footer {
+				    display: flex;
+				    justify-content: space-between;
+				    align-items: center;
+				    padding-top: 20rpx;
+				    border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+				    font-size: 24rpx;
+				    
+				    .footer-item {
+				        display: flex;
+				        flex-direction: column;
+				        align-items: center;
+				        flex: 1;
+				        
+				        .footer-icon {
+				            font-size: 24rpx;
+				            margin-bottom: 6rpx;
+				        }
+				        
+				        .footer-text {
+				            opacity: 0.9;
+				            text-align: center;
+				            line-height: 1.2;
+				        }
+				    }
+				}
+			}
 		}
 
 		/* 便捷服务中心 - 优化后 */
diff --git a/pages/meetingList/index.vue b/pages/meetingList/index.vue
index 58e61f0..7a7d422 100644
--- a/pages/meetingList/index.vue
+++ b/pages/meetingList/index.vue
@@ -9,7 +9,7 @@
 				<view v-if="meetingRoomList.length === 0" class="empty-container">
 				    <text>暂无会议室数据 ({{ meetingRoomList }})</text>
 				  </view>
-				<view class="room-item" v-for="(item, index) in meetingRoomList" :key="index">
+				<view class="room-item" v-for="(item, index) in meetingRoomList" :key="index"  @click="goDetail(item.roomInfo || item)">
 	               <image class="room-img" :src="`${IMAGE_BASE_URL}`+item.imgs[0]">
 					</image>
 					<view class="room-info">
@@ -104,7 +104,7 @@
 				IMAGE_BASE_URL,
 				tabsReady: false,
 				tabList: [{
-						name: '会议预约'
+						name: '共享空间'
 					},
 					{
 						name: '预约记录'
@@ -146,7 +146,6 @@
 				} else {
 					this.getList();
 				}
-				console.log("=======index", index)
 			},
 			// 格式化日期
 			formatDate(dateString) {
@@ -210,7 +209,6 @@
 						});
 					}
 				} catch (err) {
-					console.error('取消预约失败:', err);
 					uni.showToast({
 						title: '取消失败',
 						icon: 'none'
@@ -221,14 +219,11 @@
 			},
 
 			goDetail(item) {
-				// 调试输出完整数据结构
-				console.log('点击项完整数据:', JSON.stringify(item));
-
+				
 				// 安全获取ID（兼容各种可能的字段名）
 				const id = item.id;
 
 				if (!id) {
-					console.error('无效的会议室数据，缺少ID字段:', item);
 					uni.showToast({
 						title: '会议室信息异常',
 						icon: 'none'
@@ -236,9 +231,6 @@
 					return;
 				}
 
-				// 调试输出最终使用的ID
-				console.log('导航使用的ID:', id);
-
 				uni.navigateTo({
 					url: `/pages/meetingDetail/index?Id=${encodeURIComponent(id)}`, // 使用encodeURIComponent防止特殊字符问题
 					success: () => {
@@ -261,16 +253,12 @@
 						pageSize: 10,
 					});
 
-					console.log("===res", res)
-
 					if (res?.success) {
 						this.meetingRoomList = [...res.data];
-						console.log("======this.meetingRoomList", this.meetingRoomList)
 						this.tabsReady = true;
 					}
 
 				} catch (err) {
-					console.error('获取我的求助失败:', err);
 					uni.showToast({
 						title: '加载列表失败',
 						icon: 'none'
@@ -287,8 +275,6 @@
 						pageSize: 10,
 					});
 
-					console.log("===res", res)
-
 					if (res?.success) {
 						this.orderList = [...res.data]; 
 						this.tabsReady = true;
diff --git a/pages/mine/index.vue b/pages/mine/index.vue
index 585930c..0189ad4 100644
--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@@ -146,7 +146,7 @@ export default {
         {
           key: 4,
           url: "/static/imgs/service/service_friend.png",
-          name: '会议室预约',
+          name: '共享空间预约',
           pageUrl: 'meetingList'
         },
         {
diff --git a/pages/neighbor/index.vue b/pages/neighbor/index.vue
index 397c149..fbd2331 100644
--- a/pages/neighbor/index.vue
+++ b/pages/neighbor/index.vue
@@ -102,7 +102,7 @@
 			                resolve({
 			                    longitude: res.longitude,
 			                    latitude: res.latitude
-			                });
+			                });  
 			            },
 			            fail: (err) => {
 			                console.error('获取位置失败:', err);
diff --git a/pages/neighborDetail/index.vue b/pages/neighborDetail/index.vue
index 27f41a3..8867a8b 100644
--- a/pages/neighborDetail/index.vue
+++ b/pages/neighborDetail/index.vue
@@ -1,116 +1,63 @@
 <template>
-	<view class="container">
-		<!-- 白色底部区域 -->
-		<view class="neighbor_body">
-			<!-- 正式页面内容 -->
-			<view class="body">
-				<view class="text-with-block">
-					<view class="left">
-						<text class="text">邻里互助详情</text>
-						<view class="slanted-block"></view>
+	<view class="content">
+		<!-- 主帖内容 -->
+		<view class="post-container">
+			<view class="post-header">
+				<image class="avatar" :src="postData.customerPortrait" mode="aspectFill"></image>
+				<view class="post-info">
+					<text class="username">{{ postData.customerName }}</text>
+					<text class="time">{{ formatTime(postData.pushAt) }}</text>
+				</view>
+			</view>
+			<view class="post-content">
+				<text class="title">{{ postData.title }}</text>
+				<text class="content-text">{{ postData.content }}</text>
+				<view class="images" v-if="postData.images && postData.images.length">
+					<image v-for="(img, index) in postData.images" :key="index" :src="img" class="post-image" :class="{
+							'single-img': postData.images.length === 1,
+							'double-img': postData.images.length === 2,
+							'multi-img': postData.images.length >= 3
+						}" mode="aspectFill" @click="previewImage(index)"></image>
+				</view>
+			</view>
+			<!-- <view class="post-footer">
+				<view class="post-actions">
+					<view class="action-item">
+						
+						<text class="action-text">{{ getTotalComments() }}</text>
 					</view>
 				</view>
+			</view> -->
+		</view>
 
-				<view class="interact_body">
-					<view class="body_item">
-						<view class="item_header">
-							<view class="left_section">
-								<image class="avatar" src="/static/imgs/index/nav.png"></image>
-								<view class="info">
-									<text class="name">樱桃小丸子</text>
-									<text class="date">03-24 07:30</text>
-								</view>
+		<!-- 评论列表 -->
+		<view class="comments-container">
+			<view class="comments-title">评论 ({{ getTotalComments() }})</view>
+			<view class="comments-list">
+				<view v-for="(comment, index) in flatComments" :key="comment.id" class="comment-item" :style="{
+								'--level': comment.level,
+								'--indent': comment.level > 0 ? (comment.level * 60) + 'rpx' : '0'
+							}">
+					<!-- 层级视觉指示线条 -->
+					<view class="comment-level-indicator" v-if="comment.level > 0"></view>
+
+					<!-- 评论内容区 -->
+					<view class="comment-content-wrapper">
+						<image class="comment-avatar" :src="comment.pusherPortrait" mode="aspectFill"></image>
+						<view class="comment-main">
+							<view class="comment-meta">
+								<text class="comment-username">{{ comment.pusherName }}</text>
+								<text class="comment-time">{{ formatTime(comment.createdAt) }}</text>
 							</view>
-						</view>
-
-						<view class="body_content">
-							<h3>寻找拼车伙伴</h3>
-							<view class="content_font">
-								每天早晨7:30从社区出发前往政务中心上班，有同路的朋友可以拼车，分担车费。
-							</view>
-							<view class="content_img">
-								<image src="/static/imgs/index/swiper.png" mode="aspectFill"></image>
-							</view>
-						</view>
-
-						<!-- 评论输入框 -->
-						<view class="comment_input_area">
-							<input v-model="commentContent" class="comment_input" placeholder="写下你的评论..."
-								:focus="isInputFocus" @confirm="submitComment" />
-							<button class="submit_btn" @click="submitComment">发送</button>
-						</view>
-
-						<!-- 评论列表 -->
-						<view class="comment_list">
-							<view class="comment_title">全部评论 ({{ totalComments }})</view>
-
-							<!-- 主评论 -->
-							<view class="comment_item" v-for="(comment, index) in comments" :key="comment.id">
-								<image class="comment_avatar" :src="comment.avatar"></image>
-								<view class="comment_content">
-									<view class="comment_info">
-										<text class="comment_user">{{ comment.username }}</text>
-										<text class="comment_time">{{ comment.time }}</text>
-									</view>
-									<view class="comment_text">{{ comment.content }}</view>
-									<view class="comment_actions">
-										<text class="reply_btn" @click="showReplyInput(comment.id)">回复</text>
-										<text class="like_btn" @click="toggleCommentLike(comment)">
-											<image v-if="comment.isLiked" src="/static/icons/liked.png"
-												class="like_icon"></image>
-											<image v-else src="/static/icons/like.png" class="like_icon"></image>
-											{{ comment.likeCount || 0 }}
-										</text>
-									</view>
-
-									<!-- 回复输入框 -->
-									<view class="reply_input_area" v-if="activeReplyId === comment.id">
-										<input v-model="replyContent" class="reply_input" placeholder="写下你的回复..."
-											:focus="isReplyFocus" @confirm="submitReply(comment.id)" />
-										<button class="submit_btn" @click="submitReply(comment.id)">发送</button>
-									</view>
-
-									<!-- 子评论 -->
-									<view class="child_comments" v-if="comment.replies && comment.replies.length > 0">
-										<view class="child_comment_item" v-for="(reply, rIndex) in comment.replies"
-											:key="rIndex">
-											<image class="child_comment_avatar" :src="reply.avatar"></image>
-											<view class="child_comment_content">
-												<view class="comment_info">
-													<text class="comment_user">{{ reply.username }}</text>
-													<text class="comment_time">{{ reply.time }}</text>
-												</view>
-												<view class="comment_text">
-													<text class="reply_to"
-														v-if="reply.replyTo">@{{ reply.replyTo }}</text>
-													{{ reply.content }}
-												</view>
-												<view class="comment_actions">
-													<text class="reply_btn"
-														@click="showReplyInput(comment.id, reply.username)">回复</text>
-													<text class="like_btn" @click="toggleReplyLike(comment, reply)">
-														<image v-if="reply.isLiked" src="/static/icons/liked.png"
-															class="like_icon"></image>
-														<image v-else src="/static/icons/like.png" class="like_icon">
-														</image>
-														{{ reply.likeCount || 0 }}
-													</text>
-												</view>
-											</view>
-										</view>
-
-										<!-- 查看更多回复 -->
-										<view class="view_more_replies"
-											v-if="comment.replies.length < comment.replyCount"
-											@click="loadMoreReplies(comment)">
-											查看全部{{ comment.replyCount }}条回复 ↓
-										</view>
-									</view>
-								</view>
-							</view>
-
-							<view v-if="comments.length === 0" class="no_comments">
-								暂无评论，快来发表第一条评论吧~
+							<view class="comment-text">{{ comment.content }}</view>
+							<view class="comment-actions">
+								<text class="reply-btn" @click="handleReply(comment.id)">回复</text>
+								<!-- 只在一级评论显示折叠按钮 -->
+								<text class="fold-btn" v-if="comment.level === 0 && hasChildren(comment)"
+									@click="toggleFold(comment.id)">
+									{{ foldedComments.includes(comment.id) ? '展开' : '折叠' }}
+									{{ getChildCount(comment) }}条回复
+								</text>
 							</view>
 						</view>
 					</view>
@@ -118,594 +65,682 @@
 			</view>
 		</view>
 
-		<!-- 引入底部 -->
-		<Footer></Footer>
+		<!-- 新评论输入框 -->
+		<view class="comment-input-container">
+			<!-- 回复提示条 -->
+			<view class="replying-bar" v-if="replyingTo">
+				<text class="replying-text">回复 @{{ getReplyUsername(replyingTo) }}</text>
+				<text class="cancel-reply" @click="cancelReply">取消</text>
+			</view>
+
+			<view class="input-wrapper">
+				<input class="comment-input" v-model="newComment" :placeholder="replyingTo ? '输入回复内容...' : '写下你的评论...'"
+					@confirm="submitComment" />
+				<button class="send-btn" @click="submitComment" :disabled="!newComment.trim()">
+					发送
+				</button>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
-	import Footer from '@/components/footer_common.vue';
+	import {
+		get,
+		post
+	} from '@/utils/request';
+	import {
+		formatTime
+	} from '@/utils/timeFormat';
+	// import uniIcons from '@/components/uni-icons/uni-icons.vue';
+
 	export default {
 		components: {
-			Footer
+			// uniIcons
 		},
 		data() {
 			return {
-				commentContent: '',
-				replyContent: '',
-				isInputFocus: false,
-				isReplyFocus: false,
-				activeReplyId: null,
-				replyToUser: '',
-				comments: [{
-						id: 1,
-						username: '邻居老王',
-						avatar: '/static/imgs/index/nav.png',
-						content: '我正好也去政务中心上班，可以一起拼车吗？',
-						time: '03-24 09:30',
-						isLiked: false,
-						likeCount: 3,
-						replyCount: 2,
-						replies: [{
-								id: 11,
-								username: '樱桃小丸子',
-								avatar: '/static/imgs/index/nav.png',
-								content: '当然可以啊，你住在哪栋楼？',
-								time: '03-24 09:45',
-								isLiked: true,
-								likeCount: 1,
-								replyTo: '邻居老王'
-							},
-							{
-								id: 12,
-								username: '邻居老王',
-								avatar: '/static/imgs/index/nav.png',
-								content: '我住3栋，你呢？',
-								time: '03-24 09:50',
-								isLiked: false,
-								likeCount: 0,
-								replyTo: '樱桃小丸子'
-							}
-						]
-					},
-					{
-						id: 2,
-						username: '社区小李',
-						avatar: '/static/imgs/index/nav.png',
-						content: '我每周一三五去那边，可以固定拼车',
-						time: '03-24 10:15',
-						isLiked: false,
-						likeCount: 1,
-						replyCount: 1,
-						replies: [{
-							id: 21,
-							username: '樱桃小丸子',
-							avatar: '/static/imgs/index/nav.png',
-							content: '好的，那周一见！',
-							time: '03-24 10:30',
-							isLiked: false,
-							likeCount: 0,
-							replyTo: '社区小李'
-						}]
-					}
-				]
-			}
+				Id: '',
+				flatComments: [],
+				newComment: "",
+				replyingTo: null,
+				postData: {
+					histories: []
+				},
+				loading: false,
+				error: '',
+				submitting: false,
+				foldedComments: [], // 存储被折叠的评论ID
+				showLoadMore: false, // 是否显示加载更多
+				currentPage: 1,
+				pageSize: 10,
+			};
 		},
-		computed: {
-			totalComments() {
-				let count = this.comments.length;
-				this.comments.forEach(comment => {
-					count += comment.replies.length;
-				});
-				return count;
+		onLoad(options) {
+			if (options && options.Id) {
+				this.Id = options.Id;
+				this.getDetail();
+			} else {
+				this.error = '缺少内容ID';
+				this.loading = false;
 			}
 		},
 		methods: {
-			submitComment() {
-				if (this.commentContent.trim() === '') return;
+			// 图片预览
+			previewImage(index) {
+				if (!this.postData.images || !this.postData.images.length) return;
 
-				const newComment = {
-					id: Date.now(),
-					username: '当前用户',
-					avatar: '/static/imgs/index/nav.png',
-					content: this.commentContent,
-					time: this.formatDate(new Date()),
-					isLiked: false,
-					likeCount: 0,
-					replyCount: 0,
-					replies: []
-				};
-
-				this.comments.unshift(newComment);
-				this.commentContent = '';
-				this.isInputFocus = false;
-			},
-			showReplyInput(commentId, replyTo = '') {
-				this.activeReplyId = commentId;
-				this.replyToUser = replyTo;
-				this.replyContent = '';
-				this.$nextTick(() => {
-					this.isReplyFocus = true;
+				uni.previewImage({
+					current: index,
+					urls: this.postData.images
 				});
 			},
-			submitReply(commentId) {
-				if (this.replyContent.trim() === '') return;
 
-				const parentComment = this.comments.find(c => c.id === commentId);
-				if (!parentComment) return;
+			// 检查评论是否有子评论
+			hasChildren(comment) {
+				return comment.children && comment.children.length > 0;
+			},
 
-				const newReply = {
-					id: Date.now(),
-					username: '当前用户',
-					avatar: '/static/imgs/index/nav.png',
-					content: this.replyContent,
-					time: this.formatDate(new Date()),
-					isLiked: false,
-					likeCount: 0,
-					replyTo: this.replyToUser || parentComment.username
+			// 获取子评论数量
+			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;
+					}, []);
 				};
 
-				parentComment.replies.push(newReply);
-				parentComment.replyCount = parentComment.replies.length;
-				this.replyContent = '';
-				this.activeReplyId = null;
-				this.isReplyFocus = false;
-				this.replyToUser = '';
+				this.flatComments = flattenWithFold(this.postData.histories || []);
 			},
-			toggleCommentLike(comment) {
-				comment.isLiked = !comment.isLiked;
-				comment.likeCount += comment.isLiked ? 1 : -1;
+			// 加载更多评论
+			loadMoreComments() {
+				this.currentPage++;
+				// 这里应该调用API获取更多评论，示例中简化处理
+				this.getDetail();
 			},
-			toggleReplyLike(comment, reply) {
-				reply.isLiked = !reply.isLiked;
-				reply.likeCount += reply.isLiked ? 1 : -1;
-			},
-			loadMoreReplies(comment) {
-				// 模拟加载更多回复
-				const newReplies = [{
-						id: Date.now() + 1,
-						username: '热心邻居',
-						avatar: '/static/imgs/index/nav.png', 
-						content: '我也想去政务中心，可以一起吗？',
-						time: '03-25 08:00',
-						isLiked: false,
-						likeCount: 0,
-						replyTo: comment.username
-					},
-					{
-						id: Date.now() + 2,
-						username: '社区志愿者',
-						avatar: '/static/imgs/index/nav.png',
-						content: '拼车注意安全哦！',
-						time: '03-25 08:30',
-						isLiked: false,
-						likeCount: 0,
-						replyTo: comment.username
-					}
-				];
 
-				comment.replies = [...comment.replies, ...newReplies];
-				comment.replyCount = comment.replies.length;
+			// 获取帖子详情
+			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;
+				}
 			},
-			formatDate(date) {
-				const month = (date.getMonth() + 1).toString().padStart(2, '0');
-				const day = date.getDate().toString().padStart(2, '0');
-				const hours = date.getHours().toString().padStart(2, '0');
-				const minutes = date.getMinutes().toString().padStart(2, '0');
-				return `${month}-${day} ${hours}:${minutes}`;
+
+			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>
-
-<style lang="scss" scoped>
-	.container {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		background: #f8faff;
-		min-height: 100vh;
-		padding-bottom: 120rpx;
-
-		.neighbor_head {
-			width: 100%;
-			height: 360rpx;
-			opacity: 1;
-			background: linear-gradient(270deg, rgba(146, 161, 252, 1) 0%, rgba(181, 229, 255, 1) 100%);
-			position: relative;
-		}
-
-		.neighbor_body {
-			width: 100%;
-			background: #fff;
-			min-height: calc(100vh - 360rpx);
-			border-top-left-radius: 40rpx;
-			border-top-right-radius: 40rpx;
-			position: relative;
-			top: -40rpx;
-			z-index: 9;
-			padding-bottom: 120rpx;
-			box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.05);
-
-			.body {
-				width: 90%;
-				margin: 0 auto;
-				padding-top: 40rpx;
-
-				.text-with-block {
-					display: flex;
-					justify-content: space-between;
-					padding: 20rpx 0;
-					height: 60rpx;
-					/* 增加高度 */
-					margin-bottom: 40rpx;
-					position: relative;
-
-					.left {
-						position: relative;
-						display: flex;
-						align-items: center;
-
-						.text {
-							font-size: 38rpx;
-							font-weight: bold;
-							color: #333;
-							position: relative;
-							z-index: 2;
-							padding-left: 20rpx;
-							background: linear-gradient(to right, #4a8cff, #80b3ff);
-							-webkit-background-clip: text;
-							background-clip: text;
-							color: transparent;
-							text-shadow: 0 2rpx 4rpx rgba(74, 140, 255, 0.2);
-						}
-
-						.slanted-block {
-							position: absolute;
-							left: 0;
-							bottom: 0;
-							transform: skewX(-15deg);
-							width: 240rpx;
-							height: 16rpx;
-							/* 调整为更细的线条 */
-							background: linear-gradient(90deg, rgba(74, 140, 255, 0.6), rgba(128, 179, 255, 0.3));
-							z-index: 1;
-							border-radius: 8rpx;
-							transition: all 0.3s ease;
-						}
-
-						&:hover .slanted-block {
-							height: 20rpx;
-							background: linear-gradient(90deg, rgba(74, 140, 255, 0.8), rgba(128, 179, 255, 0.5));
-						}
-					}
-				}
-
-				.interact_body {
-					width: 100%;
-					margin-top: 20rpx;
-
-					.body_item {
-						margin: 0 auto 40rpx;
-						background: #fff;
-						border-radius: 24rpx;
-						padding: 30rpx;
-						box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
-
-						.item_header {
-							display: flex;
-							justify-content: space-between;
-							align-items: center;
-							padding-bottom: 30rpx;
-							border-bottom: 1rpx solid #f5f5f5;
-
-							.left_section {
-								display: flex;
-								align-items: center;
-
-								.avatar {
-									width: 80rpx;
-									height: 80rpx;
-									border-radius: 50%;
-									margin-right: 20rpx;
-									border: 2rpx solid #f0f0f0;
-								}
-
-								.info {
-									display: flex;
-									flex-direction: column;
-
-									.name {
-										font-size: 30rpx;
-										color: #333;
-										font-weight: 500;
-									}
-
-									.date {
-										font-size: 24rpx;
-										color: #999;
-										margin-top: 8rpx;
-									}
-								}
-							}
-						}
-
-						.body_content {
-							padding: 30rpx 0;
-
-							h3 {
-								font-weight: 600;
-								height: 80rpx;
-								line-height: 80rpx;
-								color: #333;
-								font-size: 34rpx;
-								margin-bottom: 10rpx;
-							}
-
-							.content_font {
-								font-weight: normal;
-								color: #555;
-								font-size: 28rpx;
-								line-height: 48rpx;
-								margin-top: 20rpx;
-							}
-
-							.content_img {
-								width: 100%;
-								height: 400rpx;
-								margin: 40rpx 0;
-								border-radius: 16rpx;
-								overflow: hidden;
-								background: #f5f5f5;
-
-								image {
-									width: 100%;
-									height: 100%;
-									object-fit: cover;
-								}
-							}
-						}
-
-						/* 评论输入框区域 */
-						.comment_input_area {
-							display: flex;
-							align-items: center;
-							margin: 30rpx 0;
-							padding: 20rpx 0;
-							border-top: 1rpx solid #f5f5f5;
-							border-bottom: 1rpx solid #f5f5f5;
-
-							.comment_input {
-								flex: 1;
-								height: 80rpx;
-								background: #f8f8f8;
-								border-radius: 40rpx;
-								padding: 0 30rpx;
-								font-size: 28rpx;
-								color: #333;
-							}
-
-							.submit_btn {
-								width: 140rpx;
-								height: 80rpx;
-								line-height: 80rpx;
-								background: #4a8cff;
-								color: #fff;
-								border-radius: 40rpx;
-								margin-left: 20rpx;
-								font-size: 28rpx;
-								font-weight: normal;
-							}
-						}
-
-						/* 评论列表 */
-						.comment_list {
-							margin-top: 20rpx;
-
-							.comment_title {
-								font-size: 30rpx;
-								font-weight: 600;
-								color: #333;
-								margin-bottom: 30rpx;
-								padding-left: 10rpx;
-							}
-
-							.comment_item {
-								display: flex;
-								padding: 30rpx 0;
-								border-bottom: 1rpx solid #f5f5f5;
-
-								.comment_avatar {
-									width: 70rpx;
-									height: 70rpx;
-									border-radius: 50%;
-									margin-right: 20rpx;
-									border: 2rpx solid #f0f0f0;
-								}
-
-								.comment_content {
-									flex: 1;
-
-									.comment_info {
-										display: flex;
-										align-items: center;
-										margin-bottom: 10rpx;
-
-										.comment_user {
-											font-size: 28rpx;
-											color: #4a8cff;
-											font-weight: 500;
-											margin-right: 20rpx;
-										}
-
-										.comment_time {
-											font-size: 24rpx;
-											color: #999;
-										}
-									}
-
-									.comment_text {
-										font-size: 28rpx;
-										color: #333;
-										line-height: 1.6;
-										margin-bottom: 20rpx;
-
-										.reply_to {
-											color: #4a8cff;
-											margin-right: 10rpx;
-										}
-									}
-
-									.comment_actions {
-										display: flex;
-										align-items: center;
-
-										.reply_btn,
-										.like_btn {
-											font-size: 24rpx;
-											color: #999;
-											margin-right: 30rpx;
-											display: flex;
-											align-items: center;
-
-											.like_icon {
-												width: 28rpx;
-												height: 28rpx;
-												margin-right: 8rpx;
-											}
-										}
-
-										.reply_btn {
-											&:active {
-												color: #4a8cff;
-											}
-										}
-
-										.like_btn {
-											&:active {
-												color: #ff4d4f;
-											}
-										}
-									}
-
-									/* 回复输入框 */
-									.reply_input_area {
-										display: flex;
-										align-items: center;
-										margin-top: 20rpx;
-										padding: 20rpx 0;
-
-										.reply_input {
-											flex: 1;
-											height: 70rpx;
-											background: #f8f8f8;
-											border-radius: 35rpx;
-											padding: 0 30rpx;
-											font-size: 26rpx;
-											color: #333;
-										}
-
-										.submit_btn {
-											width: 120rpx;
-											height: 70rpx;
-											line-height: 70rpx;
-											background: #4a8cff;
-											color: #fff;
-											border-radius: 35rpx;
-											margin-left: 20rpx;
-											font-size: 26rpx;
-											font-weight: normal;
-										}
-									}
-
-									/* 子评论 */
-									.child_comments {
-										margin-top: 20rpx;
-										padding-left: 20rpx;
-										border-left: 4rpx solid #f0f0f0;
-
-										.child_comment_item {
-											display: flex;
-											padding: 25rpx 0;
-											border-bottom: 1rpx dashed #f0f0f0;
-
-											&:last-child {
-												border-bottom: none;
-											}
-
-											.child_comment_avatar {
-												width: 60rpx;
-												height: 60rpx;
-												border-radius: 50%;
-												margin-right: 20rpx;
-												border: 2rpx solid #f0f0f0;
-											}
-
-											.child_comment_content {
-												flex: 1;
-
-												.comment_info {
-													display: flex;
-													align-items: center;
-													margin-bottom: 8rpx;
-
-													.comment_user {
-														font-size: 26rpx;
-														color: #4a8cff;
-														font-weight: 500;
-														margin-right: 15rpx;
-													}
-
-													.comment_time {
-														font-size: 22rpx;
-														color: #999;
-													}
-												}
-
-												.comment_text {
-													font-size: 26rpx;
-													color: #555;
-													line-height: 1.5;
-													margin-bottom: 15rpx;
-												}
-
-												.comment_actions {
-
-													.reply_btn,
-													.like_btn {
-														font-size: 22rpx;
-													}
-												}
-											}
-										}
-
-										.view_more_replies {
-											font-size: 24rpx;
-											color: #4a8cff;
-											padding: 15rpx 0;
-											text-align: center;
-
-											&:active {
-												opacity: 0.8;
-											}
-										}
-									}
-								}
-							}
-
-							.no_comments {
-								text-align: center;
-								color: #999;
-								font-size: 28rpx;
-								padding: 60rpx 0;
-								background: #fafafa;
-								border-radius: 12rpx;
-								margin-top: 30rpx;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
+<style lang="scss">
+  /* 使用SCSS增强样式能力 */
+  $primary-color: #4361ee; // 更现代的蓝色
+  $primary-light: #e9f0ff; // 浅蓝色背景
+  $text-color: #2d3748; // 深灰色文字
+  $light-text: #718096; // 浅灰色文字
+  $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; // 小圆角
+  $transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); // 平滑过渡
+
+  .content {
+    padding: 16px;
+    background-color: $bg-color;
+    min-height: 100vh;
+    padding-bottom: 120px;
+  }
+
+  /* 主帖样式优化 */
+  .post-container {
+    background-color: white;
+    border-radius: $radius-lg;
+    padding: 24px;
+    margin-bottom: 20px;
+    box-shadow: $shadow-sm;
+    transition: $transition;
+    border: 1px solid $border-color;
+
+    &:hover {
+      box-shadow: $shadow-md;
+      transform: translateY(-1px);
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+  }
+
+  .post-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    margin-right: 16px;
+    border: 2px solid white;
+    box-shadow: $shadow-sm;
+    background-color: #f5f5f5;
+    transition: $transition;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+
+  .post-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .username {
+    font-size: 16px;
+    font-weight: 600;
+    color: $text-color;
+    line-height: 1.5;
+  }
+
+  .time {
+    font-size: 13px;
+    color: $light-text;
+    line-height: 1.5;
+  }
+
+  .post-content {
+    .title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #1a1a1a;
+      margin-bottom: 16px;
+      display: block;
+      line-height: 1.6;
+      letter-spacing: -0.01em;
+    }
+
+    .content-text {
+      font-size: 15px;
+      color: $text-color;
+      line-height: 1.7;
+      margin-bottom: 20px;
+      display: block;
+      word-break: break-word;
+    }
+  }
+
+  .images {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-top: 16px;
+  }
+
+  .post-image {
+    border-radius: $radius-md;
+    background-color: #f5f5f5;
+    object-fit: cover;
+    transition: $transition;
+    box-shadow: $shadow-sm;
+    cursor: zoom-in;
+
+    &:hover {
+      transform: scale(1.02);
+      box-shadow: $shadow-md;
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+
+    &.single-img {
+      width: 100%;
+      height: 300px;
+    }
+
+    &.double-img {
+      width: calc(50% - 6px);
+      height: 180px;
+    }
+
+    &.multi-img {
+      width: calc(33.33% - 8px);
+      height: 120px;
+    }
+  }
+
+  /* 评论区样式优化 */
+  .comments-container {
+    background-color: white;
+    border-radius: $radius-lg;
+    padding: 0 20px;
+    margin-bottom: 16px;
+    box-shadow: $shadow-sm;
+    border: 1px solid $border-color;
+  }
+
+  .comments-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: $text-color;
+    padding: 20px 0;
+    border-bottom: 1px solid $border-color;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: -1px;
+      width: 40px;
+      height: 2px;
+      background-color: $primary-color;
+    }
+  }
+
+  .comments-list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .comment-item {
+    position: relative;
+    padding: 20px 0;
+    border-bottom: 1px solid $border-color;
+    transition: $transition;
+
+    &:hover {
+      background-color: rgba($primary-light, 0.3);
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .comment-level-indicator {
+    position: absolute;
+    top: 50px;
+    width: 2px;
+    background-color: #e5e5e5;
+    left: calc(30px + var(--indent) - 20px);
+    height: calc(100% - 50px);
+  }
+
+  .comment-content-wrapper {
+    display: flex;
+    align-items: flex-start;
+    padding-left: var(--indent);
+  }
+
+  .comment-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    margin-right: 12px;
+    flex-shrink: 0;
+    background-color: #f5f5f5;
+    border: 1px solid $border-color;
+    transition: $transition;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+
+  .comment-main {
+    flex: 1;
+  }
+
+  .comment-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  .comment-username {
+    font-size: 14px;
+    color: $text-color;
+    font-weight: 500;
+  }
+
+  .comment-time {
+    font-size: 12px;
+    color: $light-text;
+  }
+
+  .comment-text {
+    font-size: 14px;
+    color: $text-color;
+    line-height: 1.6;
+    margin-bottom: 12px;
+    padding: 4px 0;
+    word-break: break-word;
+  }
+
+  .comment-actions {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 4px 0;
+  }
+
+  .reply-btn,
+  .fold-btn {
+    font-size: 13px;
+    color: $primary-color;
+    padding: 4px 8px;
+    border-radius: $radius-sm;
+    transition: $transition;
+    cursor: pointer;
+
+    &:hover {
+      background-color: rgba($primary-color, 0.1);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+
+  .fold-btn {
+    color: $light-text;
+  }
+
+  /* 评论输入框样式优化 */
+  .comment-input-container {
+    position: fixed;
+    bottom: 0;
+    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);
+    z-index: 100;
+  }
+
+  .replying-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: $primary-light;
+    border-radius: $radius-md;
+    margin-bottom: 12px;
+    font-size: 13px;
+  }
+
+  .replying-text {
+    color: $primary-color;
+    font-weight: 500;
+  }
+
+  .cancel-reply {
+    color: $primary-color;
+    padding: 4px 8px;
+    border-radius: $radius-sm;
+    cursor: pointer;
+    transition: $transition;
+
+    &:hover {
+      background-color: rgba($primary-color, 0.1);
+    }
+  }
+
+  .input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .comment-input {
+    flex: 1;
+    height: 48px;
+    padding: 0 16px;
+    font-size: 14px;
+    border: 1px solid $border-color;
+    border-radius: 24px;
+    background-color: #f5f5f5;
+    transition: $transition;
+    outline: none;
+
+    &:focus {
+      border-color: $primary-color;
+      background-color: #fff;
+      box-shadow: 0 0 0 2px rgba($primary-color, 0.1);
+    }
+
+    &::placeholder {
+      color: #a0aec0;
+    }
+  }
+
+  .send-btn {
+    min-width: 80px;
+    height: 48px;
+    background-color: $primary-color;
+    color: white;
+    border: none;
+    border-radius: 24px;
+    font-size: 14px;
+    font-weight: 500;
+    transition: $transition;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 16px;
+
+    &:hover {
+      background-color: darken($primary-color, 5%);
+      box-shadow: $shadow-sm;
+    }
+
+    &:active {
+      background-color: darken($primary-color, 10%);
+      transform: scale(0.98);
+    }
+
+    &:disabled {
+      background-color: #edf2f7;
+      color: #a0aec0;
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+  }
+
+  /* 加载更多按钮 */
+  .load-more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px 0;
+    color: $light-text;
+    font-size: 14px;
+    cursor: pointer;
+    transition: $transition;
+
+    &:hover {
+      color: $primary-color;
+    }
+
+    text {
+      margin-right: 8px;
+    }
+  }
+
+  /* 添加一些动画效果 */
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .comment-item {
+    animation: fadeIn 0.3s ease-out forwards;
+  }
+
+  /* 响应式调整 */
+  @media (max-width: 480px) {
+    .content {
+      padding: 12px;
+    }
+    
+    .post-container {
+      padding: 16px;
+    }
+    
+    .comment-input-container {
+      padding: 12px;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/pages/neighborList/index.vue b/pages/neighborList/index.vue
index d683004..a8b9350 100644
--- a/pages/neighborList/index.vue
+++ b/pages/neighborList/index.vue
@@ -16,7 +16,7 @@
 						<view class="slanted-block"></view>
 					</view>
 	
-					<view class="right" @click="goPage('helpInfo')">
+					<view class="right" @click="goPage('helpInfo','')">
 						<view class="right-icon">+</view>
 						<view class="right-font">发帖</view>
 					</view>
@@ -92,9 +92,9 @@
 		},
 		methods: {
 			// 跳转详情页面
-			goPage(page){
+			goPage(page,id){
 				uni.navigateTo({
-				  url: `/pages/${page}/index`,
+				  url: `/pages/${page}/index?Id=${id}`,
 				  // url: '/pages/helpInfo/index', 
 				  success: () => {
 				    console.log('切换到tabBar页面成功');