From aa0203819c924273df267bbc3670712215024406 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Fri, 24 Jul 2026 15:56:35 +0800
Subject: [PATCH] refactor: convert legacy color classes to tailwind syntax

Replace all custom `bg-*` utility classes across Vue components with Tailwind's arbitrary hex color notation (e.g. `bg-[#f7f7f7]`). Remove redundant hardcoded background color definitions from src/static/scss/background.scss, clean up template formatting, and update gradient button styles to use direct hex values.
---
 src/components/CreateServiceOrder/index.vue   |  10 +-
 src/components/DetailPopup/index.vue          |   2 +-
 src/components/Feedback/index.vue             |   7 +-
 src/components/RefundPopup/index.vue          |   2 +-
 src/components/SurveyQuestionnaire/index.vue  |   3 +-
 src/pages-booking/index.vue                   |   2 +-
 .../order/components/FooterSection/index.vue  |   2 +-
 .../order/components/GoodsInfo/index.vue      |  37 ++-----
 .../order/components/OrderCard/index.vue      |  21 ++--
 .../order/components/OrderQrcode/index.vue    |  41 +++----
 .../order/components/VoucherList/index.vue    |  22 ++--
 src/pages-quick/list.vue                      |  11 +-
 src/pages/ChatMain/ChatCardMine/index.vue     |   2 +-
 .../ChatModule/FacilityLocationCard/index.vue |  16 +--
 .../ChatModule/LongTextGuideCard/index.vue    | 103 ++++++------------
 .../ChatModule/MapNavigationCard/index.vue    |  12 +-
 src/pages/ChatModule/NoticeCard/index.vue     |  37 ++-----
 .../ChatModule/OpenMapComponent/index.vue     |   2 +-
 src/pages/ChatModule/PoiCompareCard/index.vue |  81 ++++----------
 src/pages/ChatModule/PoiDetailCard/index.vue  |  12 +-
 src/pages/ChatModule/RoutePlanCard/index.vue  |  65 ++++-------
 .../ChatModule/SharedVisual/DetailShell.vue   |   3 +-
 .../ChatModule/SharedVisual/MediaFrame.vue    |   9 +-
 src/pages/goods/album/index.vue               |  28 ++---
 src/pages/goods/index.vue                     |  58 +++-------
 src/pages/test/index.vue                      |  73 ++++---------
 src/static/scss/background.scss               |  91 ++--------------
 27 files changed, 225 insertions(+), 527 deletions(-)

diff --git a/src/components/CreateServiceOrder/index.vue b/src/components/CreateServiceOrder/index.vue
index ec2bc8e..7f7e4c6 100644
--- a/src/components/CreateServiceOrder/index.vue
+++ b/src/components/CreateServiceOrder/index.vue
@@ -9,23 +9,23 @@
       </view>
 
       <view v-if="!isCallSuccess" class="border-box p-12">
-        <view class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
+        <view class="bg-[#f5f7fa] border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
           <text class="font-500 line-height-22 mr-20">所在位置</text>
           <input placeholder="请填写所在位置" v-model="roomId" />
         </view>
 
-        <view class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
+        <view class="bg-[#f5f7fa] border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
           <text class="font-500 line-height-22 mr-20">联系电话</text>
           <input placeholder="请填写联系电话" v-model="contactPhone" @input="handleContactPhoneInput" />
         </view>
 
-        <view class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
+        <view class="bg-[#f5f7fa] border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
           <view class="font-500 line-height-22 mb-12">需求信息描述</view>
           <textarea class="h-80" placeholder="请输入需求信息描述" placeholder-class="font-size-14 font-400" maxlength="100"
             v-model="contactText" />
         </view>
 
-        <view class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
+        <view class="bg-[#f5f7fa] border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
           <view class="font-500 line-height-22 mb-12">照片上传</view>
 
           <view class="w-80 h-80 bg-white rounded-8 overflow-hidden flex flex-items-center flex-justify-center">
@@ -56,7 +56,7 @@
       </view>
 
       <view
-        class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center ml-[12px] mr-12 mb-12"
+        class="btn rounded-50 color-white bg-gradient-to-r from-[#0CCD58] to-[#4de4ff] flex flex-items-center flex-justify-center ml-[12px] mr-12 mb-12"
         @click="handleCall">
         {{ isCallSuccess ? "查看服务" : "立即呼叫" }}
       </view>
diff --git a/src/components/DetailPopup/index.vue b/src/components/DetailPopup/index.vue
index 7d01eb7..02af6ba 100644
--- a/src/components/DetailPopup/index.vue
+++ b/src/components/DetailPopup/index.vue
@@ -1,6 +1,6 @@
 <template>
   <uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
-    <view class="refund-popup bg-F5F7FA border-box">
+    <view class="refund-popup bg-[#f5f7fa] border-box">
       <view class="border-box flex flex-items-center justify-between pt-12 pb-12 relative">
         <view class="flex-full font-size-16 color-171717 line-height-24 text-center">明细详情</view>
         <!-- 关闭按钮 -->
diff --git a/src/components/Feedback/index.vue b/src/components/Feedback/index.vue
index 5f961a7..d51cde7 100644
--- a/src/components/Feedback/index.vue
+++ b/src/components/Feedback/index.vue
@@ -9,17 +9,18 @@
       </view>
 
       <view v-if="!isCallSuccess" class="border-box p-12">
-        <view class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
+        <view class="bg-[#f5f7fa] border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
           <text class="font-500 line-height-22 mr-20">联系电话</text>
           <input placeholder="请填写联系电话" v-model="contactPhone" />
         </view>
-        <view class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
+        <view class="bg-[#f5f7fa] border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
           <view class="font-500 line-height-22 mb-12">意见内容</view>
           <textarea class="h-80" placeholder="请输入反馈意见" placeholder-class="font-size-14 font-400" maxlength="100"
             v-model="contactText" />
         </view>
 
-        <view class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center"
+        <view
+          class="btn rounded-50 color-white bg-gradient-to-r from-[#0CCD58] to-[#4de4ff] flex flex-items-center flex-justify-center"
           @click="handleCall">
           立即提交
         </view>
diff --git a/src/components/RefundPopup/index.vue b/src/components/RefundPopup/index.vue
index 4ebc8ab..a7956f4 100644
--- a/src/components/RefundPopup/index.vue
+++ b/src/components/RefundPopup/index.vue
@@ -1,6 +1,6 @@
 <template>
   <uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
-    <view class="refund-popup bg-F5F7FA border-box">
+    <view class="refund-popup bg-[#f5f7fa] border-box">
       <view class="border-box flex flex-items-center justify-between pt-12 pb-12 relative">
         <view class="flex-full font-size-16 color-171717 line-height-24 text-center">取消政策</view>
         <!-- 关闭按钮 -->
diff --git a/src/components/SurveyQuestionnaire/index.vue b/src/components/SurveyQuestionnaire/index.vue
index f7ad53d..c5e458a 100644
--- a/src/components/SurveyQuestionnaire/index.vue
+++ b/src/components/SurveyQuestionnaire/index.vue
@@ -10,7 +10,8 @@
 
       <image class="w-full" :src="surveyData.bannerUrl" mode="widthFix" />
 
-      <view class="h-44 m-12 rounded-50 bg-button color-white flex flex-items-center flex-justify-center"
+      <view
+        class="h-44 m-12 rounded-50 bg-gradient-to-r from-[#0CCD58] to-[#4de4ff] color-white flex flex-items-center flex-justify-center"
         @click="handleCall">
         前往填写
       </view>
diff --git a/src/pages-booking/index.vue b/src/pages-booking/index.vue
index 6c40cb7..8f3047f 100644
--- a/src/pages-booking/index.vue
+++ b/src/pages-booking/index.vue
@@ -24,7 +24,7 @@
 
           <!-- 权益部分 -->
           <view class="flex flex-items-center mb-8">
-            <text class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
+            <text class="bg-[#f7f7f7] border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
               v-for="(item, index) in orderData.commodityFacilityList" :key="index">
               {{ item }}
             </text>
diff --git a/src/pages-order/order/components/FooterSection/index.vue b/src/pages-order/order/components/FooterSection/index.vue
index fe044c6..f9df288 100644
--- a/src/pages-order/order/components/FooterSection/index.vue
+++ b/src/pages-order/order/components/FooterSection/index.vue
@@ -8,7 +8,7 @@
     <button :class="[
       'right border-none rounded-10 flex flex-full flex-items-center flex-justify-center font-size-14 font-500 bg-theme-color-500',
       {
-        'bg-FF3D60': statusCode === '0',
+        'bg-[#ff3d60]': statusCode === '0',
         'color-white': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
       },
     ]" @click="handleButtonClick(orderData)">
