From 1d16210f89422f673f6953263bafb28a1ea4017c Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Tue, 12 Aug 2025 16:47:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/gx-copyright.vue  |  56 +++---
 pages/index/index.vue        |  15 +-
 pages/mine/index.vue         |   2 +-
 pages/mySeekHelp/index.vue   | 334 ++++++++++++++++++++-------------
 pages/myTickets/index.vue    | 346 +++++++++++++++++++----------------
 pages/neighbor/index.vue     |   2 +-
 pages/neighborList/index.vue |   2 +-
 7 files changed, 431 insertions(+), 326 deletions(-)

diff --git a/components/gx-copyright.vue b/components/gx-copyright.vue
index 6911af2..3223e37 100644
--- a/components/gx-copyright.vue
+++ b/components/gx-copyright.vue
@@ -1,5 +1,6 @@
+
 <template>
-  <view class="copyright-section" :style="{bottom: footerHeight}">
+  <view class="copyright-section">
     <view class="copyright-content">
       <text style="color: #ddd;padding-right: 20rpx;">——</text>
       <image src="/static/imgs/index/logo.png" class="logo" mode="aspectFit"></image>
@@ -14,43 +15,34 @@
 <script>
 export default {
   name: 'gx-copyright',
-  props: {
-    footerHeight: {
-      type: String,
-      default: '130rpx' // 默认footer高度
-    }
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 .copyright-section {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  padding: 20rpx 0;
-  background-color:transparent;
-  opacity: 0.6;
-  // z-index: 90; /* 确保在footer下方 */
-  
-  .copyright-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    position: relative; /* 改为相对定位 */
+    width: 100%;
+    padding: 20rpx 0;
+    background-color: transparent;
+    opacity: 0.6;
+    margin-top: 40rpx; /* 增加一些顶部间距 */
     
-    .logo {
-      width: 150rpx;
-      height: 50rpx;
-      margin-right: 0rpx;
+    .copyright-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        .logo {
+            width: 150rpx;
+            height: 50rpx;
+            margin-right: 0rpx;
+        }
+        
+        .copyright-text {
+            font-size: 24rpx;
+            color: #999;
+            padding-left: 20rpx;
+        }
     }
-    
-    .copyright-text {
-      font-size: 24rpx;
-      color: #999;
-      padding-left: 20rpx;
-    }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 6628b6d..61d12c4 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -110,14 +110,11 @@
           </view>
         </view>
       </view> 
-	  <view style="margin: 120rpx 0;">
-		   <Copyright/>
-	  </view>
+	
 	 
     </view>
-    
-   
     <!-- 底部导航 -->
+	 <Copyright/>
     <Footer></Footer>
   </view>
 </template>                           
@@ -272,9 +269,13 @@ export default {
 <style lang="scss" scoped>
 .container {
   background: #f8faff;
-  min-height: 100vh;
-  padding-bottom: 120rpx;
+  // min-height: 100vh;
   box-sizing: border-box;
+  background-color: #f5f7fa;
+  padding: 20rpx;
+  // min-height: 100vh;
+  box-sizing: border-box;
+  padding-bottom: calc(190rpx);
 
   .content-wrapper {
     width: 92%;
diff --git a/pages/mine/index.vue b/pages/mine/index.vue
index b91e705..57b7956 100644
--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@@ -668,7 +668,7 @@
         padding: 20rpx;
         min-height: 100vh;
         box-sizing: border-box;
-        padding-bottom: 120rpx;
+        padding-bottom: 190rpx;
     }
     .user-info-card {
         background: #fff;
diff --git a/pages/mySeekHelp/index.vue b/pages/mySeekHelp/index.vue
index 573ac92..4522d45 100644
--- a/pages/mySeekHelp/index.vue
+++ b/pages/mySeekHelp/index.vue
@@ -1,15 +1,13 @@
-
 <template>
 	<view class="container">
-		<!-- 引入头部组件 -->
+		<!-- 标签栏 -->
 		<view class="content">
-			<!-- 标签栏 -->
 			<u-tabs 
 				:list="tabList" 
 				lineWidth="30" 
 				lineColor="#3B8CFF" 
 				:activeStyle="{
-					color: '#303133',
+					color: '#3B8CFF',
 					fontWeight: 'bold',
 					transform: 'scale(1.05)'
 				}" 
@@ -17,48 +15,67 @@
 					color: '#606266',
 					transform: 'scale(1)'
 				}" 
-				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:90px"
+				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px"
 				@change="handleTabChange"
 			></u-tabs>
 		</view>
+		
 		<view class="content_wapper">
 			<view class="content_list">
 				<!-- 工单列表 -->
-				<view v-for="(order, index) in filteredOrders" :key="index" class="order-item" @click="goDetail(order)">
+				<view 
+					v-for="(order, index) in filteredOrders" 
+					:key="index" 
+					class="order-item" 
+					:class="{'order-item--special': order.status === 2}"
+					@click="goDetail(order)"
+				>
 					<view class="order-title">
-						<view class="title">
-							<view class="title-text">{{ order.title }}</view>
-							<u-tag 
-								size="mini" 
-								:text="getStatusText(order.status)" 
-								:type="getStatusType(order.status)"
-								plain
-							></u-tag>
-						</view>
-						<view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view>
+						 <view class="title">
+							<view class="title-text">
+								<text :style="{color: getStatusColor(order.status)}">●</text>
+								<text> {{order.title}}</text>
+							</view>
+						    <u-tag
+						    	size="mini" 
+						    	:text="getStatusText(order.status)" 
+						    	:type="getStatusType(order.status)"
+						    	:style="{
+									backgroundColor: getStatusBgColor(order.status),
+									color: getStatusColor(order.status),
+									borderColor: getStatusColor(order.status)
+								}"
+						    ></u-tag>
+						 </view>
+						 <view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view>
 					</view>
 					<view class="order-description">{{ order.content }}</view>
-					<button 
-						@click.stop="handleAction(order)" 
-						class="order-action" 
-						v-if="order.status === 2"
-					>撤回</button>
+					<view class="order-meta">
+						<!-- <text class="meta-item">{{ order.label || '通用问题' }}</text> -->
+						<button 
+							@click.stop="handleAction(order, $event)" 
+							class="order-action" 
+							v-if="order.status == 2"
+						>
+							撤回
+						</button>
+					</view>
 				</view>
-				
-				<!-- 空状态提示 -->
-				<u-empty 
-				    textSize="24"
-				    width="180px"
-					height="780px"
-					v-if="filteredOrders.length === 0" 
-					mode="data" 
-					icon="/static/imgs/noData.jpeg"
-				></u-empty>
 			</view>
+			<!-- 空状态提示 -->
+			<u-empty 
+			    textSize="24"
+			    width="180px"
+				height="780px"
+				v-if="filteredOrders.length === 0" 
+				mode="data" 
+				icon="/static/imgs/noData.jpeg"
+			></u-empty>
 		</view>
+		
 		<Footer></Footer>
 		
-		<!-- 固定在右侧的发布工单按钮 -->
+		<!-- 发布工单按钮 -->
 		<view class="fab-container">
 			<view class="fab-button" @click="openPublishForm">
 				<text class="fab-icon">+</text>
@@ -103,6 +120,30 @@
 			this.getReciprocitiesList();
 		},
 		methods: {
+			// 获取状态对应的颜色
+			getStatusColor(status) {
+				const colorMap = {
+					1: '#FF7D00', // 待审核-橙色
+					2: '#00B42A', // 进行中-绿色
+					3: '#86909C', // 已完成-灰色
+					99: '#F53F3F', // 驳回-红色
+					98: '#86909C'  // 已撤回-灰色
+				};
+				return colorMap[status] || '#86909C';
+			},
+			
+			// 获取状态标签背景色
+			getStatusBgColor(status) {
+				const colorMap = {
+					1: 'rgba(255, 125, 0, 0.1)', // 待审核-浅橙
+					2: 'rgba(0, 180, 42, 0.1)', // 进行中-浅绿
+					3: 'rgba(134, 144, 156, 0.1)', // 已完成-浅灰
+					99: 'rgba(245, 63, 63, 0.1)', // 驳回-浅红
+					98: 'rgba(134, 144, 156, 0.1)'  // 已撤回-浅灰
+				};
+				return colorMap[status] || 'rgba(134, 144, 156, 0.1)';
+			},
+			
 			// 获取状态对应的文本
 			getStatusText(status) {
 				const statusMap = {
@@ -119,7 +160,7 @@
 			getStatusType(status) {
 				const typeMap = {
 					1: 'warning',
-					2: 'warning',
+					2: 'success',
 					3: 'success',
 					98:'error'
 				};
@@ -134,7 +175,6 @@
 			
 			// 切换tabs
 			handleTabChange(index) {
-				console.log("======index",index)
 				this.currentTab = index.value;
 			},
 			
@@ -143,10 +183,8 @@
 				uni.navigateTo({ url: '/pages/helpInfo/index' });
 			},
 			
-			handleAction(order) {
-				// 阻止事件冒泡
-				event.stopPropagation();
-				
+			handleAction(order, e) {
+				e.stopPropagation();
 				if (order.status === 2) {
 					uni.showModal({
 						title: '提示',
@@ -213,143 +251,179 @@
 </script>
 
 <style lang="scss" scoped>
-	// 定义全局变量
-	$primary-color: #1890ff;
-	$light-bg: #f0f8ff;
-	$text-color: #333;
-	$sub-text-color: #3D3D3D;
-	$disabled-text-color: #999;
-	$fab-bg: $primary-color; // 发布按钮背景色
-	$fab-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.3); // 按钮阴影效果
+	// 丰富色彩的样式变量
+	$primary-color: #3B8CFF;      // 主色调-蓝色
+	$secondary-color: #FF7D00;    // 辅助色-橙色
+	$success-color: #00B42A;      // 成功色-绿色
+	$danger-color: #F53F3F;       // 危险色-红色
+	$gray-color: #86909C;         // 灰色
+	$light-bg: #F7F8FA;           // 页面背景
+	$card-bg: #FFFFFF;            // 卡片背景
+	
+	// 渐变色定义
+	$gradient-primary: linear-gradient(135deg, $primary-color, #5aa7ff);
+	$gradient-active: linear-gradient(135deg, #e6f7ff, #ccf0ff);
 
 	.container {
 		width: 100%;
 		min-height: 100vh;
-		opacity: 1;
-		background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 250, 250, 0) 100%),
-			linear-gradient(0deg, rgba(255, 241, 235, 1) 0%, rgba(192, 219, 250, 1) 100%);
+		background-color: $light-bg;
 		position: relative;
 
 		.content {
 			width: 100%;
-			position: absolute;
-			margin-top: 20rpx;
-			background-color: rgba(252, 252, 252, 0.8);
-			padding-bottom: 16rpx;
+			padding: 15rpx 0;
+			background-color: $card-bg;
+			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
+			position: sticky;
+			top: 0;
+			z-index: 10;
+
+			::v-deep .u-tabs {
+				padding: 0 15rpx;
+			}
+			
+			// 标签栏下划线动画
+			::v-deep .u-tabs__line {
+				transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+			}
 		}
 
 		.content_wapper {
 			width: 100%;
-			height: auto;
-			position: absolute;
-			margin-top: 120rpx;
-			background-color: rgba(252, 252, 252, 0.8);
+			padding: 25rpx 0 140rpx;
+			box-sizing: border-box;
 
 			.content_list {
 				width: 100%; 
-				padding: 0 20rpx;
+				padding: 0 25rpx;
 				box-sizing: border-box;
+
 				.order-item {
-					display: flex;
-					flex-direction: column;
-					width: 95%;
-					margin: 20rpx auto;
-					border-radius: 10rpx;
-					margin-bottom: 40rpx;
-					padding:40rpx 20rpx;
-					border-radius: 14.17px;
-					background: linear-gradient(90deg, rgba(199, 222, 255, 0.5) 0%, rgba(255, 255, 255, 0.72) 100%);
-					box-shadow: 0px 2px 4px  rgba(191, 218, 255, 0.58);
+					width: 90%;
+					margin: 0 auto 25rpx;
+					border-radius: 16rpx;
+					padding: 30rpx;
+					background-color: $card-bg;
+					box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
 					position: relative;
+					transition: all 0.3s ease;
+
+					&:hover {
+						box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
+						transform: translateY(-3rpx);
+					}
+					
+					// 为进行中的工单添加特殊标识
+					&--special {
+						border-left: 6rpx solid $success-color;
+					}
 
 					.order-title {
 						font-size: 28rpx;
 						display: flex;
 						justify-content: space-between;
-						.title{
-							width: 90%;
-							font-weight: bold;
+						align-items: center;
+						margin-bottom: 25rpx;
+
+						.title {
 							display: flex;
 							align-items: center;
-							gap: 8rpx;
-							.title-text{
-								white-space: nowrap; 
-								overflow: hidden; 
-								text-overflow: ellipsis; 
-								max-width: 200rpx;
+							gap: 15rpx;
+
+							.title-text {
+								color: #1D2129;
+								font-weight: 600;
+								font-size: 28rpx;
 							}
 						}
-						.date{
-							width: 40%;
-							font-weight: normal;
-							text-align: right;
+
+						.date {
+							color: $gray-color;
+							font-size: 24rpx;
+							padding: 5rpx 10rpx;
+							background-color: rgba(134, 144, 156, 0.08);
+							border-radius: 6rpx;
 						}
 					}
 
 					.order-description {
-						font-size: 26rpx;
-						color: $sub-text-color;
-						margin-top: 10rpx;
+						font-size: 28rpx;
+						color: #1D2129;
+						line-height: 1.7;
 						margin-bottom: 30rpx;
-						display: -webkit-box;
-						-webkit-box-orient: vertical; 
-						overflow: hidden; 
-						text-overflow: ellipsis; 
-						-webkit-line-clamp: 2; 
-						line-height: 50rpx;
+						padding-bottom: 20rpx;
+						border-bottom: 1px dashed #EEEEEE;
+						word-break: break-word;
+					}
+					
+					.order-meta {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						
+						.meta-item {
+							color: $gray-color;
+							font-size: 24rpx;
+							padding: 3rpx 12rpx;
+							background-color: rgba(134, 144, 156, 0.08);
+							border-radius: 15rpx;
+						}
 					}
 
 					.order-action {
-						margin-top: 40rpx;
-						width: 120rpx;
-						height: 40rpx;
-						line-height: 40rpx;
-						text-align: center;
-						background-color: $primary-color;
+						min-width: 130rpx;
+						height: 56rpx;
+						line-height: 56rpx;
+						background-color: $danger-color;
 						color: #fff;
-						border-radius: 10rpx;
+						border-radius: 28rpx;
 						font-size: 24rpx;
-						margin-top: 20rpx;
-						position: absolute;
-						right: 20rpx;
-						bottom: 20rpx;
+						margin: 0;
+						padding: 0;
+						transition: all 0.2s;
+
+						&:hover {
+							background-color: #e02020;
+							transform: scale(1.05);
+						}
 					}
 				}
 			}
 		}
-		
-		// 右侧固定发布按钮样式
+
+		// 发布按钮增强
 		.fab-container {
 			position: fixed;
-			right: 20rpx;
+			right: 40rpx;
 			bottom: 220rpx;
-			z-index: 100; // 确保按钮在最上层
-			transition: all 0.3s ease; // 动画过渡效果
-			
-			// 悬停放大效果
-			&:hover .fab-button {
-				transform: scale(1.1);
-				box-shadow: $fab-shadow, 0 0 0 10rpx rgba(24, 144, 255, 0.1);
+			z-index: 100;
+
+			.fab-button {
+				width: 130rpx;
+				height: 130rpx;
+				border-radius: 50%;
+				background: $gradient-primary;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				box-shadow: 0 8rpx 20rpx rgba(59, 140, 255, 0.45);
+				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+				border: 5rpx solid rgba(255, 255, 255, 0.3);
+
+				&:hover {
+					transform: scale(1.1) rotate(90deg);
+					box-shadow: 0 10rpx 25rpx rgba(59, 140, 255, 0.55);
+				}
+			}
+
+			.fab-icon {
+				color: white;
+				font-size: 65rpx;
+				font-weight: bold;
+				line-height: 1;
+				text-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
 			}
-		}
-		
-		.fab-button {
-			width: 100rpx;
-			height: 100rpx;
-			border-radius: 50%;
-			background-color: $fab-bg;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			box-shadow: $fab-shadow;
-			color: #fff;
-			font-size: 60rpx;
-			font-weight: bold;
-			transition: all 0.3s ease;
-		}
-		
-		.fab-icon {
-			line-height: 1;
 		}
 	}
 </style>
\ No newline at end of file
diff --git a/pages/myTickets/index.vue b/pages/myTickets/index.vue
index 169e143..b6bf4e5 100644
--- a/pages/myTickets/index.vue
+++ b/pages/myTickets/index.vue
@@ -1,15 +1,13 @@
 <template>
 	<view class="container">
-		<!-- 引入头部组件 -->
+		<!-- 标签栏 -->
 		<view class="content">
-
-			<!-- 标签栏 -->
 			<u-tabs 
 				:list="tabList" 
 				lineWidth="30" 
 				lineColor="#3B8CFF" 
 				:activeStyle="{
-					color: '#303133',
+					color: '#3B8CFF',
 					fontWeight: 'bold',
 					transform: 'scale(1.05)'
 				}" 
@@ -17,32 +15,51 @@
 					color: '#606266',
 					transform: 'scale(1)'
 				}" 
-				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:60px"
+				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px"
 				@change="handleTabChange"
 			></u-tabs>
-
-
 		</view>
+		
 		<view class="content_wapper">
 			<view class="content_list">
 				<!-- 工单列表 -->
-				<view v-for="(order, index) in filteredOrders" :key="index" class="order-item" 
-				@click="goDetail(order)">
+				<view 
+					v-for="(order, index) in filteredOrders" 
+					:key="index" 
+					class="order-item" 
+					:class="{'order-item--special': order.status === 2}"
+					@click="goDetail(order)"
+				>
 					<view class="order-title">
 						 <view class="title">
-							<view class="title-text">我的工单</view>
-				
+							<view class="title-text">
+								<text :style="{color: getStatusColor(order.status)}">●</text>
+								<!-- <text> 我的工单 </text> -->
+							</view>
 						    <u-tag
 						    	size="mini" 
 						    	:text="getStatusText(order.status)" 
 						    	:type="getStatusType(order.status)"
-						    	plain
+						    	:style="{
+									backgroundColor: getStatusBgColor(order.status),
+									color: getStatusColor(order.status),
+									borderColor: getStatusColor(order.status)
+								}"
 						    ></u-tag>
 						 </view>
 						 <view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view>
 					</view>
 					<view class="order-description">{{ order.title }}</view>
-					<button @click.stop="handleAction(order, $event)" class="order-action" v-if="order.status == 1 || order.status == 2 || order.status == 99">撤回</button>
+					<view class="order-meta">
+						<text class="meta-item">{{ order.label || '通用问题' }}</text>
+						<button 
+							@click.stop="handleAction(order, $event)" 
+							class="order-action" 
+							v-if="order.status == 1 || order.status == 2 || order.status == 99"
+						>
+							撤回
+						</button>
+					</view>
 				</view>
 			</view>
 			<!-- 空状态提示 -->
@@ -54,32 +71,26 @@
 				mode="data" 
 				icon="/static/imgs/noData.jpeg"
 			></u-empty>
-
 		</view>
+		
 		<Footer></Footer>
 		
-		<!-- 新增的发布工单按钮 -->
+		<!-- 发布工单按钮 -->
 		<view class="fab-container">
 			<view class="fab-button" @click="showPublishForm">
 				<text class="fab-icon">+</text>
 			</view>
 		</view>
-		
-		
 	</view>
-
 </template>
 
 <script>
-	// import Header from '@/components/header_common.vue';
 	import Footer from '@/components/footer_common.vue';
 	import { get, post,put } from '@/utils/request';
 	import { IMAGE_BASE_URL,BASE_URL } from '@/utils/config';
 	import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
 	export default {
-		components: {
-			Footer
-		},
+		components: { Footer },
 		data() {
 			return {
 				tabList: [
@@ -108,7 +119,30 @@
 			}
 		},
 		methods: {
-			// 获取状态对应的文本
+			// 新增：获取状态对应的颜色
+			getStatusColor(status) {
+				const colorMap = {
+					1: '#FF7D00', // 待审核-橙色
+					2: '#00B42A', // 进行中-绿色
+					3: '#86909C', // 已完成-灰色
+					99: '#F53F3F', // 驳回-红色
+					98: '#86909C'  // 已撤回-灰色
+				};
+				return colorMap[status] || '#86909C';
+			},
+			
+			// 新增：获取状态标签背景色
+			getStatusBgColor(status) {
+				const colorMap = {
+					1: 'rgba(255, 125, 0, 0.1)', // 待审核-浅橙
+					2: 'rgba(0, 180, 42, 0.1)', // 进行中-浅绿
+					3: 'rgba(134, 144, 156, 0.1)', // 已完成-浅灰
+					99: 'rgba(245, 63, 63, 0.1)', // 驳回-浅红
+					98: 'rgba(134, 144, 156, 0.1)'  // 已撤回-浅灰
+				};
+				return colorMap[status] || 'rgba(134, 144, 156, 0.1)';
+			},
+			
 			getStatusText(status) {
 				const statusMap = {
 					'': '全部',
@@ -121,7 +155,6 @@
 				return statusMap[status] || '未知状态';
 			},
 			
-			// 获取状态对应的标签类型
 			getStatusType(status) {
 				const typeMap = {
 					1:'warning',
@@ -132,87 +165,70 @@
 				};
 				return typeMap[status] || 'info';
 			},
+			
 			handleBack() {
-				uni.navigateBack({
-					delta: 1 // 返回上一级页面
-				});
+				uni.navigateBack({ delta: 1 });
 			},
-			// 切换tabs
+			
 			handleTabChange(index) {
-				console.log("======index",index)
 				this.currentTab = index.value;
 			},
-			// 显示发布工单表单
+			
 			showPublishForm() {
-				// 这里可以添加打开发布表单的逻辑
 				uni.showToast({
 					title: '即将打开发布工单表单',
 					icon: 'none'
 				});
-				
 				uni.navigateTo({ url: '/pages/serviceTickets/index' });
 			},
-			// 工单操作处理
+			
 			handleAction(order, e) {
-			  // 阻止事件冒泡
 			  e.stopPropagation();
-			  
 			  if (order.status == 1 || order.status == 2 || order.status == 99) {
 			    uni.showModal({
 			      title: '提示',
 			      content: '确定要撤回这个工单吗？',
 			      success: (res) => {
 			        if (res.confirm) {
-			          // 执行撤回逻辑
 			          this.withdrawOrder(order.id);
 			        }
 			      }
 			    });
 			  }
 			},
+			
 			async withdrawOrder(orderId) {
 			  try {
 			   const res = await put(`/api/v1/app_auth/work-order/${orderId}`, {status:98});
 			    if (res?.success) {
-			      uni.showToast({
-			        title: '工单已撤回',
-			        icon: 'success'
-			      });
-			      // 刷新列表
+			      uni.showToast({ title: '工单已撤回', icon: 'success' });
 			      this.getWorkOrderList();
 			    }
 			  } catch (err) {
 			    console.error('撤回工单失败:', err);
-			    uni.showToast({
-			      title: '撤回失败',
-			      icon: 'none'
-			    });
+			    uni.showToast({ title: '撤回失败', icon: 'none' });
 			  }
 			},
+			
 			goDetail(i){
 				uni.setStorageSync("Detail",i)
 				uni.navigateTo({ url: '/pages/myTicketsDetail/index' });
 			},
-			// 请求列表接口
+			
 			async getWorkOrderList(){
 				if (this.isLoading) return;
 				this.isLoading = true;
-				
 				try {
 					const res = await get('/api/v1/app_auth/my/work-order', {
 						current: 1,
 						pageSize: 10,
 					});
-					
 					if (res?.success) {
 						this.orders = res.data || [];
 					}
 				} catch (err) {
 					console.error('获取我的求助失败:', err);
-					uni.showToast({
-						title: '加载列表失败',
-						icon: 'none'
-					});
+					uni.showToast({ title: '加载列表失败', icon: 'none' });
 				} finally {
 					this.isLoading = false;
 				}
@@ -222,157 +238,179 @@
 </script>
 
 <style lang="scss" scoped>
-	// 定义全局变量
-	$primary-color: #1890ff;
-	$light-bg: #f0f8ff;
-	$text-color: #333;
-	$sub-text-color: #3D3D3D;
-	$disabled-text-color: #999;
-	$fab-color: #1890ff; // 发布按钮颜色
+	// 丰富色彩的样式变量
+	$primary-color: #3B8CFF;      // 主色调-蓝色
+	$secondary-color: #FF7D00;    // 辅助色-橙色
+	$success-color: #00B42A;      // 成功色-绿色
+	$danger-color: #F53F3F;       // 危险色-红色
+	$gray-color: #86909C;         // 灰色
+	$light-bg: #F7F8FA;           // 页面背景
+	$card-bg: #FFFFFF;            // 卡片背景
+	
+	// 渐变色定义
+	$gradient-primary: linear-gradient(135deg, $primary-color, #5aa7ff);
+	$gradient-active: linear-gradient(135deg, #e6f7ff, #ccf0ff);
 
 	.container {
 		width: 100%;
 		min-height: 100vh;
-		/* 占满整个视口高度 */
-		opacity: 1;
-		background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 250, 250, 0) 100%),
-			linear-gradient(0deg, rgba(255, 241, 235, 1) 0%, rgba(192, 219, 250, 1) 100%);
+		background-color: $light-bg;
 		position: relative;
 
 		.content {
 			width: 100%;
-			position: absolute;
-			margin-top: 20rpx;
-
-			background-color: rgba(252, 252, 252, 0.8);
-			padding-bottom: 16rpx;
-
+			padding: 15rpx 0;
+			background-color: $card-bg;
+			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
+			position: sticky;
+			top: 0;
+			z-index: 10;
 
+			::v-deep .u-tabs {
+				padding: 0 15rpx;
+			}
+			
+			// 标签栏下划线动画
+			::v-deep .u-tabs__line {
+				transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+			}
 		}
 
 		.content_wapper {
 			width: 100%;
-			height: auto;
-			position: absolute;
-			margin-top: 120rpx;
-			background-color: rgba(252, 252, 252, 0.8);
-			padding-bottom: 10vh;
+			padding: 25rpx 0 140rpx;
+			box-sizing: border-box;
 
 			.content_list {
 				width: 100%; 
-				padding: 0 20rpx;
+				padding: 0 25rpx;
 				box-sizing: border-box;
+
 				.order-item {
-					display: flex;
-					flex-direction: column;
 					width: 90%;
-					margin: 20rpx auto;
-					border-radius: 10rpx;
-					margin-bottom: 40rpx;
-					padding:40rpx 20rpx;
-					border-radius: 14.17px;
-					background: linear-gradient(90deg, rgba(199, 222, 255, 0.5) 0%, rgba(255, 255, 255, 0.72) 100%);
-					box-shadow: 0px 2px 4px  rgba(191, 218, 255, 0.58);
+					margin: 0 0 25rpx;
+					border-radius: 16rpx;
+					padding: 30rpx;
+					background-color: $card-bg;
+					box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
 					position: relative;
+					transition: all 0.3s ease;
+
+					&:hover {
+						box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
+						transform: translateY(-3rpx);
+					}
+					
+					// 为进行中的工单添加特殊标识
+					&--special {
+						border-left: 6rpx solid $success-color;
+					}
 
 					.order-title {
 						font-size: 28rpx;
 						display: flex;
 						justify-content: space-between;
-						.title{
-							width: 90%;
-							font-weight: bold;
+						align-items: center;
+						margin-bottom: 25rpx;
+
+						.title {
 							display: flex;
 							align-items: center;
-							gap: 8rpx;
-							
-							.title-text{
-								white-space: nowrap; 
-								overflow: hidden; 
-								text-overflow: ellipsis; 
-								max-width: 200rpx;
+							gap: 15rpx;
+
+							.title-text {
+								color: #1D2129;
+								font-weight: 600;
+								font-size: 28rpx;
 							}
-							
 						}
-						.date{
-							width: 40%;
-							font-weight: normal;
-							text-align: right;
+
+						.date {
+							color: $gray-color;
+							font-size: 24rpx;
+							padding: 5rpx 10rpx;
+							background-color: rgba(134, 144, 156, 0.08);
+							border-radius: 6rpx;
 						}
-						
 					}
 
 					.order-description {
-						font-size: 26rpx;
-						color: $sub-text-color;
-						margin-top: 10rpx;
+						font-size: 28rpx;
+						color: #1D2129;
+						line-height: 1.7;
 						margin-bottom: 30rpx;
-						display: -webkit-box;
-						-webkit-box-orient: vertical; 
-						overflow: hidden; 
-						text-overflow: ellipsis; 
-						-webkit-line-clamp: 2; 
-						line-height: 50rpx;
-						
+						padding-bottom: 20rpx;
+						border-bottom: 1px dashed #EEEEEE;
+						word-break: break-word;
 					}
-
-					.order-status {
-						font-size: 22rpx;
-						color: $text-color;
-						margin-top: 10rpx;
-						width: 100rpx;
+					
+					.order-meta {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						
+						.meta-item {
+							color: $gray-color;
+							font-size: 24rpx;
+							padding: 3rpx 12rpx;
+							background-color: rgba(134, 144, 156, 0.08);
+							border-radius: 15rpx;
+						}
 					}
 
 					.order-action {
-						margin-top: 40rpx;
-						width: 120rpx;
-						height: 40rpx;
-						line-height: 40rpx;
-						text-align: center;
-						background-color: $primary-color;
+						min-width: 130rpx;
+						height: 56rpx;
+						line-height: 56rpx;
+						background-color: $danger-color;
 						color: #fff;
-						border-radius: 10rpx;
+						border-radius: 28rpx;
 						font-size: 24rpx;
-						margin-top: 20rpx;
-						position: absolute;
-						right: 20rpx;
-						bottom: 20rpx;
+						margin: 0;
+						padding: 0;
+						transition: all 0.2s;
+
+						&:hover {
+							background-color: #e02020;
+							transform: scale(1.05);
+						}
 					}
-
-
 				}
-
 			}
 		}
-		
-		// 新增的发布按钮样式
+
+		// 发布按钮增强
 		.fab-container {
 			position: fixed;
-			right: 20rpx;
+			right: 40rpx;
 			bottom: 220rpx;
 			z-index: 100;
-			// 添加悬停动画
-			&:hover .fab-button {
-				transform: scale(1.1);
+
+			.fab-button {
+				width: 130rpx;
+				height: 130rpx;
+				border-radius: 50%;
+				background: $gradient-primary;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				box-shadow: 0 8rpx 20rpx rgba(59, 140, 255, 0.45);
+				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+				border: 5rpx solid rgba(255, 255, 255, 0.3);
+
+				&:hover {
+					transform: scale(1.1) rotate(90deg);
+					box-shadow: 0 10rpx 25rpx rgba(59, 140, 255, 0.55);
+				}
+			}
+
+			.fab-icon {
+				color: white;
+				font-size: 65rpx;
+				font-weight: bold;
+				line-height: 1;
+				text-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
 			}
-		}
-		
-		.fab-button {
-			width: 100rpx;
-			height: 100rpx;
-			border-radius: 50%;
-			background-color: $fab-color;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
-			transition: all 0.3s ease;
-		}
-		
-		.fab-icon {
-			color: white;
-			font-size: 60rpx;
-			font-weight: bold;
 		}
 	}
 </style>
\ No newline at end of file
diff --git a/pages/neighbor/index.vue b/pages/neighbor/index.vue
index 676ae4d..1d8adb3 100644
--- a/pages/neighbor/index.vue
+++ b/pages/neighbor/index.vue
@@ -120,7 +120,7 @@
 		flex-direction: column;
 		min-height: 100vh;
 		background: #f8faff;
-		padding-bottom: 120rpx;
+		padding-bottom: calc(100rpx + 40rpx + 40rpx);
 	}
 
 	.nearby-page {
diff --git a/pages/neighborList/index.vue b/pages/neighborList/index.vue
index 2622a97..89ced96 100644
--- a/pages/neighborList/index.vue
+++ b/pages/neighborList/index.vue
@@ -140,7 +140,7 @@
 		// height: 100vh;
 		// padding: 70rpx 0;
 		// margin-top: 90rpx;
-		padding-bottom: 400rpx;
+	    padding-bottom: calc(190rpx + 100rpx + 80rpx);
 
 		.neighbor_head {
 			width: 100%;