diff --git a/manifest.json b/manifest.json
index 7194ea0..841ce0a 100644
--- a/manifest.json
+++ b/manifest.json
@@ -59,6 +59,12 @@
         },
         "usingComponents" : true,
         "requiredPrivateInfos": ["getLocation"],
+		"optimization" : {
+		    "minify": {
+		        "js": true,
+		        "css": true
+		    }
+		},
         "permission" : {
             "scope.userLocation" : {
                 "desc" : "你的位置信息将用于获取周边服务"
diff --git a/pages.json b/pages.json
index 0b127f5..21380d6 100644
--- a/pages.json
+++ b/pages.json
@@ -203,13 +203,6 @@
 				"usingComponents": {}
 			}
 		},
-		// {
-		// 	"path" : "pages/meetingDetail/ceshi/ceshi",
-		// 	"style" : 
-		// 	{
-		// 		"navigationBarTitleText" : ""
-		// 	}
-		// },
 		{
 			"path": "pages/sign/sign",
 			"style": {
diff --git a/pages/activeDetail/index.vue b/pages/activeDetail/index.vue
index dd91b96..21b3144 100644
--- a/pages/activeDetail/index.vue
+++ b/pages/activeDetail/index.vue
@@ -1,554 +1,451 @@
 <template>
-  <view class="activity-detail-container">
-    <!-- 顶部图片轮播 -->
-    <swiper class="activity-banner" :autoplay="false" indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#5b9cf8">
-      <swiper-item v-for="(img, index) in bannerImages" :key="index">
-        <image 
-          :src="img" 
-          mode="aspectFill" 
-          class="w-full h-full"
-          @click="previewImage(index)"
-        />
-      </swiper-item>
-    </swiper>
-    
-    <!-- 活动基本信息 -->
-    <view class="activity-base-info">
-      <view class="title-box">
-        <text class="title">{{activityInfo.title}}</text>
-        <view class="status-tag active" v-if="activityInfo.status === 2">
-          {{'未开始'}}
-        </view>
-		<view class="status-tag active" v-else-if="activityInfo.status === 3">
-		  {{'进行中'}}
+	<view class="activity-detail-container">
+		<!-- 顶部图片轮播 -->
+		<view class="banner-container">
+			<swiper class="activity-banner" :autoplay="false" indicator-dots indicator-color="rgba(255,255,255,0.5)"
+				indicator-active-color="#5b9cf8">
+				<swiper-item v-for="(img, index) in bannerImages" :key="index">
+					<image :src="img"  class="w-full h-full" @click="previewImage(index)" />
+				</swiper-item>
+			</swiper>
+			<view class="banner-mask"></view>
 		</view>
-		<view class="status-tag active" v-else="activityInfo.status === 4">
-		  {{'已结束'}}
+
+		<!-- 活动基本信息 -->
+		<view class="activity-base-info">
+			<view class="title-box">
+				<text class="title">{{activityInfo.title}}</text>
+				<view class="status-tag active" v-if="activityInfo.status === 2">
+					{{'未开始'}}
+				</view>
+				<view class="status-tag active" v-else-if="activityInfo.status === 3">
+					{{'进行中'}}
+				</view>
+				<view class="status-tag active" v-else="activityInfo.status === 4">
+					{{'已结束'}}
+				</view>
+			</view>
+
+			<view class="info-grid">
+			  <view class="info-item">
+			    <u-icon name="star" size="26" color="#5b9cf8"></u-icon>
+			    <view class="info-text"><text class="info-label">活动类型：</text>{{activityInfo.categoryName || '待确认'}} </view>
+			  </view>
+			
+			  <view class="info-item">
+			    <u-icon name="clock" size="26" color="#5b9cf8"></u-icon>
+			    <view class="info-text"><text class="info-label">活动时间：</text>{{ activityInfo.openAt }}</view>
+			  </view>
+			  
+			  <view class="info-item">
+			    <u-icon name="clock-fill" size="26" color="#ff5a5f"></u-icon>
+			    <view class="info-text"><text class="info-label">结束时间：</text>{{ formatTime(activityInfo.endAt,"YYYY-MM-DD HH:mm:ss") }}</view>
+			  </view>
+			  
+			  <view class="info-item highlight">
+			    <u-icon name="warning" size="26" color="#ff9500"></u-icon>
+			    <view class="info-text"><text class="info-label">报名截止：</text>{{ formatTime(activityInfo.endSignupAt,"YYYY-MM-DD HH:mm:ss") }}</view>
+			  </view>
+			</view>
 		</view>
-      </view>
-      
-      <view class="info-grid">
-		<view class="info-item">
-		    <u-icon name="star" size="24" color="#5b9cf8"></u-icon>
-		    <view class="info-text"><text>活动类型：</text>{{activityInfo.categoryName || '待确认'}} </view>
+
+		<!-- 活动详情卡片 -->
+		<view class="detail-card">
+			<view class="detail-section">
+				<view class="section-title">
+					<view class="title-icon"></view>
+					<text>活动详情</text>
+				</view>
+				<view class="section-content rich-text">
+					<rich-text :nodes="activityInfo.content"></rich-text>
+					<!-- <image src="/static/route-map.jpg" mode="widthFix" class="route-map"
+						@click="previewImage(bannerImages.length)"></image> -->
+				</view>
+			</view>
 		</view>
-        
-        <view class="info-item">
-           <u-icon name="map" size="24" color="#5b9cf8"></u-icon>
-           <view class="info-text"><text>活动地址：</text>{{activityInfo.address || '待定'}}</view>
-        </view>
-		<view class="info-item">
-		  <u-icon name="clock" size="24" color="#5b9cf8"></u-icon>
-		  <view class="info-text">{{ activityInfo.openAt }}</view>
+
+		<!-- 底部操作栏 -->
+		<view class="action-bar safe-area-inset-bottom">
+			<button class="share-btn" open-type="share">
+				<u-icon name="share" size="32" color="#fff"></u-icon>
+				<text class="share-text">分享</text>
+			</button>
+			<button class="signup-btn" @click="handleSignUp">立即报名</button>
 		</view>
-    <!--    <view class="info-item">
-          <u-icon name="account" size="18" color="#36CFC9"></u-icon>
-          <text class="info-text">已报名 {{activityInfo.participants}}人</text>
-        </view> -->
-       
-      </view>
-    </view>
-    
-    <!-- 活动详情卡片 -->
-    <view class="detail-card">
-<!--      <view class="card-header">
-        <view class="header-line"></view>
-        <text class="header-title">活动详情</text>
-      </view> -->
-      
-      <view class="detail-section">
-        <view class="section-title">
-          <view class="title-icon"></view>
-          <text>活动详情</text>
-        </view>
-        <view class="section-content">
-          <view v-html="activityInfo.content"></view>
-          <image 
-            src="/static/route-map.jpg" 
-            mode="widthFix" 
-            class="route-map"
-            @click="previewImage(bannerImages.length)"
-          ></image>
-        </view>
-      </view>
-      
-     <!-- <view class="detail-section">
-        <view class="section-title">
-          <view class="title-icon"></view>
-          <text>活动流程</text>
-        </view>
-        <view class="timeline">
-          <view class="timeline-item" v-for="(step, index) in timeline" :key="index">
-            <view class="timeline-dot" :style="{backgroundColor: dotColors[index]}"></view>
-            <view class="timeline-content">
-              <text class="timeline-time">{{step.time}}</text>
-              <text class="timeline-desc">{{step.desc}}</text>
-            </view>
-          </view>
-        </view>
-      </view> -->
-      
-      <!-- <view class="detail-section">
-        <view class="section-title">
-          <view class="title-icon"></view>
-          <text>积分规则</text>
-        </view>
-        <view class="point-rules">
-          <view class="rule-item" v-for="(rule, index) in pointRules" :key="index">
-            <view class="rule-icon">
-              <text>{{index + 1}}</text>
-            </view>
-            <text class="rule-text">{{rule}}</text>
-          </view>
-        </view>
-      </view> -->
-    </view>
-    
-    <!-- 温馨提示 -->
-    <!-- <view class="tips-card">
-      <view class="card-header">
-        <view class="header-line"></view>
-        <text class="header-title">温馨提示</text>
-      </view>
-      <view class="tips-content">
-        <text class="tip-item" v-for="(tip, index) in tips" :key="index">
-          {{tip}}
-        </text>
-      </view>
-    </view> -->
-    
-    <!-- 底部操作栏 -->
-    <view class="action-bar">
-    <!--  <view class="action-btn favorite" @click="toggleFavorite">
-        <u-icon :name="isFavorite ? 'heart-fill' : 'heart'" size="24" :color="isFavorite ? '#FF5A5F' : '#666'"></u-icon>
-        <text>收藏</text>
-      </view> -->
-      <view class="action-btn share" @click="shareActivity">
-        <u-icon name="share" size="30" color="#666"></u-icon>
-        <text>分享</text>
-      </view>
-      <button class="signup-btn" @click="handleSignUp" >
-       立即报名
-      </button>
-    </view>
-  </view>
+	</view>
 </template>
 
 <script>
-import { get, post } from '@/utils/request';
-import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
-import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
-export default {
-  data() {
-    return {
-	  formatTime,
-	  IMAGE_BASE_URL,
-	  Id:null,
-      isFavorite: false,
-      isSignedUp: false,
-      bannerImages: [],
-      activityInfo: {},
-      // timeline: [
-      //   {time: '19:00-19:20', desc: '签到领取装备'},
-      //   {time: '19:20-19:30', desc: '热身运动'},
-      //   {time: '19:30-20:15', desc: '集体夜跑'},
-      //   {time: '20:15-20:30', desc: '拉伸放松'}
-      // ],
-      // pointRules: [
-      //   '完成全程跑步可获得50积分',
-      //   '连续参加4次额外奖励100积分',
-      //   '邀请好友参加每人奖励30积分',
-      //   '积分每月1日清零，请及时兑换'
-      // ],
-      // tips: [
-      //   '建议穿着舒适运动服装和跑鞋',
-      //   '活动前1小时请勿大量进食',
-      //   '请自带水杯，现场提供饮用水',
-      //   '如遇雨天，活动将延期举行',
-      //   '未成年人需家长陪同参加'
-      // ],
-      dotColors: ['#36CFC9', '#5AC8FA', '#FF9500', '#FF5A5F']
-    }
-  },
-  onLoad(options) { 
-  	if (options && options.Id) { 
-  		this.Id = options.Id;
-  	}
-  },
-  mounted(){
-	  this.getActivitiesDetail();
-  },
-  methods: {
-    toggleFavorite() {
-      this.isFavorite = !this.isFavorite
-      uni.showToast({
-        title: this.isFavorite ? '已收藏' : '已取消收藏',
-        icon: 'none'
-      })
-    },
- 
-	async handleSignUp(){
-		try {
-			const res = await get(`/api/v1/app_auth/activities/${this.Id}`);
-			if ( !res.success) {
+	import {
+		get,
+		post
+	} from '@/utils/request';
+	import {
+		IMAGE_BASE_URL,
+		BASE_URL
+	} from '@/utils/config';
+	import {
+		formatTime,
+		formatRelativeTime
+	} from '@/utils/timeFormat';
+	export default {
+		data() {
+			return {
+				formatTime,
+				IMAGE_BASE_URL,
+				Id: null,
+				isFavorite: false,
+				isSignedUp: false,
+				bannerImages: [],
+				activityInfo: {},
+				// timeline: [
+				//   {time: '19:00-19:20', desc: '签到领取装备'},
+				//   {time: '19:20-19:30', desc: '热身运动'},
+				//   {time: '19:30-20:15', desc: '集体夜跑'},
+				//   {time: '20:15-20:30', desc: '拉伸放松'}
+				// ],
+				// pointRules: [
+				//   '完成全程跑步可获得50积分',
+				//   '连续参加4次额外奖励100积分',
+				//   '邀请好友参加每人奖励30积分',
+				//   '积分每月1日清零，请及时兑换'
+				// ],
+				// tips: [
+				//   '建议穿着舒适运动服装和跑鞋',
+				//   '活动前1小时请勿大量进食',
+				//   '请自带水杯，现场提供饮用水',
+				//   '如遇雨天，活动将延期举行',
+				//   '未成年人需家长陪同参加'
+				// ],
+				dotColors: ['#36CFC9', '#5AC8FA', '#FF9500', '#FF5A5F']
+			}
+		},
+		onLoad(options) {
+			if (options && options.Id) {
+				this.Id = options.Id;
+			}
+		},
+		mounted() {
+			this.getActivitiesDetail();
+		},
+		methods: {
+			toggleFavorite() {
+				this.isFavorite = !this.isFavorite
 				uni.showToast({
-				  title: res.msg || '报名失败',
-				  icon: 'error'
+					title: this.isFavorite ? '已收藏' : '已取消收藏',
+					icon: 'none'
 				})
-			}else{
-				uni.showToast({
-				  title: '报名成功！',
-				  icon: 'success'
-				})	
-			}
-			
-		} catch (err) {
-			console.error('获取详情失败:', err);
-		}
-	},
-    shareActivity() {
-      uni.share({
-        title: this.activityInfo.title,
-        content: '一起来参加社区夜跑活动吧！',
-        href: '/pages/activity/detail',
-        imageUrl: this.bannerImages[0]
-      })
-    },
-    previewImage(index) {
-      uni.previewImage({
-        current: index,
-        urls: [...this.bannerImages, '/static/route-map.jpg']
-      })
-    },
-	async getActivitiesDetail(){
-		try {
-			const res = await get(`/api/v1/apps/home/activities/${this.Id}`);
-			if (!res || !res.success) {
-				throw new Error('获取详情失败');
-			}
-			let imgs = res.data.images;
-			imgs.forEach(item => {
-				if (!item.startsWith('http') && !item.startsWith('https')) {
-					item = IMAGE_BASE_URL + item;
-					this.bannerImages.push(item);
+			},
+
+			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);
 				}
-			});
-		    this.activityInfo = {...res.data};
-		} catch (err) {
-			console.error('获取详情失败:', err);
+			},
+			onShareAppMessage() {
+				return {
+					title: this.activityInfo.title,
+					path: `/pages/activity/detail?id=${this.Id}`,
+					imageUrl: this.bannerImages[0] || '/static/logo.png'
+				}
+			},
+			previewImage(index) {
+				uni.previewImage({
+					current: index,
+					urls: [...this.bannerImages, '/static/route-map.jpg']
+				})
+			},
+			async getActivitiesDetail() {
+				try {
+					const res = await get(`/api/v1/apps/home/activities/${this.Id}`);
+					if (!res || !res.success) {
+						throw new Error('获取详情失败');
+					}
+					let imgs = res.data.images;
+					imgs.forEach(item => {
+						if (!item.startsWith('http') && !item.startsWith('https')) {
+							item = IMAGE_BASE_URL + item;
+							this.bannerImages.push(item);
+						}
+					});
+					this.activityInfo = {
+						...res.data
+					};
+				} catch (err) {
+					console.error('获取详情失败:', err);
+				}
+
+			}
 		}
-		
 	}
-  }
-}
 </script>
 
 <style lang="scss" scoped>
-$primary-color: #5b9cf8;
-$secondary-color: #F7F8FA;
-$text-color: #333;
-$light-text: #666;
-$border-color: #eee;
-$border-radius: 16rpx;
-$shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
+	$primary-color: #5b9cf8;
+	$secondary-color: #f7f8fa;
+	$text-color: #333;
+	$light-text: #666;
+	$lighter-text: #999;
+	$border-color: #eee;
+	$border-radius: 16rpx;
+	$shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
+	$highlight-color: #fff8e6;
 
-.activity-detail-container {
-  padding-bottom: 120rpx;
-  background-color: $secondary-color;
-  
-  .activity-banner {
-    width: 100%;
-    height: 420rpx;
-    
-    image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  
-  .activity-base-info {
-    padding: 30rpx;
-    background-color: #fff;
-    margin-bottom: 20rpx;
-    box-shadow: $shadow;
-    
-    .title-box {
-      display: flex;
-      align-items: center;
-      margin-bottom: 30rpx;
-      
-      .title {
-        font-size: 36rpx;
-        font-weight: bold;
-        color: $text-color;
-        margin-right: 20rpx;
-      }
-      
-      .status-tag {
-        padding: 6rpx 16rpx;
-        border-radius: 30rpx;
-        font-size: 24rpx;
-        
-        &.active {
-          background-color: rgba($primary-color, 0.1);
-          color: $primary-color;
-        }
-      }
-    }
-    
-    .info-grid {
-      display: grid;
-      grid-template-columns: repeat(1, 1fr);
-      gap: 20rpx;
-      
-      .info-item {
-        display: flex;
-        align-items: center;
-        
-        .info-text {
-          font-size: 26rpx;
-          color: $light-text;
-          margin-left: 10rpx;
-        }
-      }
-    }
-  }
-  
-  .detail-card, .tips-card {
-    background-color: #fff;
-    border-radius: $border-radius;
-    padding: 30rpx;
-    margin: 0 20rpx 20rpx;
-    box-shadow: $shadow;
-    
-    .card-header {
-      display: flex;
-      align-items: center;
-      margin-bottom: 30rpx;
-      
-      .header-line {
-        width: 6rpx;
-        height: 32rpx;
-        background-color: $primary-color;
-        border-radius: 4rpx;
-        margin-right: 16rpx;
-      }
-      
-      .header-title {
-        font-size: 32rpx;
-        font-weight: bold;
-        color: $text-color;
-      }
-    }
-    
-    .detail-section {
-      margin-bottom: 40rpx;
-      
-      &:last-child {
-        margin-bottom: 0;
-      }
-      
-      .section-title {
-        display: flex;
-        align-items: center;
-        margin-bottom: 20rpx;
-        
-        .title-icon {
-          width: 8rpx;
-          height: 28rpx;
-          background-color: $primary-color;
-          border-radius: 4rpx;
-          margin-right: 12rpx;
-        }
-        
-        text {
-          font-size: 30rpx;
-          font-weight: bold;
-          color: $text-color;
-        }
-      }
-      
-      .section-content {
-        font-size: 28rpx;
-        color: $light-text;
-        line-height: 1.6;
-        
-        .route-map {
-          width: 100%;
-          margin-top: 20rpx;
-          border-radius: $border-radius;
-        }
-      }
-      
-      .timeline {
-        position: relative;
-        padding-left: 40rpx;
-        
-        &::before {
-          content: '';
-          position: absolute;
-          left: 15rpx;
-          top: 10rpx;
-          bottom: 10rpx;
-          width: 2rpx;
-          background-color: $border-color;
-        }
-        
-        .timeline-item {
-          position: relative;
-          padding-bottom: 30rpx;
-          
-          &:last-child {
-            padding-bottom: 0;
-          }
-          
-          .timeline-dot {
-            position: absolute;
-            left: -40rpx;
-            top: 4rpx;
-            width: 30rpx;
-            height: 30rpx;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 1;
-            
-            &::after {
-              content: '';
-              width: 10rpx;
-              height: 10rpx;
-              background-color: #fff;
-              border-radius: 50%;
-            }
-          }
-          
-          .timeline-content {
-            .timeline-time {
-              display: block;
-              font-size: 26rpx;
-              color: $primary-color;
-              font-weight: bold;
-              margin-bottom: 6rpx;
-            }
-            
-            .timeline-desc {
-              font-size: 28rpx;
-              color: $light-text;
-            }
-          }
-        }
-      }
-      
-      .point-rules {
-        .rule-item {
-          display: flex;
-          align-items: flex-start;
-          margin-bottom: 20rpx;
-          
-          &:last-child {
-            margin-bottom: 0;
-          }
-          
-          .rule-icon {
-            width: 36rpx;
-            height: 36rpx;
-            background-color: $primary-color;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-right: 16rpx;
-            flex-shrink: 0;
-            
-            text {
-              color: #fff;
-              font-size: 22rpx;
-              font-weight: bold;
-            }
-          }
-          
-          .rule-text {
-            font-size: 28rpx;
-            color: $light-text;
-            line-height: 1.5;
-          }
-        }
-      }
-    }
-    
-    .tips-content {
-      .tip-item {
-        display: block;
-        position: relative;
-        padding-left: 30rpx;
-        font-size: 28rpx;
-        color: $light-text;
-        line-height: 1.6;
-        margin-bottom: 16rpx;
-        
-        &::before {
-          content: '•';
-          position: absolute;
-          left: 0;
-          color: $primary-color;
-        }
-      }
-    }
-  }
-  
-  .action-bar {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 100rpx;
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    padding: 0 20rpx;
-    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
-    
-    .action-btn {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 120rpx;
-      height: 100%;
-      
-      text {
-        font-size: 22rpx;
-        color: $light-text;
-        margin-top: 6rpx;
-      }
-    }
-    
-    .signup-btn {
-      flex: 1;
-      height: 80rpx;
-      background-color: #5b9cf8;
-      color: #fff;
-      border-radius: 40rpx;
-      font-size: 32rpx;
-      font-weight: bold;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-left: 20rpx;
-	  
-      
-      &:active {
-        opacity: 0.9;
-      }
-    }
-  }
-}
+	.activity-detail-container {
+		padding-bottom: 160rpx;
+		background-color: $secondary-color;
+		color: $text-color;
+		
+		.banner-container {
+			position: relative;
+			height: 500rpx;
+			overflow: hidden;
+			
+			.activity-banner {
+				width: 100%;
+				height: 100%;
+			}
+			
+			.activity-banner image {
+			  width: 100%;
+			  height: 100%;
+			  display: block;
+			}
+			
+			.banner-mask {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				height: 120rpx;
+				background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
+			}
+		}
 
-@media (min-width: 768px) {
-  .activity-detail-container {
-    max-width: 750px;
-    margin: 0 auto;
-  }
-}
+		.activity-base-info {
+			padding: 30rpx;
+			margin: -40rpx 20rpx 20rpx;
+			background-color: #fff;
+			border-radius: $border-radius;
+			box-shadow: $shadow;
+			position: relative;
+			z-index: 2;
+
+			.title-box {
+				display: flex;
+				align-items: center;
+				margin-bottom: 30rpx;
+				padding-bottom: 20rpx;
+				border-bottom: 1rpx solid rgba($border-color, 0.8);
+
+				.title {
+					flex: 1;
+					font-size: 38rpx;
+					font-weight: bold;
+					line-height: 1.4;
+					margin-right: 20rpx;
+				}
+
+				.status-tag {
+					padding: 8rpx 20rpx;
+					border-radius: 30rpx;
+					font-size: 24rpx;
+					flex-shrink: 0;
+
+					&.active {
+						background-color: rgba($primary-color, 0.1);
+						color: $primary-color;
+					}
+				}
+			}
+
+			.info-grid {
+			  display: grid;
+			  grid-template-columns: repeat(1, 1fr);
+			  gap: 24rpx;
+			  
+			  .info-item {
+			    display: flex;
+			    align-items: center; /* 垂直居中 */
+			    
+			    &.highlight {
+			      background-color: #fff8e6;
+			      padding: 16rpx;
+			      border-radius: 12rpx;
+			      margin:0rpx -16rpx;
+			    }
+			    
+			    .u-icon {
+			      flex-shrink: 0; /* 防止图标被压缩 */
+			    }
+			    
+			    .info-text {
+			      font-size: 28rpx;
+			      line-height: 1.5;
+			      margin-left: 12rpx;
+			      display: flex;
+			      align-items: center; /* 确保内部文本垂直居中 */
+			      
+			      .info-label {
+			        color: #999;
+			        margin-right: 8rpx;
+			      }
+			    }
+			  }
+			}
+		}
+
+		.detail-card {
+			background-color: #fff;
+			border-radius: $border-radius;
+			padding: 30rpx;
+			margin: 0 20rpx 20rpx;
+			box-shadow: $shadow;
+
+			.detail-section {
+				margin-bottom: 40rpx;
+
+				.section-title {
+					display: flex;
+					align-items: center;
+					margin-bottom: 24rpx;
+					padding-bottom: 16rpx;
+					border-bottom: 1rpx solid rgba($border-color, 0.5);
+
+					.title-icon {
+						width: 8rpx;
+						height: 32rpx;
+						background-color: $primary-color;
+						border-radius: 4rpx;
+						margin-right: 16rpx;
+					}
+
+					text {
+						font-size: 32rpx;
+						font-weight: bold;
+					}
+				}
+
+				.section-content {
+					font-size: 30rpx;
+					line-height: 1.8;
+					color: $light-text;
+					
+					&.rich-text {
+						p {
+							margin-bottom: 24rpx;
+							line-height: 1.8;
+						}
+						
+						img {
+							max-width: 100%;
+							border-radius: 8rpx;
+							margin: 20rpx 0;
+						}
+					}
+
+					.route-map {
+						width: 100%;
+						margin-top: 30rpx;
+						border-radius: $border-radius;
+						box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
+					}
+				}
+			}
+		}
+
+		.action-bar {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			height: 120rpx;
+			background-color: #fff;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 30rpx;
+			box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
+			z-index: 100;
+			
+			// &.safe-area-inset-bottom {
+			// 	padding-bottom: env(safe-area-inset-bottom);
+			// }
+
+			.share-btn {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 160rpx;
+				height: 80rpx;
+				background: linear-gradient(135deg, #6e8cfa, #5b9cf8);
+				border-radius: 40rpx;
+				color: #fff;
+				font-size: 28rpx;
+				margin-right: 20rpx;
+				border: none;
+				box-shadow: 0 4rpx 12rpx rgba(91, 156, 248, 0.2);
+				transition: all 0.2s ease;
+
+				.share-text {
+					margin-left: 10rpx;
+				}
+
+				&:active {
+					transform: scale(0.98);
+					opacity: 0.9;
+				}
+			}
+			
+			.share-btn::after {
+				border: none;
+			}
+
+			.signup-btn {
+				flex: 1;
+				height: 80rpx;
+				background: linear-gradient(135deg, #ff7e5f, #ff5a5f);
+				color: #fff;
+				border-radius: 40rpx;
+				font-size: 32rpx;
+				font-weight: 500;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				box-shadow: 0 4rpx 12rpx rgba(255, 90, 95, 0.2);
+				transition: all 0.2s ease;
+				border: none;
+
+				&::after {
+					border: none;
+				}
+
+				&:active {
+					transform: scale(0.98);
+					opacity: 0.9;
+				}
+			}
+		}
+	}
+
+	@media (min-width: 768px) {
+		.activity-detail-container {
+			max-width: 750px;
+			margin: 0 auto;
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/pages/chat/index.vue b/pages/chat/index.vue
index 328e9fa..58ac98a 100644
--- a/pages/chat/index.vue
+++ b/pages/chat/index.vue
@@ -1,180 +1,216 @@
 <template>
-	
-	<view class="aiHelper">
-
-		<view class="aiHelperContainer">
-		
-			<view class="aiHelperTitle" :style="{'background-image': `url(${aiHelperTitleBackground})`}">{{aiHelperTitle}}</view>
-			<view class="aiBox">
-				<view class="aiType" v-for="(item,index) in aiType" :key="item.id" @click="goAiType(item)">
-					<view class="aiTypeContainer" :style="{'background-image': `url(${item.background})`}">
-						<view class="aiLeft" :style="{'background-image': `url(${item.imagePath})`}">
-							<view class="aiLeftTitle">{{item.name}}</view>
-						</view>
-						<view class="aiRight">
-							<view class="aiRightTitle"><text>{{item.description}}</text></view>
-							<view class="aiDescription"><text>开始对话></text></view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-
-       
-	   <view><Footer></Footer></view>
-		
-	</view>
-	
+    <view class="aiHelper">
+        <view class="aiHelperContainer">
+            <!-- 标题区域 -->
+            <view class="aiHelperTitle" :style="{'background-image': `url(${aiHelperTitleBackground})`}">
+                {{ aiHelperTitle }}
+            </view>
+            
+            <!-- AI类型卡片容器 -->
+            <view class="aiBox">
+                <view class="aiType" v-for="(item, index) in aiType" :key="item.id" @click="goAiType(item)">
+                    <view class="aiTypeContainer" :style="{'background-image': `url(${item.background})`}">
+                        <view class="aiLeft" :style="{'background-image': `url(${item.imagePath})`}">
+                            <view class="aiLeftTitle">{{ item.name }}</view>
+                        </view>
+                        <view class="aiRight">
+                            <view class="aiRightTitle"><text>{{ item.description }}</text></view>
+                            <view class="aiDescription"><text>开始对话></text></view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        
+        <view><Footer></Footer></view>
+    </view>
 </template>
 
 <script>
-	import Footer from '@/components/footer_common.vue';
-     import {get,post} from '@/utils/request';
-	 import {IMAGE_BASE_URL,BASE_URL} from '@/utils/config';
-	export default{
-		name:'aiHelper',
-		components:{Footer},
-		data(){
-			return{
-				aiHelperTitle:'AI智能助手',
-				aiHelperTitleBackground:'../../static/imgs/ai/title.png',
-				aiType:[],
-			}
-		},
-		mounted() {
-			this.getData();
-		},
-		methods:{
-			goAiType(item){
-				uni.navigateTo({
-				    url: `/pages/chat/chatPage?serviceUrl=${item.serviceUrl}&apiKey=${item.apiKey}&id=${item.id}&name=${item.name}&icon=${item.icon}`
-				});
-			},
-			async getData(){
-				let params = {
-					current: 1,
-					pageSize: 10,
-				};
-				try {
-					const res = await get('/api/v1/apps/ai_request', params);
-					if (!res || !res.success) {
-						throw new Error('获取AI助手失败');
-					}
-					if(res.data.length>0){
-						res.data.forEach((item)=>{
-							item.background=IMAGE_BASE_URL+item.background
-							item.imagePath=IMAGE_BASE_URL+item.imagePath
-							item.icon=IMAGE_BASE_URL+item.icon
-						})
-					}
-					this.aiType=res.data
-				} catch (err) {
-					console.error('获取AI助手失败:', err);
-				}
-			}
-		}
-		
-	}
+    import Footer from '@/components/footer_common.vue';
+    import { get, post } from '@/utils/request';
+    import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
+    export default {
+        name: 'aiHelper',
+        components: { Footer },
+        data() {
+            return {
+                aiHelperTitle: 'AI智能助手',
+                aiHelperTitleBackground: '../../static/imgs/ai/title.png',
+                aiType: [],
+            }
+        },
+        mounted() {
+            this.getData();
+        },
+        methods: {
+            goAiType(item) {
+                uni.navigateTo({
+                    url: `/pages/chat/chatPage?serviceUrl=${item.serviceUrl}&apiKey=${item.apiKey}&id=${item.id}&name=${item.name}&icon=${item.icon}`
+                });
+            },
+            async getData() {
+                let params = {
+                    current: 1,
+                    pageSize: 10,
+                };
+                try {
+                    const res = await get('/api/v1/apps/ai_request', params);
+                    if (!res || !res.success) {
+                        throw new Error('获取AI助手失败');
+                    }
+                    if (res.data.length > 0) {
+                        res.data.forEach((item) => {
+                            item.background = IMAGE_BASE_URL + item.background
+                            item.imagePath = IMAGE_BASE_URL + item.imagePath
+                            item.icon = IMAGE_BASE_URL + item.icon
+                        })
+                    }
+                    this.aiType = res.data
+                } catch (err) {
+                    console.error('获取AI助手失败:', err);
+                }
+            }
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
-	.aiHelper{
-		// margin-top: 90rpx;
-		.aiHelperContainer {
-		    padding: 2%;
-		    padding-bottom: 50%;
-		
-		    .aiHelperTitle {
-		        font-size: 1rem;
-		        font-weight: 600;
-		        letter-spacing: 0;
-		        line-height: 1.5;
-		        color: rgba(0, 0, 0, 1);
-		        text-align: center;
-		        vertical-align: top;
-		        margin-bottom: 3%;
-				// background-image: url('../../static/imgs/ai/title.png');
-				background-repeat: no-repeat;
-				background-position: 50% 80%;
-				 background-size: 30%;
-		    }
-		
-		    .aiBox {
-		        .aiType {
-		            margin-bottom: 3%;
-		            width: 100%;
-					height: 310rpx;
-		            display: flex;
-		            justify-content: center;
-		
-		            .aiTypeContainer {
-		                display: flex;
-		                margin: 1%;
-		                border-radius: 0.5rem;
-		                background-size: cover;
-						box-shadow: 4px 4px 4px  rgba(0, 0, 0, 0.25);
-		                background-position: 30% 50%;
-		                background-repeat: no-repeat;
-		                width: 96%;
-		                aspect-ratio: 2.1/1;
-		
-		                .aiLeft {
-		                    border-radius: 0.5rem;
-		                    padding: 5% 0;
-		                    margin-right: 12%;
-		                    background-size: cover;
-		                    background-position: center;
-		                    background-repeat: no-repeat;
-		                    width: 35%;
-		                    // height: 100%;
-		                   /* margin-left: -5%;*/
-		                    position: relative;
-		
-		                    .aiLeftTitle {
-		                        font-size: 0.8rem;
-		                        font-weight: 900;
-		                        letter-spacing: 0;
-		                        line-height: 1.4;
-		                        color: rgba(255, 255, 255, 1);
-		                        text-align: left;
-		                        position: absolute;
-		                        bottom: 10%;
-		                        left: 10%;
-		                    }
-		                }
-		
-		                .aiRight {
-		                    flex: 1;
-		                    display: flex;
-		                    flex-direction: column;
-		                    justify-content: normal;
-		
-		                    .aiRightTitle {
-		                        font-size: 0.8rem;
-		                        font-weight: 700;
-		                        letter-spacing: 0;
-		                        line-height: 1.4;
-		                        color: rgba(0, 0, 0, 1);
-		                        text-align: left;
-		                        margin-bottom: 5%;
-								margin-top: 22%;
-		                    }
-		
-		                    .aiDescription {
-		                        font-size: 26rpx;
-		                        font-weight: 700;
-		                        letter-spacing: 0;
-		                        line-height: 2.5;
-		                        color: #999;
-		                        text-align: right;
-								width: 90%;
-		                    }
-		                }
-		            }
-		        }
-		    }
-		}
-	}
-	
-	
+    // 引入变量和混入
+    // @import "@/styles/variables.scss"; // 假设你有这个文件，没有可以忽略
+    
+    .aiHelper {
+        // 使用安全区域适配，避免底部被遮挡
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+        
+        .aiHelperContainer {
+            padding: 30rpx; // 使用rpx单位适配不同屏幕
+            box-sizing: border-box; // 确保padding不会增加总宽度
+            
+            .aiHelperTitle {
+                font-size: 36rpx;
+                font-weight: 600;
+                color: #000;
+                text-align: center;
+                // padding: 20rpx 0 30rpx; // 增加底部内边距
+                background-repeat: no-repeat;
+                background-position: 50% 80%;
+                background-size: 30%;
+                line-height: 1.5;
+            }
+            
+            .aiBox {
+                // 增加容器内边距，避免卡片贴边
+                padding: 10rpx 0;
+                
+                .aiType {
+                    // 关键优化：使用固定间距代替百分比，确保不同设备一致
+                    margin-bottom: 30rpx; 
+                    width: 100%;
+                    display: flex;
+                    justify-content: center;
+                    
+                    .aiTypeContainer {
+                        display: flex;
+                        border-radius: 20rpx; // 更大的圆角更美观
+                        background-size: cover;
+                        background-position: 30% 50%;
+                        background-repeat: no-repeat;
+                        width: 100%;
+                        // 关键优化：使用固定高度代替aspect-ratio，避免变形
+                        height: 320rpx;
+                        box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15); // 更柔和的阴影
+                        overflow: hidden; // 防止内容溢出
+                        
+                        .aiLeft {
+                            border-radius: 16rpx;
+                            padding: 5% 0;
+                            margin-right: 12%;
+                            background-size: cover;
+                            background-position: center;
+                            background-repeat: no-repeat;
+                            width: 35%;
+                            position: relative;
+                            // 增加内边距，避免内容贴边
+                            padding: 20rpx;
+                            
+                            .aiLeftTitle {
+                                font-size: 30rpx;
+                                font-weight: 900;
+                                color: #fff;
+                                text-align: left;
+                                position: absolute;
+                                bottom: 20rpx;
+                                left: 20rpx;
+                                text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3); // 增加文字阴影提高可读性
+                            }
+                        }
+                        
+                        .aiRight {
+                            flex: 1;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            padding-right: 30rpx; // 增加右侧内边距
+                            
+                            .aiRightTitle {
+                                font-size: 30rpx;
+                                font-weight: 700;
+                                color: #000;
+                                text-align: left;
+                                margin-bottom: 20rpx;
+                                line-height: 1.5; // 增加行高，避免文字拥挤
+                                // 限制最大宽度，防止文字溢出
+                                max-width: 100%;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                display: -webkit-box;
+                                -webkit-line-clamp: 2;
+                                -webkit-box-orient: vertical;
+                            }
+                            
+                            .aiDescription {
+                                font-size: 26rpx;
+                                font-weight: 700;
+                                color: #999;
+                                text-align: right;
+                                width: 100%;
+                                padding-top: 10rpx;
+                                // 增加交互提示
+                                transition: color 0.3s ease;
+                            }
+                        }
+                    }
+                    
+                    // 增加hover效果，提升交互体验
+                    &:active .aiTypeContainer {
+                        transform: scale(0.98);
+                        transition: transform 0.2s ease;
+                    }
+                    
+                    &:active .aiDescription {
+                        color: #666;
+                    }
+                }
+            }
+        }
+    }
+    
+    // 响应式适配：针对不同屏幕尺寸调整
+    @media screen and (min-width: 750rpx) {
+        .aiTypeContainer {
+            height: 340rpx !important;
+        }
+    }
+    
+    @media screen and (max-width: 375rpx) {
+        .aiTypeContainer {
+            height: 280rpx !important;
+        }
+        
+        .aiRightTitle {
+            font-size: 28rpx !important;
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/pages/mine/index.vue b/pages/mine/index.vue
index 4231e67..fc8bb00 100644
--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@@ -85,12 +85,18 @@
 			</view>
 		</u-modal>
 
-		<u-modal :show="showPhoneDialog" title="联系社区" confirm-text="拨打" cancel-text="取消" @confirm="callCommunityPhone"
-			@cancel="showPhoneDialog = false">
-			<view class="phone-dialog-content">
-				<text>社区电话：</text>
-				<text class="phone-number">{{communityPhone}}</text>
-			</view>
+		<u-modal 
+		    :show="showPhoneDialog" 
+		    title="联系社区" 
+		    confirm-text="拨打" 
+		    cancel-text="取消" 
+		    @confirm="callCommunityPhone"
+		    @cancel="showPhoneDialog = false"
+		    :closeOnClickOverlay="true"> 
+		    <view class="phone-dialog-content">
+		        <text>社区电话：</text>
+		        <text class="phone-number">{{communityPhone}}</text>
+		    </view>
 		</u-modal>
 
 		<Footer></Footer>
@@ -157,8 +163,7 @@
 					{
 						key: 5,
 						url: "/static/imgs/service/service_notice.png",
-						name: '设置',
-						pageUrl: 'serviceNoticeList'
+						name: '设置'
 					},
 					{
 						key: 6,
@@ -174,6 +179,9 @@
 			this.initData();
 		},
 		methods: {
+			handleCloseModal() {
+				this.showPhoneDialog = false;
+			},
 			// 初始化数据
 			async initData() {
 				const token = uni.getStorageSync('token');
@@ -198,15 +206,18 @@
 
 			// 更新用户信息
 			updateUserInfo(data) {
+				// 显示时拼接IMAGE_BASE_URL
+				const avatarUrl = data.avatar ? `${IMAGE_BASE_URL}${data.avatar}` : '/static/imgs/index/nav.png';
+
 				this.userInfo = {
 					nickName: data.name || data.nickName || '未命名用户',
-					avatarUrl: data.avatar || data.avatarUrl || '/static/imgs/index/nav.png',
+					avatarUrl: avatarUrl,
 					bio: data.introduce || data.bio || '这家伙很懒，什么都没有写~',
 					phone: data.phone || ''
 				};
 
 				// 更新显示头像
-				this.displayAvatar = this.userInfo.avatarUrl || '/static/imgs/index/nav.png';
+				this.displayAvatar = this.userInfo.avatarUrl;
 
 				this.formData = {
 					name: this.userInfo.nickName,
@@ -367,13 +378,14 @@
 			// 登录完成处理
 			async loginComplete(data) {
 				try {
-					// 获取最新用户信息
+					// 获取最新用户信息
+					this.showEditModal = false;
 					const res = await get('/api/v1/app_auth/mine');
 					if (res && res.success) {
 						uni.setStorageSync('userInfo', res.data);
 						this.updateUserInfo(res.data);
 						this.isLogin = true;
-						this.showEditModal = false;
+						// this.showEditModal = false;
 						this.showPhoneButton = false;
 						uni.showToast({
 							title: '登录成功'
@@ -414,7 +426,7 @@
 						});
 					});
 
-					if (fileInfo.size > 2 * 1024 * 1024) {
+					if (fileInfo.size > 3 * 1024 * 1024) {
 						throw new Error('图片大小不能超过2MB');
 					}
 
@@ -452,7 +464,7 @@
 							try {
 								const res = JSON.parse(uploadRes.data);
 								if (res && res.success) {
-									resolve(`${IMAGE_BASE_URL}${res.data}`);
+									resolve(res.data);
 								} else {
 									reject(new Error(res.message || '上传失败'));
 								}
@@ -507,7 +519,12 @@
 					name,
 					bio
 				} = this.formData;
-				const avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
+				console.log("====", this.avatarList)
+				let avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
+
+				if (avatarUrl && avatarUrl.includes(IMAGE_BASE_URL)) {
+					avatarUrl = avatarUrl.replace(IMAGE_BASE_URL, '');
+				}
 
 				if (!name) {
 					uni.showToast({
@@ -535,12 +552,13 @@
 						// 3. 更新本地存储和页面数据
 						uni.setStorageSync('userInfo', res.data);
 						this.updateUserInfo(res.data);
+						this.showEditModal = false;
 
 						uni.hideLoading();
 						uni.showToast({
 							title: '修改成功'
 						});
-						this.showEditModal = false;
+
 					} else {
 						throw new Error(res.message || '获取用户信息失败');
 					}
@@ -559,10 +577,17 @@
 				this.showEditModal = false;
 			},
 
+			// 跳转页面
 			// 跳转页面
 			goPage(item) {
 				if (item.key === 6) { // 联系社区的特殊处理
 					this.handleContactCommunity();
+					
+					return;
+				}
+
+				if (item.key === 5) { // 设置的特殊处理
+					this.handleEditClick(); // 调用编辑用户信息的方法
 					return;
 				}
 
@@ -580,12 +605,22 @@
 
 			// 处理联系社区点击
 			handleContactCommunity() {
-				if (!this.checkLogin()) {
-					this.showEditModal = true;
-					return;
-				}
-
-				this.showPhoneDialog = true;
+				if (!this.checkLogin()) {
+				        this.showEditModal = true;
+				        return;
+				    }
+				    
+				uni.showModal({
+				    title: '联系社区',
+				    content: '是否要拨打社区电话：' + this.communityPhone,
+				    confirmText: '拨打',
+				    cancelText: '取消',
+				    success: (res) => {
+				        if (res.confirm) {
+				            this.callCommunityPhone();
+				        }
+				    }
+				});
 			},
 
 			// 拨打社区电话
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..be1bc58 100644
--- a/pages/serviceTickets/index.vue
+++ b/pages/serviceTickets/index.vue
@@ -1,6 +1,41 @@
 <template>
 	<view class="container">
 		<view class="content">
+			<!-- 选择区域 -->
+			<view class="form-item">
+				<view class="label" @click="showTypeSelect = 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="showTypeSelect" 
+					 :columns="areaList" 
+					 keyName="title"
+					 @confirm="handleTypeConfirm"
+					 @cancel="showTypeSelect = false">
+				</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 +79,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">
@@ -99,17 +120,22 @@
 				fileList: [],
 				workOrderCategory: '',
 				workOrderCategoryID: '',
+				workOrderArea:'',
+				workOrderAreaID:'',
 				showSelect: false,
+				showTypeSelect:false,
 				categoryList: [],
 				workOrderLocation: '',
 				expectedTime: '',
 				uploadedImages: [],
 				uploadedVideos: [],
-				videoFormats: ['mp4', 'mov', 'avi', 'wmv', 'mpeg', '3gp', 'flv', 'mkv']
+				videoFormats: ['mp4', 'mov', 'avi', 'wmv', 'mpeg', '3gp', 'flv', 'mkv'],
+				areaList:[],
 			};
 		},
 		mounted() {
 			this.getOrderList();
+	        this.getOrderTypeList();
 		},
 		methods: {
 			handleBack() {
@@ -281,6 +307,7 @@
 					concatName: this.concatName,  // 新增联系人姓名
 					customerPhone: this.customerPhone,  // 新增联系人电话
 					orderTypeId: this.workOrderCategoryID,
+					orderAreaId:this.workOrderAreaID,
 					address: this.workOrderLocation,
 					images: this.uploadedImages,
 					videos: this.uploadedVideos,
@@ -323,6 +350,8 @@
 				this.fileList = [];
 				this.uploadedImages = [];
 				this.uploadedVideos = [];
+				this.workOrderArea = '';
+				this.workOrderAreaID = '';
 			},
 
 			handleConfirm(e) {
@@ -330,6 +359,12 @@
 				this.workOrderCategoryID = e.value[0].id;
 				this.showSelect = false;
 			},
+			
+			handleTypeConfirm(e) {
+				this.workOrderArea = e.value[0].title;
+				this.workOrderAreaID = e.value[0].id;
+				this.showTypeSelect = false;
+			},
 
 			handleCancel() {
 				this.showSelect = false;
@@ -351,6 +386,24 @@
 					});
 				}
 			},
+			
+			// 获取工作区域
+			async getOrderTypeList(){
+				try {
+					const res = await get('/api/v1/apps/work-order-area');
+					if (res?.success) {
+						this.areaList = [
+							[...res.data]
+						]
+					}
+				} catch (err) {
+					console.error('获取工作区域失败:', err);
+					uni.showToast({
+						title: '获取工作区域失败',
+						icon: 'none'
+					});
+				}
+			}
 		}
 	};
 </script>
diff --git a/static/imgs/.DS_Store b/static/imgs/.DS_Store
index b562f3f..0ae3379 100644
Binary files a/static/imgs/.DS_Store and b/static/imgs/.DS_Store differ
diff --git a/static/imgs/ai/.DS_Store b/static/imgs/ai/.DS_Store
index 5008ddf..956311e 100644
Binary files a/static/imgs/ai/.DS_Store and b/static/imgs/ai/.DS_Store differ
diff --git a/static/imgs/ai/zhengceijiedu-background.png b/static/imgs/ai/zhengceijiedu-background.png
deleted file mode 100644
index 6c33f17..0000000
Binary files a/static/imgs/ai/zhengceijiedu-background.png and /dev/null differ
diff --git a/static/imgs/ai/zhengceijiedu.png b/static/imgs/ai/zhengceijiedu.png
deleted file mode 100644
index 3f344f4..0000000
Binary files a/static/imgs/ai/zhengceijiedu.png and /dev/null differ
diff --git a/static/imgs/footer/chat.png b/static/imgs/footer/chat.png
deleted file mode 100644
index 62f6883..0000000
Binary files a/static/imgs/footer/chat.png and /dev/null differ
diff --git a/static/imgs/footer/chat_bg.png b/static/imgs/footer/chat_bg.png
deleted file mode 100644
index 76cc0ae..0000000
Binary files a/static/imgs/footer/chat_bg.png and /dev/null differ
diff --git a/static/imgs/footer/home_bg.png b/static/imgs/footer/home_bg.png
deleted file mode 100644
index bb2d669..0000000
Binary files a/static/imgs/footer/home_bg.png and /dev/null differ
diff --git a/static/imgs/footer/mine_bg.png b/static/imgs/footer/mine_bg.png
deleted file mode 100644
index ceaa610..0000000
Binary files a/static/imgs/footer/mine_bg.png and /dev/null differ
diff --git a/static/imgs/footer/service..png b/static/imgs/footer/service..png
deleted file mode 100644
index 8b59c7e..0000000
Binary files a/static/imgs/footer/service..png and /dev/null differ
diff --git a/static/imgs/footer/service_bg.png b/static/imgs/footer/service_bg.png
deleted file mode 100644
index a3de70e..0000000
Binary files a/static/imgs/footer/service_bg.png and /dev/null differ
diff --git a/static/imgs/service/hema.png b/static/imgs/service/hema.png
deleted file mode 100644
index a6efa6f..0000000
Binary files a/static/imgs/service/hema.png and /dev/null differ
diff --git a/static/imgs/service/kfc.png b/static/imgs/service/kfc.png
deleted file mode 100644
index 07fc9a2..0000000
Binary files a/static/imgs/service/kfc.png and /dev/null differ
diff --git a/static/imgs/service/service_bg.png b/static/imgs/service/service_bg.png
deleted file mode 100644
index 989e1c5..0000000
Binary files a/static/imgs/service/service_bg.png and /dev/null differ
diff --git a/static/imgs/service/service_relation.png b/static/imgs/service/service_relation.png
deleted file mode 100644
index 2ae26d9..0000000
Binary files a/static/imgs/service/service_relation.png and /dev/null differ
diff --git a/static/imgs/service/service_vote.png b/static/imgs/service/service_vote.png
deleted file mode 100644
index 77370d8..0000000
Binary files a/static/imgs/service/service_vote.png and /dev/null differ
diff --git a/static/imgs/service/service_workorder.png b/static/imgs/service/service_workorder.png
deleted file mode 100644
index 614ebe5..0000000
Binary files a/static/imgs/service/service_workorder.png and /dev/null differ