diff --git a/src/pages-order/order/components/GoodsInfo/index.vue b/src/pages-order/order/components/GoodsInfo/index.vue
index e51220e..cb42bd6 100644
--- a/src/pages-order/order/components/GoodsInfo/index.vue
+++ b/src/pages-order/order/components/GoodsInfo/index.vue
@@ -1,43 +1,27 @@
 <template>
-  <view
-    v-if="orderType == 0"
-    class="border-box bg-white p-12 rounded-12 mb-12"
-  >
+  <view v-if="orderType == 0" class="border-box bg-white p-12 rounded-12 mb-12">
     <!-- 酒店类型入住离店日期部分 -->
-    <DateRangeSection
-      v-if="orderData.orderType == 0"
-      :selectedDate="selectedDate"
-    />
+    <DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" />
 
     <view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
       {{ orderData.commodityName }}
     </view>
 
-    <view
-      class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12"
-    >
+    <view class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12">
       {{ orderData.commodityDescription }}
     </view>
 
     <!-- 权益部分 -->
     <view class="border-box flex flex-items-center pt-12">
-      <text
-        class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
-        v-for="(item, index) in commodityFacilityList"
-        :key="index"
-      >
+      <text class="bg-[#f7f7f7] border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
+        v-for="(item, index) in commodityFacilityList" :key="index">
         {{ item }}
       </text>
     </view>
   </view>
 
-  <view
-    v-if="orderType != 0"
-    class="border-box bg-white p-12 rounded-12 mb-12"
-  >
-    <view
-      class="font-size-16 font-500 color-000 line-height-24 ellipsis-1 mb-8"
-    >
+  <view v-if="orderType != 0" class="border-box bg-white p-12 rounded-12 mb-12">
+    <view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1 mb-8">
       {{ orderData.commodityName }}
     </view>
 
@@ -46,11 +30,8 @@
       <text class="color-525866">{{ commodityAmount }}</text>
     </view>
 
-    <view
-      v-if="orderData.orderStatus === '0'"
-      class="border-box border-top pt-12 font-size-14 font-500 color-171717 mt-12"
-      >凭[电子凭证]直接验证使用</view
-    >
+    <view v-if="orderData.orderStatus === '0'"
+      class="border-box border-top pt-12 font-size-14 font-500 color-171717 mt-12">凭[电子凭证]直接验证使用</view>
   </view>
 </template>
 
diff --git a/src/pages-order/order/components/OrderCard/index.vue b/src/pages-order/order/components/OrderCard/index.vue
index c0d040e..58ee9e9 100644
--- a/src/pages-order/order/components/OrderCard/index.vue
+++ b/src/pages-order/order/components/OrderCard/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <view
-    class="order-card bg-white border-box p-12 rounded-12 m-12"
-    @click.stop="handleCardClick"
-  >
+  <view class="order-card bg-white border-box p-12 rounded-12 m-12" @click.stop="handleCardClick">
     <!-- 卡片头部 -->
     <view class="card-header flex items-center">
       <view class="status-info flex items-center flex-full">
@@ -11,13 +8,10 @@
           {{ getOrderTypeName() }}
         </view>
       </view>
-      <view
-        v-if="orderData.status !== 'pending'"
-        :class="[
-          'status-tag font-size-12',
-          `tag-${orderData.orderStatus || orderData.workOrderStatus}`,
-        ]"
-      >
+      <view v-if="orderData.status !== 'pending'" :class="[
+        'status-tag font-size-12',
+        `tag-${orderData.orderStatus || orderData.workOrderStatus}`,
+      ]">
         {{ getStatusText(orderData.orderStatus || orderData.workOrderStatus) }}
       </view>
     </view>
@@ -27,9 +21,8 @@
 
     <view v-if="orderData.orderStatus === '0'" class="text-right">
       <button
-        class="go-pay border-box border-none font-size-14 color-white bg-FF3D60 rounded-5 inline-block text-center line-height-30"
-        @click.stop="handleCardClick"
-      >
+        class="go-pay border-box border-none font-size-14 color-white bg-[#ff3d60] rounded-5 inline-block text-center line-height-30"
+        @click.stop="handleCardClick">
         去支付
       </button>
     </view>
diff --git a/src/pages-order/order/components/OrderQrcode/index.vue b/src/pages-order/order/components/OrderQrcode/index.vue
index 3cf66a5..1e7d0fd 100644
--- a/src/pages-order/order/components/OrderQrcode/index.vue
+++ b/src/pages-order/order/components/OrderQrcode/index.vue
@@ -1,12 +1,6 @@
 <template>
-   <uni-popup
-    ref="popupRef"
-    type="bottom"
-    :safe-area="false"
-    @maskClick="handleClose"
-    @change="handlePopupChange"
-  >
-    <view class="refund-popup bg-F5F7FA border-box">
+  <uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose" @change="handlePopupChange">
+    <view class="refund-popup bg-[#f5f7fa] border-box">
       <view class="border-box flex flex-items-center justify-between pt-12 pb-12 relative">
         <view class="flex flex-col flex-items-center flex-full ">
           <view class="flex-full font-size-16 text-color-900 text-center">核销凭证</view>
@@ -19,47 +13,54 @@
       <view class="bg-white border-box rounded-12 flex flex-col flex-items-center flex-justify-center p-12 mb-12 mx-12">
 
         <view class="flex w-full flex-row flex-items-center flex-justify-between py-4">
-          <view >
+          <view>
             <view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
               {{ selectedVoucher.name }}
             </view>
           </view>
 
           <view v-if="selectedVoucher" class="flex flex-row">
-            <view class="bg-F5F7FA text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ selectedVoucher.count }}{{ selectedVoucher.unit }}
+            <view class="bg-[#f5f7fa] text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ selectedVoucher.count }}{{
+              selectedVoucher.unit }}
             </view>
-            <view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ selectedVoucher.count - selectedVoucher.writeOffCount }}{{ selectedVoucher.unit }}可用</view>
+            <view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ selectedVoucher.count -
+              selectedVoucher.writeOffCount }}{{ selectedVoucher.unit }}可用</view>
           </view>
         </view>
 
-        <view class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border pt-16 pb-32 mt-12">
+        <view
+          class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border pt-16 pb-32 mt-12">
           <view class="flex flex-row flex-justify-between border-box w-full px-12">
-            <view class="bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">凭证{{ selectedVoucherList.length > 1 ? currentVoucherIndex + 1 : '' }}</view>
-            <view class="text-color-500 font-size-14 px-12 line-height-24 rounded-12">此码仅可核销{{ selectedVoucher.count - selectedVoucher.writeOffCount }}份</view>
+            <view class="bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">凭证{{
+              selectedVoucherList.length > 1 ? currentVoucherIndex + 1 : '' }}</view>
+            <view class="text-color-500 font-size-14 px-12 line-height-24 rounded-12">此码仅可核销{{ selectedVoucher.count -
+              selectedVoucher.writeOffCount }}份</view>
           </view>
 
-            <view class="flex  flex-items-center flex-justify-center mt-20 p-20 rounded-12 border borderColor"
+          <view class="flex  flex-items-center flex-justify-center mt-20 p-20 rounded-12 border borderColor"
             :style="{ borderColor: selectedVoucher?.color }">
             <Qrcode v-if="showQrcode" :size="props.size" :unit="props.unit" :val="qrcodeVal" :loadMake="true"
               :onval="true" />
           </view>
 
-          <view v-if="false" class="mt-20 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">
-            {{ selectedVoucher.name }} 
+          <view v-if="false"
+            class="mt-20 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">
+            {{ selectedVoucher.name }}
           </view>
         </view>
 
-        <view v-if="selectedVoucherList.length > 1" class="flex flex-row w-full flex-items-center flex-justify-between mt-16 mb-24"> 
+        <view v-if="selectedVoucherList.length > 1"
+          class="flex flex-row w-full flex-items-center flex-justify-between mt-16 mb-24">
           <view class="actions-btn" @click.stop="upAction">
             <uni-icons type="left" size="16" color="#171717" />
           </view>
 
           <view class="flex flex-col">
