diff --git a/pages/neighborDetail/index.vue b/pages/neighborDetail/index.vue
index 631c108..625ff22 100644
--- a/pages/neighborDetail/index.vue
+++ b/pages/neighborDetail/index.vue
@@ -13,65 +13,63 @@
 				<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>
+					<image v-for="(img, index) in postData.images" :key="index" :src="`${IMAGE_BASE_URL}`+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="comments-container">
-			<view class="comments-title">评论 ({{ getTotalComments() }})</view>
+			<view class="section-header">
+				<text class="section-title">评论 ({{ getTotalComments() }})</text>
+			</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 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)">
-									{{ getChildCount(comment) }}条回复{{ foldedComments.includes(comment.id) ? '展开' : '折叠' }}
+				<view v-for="comment in flatComments" :key="comment.id" class="comment-item"
+					:class="{'is-reply': comment.toUserName}">
+					<view class="comment-header">
+						<image class="avatar" :src="comment.pusherPortrait" mode="aspectFill"></image>
+						<view class="comment-user-info">
+							<text class="username">{{ comment.pusherName }}</text>
+							<view class="meta-info">
+								<text v-if="comment.toUserName" class="reply-to">
+									回复 {{ comment.toUserName }}
 								</text>
+								<text class="time">{{ formatTime(comment.createdAt) }}</text>
 							</view>
 						</view>
 					</view>
+
+					<view class="comment-content">{{ comment.content }}</view>
+
+					<view class="comment-actions">
+						<!-- <view class="action-item" @click="toggleLike(comment.id)">
+                            <text class="action-icon">{{ comment.isLiked ? '👍' : '👎' }}</text>
+                            <text class="action-count">{{ comment.likeCount || 0 }}</text>
+                        </view> -->
+						<view class="action-item" @click="handleReply(comment.id)">
+							<text class="action-text">回复</text>
+						</view>
+					</view>
 				</view>
 			</view>
+
+			<!-- 加载更多 -->
+			<view class="load-more" v-if="showLoadMore && !loading" @click="loadMoreComments">
+				<text>加载更多</text>
+			</view>
 		</view>
 
 		<!-- 新评论输入框 -->
 		<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" />