-            <view class="flex flex-row flex-justify-center flex-items-center"> 
+            <view class="flex flex-row flex-justify-center flex-items-center">
               <view class="theme-color-500 font-size-16">{{ currentVoucherIndex + 1 }}</view>
               <view class="text-color-600 font-size-12">/{{ selectedVoucherList.length }}</view>
             </view>
-            
+
             <view class="text-color-600 font-size-14">扫码后点击下一张</view>
           </view>
 
diff --git a/src/pages-order/order/components/VoucherList/index.vue b/src/pages-order/order/components/VoucherList/index.vue
index 1ffa2c5..29e402b 100644
--- a/src/pages-order/order/components/VoucherList/index.vue
+++ b/src/pages-order/order/components/VoucherList/index.vue
@@ -3,20 +3,24 @@
     <text class="font-size-16 color-171717 line-height-24 font-500">
       核销凭证列表
     </text>
-    
-    <view class="flex flex-items-center flex-justify-between py-12" 
-    :class="[index+1 === props.orderData.commodityPackageConfig.length ? '' : 'border-bottom']"
-    v-for="(item, index) in props.orderData.commodityPackageConfig" :key="item.name">
+
+    <view class="flex flex-items-center flex-justify-between py-12"
+      :class="[index + 1 === props.orderData.commodityPackageConfig.length ? '' : 'border-bottom']"
+      v-for="(item, index) in props.orderData.commodityPackageConfig" :key="item.name">
       <view class="flex flex-col">
         <text class="text-color-900 font-size-16">{{ item.name }}</text>
         <view class="flex flex-row mt-8">
-          <view class="bg-F5F7FA text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ item.count }}{{item.unit}}</view>
-          <view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ item.count - item.writeOffCount }}{{item.unit}}可用</view>
+          <view class="bg-[#f5f7fa] text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ item.count }}{{ item.unit }}
+          </view>
+          <view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ item.count - item.writeOffCount
+          }}{{ item.unit }}可用</view>
         </view>
       </view>
 
-      <view class="flex flex-items-center px-14 py-8 rounded-8" :class="[item.packageStatus === 0 ? 'bg-theme-color-500' : 'bg-gray']" @click="handleShowQrcode(item, index)">
-        <text v-if="item.packageStatus === 0" class="font-size-14 color-white" >出示凭证</text>
+      <view class="flex flex-items-center px-14 py-8 rounded-8"
+        :class="[item.packageStatus === 0 ? 'bg-theme-color-500' : 'bg-[#f5f5f5]']"
+        @click="handleShowQrcode(item, index)">
+        <text v-if="item.packageStatus === 0" class="font-size-14 color-white">出示凭证</text>
         <text v-else class="font-size-14 text-color-300">已核销</text>
       </view>
     </view>
@@ -24,7 +28,7 @@
 </template>
 
 <script setup>
-import {defineProps, defineEmits } from "vue";
+import { defineProps, defineEmits } from "vue";
 
 const emit = defineEmits(["selected"]);
 
diff --git a/src/pages-quick/list.vue b/src/pages-quick/list.vue
index 2fbb6f6..1dd1cb8 100644
--- a/src/pages-quick/list.vue
+++ b/src/pages-quick/list.vue
@@ -2,21 +2,22 @@
   <z-paging ref="paging" v-model="dataList" use-virtual-list :force-close-inner-list="true" cell-height-mode="dynamic"
     safe-area-inset-bottom @query="queryList">
     <template #top>
-      <TopNavBar title="快速预定" :background="$theme-color-100" />
+      <TopNavBar title="快速预定" :background="$theme - color - 100" />
 
-      <Tabs @change="handleTabChange"/>
+      <Tabs @change="handleTabChange" />
 
       <!-- 选择入住、离店日期 0:是酒店 -->
-      <view v-if="didSelectedTabItem && didSelectedTabItem.orderType == 0" class="bg-white border-box flex flex-items-center p-12">
+      <view v-if="didSelectedTabItem && didSelectedTabItem.orderType == 0"
+        class="bg-white border-box flex flex-items-center p-12">
         <view class="in flex flex-items-center">
           <text class="font-size-11 font-500 color-99A0AE mr-4">入住</text>
           <text class="font-size-14 font-500 color-171717">
             {{ selectedDate.startDate }}
           </text>
-        </view> 
+        </view>
 
         <!-- 几晚 -->
-        <text class="nights bg-E5E8EE border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8">
+        <text class="nights bg-[#e5e8ee] border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8">
           {{ selectedDate.totalDays }}晚
         </text>
 
diff --git a/src/pages/ChatMain/ChatCardMine/index.vue b/src/pages/ChatMain/ChatCardMine/index.vue
index 71ffe2d..2d4d4e9 100644
--- a/src/pages/ChatMain/ChatCardMine/index.vue
+++ b/src/pages/ChatMain/ChatCardMine/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 外层行容器：接收来自父组件的对齐类（如 flex flex-justify-end） -->
   <view class="chat-mine-row">
-    <view class="chat-mine bg-17294E">
+    <view class="chat-mine bg-[#17294e]">
       <text class="font-size-15 color-white">{{ text }}</text>
       <slot></slot>
     </view>
diff --git a/src/pages/ChatModule/FacilityLocationCard/index.vue b/src/pages/ChatModule/FacilityLocationCard/index.vue
index 618ff6f..f5706f2 100644
--- a/src/pages/ChatModule/FacilityLocationCard/index.vue
+++ b/src/pages/ChatModule/FacilityLocationCard/index.vue
@@ -1,14 +1,10 @@
 <template>
   <view class="facility-location-card bg-white rounded-24 overflow-hidden w-full">
-    <image
-      class="facility-location-card__image block w-full"
-      :src="data.image"
-      mode="aspectFill"
-    />
+    <image class="facility-location-card__image block w-full" :src="data.image" mode="aspectFill" />
 
     <view class="facility-location-card__body px-24 pb-24">
       <view class="facility-location-card__title-row flex flex-items-center">
-        <view class="facility-location-card__badge color-2563EB bg-EFF6FF font-size-12 font-900">
+        <view class="facility-location-card__badge color-2563EB bg-[#eff6ff] font-size-12 font-900">
           {{ type.text }}
         </view>
         <view class="facility-location-card__title color-1E293B font-size-18 font-900 ellipsis-1">
@@ -21,7 +17,7 @@
         <text>{{ distance.text }}</text>
       </view>
 
-      <view class="facility-location-card__location bg-F8FAFC rounded-20">
+      <view class="facility-location-card__location bg-[#f8fafc] rounded-20">
         <view class="facility-location-card__location-label flex flex-items-center color-64748B font-size-13 font-900">
           <text class="facility-location-card__location-dot">{{ location.icon }}</text>
           <text>{{ location.label }}</text>
@@ -32,10 +28,8 @@
       </view>
 
       <view
-        class="facility-location-card__button flex flex-items-center flex-justify-center bg-0F172A color-white font-size-18 font-900"
-        :class="{ 'is-disabled': disabled }"
-        @click="handleAction"
-      >
+        class="facility-location-card__button flex flex-items-center flex-justify-center bg-[#0f172a] color-white font-size-18 font-900"
+        :class="{ 'is-disabled': disabled }" @click="handleAction">
         <text class="facility-location-card__button-icon">{{ action.icon }}</text>
         <text>{{ action.text }}</text>
       </view>
diff --git a/src/pages/ChatModule/LongTextGuideCard/index.vue b/src/pages/ChatModule/LongTextGuideCard/index.vue
index 268e131..61cafac 100644
--- a/src/pages/ChatModule/LongTextGuideCard/index.vue
+++ b/src/pages/ChatModule/LongTextGuideCard/index.vue
@@ -1,17 +1,10 @@
 <template>
   <view class="long-text-guide-card w-full">
     <view v-if="mode === 'list'" class="long-text-guide-card__list w-full">
-      <view
-        v-for="item in cards"
-        :key="item.id"
-        class="long-text-guide-card__summary-card bg-white rounded-24 border-box"
-        :class="{ 'is-disabled': disabled }"
-        @click="openDetail(item)"
-      >
-        <view
-          class="long-text-guide-card__badge font-size-12 font-900"
-          :class="`is-${item.badgeTone}`"
-        >
+      <view v-for="item in cards" :key="item.id"
+        class="long-text-guide-card__summary-card bg-white rounded-24 border-box" :class="{ 'is-disabled': disabled }"
+        @click="openDetail(item)">
+        <view class="long-text-guide-card__badge font-size-12 font-900" :class="`is-${item.badgeTone}`">
           {{ item.badge }}
         </view>
         <view class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
@@ -29,76 +22,49 @@
 
     <view v-else class="long-text-guide-card__detail-card bg-white rounded-24 border-box overflow-hidden">
       <view class="long-text-guide-card__detail-header flex flex-items-center border-bottom-F1F5F9">
-        <view
-          class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
-          @click="closeDetail"
-        >
+        <view class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
+          @click="closeDetail">
           <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
         </view>
         <view class="long-text-guide-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1">
           {{ activeItem.title }}
         </view>
-        <view
-          class="long-text-guide-card__badge long-text-guide-card__detail-badge font-size-12 font-900"
-          :class="`is-${activeItem.badgeTone}`"
-        >
+        <view class="long-text-guide-card__badge long-text-guide-card__detail-badge font-size-12 font-900"
+          :class="`is-${activeItem.badgeTone}`">
           {{ activeItem.badge }}
         </view>
       </view>
 
       <view class="long-text-guide-card__rich-body">
-        <view
-          v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage"
-          :key="`before-${paragraphIndex}`"
-          class="long-text-guide-card__paragraph color-475569 font-size-15 font-500"
-        >
-          <template
-            v-for="(segment, segmentIndex) in getSegments(paragraph)"
-            :key="`${paragraphIndex}-${segmentIndex}`"
-          >
-            <text
-              v-if="segment.highlight"
-              class="long-text-guide-card__highlight font-800"
-            >
+        <view v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage" :key="`before-${paragraphIndex}`"
+          class="long-text-guide-card__paragraph color-475569 font-size-15 font-500">
+          <template v-for="(segment, segmentIndex) in getSegments(paragraph)"
+            :key="`${paragraphIndex}-${segmentIndex}`">
+            <text v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
               {{ segment.text }}
             </text>
             <text v-else>{{ segment.text }}</text>
           </template>
         </view>
 
-        <image
-          v-if="activeItem.image"
-          class="long-text-guide-card__main-image w-full rounded-14 block"
-          :src="activeItem.image"
-          mode="aspectFill"
-        />
+        <image v-if="activeItem.image" class="long-text-guide-card__main-image w-full rounded-14 block"
+          :src="activeItem.image" mode="aspectFill" />
 
         <view class="long-text-guide-card__section-title color-1E293B font-size-16 font-900">
           {{ activeItem.sectionTitle }}
         </view>
-        <view class="long-text-guide-card__tip-block bg-ECFDF5">
-          <view
-            v-for="(tip, index) in activeItem.tips || []"
-            :key="tip"
-            class="long-text-guide-card__tip color-047857 font-size-14 font-800"
-          >
+        <view class="long-text-guide-card__tip-block bg-[#ecfdf5]">
+          <view v-for="(tip, index) in activeItem.tips || []" :key="tip"
+            class="long-text-guide-card__tip color-047857 font-size-14 font-800">
             {{ index + 1 }} {{ tip }}
           </view>
         </view>
 
-        <view
-          v-for="(paragraph, paragraphIndex) in paragraphsAfterTips"
-          :key="`after-${paragraphIndex}`"
-          class="long-text-guide-card__paragraph color-475569 font-size-15 font-500"
-        >
-          <template
-            v-for="(segment, segmentIndex) in getSegments(paragraph)"
-            :key="`${paragraphIndex}-${segmentIndex}`"
-          >
-            <text
-              v-if="segment.highlight"
-              class="long-text-guide-card__highlight font-800"
-            >
+        <view v-for="(paragraph, paragraphIndex) in paragraphsAfterTips" :key="`after-${paragraphIndex}`"
+          class="long-text-guide-card__paragraph color-475569 font-size-15 font-500">
+          <template v-for="(segment, segmentIndex) in getSegments(paragraph)"
+            :key="`${paragraphIndex}-${segmentIndex}`">
+            <text v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
               {{ segment.text }}
             </text>
             <text v-else>{{ segment.text }}</text>
@@ -112,11 +78,8 @@
         </view>
         <view class="long-text-guide-card__map-card rounded-16 overflow-hidden">
           <view class="long-text-guide-card__map-image-wrap relative">
-            <image
-              class="long-text-guide-card__map-image w-full block"
-              :src="activeItem.action.image"
-              mode="aspectFill"
-            />
+            <image class="long-text-guide-card__map-image w-full block" :src="activeItem.action.image"
+              mode="aspectFill" />
             <view class="long-text-guide-card__map-tag color-white font-size-10 font-900">
               {{ activeItem.action.tag }}
             </view>
@@ -126,10 +89,8 @@
               <view class="color-1E293B font-size-15 font-900">{{ activeItem.action.title }}</view>
               <view class="color-94A3B8 font-size-12 font-800 mt-2">{{ activeItem.action.subtitle }}</view>
             </view>
-            <view
-              class="long-text-guide-card__nav-btn color-white bg-0F172A font-size-14 font-900"
-              @click="handleAction(activeItem)"
-            >
+            <view class="long-text-guide-card__nav-btn color-white bg-[#0f172a] font-size-14 font-900"
+              @click="handleAction(activeItem)">
               {{ activeItem.action.buttonText }}
             </view>
           </view>
@@ -141,12 +102,10 @@
           {{ activeItem.action.label }}
         </view>
         <view class="long-text-guide-card__photo-card relative" @click="handleAction(activeItem)">
-          <image
-            class="long-text-guide-card__photo-image w-full block"
-            :src="activeItem.action.image"
-            mode="aspectFill"
-          />
-          <view class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900">
+          <image class="long-text-guide-card__photo-image w-full block" :src="activeItem.action.image"
+            mode="aspectFill" />
+          <view
+            class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900">
             ↗
           </view>
         </view>
diff --git a/src/pages/ChatModule/MapNavigationCard/index.vue b/src/pages/ChatModule/MapNavigationCard/index.vue
index 08e1a32..a927f11 100644
--- a/src/pages/ChatModule/MapNavigationCard/index.vue
+++ b/src/pages/ChatModule/MapNavigationCard/index.vue
@@ -1,11 +1,7 @@
 <template>
   <view class="map-navigation-card bg-white rounded-24 overflow-hidden w-full">
     <view class="map-navigation-card__media">
-      <image
-        class="map-navigation-card__image block w-full"
-        :src="data.image"
-        mode="aspectFill"
-      />
+      <image class="map-navigation-card__image block w-full" :src="data.image" mode="aspectFill" />
       <view class="map-navigation-card__badge flex flex-items-center color-white font-size-12 font-900">
         <text class="map-navigation-card__badge-icon">{{ badge.icon }}</text>
         <text>{{ badge.text }}</text>
@@ -22,10 +18,8 @@
         </view>
       </view>
       <view
-        class="map-navigation-card__button flex flex-items-center flex-justify-center bg-0F172A color-white font-size-18 font-900"
-        :class="{ 'is-disabled': disabled }"
-        @click="handleAction"
-      >
+        class="map-navigation-card__button flex flex-items-center flex-justify-center bg-[#0f172a] color-white font-size-18 font-900"
+        :class="{ 'is-disabled': disabled }" @click="handleAction">
         <text class="map-navigation-card__button-icon">{{ action.icon }}</text>
         <text>{{ action.text }}</text>
       </view>
diff --git a/src/pages/ChatModule/NoticeCard/index.vue b/src/pages/ChatModule/NoticeCard/index.vue
index 36a19ac..86b4f21 100644
--- a/src/pages/ChatModule/NoticeCard/index.vue
+++ b/src/pages/ChatModule/NoticeCard/index.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="notice-card w-full">
-    <view v-if="!detailOpen" class="notice-card__summary bg-FFFBEB rounded-24 w-full">
+    <view v-if="!detailOpen" class="notice-card__summary bg-[#fffbeb] rounded-24 w-full">
       <view class="notice-card__summary-title color-B45309 font-size-16 font-900">
         {{ summary.title }}
       </view>
@@ -11,11 +11,8 @@
         <view class="notice-card__summary-time color-D97706 font-size-12 font-900">
           {{ summary.publishTime }}
         </view>