@@ -83,724 +81,523 @@
 	</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: {
-      // 检查用户是否已登录
-      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>
+	import { get, post } from '@/utils/request';
+	import { formatTime } from '@/utils/timeFormat';
+	import { IMAGE_BASE_URL,BASE_URL } from '@/utils/config';
+	export default {
+		data() {
+			return {
+				IMAGE_BASE_URL,
+				Id: '',
+				flatComments: [],
+				newComment: "",
+				replyingTo: null,
+				postData: {
+					histories: []
+				},
+				loading: false,
+				error: '',
+				submitting: false,
+				foldedComments: [],
+				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: {
+			// 扁平化评论结构（核心修改）
+			updateFlatComments() {
+				const flattenComments = (comments, parentUser = '') => {
+					return comments.reduce((arr, comment) => {
+						// 添加回复关系和点赞状态
+						const newComment = {
+							...comment,
+							toUserName: parentUser,
+							isLiked: false,
+							likeCount: comment.likeCount || 0
+						};
+
+						arr.push(newComment);
+
+						if (comment.children && comment.children.length) {
+							arr.push(...flattenComments(comment.children, comment.pusherName));
+						}
+
+						return arr;
+					}, []);
+				};
+				this.flatComments = flattenComments(this.postData.histories || []);
+			},
+
+			// 检查用户是否已登录
+			checkLogin() {
+				const token = uni.getStorageSync('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;
+
+				const fullImageUrls = this.postData.images.map(imagePath => {
+					return IMAGE_BASE_URL + imagePath;
+				});
+
+				uni.previewImage({
+					current: index,
+					urls: fullImageUrls // 传递完整的 URL 数组
+				});
+			},
+
+			// 切换点赞状态
+			toggleLike(commentId) {
+				const comment = this.flatComments.find(item => item.id === commentId);
+				if (comment) {
+					comment.isLiked = !comment.isLiked;
+					comment.likeCount += comment.isLiked ? 1 : -1;
+				}
+			},
+
+			// 加载更多评论
+			loadMoreComments() {
+				this.currentPage++;
+				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() {
+				return this.flatComments.length;
+			},
+
+			// 提交评论/回复
+			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 comment = this.flatComments.find(item => item.id === commentId);
+				return comment ? comment.pusherName : '';
+			}
+		}
+	};
 </script>
-<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 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: 32rpx;
-    background-color: $bg-color;
-    /* 增加底部内边距，确保内容不被输入框遮挡 */
-    padding-bottom: 240rpx;
-    min-height: 100vh;
-    box-sizing: border-box;
-  }
-
-  /* 主帖样式优化 */
-  .post-container {
-    background-color: white;
-    border-radius: $radius-lg;
-    padding: 48rpx;
-    margin-bottom: 40rpx;
-    box-shadow: $shadow-sm;
-    transition: $transition;
-    border: 1rpx solid $border-color;
-
-    &:hover {
-      box-shadow: $shadow-md;
-      transform: translateY(-1rpx);
-    }
-
-    &:active {
-      transform: translateY(0);
-    }
-  }
-
-  .post-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 40rpx;
-  }
-
-  .avatar {
-    width: 96rpx;
-    height: 96rpx;
-    border-radius: 50%;
-    margin-right: 32rpx;
-    border: 2rpx 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: 32rpx;
-    font-weight: 600;
-    color: $text-color;
-    line-height: 1.5;
-  }
-
-  .time {
-    font-size: 26rpx;
-    color: $light-text;
-    line-height: 1.5;
-  }
-
-  .post-content {
-    .title {
-      font-size: 36rpx;
-      font-weight: 600;
-      color: #1a1a1a;
-      margin-bottom: 32rpx;
-      display: block;
-      line-height: 1.6;
-      letter-spacing: -0.01em;
-    }
-
-    .content-text {
-      font-size: 30rpx;
-      color: $text-color;
-      line-height: 1.7;
-      margin-bottom: 40rpx;
-      display: block;
-      word-break: break-word;
-    }
-  }
-
-  .images {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 24rpx;
-    margin-top: 32rpx;
-  }
-
-  .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: 600rpx;
-    }
-
-    &.double-img {
-      width: calc(50% - 12rpx);
-      height: 360rpx;
-    }
-
-    &.multi-img {
-      width: calc(33.33% - 16rpx);
-      height: 240rpx;
-    }
-  }
-
-  /* 评论区样式优化 */
-  .comments-container {
-    background-color: white;
-    border-radius: $radius-lg;
-    padding: 0 40rpx;
-    margin-bottom: 32rpx;
-    box-shadow: $shadow-sm;
-    border: 1rpx solid $border-color;
-  }
-
-  .comments-title {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: $text-color;
-    padding: 40rpx 0;
-    border-bottom: 1rpx solid $border-color;
-    position: relative;
-
-    &::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      bottom: -1rpx;
-      width: 80rpx;
-      height: 4rpx;
-      background-color: $primary-color;
-    }
-  }
-
-  .comments-list {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .comment-item {
-    position: relative;
-    padding: 20rpx 0;
-    transition: $transition;
-    margin-bottom: 8rpx;
-    
-    &:not(:last-child) {
-      border-bottom: 1rpx solid rgba($border-color, 0.5);
-    }
-
-    &:hover {
-      background-color: rgba($primary-light, 0.2);
-      border-radius: $radius-md;
-    }
-  }
-
-  .comment-level-indicator {
-    position: absolute;
-    top: 70rpx;
-    width: 4rpx;
-    background-color: rgba($border-color, 0.5);
-    left: calc(60rpx + var(--indent) - 40rpx);
-    height: calc(100% - 70rpx);
-  }
-
-  .comment-content-wrapper {
-    display: flex;
-    align-items: flex-start;
-    padding-left: var(--indent);
-  }
-
-  .comment-avatar {
-    width: 64rpx;
-    height: 64rpx;
-    border-radius: 50%;
-    margin-right: 24rpx;
-    flex-shrink: 0;
-    background-color: #f5f5f5;
-    border: 1rpx solid $border-color;
-    transition: $transition;
-
-    &:hover {
-      transform: scale(1.1);
-    }
-  }
-
-  .comment-main {
-    flex: 1;
-    padding-top: 0;
-  }
-
-  .comment-meta {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8rpx;
-  }
-
-  .comment-username {
-    font-size: 28rpx;
-    color: $text-color;
-    font-weight: 500;
-  }
-
-  .comment-time {
-    font-size: 24rpx;
-    color: $light-text;
-  }
-
-  .comment-text {
-    font-size: 28rpx;
-    color: $text-color;
-    line-height: 1.6;
-    margin-bottom: 12rpx;
-    padding: 8rpx 0;
-    word-break: break-word;
-  }
-
-  .comment-actions {
-    display: flex;
-    align-items: center;
-    gap: 32rpx;
-    padding: 4rpx 0;
-  }
-
-  .reply-btn,
-  .fold-btn {
-    font-size: 24rpx;
-    color: $primary-color;
-    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);
-    }
-
-    &:active {
-      transform: scale(0.95);
-    }
-  }
-
-  .fold-btn {
-    color: $light-text;
-    background-color: rgba($light-text, 0.05);
-    
-    &:hover {
-      background-color: rgba($light-text, 0.1);
-    }
-  }
-
-  /* 评论输入框样式优化 */
-  .comment-input-container {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: white;
-    padding: 24rpx 32rpx;
-    border-top: 1rpx solid $border-color;
-    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
-    z-index: 100;
-  }
-
-  .replying-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16rpx 24rpx;
-    background-color: $primary-light;
-    border-radius: $radius-md;
-    margin-bottom: 16rpx;
-    font-size: 26rpx;
-  }
-
-  .replying-text {
-    color: $primary-color;
-    font-weight: 500;
-  }
-
-  .cancel-reply {
-    color: $primary-color;
-    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.2);
-    }
-  }
-
-  .input-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 16rpx;
-  }
-
-  .comment-input {
-    flex: 1;
-    height: 88rpx;
-    padding: 0 32rpx;
-    font-size: 28rpx;
-    border: 1rpx solid $border-color;
-    border-radius: 48rpx;
-    background-color: #f5f5f5;
-    transition: $transition;
-    outline: none;
-
-    &:focus {
-      border-color: $primary-color;
-      background-color: #fff;
-      box-shadow: 0 0 0 4rpx rgba($primary-color, 0.1);
-    }
-
-    &::placeholder {
-      color: #a0aec0;
-    }
-  }
-
-  .send-btn {
-    min-width: 140rpx;
-    height: 88rpx;
-    background-color: $primary-color;
-    color: white;
-    border: none;
-    border-radius: 48rpx;
-    font-size: 28rpx;
-    font-weight: 500;
-    transition: $transition;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 32rpx;
-
-    &: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: 32rpx 0;
-    color: $light-text;
-    font-size: 28rpx;
-    cursor: pointer;
-    transition: $transition;
-
-    &:hover {
-      color: $primary-color;
-    }
-
-    text {
-      margin-right: 16rpx;
-    }
-  }
-
-  /* 添加一些动画效果 */
-  @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20rpx); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  .comment-item {
-    animation: fadeIn 0.3s ease-out forwards;
-  }
-
-  /* 响应式调整 */
-  @media (max-width: 480px) {
-    .content {
-      padding: 24rpx;
-      padding-bottom: 220rpx;
-    }
-    
-    .post-container {
-      padding: 32rpx;
-    }
-    
-    .comment-input-container {
-      padding: 24rpx;
-    }
-    
-    .comment-item {
-      padding: 16rpx 0;
-      margin-bottom: 8rpx;
-    }
-    
-    .comment-avatar {
-      width: 56rpx;
-      height: 56rpx;
-    }
-    
-    .comment-text {
-      font-size: 26rpx;
-    }
-  }
+
+<style lang="scss">
+	/* 基础变量定义 */
+	$primary-color: #3881FF;
+	$text-color: #333;
+	$light-text: #999;
+	$border-color: #eee;
+	$bg-color: #f8f8f8;
+	$radius-md: 16rpx;
+	$radius-sm: 8rpx;
+	$spacing-lg: 32rpx;
+	$spacing-md: 24rpx;
+	$spacing-sm: 16rpx;
+
+	.content {
+		padding: $spacing-lg;
+		background-color: white;
+		padding-bottom: 240rpx;
+		min-height: 100vh;
+		box-sizing: border-box;
+	}
+
+	/* 主帖样式 */
+	.post-container {
+		background-color: white;
+		padding: 0 0 $spacing-lg 0;
+		margin-bottom: $spacing-lg;
+		border-bottom: 1rpx solid $border-color;
+
+		.post-header {
+			display: flex;
+			align-items: center;
+			margin-bottom: $spacing-md;
+
+			.avatar {
+				width: 96rpx;
+				height: 96rpx;
+				border-radius: 50%;
+				margin-right: $spacing-md;
+			}
+
+			.post-info {
+				flex: 1;
+
+				.username {
+					font-size: 32rpx;
+					font-weight: 600;
+					color: $text-color;
+					display: block;
+					margin-bottom: 8rpx;
+				}
+
+				.time {
+					font-size: 24rpx;
+					color: $light-text;
+				}
+			}
+		}
+
+		.post-content {
+			.title {
+				font-size: 36rpx;
+				font-weight: 600;
+				color: $text-color;
+				margin-bottom: $spacing-md;
+				display: block;
+				line-height: 1.4;
+			}
+
+			.content-text {
+				font-size: 30rpx;
+				color: $text-color;
+				line-height: 1.6;
+				margin-bottom: $spacing-lg;
+			}
+
+			.images {
+				display: flex;
+				flex-wrap: wrap;
+				gap: $spacing-sm;
+
+				.post-image {
+					border-radius: $radius-md;
+					background-color: $bg-color;
+
+					&.single-img {
+						width: 100%;
+						height: 600rpx;
+					}
+
+					&.double-img {
+						width: calc(50% - 8rpx);
+						height: 360rpx;
+					}
+
+					&.multi-img {
+						width: calc(33.33% - 10.67rpx);
+						height: 240rpx;
+					}
+				}
+			}
+		}
+	}
+
+	/* 评论区样式（核心修改） */
+	.comments-container {
+		background-color: white;
+		padding: 0;
+
+		.section-header {
+			padding: $spacing-md 0;
+			border-bottom: 1rpx solid $border-color;
+			margin-bottom: $spacing-md;
+
+			.section-title {
+				font-size: 32rpx;
+				font-weight: 600;
+				color: $text-color;
+			}
+		}
+
+		.comments-list {
+			.comment-item {
+				padding: $spacing-md 0;
+				border-bottom: 1rpx solid $border-color;
+
+				&.is-reply {
+					margin-left: 80rpx;
+					/* 回复评论缩进 */
+					padding-left: $spacing-md;
+					background-color: rgba(248, 248, 248, 0.5);
+					border-radius: $radius-md;
+					margin-bottom: $spacing-sm;
+				}
+
+				.comment-header {
+					display: flex;
+					align-items: center;
+					margin-bottom: $spacing-sm;
+
+					.avatar {
+						width: 72rpx;
+						height: 72rpx;
+						border-radius: 50%;
+						margin-right: $spacing-sm;
+					}
+
+					.comment-user-info {
+						flex: 1;
+
+						.username {
+							font-size: 28rpx;
+							font-weight: 600;
+							color: $text-color;
+							display: block;
+							margin-bottom: 4rpx;
+						}
+
+						.meta-info {
+							display: flex;
+							align-items: center;
+
+							.reply-to {
+								font-size: 24rpx;
+								color: $primary-color;
+								margin-right: $spacing-sm;
+							}
+
+							.time {
+								font-size: 24rpx;
+								color: $light-text;
+							}
+						}
+					}
+				}
+
+				.comment-content {
+					font-size: 28rpx;
+					color: $text-color;
+					line-height: 1.5;
+					margin-bottom: $spacing-sm;
+					padding-left: 88rpx;
+					/* 与头像对齐 */
+				}
+
+				.comment-actions {
+					display: flex;
+					gap: $spacing-lg;
+					padding-left: 88rpx;
+					/* 与头像对齐 */
+
+					.action-item {
+						display: flex;
+						align-items: center;
+						color: $light-text;
+						font-size: 24rpx;
+
+						.action-icon {
+							margin-right: 8rpx;
+						}
+
+						&:active {
+							opacity: 0.7;
+						}
+					}
+				}
+			}
+		}
+
+		/* 加载更多 */
+		.load-more {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: $spacing-lg 0;
+			color: $light-text;
+			font-size: 28rpx;
+			cursor: pointer;
+
+			&:active {
+				color: $primary-color;
+			}
+		}
+	}
+
+	/* 底部输入区 */
+	.comment-input-container {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-color: white;
+		padding: $spacing-md;
+		border-top: 1rpx solid $border-color;
+		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
+		z-index: 100;
+
+		.replying-bar {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: $spacing-sm $spacing-md;
+			background-color: $bg-color;
+			border-radius: $radius-md;
+			margin-bottom: $spacing-sm;
+			font-size: 26rpx;
+
+			.replying-text {
+				color: $primary-color;
+				font-weight: 500;
+			}
+
+			.cancel-reply {
+				color: $primary-color;
+				padding: 8rpx 16rpx;
+				border-radius: $radius-sm;
+				cursor: pointer;
+
+				&:active {
+					opacity: 0.7;
+				}
+			}
+		}
+
+		.input-wrapper {
+			display: flex;
+			align-items: center;
+			gap: $spacing-md;
+
+			.comment-input {
+				flex: 1;
+				height: 80rpx;
+				background-color: $bg-color;
+				border-radius: 40rpx;
+				padding: 0 $spacing-md;
+				font-size: 28rpx;
+			}
+
+			.send-btn {
+				background-color: $primary-color;
+				color: white;
+				font-size: 28rpx;
+				padding: 16rpx 32rpx;
+				border-radius: 40rpx;
+				min-width: 120rpx;
+				text-align: center;
+
+				&:disabled {
+					opacity: 0.5;
+				}
+
+				&:active {
+					opacity: 0.8;
+				}
+			}
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/pages/serviceTickets/index.vue b/pages/serviceTickets/index.vue
index 313bf4b..2dc96f4 100644
--- a/pages/serviceTickets/index.vue
+++ b/pages/serviceTickets/index.vue
@@ -1,6 +1,37 @@
 <template>
 	<view class="container">
 		<view class="content">
+			<!-- 选择区域 -->
+			<view class="form-item">
+				<view class="label" @click="showSelect = true" style="margin-bottom: 0;">
+					<u-icon name="list" color="#3B8CFF" size="38"></u-icon>
+					选择区域
+					<view class="select-box">
+						{{ workOrderArea || '请选择' }}
+						<u-icon name="arrow-down" color="#999" size="30"></u-icon>
+					</view>
+				</view>
+				<u-picker :show="showSelect" :columns="areaList" keyName="label" @confirm="handleConfirm"
+					@cancel="handleCancel">
+				</u-picker>
+			</view>
+			
+			<!-- 工单分类 -->
+			<view class="form-item">
+				<view class="label" @click="showSelect = true" style="margin-bottom: 0;">
+					<u-icon name="list" color="#3B8CFF" size="38"></u-icon>
+					工单类型
+					<view class="select-box">
+						{{ workOrderCategory || '请选择' }}
+						<u-icon name="arrow-down" color="#999" size="30"></u-icon>
+					</view>
+				</view>
+				<u-picker :show="showSelect" :columns="categoryList" keyName="label" @confirm="handleConfirm"
+					@cancel="handleCancel">
+				</u-picker>
+			</view>
+			
+			
 			<view class="form-item">
 				<view class="label">
 					<u-icon name="order" color="#3B8CFF" size="38"></u-icon>
@@ -44,21 +75,7 @@
 				<text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text>
 			</view>
 
-			<!-- 工单分类 -->
-			<view class="form-item">
-				<view class="label" @click="showSelect = true">
-					<u-icon name="list" color="#3B8CFF" size="38"></u-icon>
-					工单类型
-					<view class="select-box">
-						{{ workOrderCategory || '请选择' }}
-						<u-icon name="arrow-down" color="#999" size="30"></u-icon>
-					</view>
-				</view>
-				<u-picker :show="showSelect" :columns="categoryList" keyName="label" @confirm="handleConfirm"
-					@cancel="handleCancel">
-				</u-picker>
-			</view>
-
+			
 			<!-- 工单地点 -->
 			<view class="form-item">
 				<view class="label">