-        <view
-          class="notice-card__summary-link color-B45309 font-size-14 font-900"
-          :class="{ 'is-disabled': disabled }"
-          @click="openDetail"
-        >
+        <view class="notice-card__summary-link color-B45309 font-size-14 font-900" :class="{ 'is-disabled': disabled }"
+          @click="openDetail">
           {{ summary.actionText }}
         </view>
       </view>
@@ -23,10 +20,8 @@
 
     <view v-else class="notice-card__detail bg-white rounded-24 overflow-hidden w-full">
       <view class="notice-card__detail-head flex flex-items-center">
-        <view
-          class="notice-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
-          @click="closeDetail"
-        >
+        <view class="notice-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
+          @click="closeDetail">
           <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
         </view>
         <view class="notice-card__head-title color-1E293B font-size-18 font-900">
@@ -34,31 +29,21 @@
         </view>
       </view>
 
-      <image
-        class="notice-card__image block w-full"
-        :src="detail.image"
-        mode="aspectFill"
-      />
+      <image class="notice-card__image block w-full" :src="detail.image" mode="aspectFill" />
 
       <view class="notice-card__detail-body">
         <view class="notice-card__detail-title color-1E293B font-size-20 font-900">
           {{ detail.title }}
         </view>
-        <view class="notice-card__time-pill flex flex-items-center bg-F8FAFC color-475569 font-size-13 font-900">
+        <view class="notice-card__time-pill flex flex-items-center bg-[#f8fafc] color-475569 font-size-13 font-900">
           <text class="notice-card__time-icon">{{ detail.timeIcon }}</text>
           <text>{{ detail.publishTime }}</text>
         </view>
         <view class="notice-card__divider"></view>
-        <view
-          v-for="paragraph in paragraphs"
-          :key="paragraph.id"
-          class="notice-card__paragraph color-475569 font-size-14 font-800"
-        >
-          <text
-            v-for="segment in paragraph.segments"
-            :key="segment.text"
-            :class="{ 'notice-card__strong': segment.strong }"
-          >
+        <view v-for="paragraph in paragraphs" :key="paragraph.id"
+          class="notice-card__paragraph color-475569 font-size-14 font-800">
+          <text v-for="segment in paragraph.segments" :key="segment.text"
+            :class="{ 'notice-card__strong': segment.strong }">
             {{ segment.text }}
           </text>
         </view>
diff --git a/src/pages/ChatModule/OpenMapComponent/index.vue b/src/pages/ChatModule/OpenMapComponent/index.vue
index 5f5fe94..ae32da8 100644
--- a/src/pages/ChatModule/OpenMapComponent/index.vue
+++ b/src/pages/ChatModule/OpenMapComponent/index.vue
@@ -12,7 +12,7 @@
                 <view class="font-color-900 font-size-14">打开导览地图</view>
                 <view class="font-color-500 font-size-12 mt-6">距你 {{ distance }} · 步行 {{ walk }}</view>
             </view>
-            <view class="ml-[12px] flex flex-items-center flex-justify-center w-32 h-32 rounded-full bg-F2F5F8">
+            <view class="ml-[12px] flex flex-items-center flex-justify-center w-32 h-32 rounded-full bg-[#f2f5f8]">
                 <uni-icons class="mb-2" type="right" size="12" color="#99A0AE" />
             </view>
         </view>
diff --git a/src/pages/ChatModule/PoiCompareCard/index.vue b/src/pages/ChatModule/PoiCompareCard/index.vue
index ec5aa7f..673285b 100644
--- a/src/pages/ChatModule/PoiCompareCard/index.vue
+++ b/src/pages/ChatModule/PoiCompareCard/index.vue
@@ -11,31 +11,15 @@
       </view>
 
       <view class="poi-compare-card__columns grid grid-cols-2 gap-16">
-        <view
-          v-for="item in items"
-          :key="item.id || item.name"
-          class="poi-compare-card__place"
-          :class="{ 'is-disabled': disabled }"
-          @click="handleSelect(item)"
-        >
-          <image
-            class="poi-compare-card__image block w-full"
-            :src="item.image"
-            mode="aspectFill"
-          />
-          <view
-            v-for="field in item.fields"
-            :key="field.label"
-            class="poi-compare-card__field"
-          >
+        <view v-for="item in items" :key="item.id || item.name" class="poi-compare-card__place"
+          :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
+          <image class="poi-compare-card__image block w-full" :src="item.image" mode="aspectFill" />
+          <view v-for="field in item.fields" :key="field.label" class="poi-compare-card__field">
             <view class="poi-compare-card__field-label color-94A3B8 font-size-12 font-800">
               {{ field.label }}
             </view>
-            <view
-              v-if="field.tone"
-              class="poi-compare-card__chip font-size-12 font-900"
-              :class="getToneClass(field.tone)"
-            >
+            <view v-if="field.tone" class="poi-compare-card__chip font-size-12 font-900"
+              :class="getToneClass(field.tone)">
               {{ field.value }}
             </view>
             <view v-else class="poi-compare-card__field-value color-1E293B font-size-14 font-900">
@@ -46,20 +30,16 @@
       </view>
 
       <view
-        class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-0F172A color-white font-size-15 font-900"
-        :class="{ 'is-disabled': disabled }"
-        @click="openDetail"
-      >
+        class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-[#0f172a] color-white font-size-15 font-900"
+        :class="{ 'is-disabled': disabled }" @click="openDetail">
         {{ data.detailButtonText }}
       </view>
     </view>
 
     <view v-else class="poi-compare-card__detail-card bg-white rounded-24 overflow-hidden">
       <view class="poi-compare-card__detail-head flex flex-items-center">
-        <view
-          class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
-          @click="closeDetail"
-        >
+        <view class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
+          @click="closeDetail">
           <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
         </view>
         <view class="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-full">
@@ -73,28 +53,18 @@
       <view class="poi-compare-card__table">
         <view class="poi-compare-card__table-head poi-compare-card__table-row">
           <view></view>
-          <view
-            v-for="item in items"
-            :key="item.id || item.name"
-            class="poi-compare-card__table-title color-1E293B font-size-14 font-900"
-          >
+          <view v-for="item in items" :key="item.id || item.name"
+            class="poi-compare-card__table-title color-1E293B font-size-14 font-900">
             {{ item.name }}
           </view>
         </view>
-        <view
-          v-for="row in detail.rows"
-          :key="row.label"
-          class="poi-compare-card__table-row poi-compare-card__data-row"
-        >
+        <view v-for="row in detail.rows" :key="row.label"
+          class="poi-compare-card__table-row poi-compare-card__data-row">
           <view class="poi-compare-card__row-label color-94A3B8 font-size-12 font-900">
             {{ row.label }}
           </view>
-          <view
-            v-for="cell in row.values"
-            :key="row.label + '-' + cell.text"
-            class="poi-compare-card__cell color-1E293B font-size-14 font-900"
-            :class="getCellClass(cell.tone)"
-          >
+          <view v-for="cell in row.values" :key="row.label + '-' + cell.text"
+            class="poi-compare-card__cell color-1E293B font-size-14 font-900" :class="getCellClass(cell.tone)">
             {{ cell.text }}
           </view>
         </view>
@@ -105,11 +75,7 @@
           {{ detail.recommendTitle }}
         </view>
         <view class="poi-compare-card__tips">
-          <view
-            v-for="tip in detail.tips"
-            :key="tip.text"
-            class="poi-compare-card__tip flex gap-10"
-          >
+          <view v-for="tip in detail.tips" :key="tip.text" class="poi-compare-card__tip flex gap-10">
             <view class="poi-compare-card__dot rounded-full flex-shrink-0" :class="getDotClass(tip.tone)" />
             <view class="poi-compare-card__tip-text color-334155 font-size-14 font-900">
               {{ tip.text }}
@@ -119,13 +85,10 @@
       </view>
 
       <view class="poi-compare-card__actions grid grid-cols-2 gap-14">
-        <view
-          v-for="action in detail.actions"
-          :key="action.id || action.text"
+        <view v-for="action in detail.actions" :key="action.id || action.text"
           class="poi-compare-card__action flex flex-items-center flex-justify-center font-size-15 font-900"
-          :class="[action.primary ? 'poi-compare-card__action--primary bg-0F172A color-white' : 'poi-compare-card__action--secondary color-334155', { 'is-disabled': disabled }]"
-          @click="handleAction(action)"
-        >
+          :class="[action.primary ? 'poi-compare-card__action--primary bg-[#0f172a] color-white' : 'poi-compare-card__action--secondary color-334155', { 'is-disabled': disabled }]"
+          @click="handleAction(action)">
           <text class="poi-compare-card__action-icon">{{ action.icon }}</text>
           <text>{{ action.text }}</text>
         </view>
@@ -156,8 +119,8 @@ const detail = computed(() => props.data.detail || {});
 
 const getToneClass = (tone) => {
   const toneMap = {
-    green: "poi-compare-card__chip--green color-047857 bg-ECFDF5",
-    amber: "poi-compare-card__chip--amber color-D97706 bg-FFFBEB",
+    green: "poi-compare-card__chip--green color-047857 bg-[#ecfdf5]",
+    amber: "poi-compare-card__chip--amber color-D97706 bg-[#fffbeb]",
   };
   return toneMap[tone] || "";
 };
diff --git a/src/pages/ChatModule/PoiDetailCard/index.vue b/src/pages/ChatModule/PoiDetailCard/index.vue
index 415ff36..3d3b6ec 100644
--- a/src/pages/ChatModule/PoiDetailCard/index.vue
+++ b/src/pages/ChatModule/PoiDetailCard/index.vue
@@ -1,11 +1,7 @@
 <template>
   <view class="poi-detail-card bg-white rounded-24 border-box overflow-hidden">
     <view class="poi-detail-card__hero relative">
-      <image
-        class="poi-detail-card__image w-full h-full block rounded-18"
-        :src="data.image"
-        mode="aspectFill"
-      />
+      <image class="poi-detail-card__image w-full h-full block rounded-18" :src="data.image" mode="aspectFill" />
       <view class="poi-detail-card__badge flex flex-items-center gap-4 font-size-10 font-900">
         <text class="poi-detail-card__badge-icon">⌖</text>
         <text>{{ data.badge?.text }}</text>
@@ -25,10 +21,8 @@
       </view>
 
       <view
-        class="poi-detail-card__button flex flex-items-center flex-justify-center gap-8 color-white bg-0F172A font-size-16 font-900"
-        :class="{ 'is-disabled': disabled }"
-        @click="handleAction"
-      >
+        class="poi-detail-card__button flex flex-items-center flex-justify-center gap-8 color-white bg-[#0f172a] font-size-16 font-900"
+        :class="{ 'is-disabled': disabled }" @click="handleAction">
         <text class="poi-detail-card__button-icon">↗</text>
         <text>{{ data.action?.text }}</text>
       </view>
diff --git a/src/pages/ChatModule/RoutePlanCard/index.vue b/src/pages/ChatModule/RoutePlanCard/index.vue
index 0c7dd07..4362fec 100644
--- a/src/pages/ChatModule/RoutePlanCard/index.vue
+++ b/src/pages/ChatModule/RoutePlanCard/index.vue
@@ -1,27 +1,16 @@
 <template>
   <view class="route-plan-card w-full">
-    <view
-      v-if="!detailOpen"
+    <view v-if="!detailOpen"
       class="route-plan-card__summary flex flex-items-center bg-white rounded-24 overflow-hidden w-full"
-      :class="{ 'is-disabled': disabled }"
-      @click="openDetail"
-    >
-      <image
-        class="route-plan-card__cover block flex-shrink-0"
-        :src="data.image"
-        mode="aspectFill"
-      />
+      :class="{ 'is-disabled': disabled }" @click="openDetail">
+      <image class="route-plan-card__cover block flex-shrink-0" :src="data.image" mode="aspectFill" />
       <view class="route-plan-card__body flex-full">
         <view class="route-plan-card__title color-1E293B font-size-18 font-900 ellipsis-1">
           {{ data.title }}
         </view>
         <view class="route-plan-card__tags flex flex-items-center">
-          <view
-            v-for="tag in summaryTags"
-            :key="tag.id || tag.text"
-            class="route-plan-card__tag font-size-12 font-900"
-            :class="getTagClass(tag.tone)"
-          >
+          <view v-for="tag in summaryTags" :key="tag.id || tag.text" class="route-plan-card__tag font-size-12 font-900"
+            :class="getTagClass(tag.tone)">
             {{ tag.text }}
           </view>
         </view>
@@ -33,36 +22,27 @@
 
     <view v-else class="route-plan-card__detail bg-white rounded-24 overflow-hidden w-full">
       <view class="route-plan-card__detail-head flex flex-items-center">
-        <view
-          class="route-plan-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
-          @click="closeDetail"
-        >
+        <view class="route-plan-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
+          @click="closeDetail">
           <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
         </view>
         <view class="route-plan-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
           {{ data.title }}
         </view>
-        <view class="route-plan-card__detail-badge color-047857 bg-ECFDF5 font-size-12 font-900">
+        <view class="route-plan-card__detail-badge color-047857 bg-[#ecfdf5] font-size-12 font-900">
           {{ detail.badge }}
         </view>
       </view>
 
       <view class="route-plan-card__timeline">
         <template v-for="(node, index) in nodes" :key="node.id || node.title">
-          <view
-            class="route-plan-card__node-wrap"
-            :class="{ 'is-disabled': disabled }"
-            @click="handleSelect(node)"
-          >
-            <view class="route-plan-card__node-number flex flex-items-center flex-justify-center rounded-full color-047857 bg-ECFDF5 font-size-12 font-900">
+          <view class="route-plan-card__node-wrap" :class="{ 'is-disabled': disabled }" @click="handleSelect(node)">
+            <view
+              class="route-plan-card__node-number flex flex-items-center flex-justify-center rounded-full color-047857 bg-[#ecfdf5] font-size-12 font-900">
               {{ index + 1 }}
             </view>
             <view class="route-plan-card__node bg-white rounded-20 flex flex-items-center">
-              <image
-                class="route-plan-card__node-image block flex-shrink-0"
-                :src="node.image"
-                mode="aspectFill"
-              />
+              <image class="route-plan-card__node-image block flex-shrink-0" :src="node.image" mode="aspectFill" />
               <view class="route-plan-card__node-body flex-full">
                 <view class="route-plan-card__node-title color-1E293B font-size-16 font-900 ellipsis-1">
                   {{ node.title }}
@@ -70,10 +50,7 @@
                 <view class="route-plan-card__node-desc color-94A3B8 font-size-12 font-800 ellipsis-1">
                   {{ node.description }}
                 </view>
-                <view
-                  v-if="node.tag"
-                  class="route-plan-card__node-tag color-D97706 bg-FFFBEB font-size-12 font-900"
-                >
+                <view v-if="node.tag" class="route-plan-card__node-tag color-D97706 bg-[#fffbeb] font-size-12 font-900">
                   {{ node.tag }}
                 </view>
               </view>
@@ -83,7 +60,8 @@
           <view v-if="connectors[index]" class="route-plan-card__connector">
             <view class="route-plan-card__connector-line"></view>
             <view class="route-plan-card__connector-arrow"></view>
-            <view class="route-plan-card__connector-chip flex flex-items-center bg-F8FAFC rounded-full color-64748B font-size-12 font-900">
+            <view
+              class="route-plan-card__connector-chip flex flex-items-center bg-[#f8fafc] rounded-full color-64748B font-size-12 font-900">
               <text class="route-plan-card__connector-icon">{{ connectors[index].icon }}</text>
               <text>{{ connectors[index].text }}</text>
             </view>
@@ -91,15 +69,12 @@
         </template>
       </view>
 
-      <view v-if="tips.length" class="route-plan-card__tips bg-F8FAFC rounded-20">
+      <view v-if="tips.length" class="route-plan-card__tips bg-[#f8fafc] rounded-20">
         <view class="route-plan-card__tips-title color-64748B font-size-14 font-900">
           {{ detail.tipsTitle }}
         </view>
-        <view
-          v-for="tip in tips"
-          :key="tip"
-          class="route-plan-card__tip flex flex-items-center color-334155 font-size-13 font-900"
-        >
+        <view v-for="tip in tips" :key="tip"
+          class="route-plan-card__tip flex flex-items-center color-334155 font-size-13 font-900">
           <view class="route-plan-card__tip-dot rounded-full flex-shrink-0"></view>
           <view>{{ tip }}</view>
         </view>
@@ -132,8 +107,8 @@ const connectors = computed(() => detail.value.connectors || []);
 const tips = computed(() => detail.value.tips || []);
 
 const getTagClass = (tone) => {
-  if (tone === "green") return "color-047857 bg-ECFDF5";
-  return "color-64748B bg-F1F5F9";
+  if (tone === "green") return "color-047857 bg-[#ecfdf5]";
+  return "color-64748B bg-[#f1f5f9]";
 };
 
 const openDetail = () => {
diff --git a/src/pages/ChatModule/SharedVisual/DetailShell.vue b/src/pages/ChatModule/SharedVisual/DetailShell.vue
index cc5b435..dba4476 100644
--- a/src/pages/ChatModule/SharedVisual/DetailShell.vue
+++ b/src/pages/ChatModule/SharedVisual/DetailShell.vue
@@ -1,7 +1,8 @@
 <template>
   <CardShell variant="detail">
     <view class="visual-detail__header flex flex-items-center px-16 border-box border-bottom-F1F5F9">
-      <view class="visual-detail__back mr-8 rounded-full bg-F8FAFC color-334155 font-900 text-center" @click="$emit('back')">
+      <view class="visual-detail__back mr-8 rounded-full bg-[#f8fafc] color-334155 font-900 text-center"
+        @click="$emit('back')">
         <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
       </view>
       <view class="visual-detail__title flex-full color-1E293B font-size-14 font-900 ellipsis-1">{{ title }}</view>
diff --git a/src/pages/ChatModule/SharedVisual/MediaFrame.vue b/src/pages/ChatModule/SharedVisual/MediaFrame.vue
index 68fa8cf..9059fdc 100644
--- a/src/pages/ChatModule/SharedVisual/MediaFrame.vue
+++ b/src/pages/ChatModule/SharedVisual/MediaFrame.vue
@@ -1,11 +1,6 @@
 <template>
-  <view class="visual-media relative w-full overflow-hidden bg-F1F5F9" :class="{ 'rounded-16': rounded }">
-    <image
-      v-if="src"
-      class="visual-media__image block w-full h-full"
-      :src="src"
-      :mode="mode"
-    />
+  <view class="visual-media relative w-full overflow-hidden bg-[#f1f5f9]" :class="{ 'rounded-16': rounded }">
+    <image v-if="src" class="visual-media__image block w-full h-full" :src="src" :mode="mode" />
     <view v-else class="visual-media__empty block w-full h-full"></view>
     <slot />
   </view>
diff --git a/src/pages/goods/album/index.vue b/src/pages/goods/album/index.vue
index 2e6f82b..1c037d1 100644
--- a/src/pages/goods/album/index.vue
+++ b/src/pages/goods/album/index.vue
@@ -1,27 +1,17 @@
 <template>
-  <view class="bg-F5F7FA flex flex-col h-screen overflow-hidden">
+  <view class="bg-[#f5f7fa] flex flex-col h-screen overflow-hidden">
     <TopNavBar title="房间相册" backgroundColor="transparent" />
     <view class="p-8">
-      <text class="ml-4 font-size-18 color-171717 font-500"
-        >全部({{ albumList.length }})</text
-      >
+      <text class="ml-4 font-size-18 color-171717 font-500">全部({{ albumList.length }})</text>
     </view>
 
     <scroll-view scroll-y class="scroll-container overflow-auto">
       <view class="pl-4 pr-4 pb-24">
         <view class="grid-container">
-          <view
-            class="album-item"
-            v-for="(item, index) in albumList"
-            :key="index"
-          >
+          <view class="album-item" v-for="(item, index) in albumList" :key="index">
             <view class="album-image-wrapper">
-              <image
-                class="album-image"
-                :src="item.photoUrl"
-                mode="aspectFill"
-                @click="handlePreview(item.photoUrl)"
-              ></image>
+              <image class="album-image" :src="item.photoUrl" mode="aspectFill" @click="handlePreview(item.photoUrl)">
+              </image>
               <view class="album-title">{{ item.name }}</view>
             </view>
           </view>
@@ -87,11 +77,9 @@ const handlePreview = (photoUrl) => {
   left: 0;
   right: 0;
   padding: 8px;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.6) 100%
-  );
+  background: linear-gradient(180deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.6) 100%);
   color: #fff;
   font-size: 14px;
   font-weight: 500;
diff --git a/src/pages/goods/index.vue b/src/pages/goods/index.vue
index 5aef5ae..5b5d6bd 100644
--- a/src/pages/goods/index.vue
+++ b/src/pages/goods/index.vue
@@ -1,20 +1,12 @@
 <template>
-  <view class="goods-container bg-gray">
-    <TopNavBar
-      :title="navOpacity < 0.5 ? '' : '商品详情'"
-      :background="`rgba(217, 238, 255, ${navOpacity})`"
+  <view class="goods-container bg-[#f5f5f5]">
+    <TopNavBar :title="navOpacity < 0.5 ? '' : '商品详情'" :background="`rgba(217, 238, 255, ${navOpacity})`"
       :titleColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
-      :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
-    />
+      :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'" />
 
     <!-- 滚动区域 -->
     <scroll-view class="content-wrapper" scroll-y @scroll="handleScroll">
-      <ImageSwiper
-        :border-radius="0"
-        :height="300"
-        :images="goodsData.commodityPhotoList"
-        thumbnailBottom="42px"
-      />
+      <ImageSwiper :border-radius="0" :height="300" :images="goodsData.commodityPhotoList" thumbnailBottom="42px" />
 
       <view class="goods-content">
         <!-- 商品信息组件 -->
@@ -24,21 +16,17 @@
         <LocationCard :orderData="goodsData" />
 
         <!-- 日期选择区域 -->
-        <DateSelector
-          v-if="goodsData.orderType == 0"
-          @showCalendar="showCalendar"
-          :checkInDate="selectedDate.startDate"
-          :checkOutDate="selectedDate.endDate"
-          :checkInDay="''"
-          :checkOutDay="''"
-          :nights="selectedDate.totalDays"
-        />
+        <DateSelector v-if="goodsData.orderType == 0" @showCalendar="showCalendar" :checkInDate="selectedDate.startDate"
+          :checkOutDate="selectedDate.endDate" :checkInDay="''" :checkOutDay="''" :nights="selectedDate.totalDays" />
 
         <!-- 商品套餐组件 -->
-        <GoodPackage v-if="goodsData.orderType != 0 && goodsData.commodityPackageConfig && goodsData.commodityPackageConfig.length > 0" :goodsData="goodsData" />
+        <GoodPackage
+          v-if="goodsData.orderType != 0 && goodsData.commodityPackageConfig && goodsData.commodityPackageConfig.length > 0"
+          :goodsData="goodsData" />
 
         <!-- 商品设施组件 -->
-        <GoodFacility v-if="goodsData.commodityEquipment && goodsData.commodityEquipment.length > 0" :goodsData="goodsData" />
+        <GoodFacility v-if="goodsData.commodityEquipment && goodsData.commodityEquipment.length > 0"
+          :goodsData="goodsData" />
 
         <!-- 商品详情组件 -->
         <GoodDetail :goodsData="goodsData" />
@@ -47,33 +35,19 @@
 
     <!-- 立即抢购 -->
     <view class="footer border-top">
-      <view
-        class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
-      >
+      <view class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8">
         {{ calculatedTotalPrice }}
       </view>
 
-      <view
-        class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8"
-        @click="navigateToPay(goodsData)"
-      >
-        <image
-          class="icon"
-          src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
-        />
+      <view class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8" @click="navigateToPay(goodsData)">
+        <image class="icon" src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png" />
         <text class="font-size-16 font-500 color-white">立即预定</text>
       </view>
     </view>
 
     <!-- 日历组件 -->
-    <Calender
-      :visible="calendarVisible"
-      mode="range"
-      :range-require-price="true"
-      :price-data="priceData"
-      @close="handleCalendarClose"
-      @range-select="handleDateSelect"
-    />
+    <Calender :visible="calendarVisible" mode="range" :range-require-price="true" :price-data="priceData"
+      @close="handleCalendarClose" @range-select="handleDateSelect" />
   </view>
 </template>
 
diff --git a/src/pages/test/index.vue b/src/pages/test/index.vue
index f76369a..1b719ad 100644
--- a/src/pages/test/index.vue
+++ b/src/pages/test/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <scroll-view class="test-page h-screen bg-F5F7FA" scroll-y>
+  <scroll-view class="test-page h-screen bg-[#f5f7fa]" scroll-y>
     <view class="test-page__header">
       <view class="test-page__title">ChatModule 视觉组件预览</view>
       <view class="test-page__subtitle">组件使用 props mock 数据渲染，点击事件仅打印日志。</view>
@@ -7,98 +7,67 @@
 
     <view class="test-page__section">
       <view class="test-page__section-title">LongTextGuideCard</view>
-      <LongTextGuideCard
-        :data="longTextGuideCardMock"
-        @select="handleEvent('LongTextGuideCard', 'select', $event)"
+      <LongTextGuideCard :data="longTextGuideCardMock" @select="handleEvent('LongTextGuideCard', 'select', $event)"
         @back="handleEvent('LongTextGuideCard', 'back', $event)"
-        @action="handleEvent('LongTextGuideCard', 'action', $event)"
-      />
+        @action="handleEvent('LongTextGuideCard', 'action', $event)" />
     </view>
 
     <view class="test-page__section">
       <view class="test-page__section-title">PoiDetailCard</view>
-      <PoiDetailCard
-        :data="poiDetailCardMock"
-        @action="handleEvent('PoiDetailCard', 'action', $event)"
-      />
+      <PoiDetailCard :data="poiDetailCardMock" @action="handleEvent('PoiDetailCard', 'action', $event)" />
     </view>
 
     <view class="test-page__section">
       <view class="test-page__section-title">RecommendationListCard</view>
-      <RecommendationListCard
-        :data="recommendationListCardMock"
-        @select="handleEvent('RecommendationListCard', 'select', $event)"
-      />
+      <RecommendationListCard :data="recommendationListCardMock"
+        @select="handleEvent('RecommendationListCard', 'select', $event)" />
     </view>
 
     <view class="test-page__section">
       <view class="test-page__section-title">PoiCompareCard</view>
-      <PoiCompareCard
-        :data="poiCompareCardMock"
-        @select="handleEvent('PoiCompareCard', 'select', $event)"
-        @back="handleEvent('PoiCompareCard', 'back', $event)"
-      />
+      <PoiCompareCard :data="poiCompareCardMock" @select="handleEvent('PoiCompareCard', 'select', $event)"
+        @back="handleEvent('PoiCompareCard', 'back', $event)" />
     </view>
 
     <view class="test-page__section">
       <view class="test-page__section-title">RoutePlanCard</view>
-      <RoutePlanCard
-        :data="routePlanCardMock"
-        @select="handleEvent('RoutePlanCard', 'select', $event)"
-        @back="handleEvent('RoutePlanCard', 'back', $event)"
-      />
+      <RoutePlanCard :data="routePlanCardMock" @select="handleEvent('RoutePlanCard', 'select', $event)"
+        @back="handleEvent('RoutePlanCard', 'back', $event)" />
     </view>
 
     <view class="test-page__section">
       <view class="test-page__section-title">FacilityLocationCard</view>
-      <FacilityLocationCard
-        :data="facilityLocationCardMock"
-        @select="handleEvent('FacilityLocationCard', 'select', $event)"
-      />
+      <FacilityLocationCard :data="facilityLocationCardMock"
+        @select="handleEvent('FacilityLocationCard', 'select', $event)" />
     </view>
 
     <view class="test-page__section">
       <view class="test-page__section-title">ScenicImageCard</view>
-      <ScenicImageCard
-        :data="scenicImageCardMock"
-        @select="handleEvent('ScenicImageCard', 'select', $event)"
-        @action="handleEvent('ScenicImageCard', 'action', $event)"
-      />
+      <ScenicImageCard :data="scenicImageCardMock" @select="handleEvent('ScenicImageCard', 'select', $event)"
+        @action="handleEvent('ScenicImageCard', 'action', $event)" />
     </view>
 
     <view class="test-page__section">
       <view class="test-page__section-title">MapNavigationCard</view>
-      <MapNavigationCard
-        :data="mapNavigationCardMock"
-        @select="handleEvent('MapNavigationCard', 'select', $event)"
-        @action="handleEvent('MapNavigationCard', 'action', $event)"
-      />
+      <MapNavigationCard :data="mapNavigationCardMock" @select="handleEvent('MapNavigationCard', 'select', $event)"
+        @action="handleEvent('MapNavigationCard', 'action', $event)" />
     </view>
 
     <view class="test-page__section">
       <view class="test-page__section-title">AigcPhotoCard</view>
-      <AigcPhotoCard
-        :data="aigcPhotoCardMock"
-        @select="handleEvent('AigcPhotoCard', 'select', $event)"
-        @action="handleEvent('AigcPhotoCard', 'action', $event)"
-      />
+      <AigcPhotoCard :data="aigcPhotoCardMock" @select="handleEvent('AigcPhotoCard', 'select', $event)"
+        @action="handleEvent('AigcPhotoCard', 'action', $event)" />
     </view>
 
     <view class="test-page__section">
       <view class="test-page__section-title">FaqHelpCard</view>
-      <FaqHelpCard
-        :data="faqHelpCardMock"
-        @select="handleEvent('FaqHelpCard', 'select', $event)"
-      />
+      <FaqHelpCard :data="faqHelpCardMock" @select="handleEvent('FaqHelpCard', 'select', $event)" />
     </view>
 
     <view class="test-page__section">
       <view class="test-page__section-title">NoticeCard</view>
-      <NoticeCard
-        :data="noticeCardMock"
-        @select="handleEvent('NoticeCard', 'select', $event)"
-        @back="handleEvent('NoticeCard', 'back', $event)"
-      />
+      <NoticeCard :data="noticeCardMock" @select="handleEvent('NoticeCard', 'select', $event)"
+        @back="handleEvent('NoticeCard', 'back', $event)" />
     </view>
   </scroll-view>
 </template>
diff --git a/src/static/scss/background.scss b/src/static/scss/background.scss
index 8e9a4fd..671ffaa 100644
--- a/src/static/scss/background.scss
+++ b/src/static/scss/background.scss
@@ -1,75 +1,4 @@
 // 背景颜色
-.bg-white {
-  background-color: #fff;
-}
-
-.bg-gray {
-  background-color: #f5f5f5;
-}
-
-.bg-F7F7F7 {
-  background-color: #f7f7f7;
-}
-
-.bg-17294E {
-  background-color: #17294e;
-}
-
-.bg-E5E8EE {
-  background-color: #e5e8ee;
-}
-
-.bg-F5F7FA {
-  background-color: #f5f7fa;
-}
-
-.bg-F2F5F8 {
-  background-color: #f2f5f8;
-}
-
-.bg-F8FAFC {
-  background-color: #f8fafc;
-}
-
-.bg-F1F5F9 {
-  background-color: #f1f5f9;
-}
-
-.bg-ECFDF5 {
-  background-color: #ecfdf5;
-}
-
-.bg-FFFBEB {
-  background-color: #fffbeb;
-}
-
-.bg-EFF6FF {
-  background-color: #eff6ff;
-}
-
-.bg-F5F3FF {
-  background-color: #f5f3ff;
-}
-
-.bg-FFF1F2 {
-  background-color: #fff1f2;
-}
-
-.bg-CCFBF1 {
-  background-color: #ccfbf1;
-}
-
-.bg-0F172A {
-  background-color: #0f172a;
-}
-
-.bg-0F766E {
-  background-color: #0f766e;
-}
-
-.bg-FF3D60 {
-  background-color: #ff3d60;
-}
 
 .bg-theme-color-500 {
   background-color: $theme-color-500;
@@ -84,18 +13,14 @@
 }
 
 .bg-liner {
-  background: linear-gradient(205deg, $theme-color-100 0%, rgba(138, 227, 252, 0) 20%),
+  background:
+    linear-gradient(205deg, $theme-color-100 0%, rgba(138, 227, 252, 0) 20%),
     linear-gradient(155deg, #fef7e1 0%, rgba(254, 247, 225, 0) 20%),
-    radial-gradient(48% 48% at 61% 118%,
+    radial-gradient(
+      48% 48% at 61% 118%,
       #ffffff 0%,
-      rgba(255, 255, 255, 0) 100%),
-    linear-gradient(180deg, rgba(238, 248, 255, 0) 0%, $theme-color-50 50%), $theme-color-50;
-}
-
-.bg-button {
-  background: linear-gradient(90deg, $theme-color-500 0%, #4de4ff 100%);
-}
-
-.bg-transparent {
-  background-color: transparent;
+      rgba(255, 255, 255, 0) 100%
+    ),
+    linear-gradient(180deg, rgba(238, 248, 255, 0) 0%, $theme-color-50 50%),
+    $theme-color-50;
 }