From 29562871358071f318a2a45dffe9c89be02fd913 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Fri, 29 May 2026 09:56:52 +0800
Subject: [PATCH] style: standardize design token classes and spacing units

Standardize styling across all components:
1. Replace legacy color utilities and hardcoded hex values with official design token classes
2. Update margin/padding/rounded corner values to use wrapped [px] syntax for consistency
3. Fix inconsistent line-height class names to use leading-[value] format
---
 src/components/CreateServiceOrder/index.vue   | 17 +++++++++--------
 src/components/CustomEmpty/index.vue          |  2 +-
 src/components/DateRangeSection/index.vue     | 12 ++++++------
 src/components/DetailPopup/index.vue          | 16 ++++++++--------
 src/components/Feedback/index.vue             | 10 +++++-----
 src/components/GoodDetail/index.vue           |  4 ++--
 src/components/RefundPopup/index.vue          |  8 ++++----
 src/components/Stepper/index.vue              |  2 +-
 src/components/SurveyQuestionnaire/index.vue  |  2 +-
 src/components/UseDateRange/index.vue         |  4 ++--
 src/pages/album/index.vue                     |  2 +-
 .../components/ConactSection/index.vue        | 12 ++++++------
 .../booking/components/UserSection/index.vue  | 13 +++++++------
 src/pages/booking/index.vue                   | 13 +++++++------
 .../home/components/AnswerComponent/index.vue |  2 +-
 .../home/components/ChatLongAnswer/index.vue  |  2 +-
 .../home/components/ChatTopWelcome/index.vue  |  2 +-
 .../LongTextGuideCardPreview/index.vue        |  2 +-
 .../home/components/MoreService/index.vue     | 12 ++++++------
 .../home/components/NoticeMessage/detail.vue  |  4 ++--
 .../components/RecommendPostsList/index.vue   |  2 +-
 .../RecommendationListCard/index.vue          |  2 +-
 .../order/components/AmtSection/index.vue     |  8 ++++----
 .../order/components/GoodsInfo/index.vue      | 19 ++++++++++---------
 .../order/components/OrderCard/InfoRow.vue    |  4 ++--
 .../components/OrderCard/OrderCardContent.vue |  4 ++--
 .../order/components/OrderInfo/index.vue      |  6 +++---
 .../order/order/components/UserInfo/index.vue |  6 +++---
 .../order/components/VoucherList/index.vue    |  8 ++++----
 src/pages/quick/components/Card/index.vue     |  4 ++--
 src/pages/quick/index.vue                     |  8 ++++----
 31 files changed, 108 insertions(+), 104 deletions(-)

diff --git a/src/components/CreateServiceOrder/index.vue b/src/components/CreateServiceOrder/index.vue
index 3998702..634ec03 100644
--- a/src/components/CreateServiceOrder/index.vue
+++ b/src/components/CreateServiceOrder/index.vue
@@ -2,31 +2,31 @@
   <div class="create-service-order">
     <div class="w-full bg-white  border-ff overflow-hidden rounded-20">
       <div class=" order-header w-vw flex flex-items-center flex-justify-between bg-theme-color-50">
-        <span class="text-[18px] font-medium color-171717 text-left ml-12">
+        <span class="text-[18px] font-medium text-[#171717] text-left ml-12">
           {{ isCallSuccess ? "服务已创建" : "呼叫服务" }}
         </span>
         <img class="header-icon" src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png" />
       </div>
 
       <div v-if="!isCallSuccess" class=" p-[12px]">
-        <div class="bg-F5F7FA  flex flex-items-center p-[12px] rounded-10 text-[14px] color-171717 mb-12">
+        <div class="bg-F5F7FA  flex flex-items-center p-[12px] rounded-10 text-[14px] text-[#171717] mb-[12px]">
           <span class="font-medium line-height-22 mr-20">所在位置</span>
           <input placeholder="请填写所在位置" v-model="roomId" />
         </div>
 
-        <div class="bg-F5F7FA  flex flex-items-center p-[12px] rounded-10 text-[14px] color-171717 mb-12">
+        <div class="bg-F5F7FA  flex flex-items-center p-[12px] rounded-10 text-[14px] text-[#171717] mb-[12px]">
           <span class="font-medium line-height-22 mr-20">联系电话</span>
           <input placeholder="请填写联系电话" v-model="contactPhone" @input="handleContactPhoneInput" />
         </div>
 
-        <div class="bg-F5F7FA  p-[12px] rounded-10 text-[14px] font-medium color-171717 mb-12">
-          <div class="font-medium line-height-22 mb-12">需求信息描述</div>
+        <div class="bg-F5F7FA  p-[12px] rounded-10 text-[14px] font-medium text-[#171717] mb-[12px]">
+          <div class="font-medium line-height-22 mb-[12px]">需求信息描述</div>
           <textarea class="h-80" placeholder="请输入需求信息描述" placeholder-class="text-[14px] font-400" maxlength="100"
             v-model="contactText" />
         </div>
 
-        <div class="bg-F5F7FA  p-[12px] rounded-10 text-[14px] font-medium color-171717 mb-12">
-          <div class="font-medium line-height-22 mb-12">照片上传</div>
+        <div class="bg-F5F7FA  p-[12px] rounded-10 text-[14px] font-medium text-[#171717] mb-[12px]">
+          <div class="font-medium line-height-22 mb-[12px]">照片上传</div>
 
           <div class="w-80 h-80 bg-white rounded-8 overflow-hidden flex flex-items-center flex-justify-center">
             <div v-if="contentImgUrl" class="w-full h-full relative inline-block">
@@ -59,7 +59,8 @@
         <img v-if="contentImgUrl" class="right rounded-6" :src="contentImgUrl" mode="aspectFill" />
       </div>
 
-      <div class="btn rounded-[5px]0 text-white bg-button flex flex-items-center flex-justify-center ml-12 mr-12 mb-12"
+      <div
+        class="btn rounded-[5px]0 text-white bg-button flex flex-items-center flex-justify-center ml-12 mr-12 mb-[12px]"
         @click="handleCall">
         {{ isCallSuccess ? "查看服务" : "立即呼叫" }}
       </div>
diff --git a/src/components/CustomEmpty/index.vue b/src/components/CustomEmpty/index.vue
index 13e8a65..6dfc8f6 100644
--- a/src/components/CustomEmpty/index.vue
+++ b/src/components/CustomEmpty/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="empty-container flex flex-col items-center justify-center">
     <img class="empty-image" :src="emptyIcon" mode="aspectFit" />
-    <span class="text-[12px] text-center color-99A0AE mt-8">
+    <span class="text-[12px] text-center text-ink-400 mt-8">
       {{ statusText }}
     </span>
   </div>
diff --git a/src/components/DateRangeSection/index.vue b/src/components/DateRangeSection/index.vue
index ff60b5c..5a97840 100644
--- a/src/components/DateRangeSection/index.vue
+++ b/src/components/DateRangeSection/index.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class=" flex flex-items-center flex-justify-between mb-12">
+  <div class=" flex flex-items-center flex-justify-between mb-[12px]">
     <div class="left flex flex-items-center">
-      <span class="text-[12px] color-99A0AE mr-[4px]">入住</span>
-      <span class="text-[12px] color-171717 mr-16">
+      <span class="text-[12px] text-ink-400 mr-[4px]">入住</span>
+      <span class="text-[12px] text-[#171717] mr-16">
         {{ selectedDate.startDate }}
       </span>
       <span class="total  rounded-[5px]0 flex flex-items-center text-[11px] color-43669A relative">{{
         selectedDate.totalDays }}晚</span>
-      <span class="text-[12px] color-99A0AE ml-16">离店</span>
-      <span class="text-[12px] color-171717 ml-4">
+      <span class="text-[12px] text-ink-400 ml-16">离店</span>
+      <span class="text-[12px] text-[#171717] ml-4">
         {{ selectedDate.endDate }}
       </span>
     </div>
     <div class="flex flex-items-center" v-if="showBtn" @click="emit('click')">
-      <span class="text-[12px] theme-color-500 line-height-16">房间详情</span>
+      <span class="text-[12px] theme-color-500 leading-[16px]">房间详情</span>
       <van-icon name="arrow-right" size="15" color="#99A0AE" />
     </div>
   </div>
diff --git a/src/components/DetailPopup/index.vue b/src/components/DetailPopup/index.vue
index c42150f..8cbd785 100644
--- a/src/components/DetailPopup/index.vue
+++ b/src/components/DetailPopup/index.vue
@@ -1,8 +1,8 @@
 <template>
   <uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
     <div class="refund-popup bg-F5F7FA ">
-      <div class=" flex flex-items-center justify-between pt-12 pb-12 relative">
-        <div class="flex-full text-[16px] color-171717 leading-[24px] text-center">
+      <div class=" flex flex-items-center justify-between pt-[12px] pb-[12px] relative">
+        <div class="flex-full text-[16px] text-[#171717] leading-[24px] text-center">
           明细详情
         </div>
         <!-- 关闭按钮 -->
@@ -10,13 +10,13 @@
       </div>
       <!-- 内容区域 -->
       <div class="rounded-[12px] bg-white ml-12 mr-12 mb-40">
-        <div class=" border-bottom flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12">
-          <span class="text-[16px] font-medium color-171717">在线支付</span>
-          <span class="text-[14px] color-171717">239</span>
+        <div class=" border-bottom flex flex-items-center flex-justify-between pt-[12px] pb-[12px] ml-12 mr-12">
+          <span class="text-[16px] font-medium text-[#171717]">在线支付</span>
+          <span class="text-[14px] text-[#171717]">239</span>
         </div>
-        <div class=" flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12">
-          <span class="text-[16px] font-medium color-171717">房费</span>
-          <span class="text-[14px] color-171717">239</span>
+        <div class=" flex flex-items-center flex-justify-between pt-[12px] pb-[12px] ml-12 mr-12">
+          <span class="text-[16px] font-medium text-[#171717]">房费</span>
+          <span class="text-[14px] text-[#171717]">239</span>
         </div>
       </div>
     </div>
diff --git a/src/components/Feedback/index.vue b/src/components/Feedback/index.vue
index 8e5bf61..55b4bf5 100644
--- a/src/components/Feedback/index.vue
+++ b/src/components/Feedback/index.vue
@@ -2,19 +2,19 @@
   <div class="create-service-order">
     <div class="w-full bg-white  border-ff overflow-hidden rounded-20">
       <div class=" order-header w-vw flex flex-items-center flex-justify-between bg-theme-color-50">
-        <span class="text-[18px] font-medium color-171717 text-left ml-12">
+        <span class="text-[18px] font-medium text-[#171717] text-left ml-12">
           {{ isCallSuccess ? "反馈已创建" : "反馈意见" }}
         </span>
         <img class="header-icon" src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png" />
       </div>
 
       <div v-if="!isCallSuccess" class=" p-[12px]">
-        <div class="bg-F5F7FA  flex flex-items-center p-[12px] rounded-10 text-[14px] color-171717 mb-12">
+        <div class="bg-F5F7FA  flex flex-items-center p-[12px] rounded-10 text-[14px] text-[#171717] mb-[12px]">
           <span class="font-medium line-height-22 mr-20">联系电话</span>
           <input placeholder="请填写联系电话" v-model="contactPhone" />
         </div>
-        <div class="bg-F5F7FA  p-[12px] rounded-10 text-[14px] font-medium color-171717 mb-12">
-          <div class="font-medium line-height-22 mb-12">意见内容</div>
+        <div class="bg-F5F7FA  p-[12px] rounded-10 text-[14px] font-medium text-[#171717] mb-[12px]">
+          <div class="font-medium line-height-22 mb-[12px]">意见内容</div>
           <textarea class="h-80" placeholder="请输入反馈意见" placeholder-class="text-[14px] font-400" maxlength="100"
             v-model="contactText" />
         </div>
@@ -34,7 +34,7 @@
         </div>
       </div>
 
-      <div class="footer-help flex flex-items-center pl-12 mb-12">
+      <div class="footer-help flex flex-items-center pl-12 mb-[12px]">
         <img class="help-icon mr-[4px]" src="./images/icon_volume.png" />
         <span class="text-[12px] font-medium color-FA7319">
           {{ appName }}收到您的意见将第一时间为您处理!
diff --git a/src/components/GoodDetail/index.vue b/src/components/GoodDetail/index.vue
index 48cfb1e..63979de 100644
--- a/src/components/GoodDetail/index.vue
+++ b/src/components/GoodDetail/index.vue
@@ -4,7 +4,7 @@
       <ModuleTitle v-if="showTitle" :title="goodsData.commodityPurchaseInstruction.templateTitle" />
       <div v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
         .commodityPurchaseInstructionModuleEntityList" :key="index">
-        <div class="flex flex-items-start flex-col pt-12 pb-12" :class="{
+        <div class="flex flex-items-start flex-col pt-[12px] pb-[12px]" :class="{
           'border-bottom':
             index <
             goodsData.commodityPurchaseInstruction
@@ -13,7 +13,7 @@
         }">
           <div class="flex flex-items-center flex-row flex-shrink-0 mr-8">
             <zn-icon :name="moduleItem.moduleIcon" size="20" color="#333"></zn-icon>
-            <span class="ml-4 text-[14px] color-171717 leading-[20px]">
+            <span class="ml-4 text-[14px] text-[#171717] leading-[20px]">
               {{ moduleItem.moduleTitle }}
             </span>
           </div>
diff --git a/src/components/RefundPopup/index.vue b/src/components/RefundPopup/index.vue
index 509d1ae..eaab18a 100644
--- a/src/components/RefundPopup/index.vue
+++ b/src/components/RefundPopup/index.vue
@@ -1,8 +1,8 @@
 <template>
   <uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
     <div class="refund-popup bg-F5F7FA ">
-      <div class=" flex flex-items-center justify-between pt-12 pb-12 relative">
-        <div class="flex-full text-[16px] color-171717 leading-[24px] text-center">
+      <div class=" flex flex-items-center justify-between pt-[12px] pb-[12px] relative">
+        <div class="flex-full text-[16px] text-[#171717] leading-[24px] text-center">
           取消政策
         </div>
         <!-- 关闭按钮 -->
@@ -14,11 +14,11 @@
           <uni-icons fontFamily="znicons" size="20" color="#333">
             {{ iconsMap["zn-refund"] }}
           </uni-icons>
-          <span class="text-[14px] font-600 color-171717 ml-8">
+          <span class="text-[14px] font-600 text-[#171717] ml-8">
             {{ refundTitle }}
           </span>
         </div>
-        <div class="text-[14px] text-ink-600 line-height-16 mb-4" v-for="(item, index) in commodityPurchaseInstruction"
+        <div class="text-[14px] text-ink-600 leading-[16px] mb-4" v-for="(item, index) in commodityPurchaseInstruction"
           :key="index">
           {{ item }}
         </div>
diff --git a/src/components/Stepper/index.vue b/src/components/Stepper/index.vue
index 5761672..f9df8ff 100644
--- a/src/components/Stepper/index.vue
+++ b/src/components/Stepper/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="stepper-wrapper  flex flex-items-center rounded-8">
     <uni-icons type="minus" size="24" color="#D1D1D1" @click="decrease" />
-    <text class="stepper-text text-center text-[14px] font-medium color-000 ml-4 mr-[4px]">
+    <text class="stepper-text text-center text-[14px] font-medium text-black ml-4 mr-[4px]">
       {{ value }} {{ unit }}
     </text>
     <uni-icons type="plus" size="24" color="#198CFF" @click="increase" />
diff --git a/src/components/SurveyQuestionnaire/index.vue b/src/components/SurveyQuestionnaire/index.vue
index f4b2a8b..e10fe18 100644
--- a/src/components/SurveyQuestionnaire/index.vue
+++ b/src/components/SurveyQuestionnaire/index.vue
@@ -2,7 +2,7 @@
   <div class="survey-questionnaire w-vw-24">
     <div class="bg-white  border-ff overflow-hidden rounded-20">
       <div class=" flex flex-items-center flex-justify-between bg-theme-color-50">
-        <span class="text-[18px] font-medium color-171717 text-left ml-12">
+        <span class="text-[18px] font-medium text-[#171717] text-left ml-12">
           调查问卷
         </span>
         <img class="w-102 h-72" :src="surveyData.logoUrl" mode="widthFix" />
diff --git a/src/components/UseDateRange/index.vue b/src/components/UseDateRange/index.vue
index d1a91f3..b1ee9d8 100644
--- a/src/components/UseDateRange/index.vue
+++ b/src/components/UseDateRange/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="bg-white rounded-[12px] overflow-hidden mb-12">
-    <div class=" text-[16px] font-medium color-000 leading-[24px] p-[12px]">
+  <div class="bg-white rounded-[12px] overflow-hidden mb-[12px]">
+    <div class=" text-[16px] font-medium text-black leading-[24px] p-[12px]">
       使用日期
     </div>
     <div class="flex flex-items-center ">
diff --git a/src/pages/album/index.vue b/src/pages/album/index.vue
index f3fc6e5..5ed8ebb 100644
--- a/src/pages/album/index.vue
+++ b/src/pages/album/index.vue
@@ -2,7 +2,7 @@
   <div class="bg-F5F7FA flex flex-col h-screen overflow-hidden">
     <TopNavBar title="房间相册" backgroundColor="transparent" />
     <div class="p-8">
-      <span class="ml-4 text-[18px] color-171717 font-medium">全部({{ albumList.length }})</span>
+      <span class="ml-4 text-[18px] text-[#171717] font-medium">全部({{ albumList.length }})</span>
     </div>
 
     <scroll-div scroll-y class="scroll-container overflow-auto">
diff --git a/src/pages/booking/components/ConactSection/index.vue b/src/pages/booking/components/ConactSection/index.vue
index 78dbe7c..57d2506 100644
--- a/src/pages/booking/components/ConactSection/index.vue
+++ b/src/pages/booking/components/ConactSection/index.vue
@@ -1,9 +1,9 @@
 <template>
   <!-- 选择数量 -->
-  <div class=" bg-white p-[12px] rounded-[12px] flex flex-items-center mb-12">
+  <div class=" bg-white p-[12px] rounded-[12px] flex flex-items-center mb-[12px]">
     <div class="flex-full">
-      <div class="text-[16px] font-medium color-000 leading-[24px]">选择数量</div>
-      <div class="text-[12px] color-A3A3A3 line-height-16">请选择套餐数量</div>
+      <div class="text-[16px] font-medium text-black leading-[24px]">选择数量</div>
+      <div class="text-[12px] color-A3A3A3 leading-[16px]">请选择套餐数量</div>
     </div>
     <div class="right">
       <Stepper v-model="count" />
@@ -16,13 +16,13 @@
 
   <!-- 联系方式 -->
   <div class="bg-white rounded-[12px] overflow-hidden">
-    <div class=" border-bottom text-[16px] font-medium color-000 leading-[24px] p-[12px]">
+    <div class=" border-bottom text-[16px] font-medium text-black leading-[24px] p-[12px]">
       联系方式
     </div>
     <div class="flex flex-items-center  p-[12px]">
       <div class="text-[14px] font-medium text-ink-600 mr-12">联系人姓名</div>
       <div class="right">
-        <input class=" px-4 py-2 text-[15px] color-000 leading-[20px]" v-model.trim="userFormList[0].visitorName"
+        <input class=" px-4 py-2 text-[15px] text-black leading-[20px]" v-model.trim="userFormList[0].visitorName"
           placeholder="请输入联系人" maxlength="20" />
       </div>
     </div>
@@ -30,7 +30,7 @@
     <div class="flex flex-items-center  p-[12px]">
       <div class="text-[14px] font-medium text-ink-600 mr-12">手机号码</div>
       <div class="right">
-        <input class=" px-4 py-2 text-[15px] color-000 leading-[20px]" v-model.trim="userFormList[0].contactPhone"
+        <input class=" px-4 py-2 text-[15px] text-black leading-[20px]" v-model.trim="userFormList[0].contactPhone"
           placeholder="请输入联系手机" maxlength="11" />
       </div>
     </div>
diff --git a/src/pages/booking/components/UserSection/index.vue b/src/pages/booking/components/UserSection/index.vue
index 10efb37..536edda 100644
--- a/src/pages/booking/components/UserSection/index.vue
+++ b/src/pages/booking/components/UserSection/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="bg-white rounded-[12px] overflow-hidden mb-12">
+  <div class="bg-white rounded-[12px] overflow-hidden mb-[12px]">
     <div class="flex flex-items-center  p-[12px] border-bottom">
-      <div class="text-[16px] font-medium color-000 leading-[24px] flex-full">
+      <div class="text-[16px] font-medium text-black leading-[24px] flex-full">
         入住信息
       </div>
       <div class="right">
@@ -10,18 +10,19 @@
     </div>
 
     <div class=" pl-12 pr-12">
-      <div class=" border-bottom pt-12 pb-12 flex flex-items-center" v-for="(item, index) in userFormList" :key="index">
+      <div class=" border-bottom pt-[12px] pb-[12px] flex flex-items-center" v-for="(item, index) in userFormList"
+        :key="index">
         <div class="text-[14px] font-medium text-ink-600 mr-12">住客姓名</div>
         <div class="right">
-          <input class=" px-4 py-2 text-[15px] color-000 leading-[20px]" v-model.trim="item.visitorName"
+          <input class=" px-4 py-2 text-[15px] text-black leading-[20px]" v-model.trim="item.visitorName"
             placeholder="请输入姓名" maxlength="11" />
         </div>
       </div>
 
-      <div class="flex flex-items-center  pt-12 pb-12">
+      <div class="flex flex-items-center  pt-[12px] pb-[12px]">
         <div class="text-[14px] font-medium text-ink-600 mr-12">联系手机</div>
         <div class="right">
-          <input class=" px-4 py-2 text-[15px] color-000 leading-[20px]" v-model.trim="userFormList[0].contactPhone"
+          <input class=" px-4 py-2 text-[15px] text-black leading-[20px]" v-model.trim="userFormList[0].contactPhone"
             placeholder="请输入联系手机" maxlength="11" />
         </div>
       </div>
diff --git a/src/pages/booking/index.vue b/src/pages/booking/index.vue
index 933ab23..527f9d9 100644
--- a/src/pages/booking/index.vue
+++ b/src/pages/booking/index.vue
@@ -8,33 +8,34 @@
 
     <div class="booking-content flex-full  p-[12px] overflow-hidden scroll-y">
       <!-- 预约内容 -->
-      <div class=" bg-white p-[12px] rounded-[12px] mb-12">
+      <div class=" bg-white p-[12px] rounded-[12px] mb-[12px]">
         <!-- 酒店类型入住离店日期部分 -->
         <DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" :showBtn="true"
           @click="navigateToDetail(orderData)" />
 
-        <div class="text-[16px] font-medium color-000 leading-[24px] truncate">
+        <div class="text-[16px] font-medium text-black leading-[24px] truncate">
           {{ orderData.commodityName }}
         </div>
 
         <div class=" border-bottom">
-          <div class="text-[12px] color-99A0AE line-height-16 pb-12 break-all">
+          <div class="text-[12px] text-ink-400 leading-[16px] pb-[12px] break-all">
             {{ orderData.commodityDescription }}
           </div>
 
           <!-- 权益部分 -->
           <div class="flex flex-items-center mb-8">
-            <span class="bg-F7F7F7  rounded-4 text-[11px] text-ink-600 mr-[4px] pt-4 pb-4 pl-6 pr-6"
+            <span
+              class="bg-[#f7f7f7]  rounded-[4px] text-[11px] text-ink-600 mr-[4px] pt-[4px] pb-[4px] pl-[6px] pr-[6px]"
               v-for="(item, index) in orderData.commodityFacilityList" :key="index">
               {{ item }}
             </span>
           </div>
         </div>
 
-        <div class=" flex flex-items-center flex-justify-between pt-12">
+        <div class=" flex flex-items-center flex-justify-between pt-[12px]">
           <span class="text-[12px] text-ink-600 line-height-18">取消政策及说明</span>
           <div class="flex flex-items-center">
-            <span class="text-[12px] theme-color-500 line-height-16" @click="refundVisible = true">取消政策</span>
+            <span class="text-[12px] theme-color-500 leading-[16px]" @click="refundVisible = true">取消政策</span>
             <uni-icons type="right" size="15" color="#99A0AE" />
           </div>
         </div>
diff --git a/src/pages/home/components/AnswerComponent/index.vue b/src/pages/home/components/AnswerComponent/index.vue
index 73bbb74..8199b90 100644
--- a/src/pages/home/components/AnswerComponent/index.vue
+++ b/src/pages/home/components/AnswerComponent/index.vue
@@ -2,7 +2,7 @@
   <div class="w-full bg-white  border-ff overflow-hidden rounded-20 flex flex-col">
     <!-- 占位撑开 -->
     <div class="w-vw"></div>
-    <div class="flex flex-col px-16 pt-16 pb-12 ">
+    <div class="flex flex-col px-16 pt-16 pb-[12px] ">
       <div v-if="tag" class="long-answer-tag">{{ tag }}</div>
       <div v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-4">
         <uni-icons class="icon-active" type="fire-filled" size="18" color="opacity" />
diff --git a/src/pages/home/components/ChatLongAnswer/index.vue b/src/pages/home/components/ChatLongAnswer/index.vue
index ca050b5..4388717 100644
--- a/src/pages/home/components/ChatLongAnswer/index.vue
+++ b/src/pages/home/components/ChatLongAnswer/index.vue
@@ -8,7 +8,7 @@
     <!-- ✅ 滚动区域 -->
     <div class="flex-full overflow-hidden chat-scroll" scroll-y :scroll-into-div="scrollIntodivId" scroll-with-animation
       @scroll="onScroll" @touchstart="onTouchStart" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
-      <div class="flex flex-col pt-12 px-12 pb-24  gap-10">
+      <div class="flex flex-col pt-[12px] px-12 pb-24  gap-10">
         <div v-if="headerSections.title || headerSections.tag" class="long-answer-header">
           <div v-if="headerSections.title" class="long-answer-title">
             {{ headerSections.title.contentValue }}
diff --git a/src/pages/home/components/ChatTopWelcome/index.vue b/src/pages/home/components/ChatTopWelcome/index.vue
index a2c14bb..f13b89a 100644
--- a/src/pages/home/components/ChatTopWelcome/index.vue
+++ b/src/pages/home/components/ChatTopWelcome/index.vue
@@ -6,7 +6,7 @@ v
         <SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
           :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
           :displayWidth="spriteStyle.displayWidth" :fps="16" />
-        <div class="welcome-text text-[14px] font-medium font-family-misans-vf color-171717 leading-[24px]">
+        <div class="welcome-text text-[14px] font-medium font-family-misans-vf text-[#171717] leading-[24px]">
           {{ welcomeContent }}
         </div>
       </div>
diff --git a/src/pages/home/components/LongTextGuideCardPreview/index.vue b/src/pages/home/components/LongTextGuideCardPreview/index.vue
index 9417655..a4a6475 100644
--- a/src/pages/home/components/LongTextGuideCardPreview/index.vue
+++ b/src/pages/home/components/LongTextGuideCardPreview/index.vue
@@ -2,7 +2,7 @@
   <div class="w-full bg-white  border-ff overflow-hidden rounded-20 flex flex-col">
     <!-- 占位撑开 -->
     <div class="w-vw"></div>
-    <div class="flex flex-col px-16 pt-16 pb-12 " @click="openDetail(item)">
+    <div class="flex flex-col px-16 pt-16 pb-[12px] " @click="openDetail(item)">
 
       <div class="long-text-guide-card__badge text-[12px] font-900" :class="`is-${item.badgeTone}`">
         {{ item.badge }}
diff --git a/src/pages/home/components/MoreService/index.vue b/src/pages/home/components/MoreService/index.vue
index 35ef2d1..6ea152d 100644
--- a/src/pages/home/components/MoreService/index.vue
+++ b/src/pages/home/components/MoreService/index.vue
@@ -1,8 +1,8 @@
 <template>
   <van-popup ref="popup" position="bottom" v-model:show="show">
-    <div class="popup-content  pt-12 pl-12 pr-12">
-      <div class="header flex flex-items-center pb-12">
-        <div class="title flex-full text-center text-[17px] color-000 font-medium ml-24">更多服务</div>
+    <div class="popup-content  pt-[12px] pl-12 pr-12">
+      <div class="header flex flex-items-center pb-[12px]">
+        <div class="title flex-full text-center text-[17px] text-black font-medium ml-24">更多服务</div>
         <van-icon name="cross" size="24" color="#CACFD8" @click="close" />
       </div>
 
@@ -11,14 +11,14 @@
           <div class="flex flex-items-center flex-justify-center">
             <img v-if="item.icon" class="left" :src="item.icon" />
             <div class="center flex-full">
-              <div class="text-[16px] color-000 leading-[24px] font-medium">
+              <div class="text-[16px] text-black leading-[24px] font-medium">
                 {{ item.title }}
               </div>
-              <div class="text-[12px] color-A3A3A3 line-height-16">
+              <div class="text-[12px] color-A3A3A3 leading-[16px]">
                 {{ item.content }}
               </div>
             </div>
-            <div class="right  text-[12px] text-white line-height-16" @click="handleClick(item)">
+            <div class="right  text-[12px] text-white leading-[16px]" @click="handleClick(item)">
               {{ item.btnText }}
             </div>
           </div>
diff --git a/src/pages/home/components/NoticeMessage/detail.vue b/src/pages/home/components/NoticeMessage/detail.vue
index 692ebed..7414f08 100644
--- a/src/pages/home/components/NoticeMessage/detail.vue
+++ b/src/pages/home/components/NoticeMessage/detail.vue
@@ -11,11 +11,11 @@
         <img v-if="coverImage" class="w-full block" :src="coverImage" mode="aspectFill" />
 
         <div class="pt-16 px-12 pb-24 ">
-          <div class="color-171717 text-[16px] font-weight-600">{{ detailTitle }}</div>
+          <div class="text-[#171717] text-[16px] font-weight-600">{{ detailTitle }}</div>
 
           <div v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-[16px]">
             <uni-icons type="clock" size="18" color="#5A6780" />
-            <span class="color-171717 text-[12px] font-weight-600 ml-8">发布时间：{{ publishTime }}</span>
+            <span class="text-[#171717] text-[12px] font-weight-600 ml-8">发布时间：{{ publishTime }}</span>
           </div>
 
           <div class="mt-[16px] mx-12 bg-gray w-full height-1"></div>
diff --git a/src/pages/home/components/RecommendPostsList/index.vue b/src/pages/home/components/RecommendPostsList/index.vue
index 3fc6b7e..fb1bcc0 100644
--- a/src/pages/home/components/RecommendPostsList/index.vue
+++ b/src/pages/home/components/RecommendPostsList/index.vue
@@ -14,7 +14,7 @@
         </div>
 
         <div class="p-[4px_8px_8px]">
-          <div class="text-[11px] text-[#99A0AE] truncate">
+          <div class="text-[11px] text-ink-400 truncate">
             {{ item.topic }}
           </div>
         </div>
diff --git a/src/pages/home/components/RecommendationListCard/index.vue b/src/pages/home/components/RecommendationListCard/index.vue
index 8a3a513..37c611c 100644
--- a/src/pages/home/components/RecommendationListCard/index.vue
+++ b/src/pages/home/components/RecommendationListCard/index.vue
@@ -16,7 +16,7 @@
             <span>{{ item.distance }}</span>
           </div>
           <div
-            class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-12 color-334155 text-[12px] font-900"
+            class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-[12px] color-334155 text-[12px] font-900"
             @click.stop="handleSelect(item)">
             {{ getActionText(item) }}
           </div>
diff --git a/src/pages/order/order/components/AmtSection/index.vue b/src/pages/order/order/components/AmtSection/index.vue
index 538dc19..2c7d2a5 100644
--- a/src/pages/order/order/components/AmtSection/index.vue
+++ b/src/pages/order/order/components/AmtSection/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="bg-white  rounded-[12px] p-[12px] mb-12">
+  <div class="bg-white  rounded-[12px] p-[12px] mb-[12px]">
     <div class="flex flex-items-center flex-justify-between">
       <div class="flex flex-items-center">
-        <span class="text-[16px] color-171717 leading-[24px] font-medium">
+        <span class="text-[16px] text-[#171717] leading-[24px] font-medium">
           订单金额
         </span>
         <span class="amt text-[18px] font-bold color-FF3D60 ml-4">
@@ -10,11 +10,11 @@
         </span>
       </div>
     </div>
-    <div v-if="orderData.orderStatus === '0'" class="text-[11px] color-99A0AE mt-4">
+    <div v-if="orderData.orderStatus === '0'" class="text-[11px] text-ink-400 mt-4">
       超时后，订单将自动取消
     </div>
     <div v-if="['1', '2'].includes(orderData.orderStatus)"
-      class=" border-top flex flex-items-center flex-justify-between text-[12px] pt-12 mt-12">
+      class=" border-top flex flex-items-center flex-justify-between text-[12px] pt-[12px] mt-[12px]">
       <div class="text-ink-600">取消政策及说明</div>
       <div class="flex flex-items-center" @click="emit('click')">
         <span class="theme-color-500 mr-[4px]">查看详情</span>
diff --git a/src/pages/order/order/components/GoodsInfo/index.vue b/src/pages/order/order/components/GoodsInfo/index.vue
index 952e598..942f70c 100644
--- a/src/pages/order/order/components/GoodsInfo/index.vue
+++ b/src/pages/order/order/components/GoodsInfo/index.vue
@@ -1,36 +1,37 @@
 <template>
-  <div v-if="orderType == 0" class="bg-white p-[12px] rounded-[12px] mb-12">
+  <div v-if="orderType == 0" class="bg-white p-[12px] rounded-[12px] mb-[12px]">
     <!-- 酒店类型入住离店日期部分 -->
     <DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" />
 
-    <div class="text-[16px] font-medium color-000 leading-[24px] truncate">
+    <div class="text-[16px] font-medium text-black leading-[24px] truncate">
       {{ orderData.commodityName }}
     </div>
 
-    <div class=" border-bottom text-[12px] color-99A0AE line-height-16 pb-12">
+    <div class=" border-bottom text-[12px] text-ink-400 leading-[16px] pb-[12px]">
       {{ orderData.commodityDescription }}
     </div>
 
     <!-- 权益部分 -->
-    <div class=" flex flex-items-center pt-12">
-      <span class="bg-F7F7F7  rounded-4 text-[11px] text-ink-600 mr-[4px] pt-4 pb-4 pl-6 pr-6"
+    <div class=" flex flex-items-center pt-[12px]">
+      <span class="bg-[#f7f7f7]  rounded-[4px] text-[11px] text-ink-600 mr-[4px] pt-[4px] pb-[4px] pl-[6px] pr-[6px]"
         v-for="(item, index) in commodityFacilityList" :key="index">
         {{ item }}
       </span>
     </div>
   </div>
 
-  <div v-if="orderType != 0" class=" bg-white p-[12px] rounded-[12px] mb-12">
-    <div class="text-[16px] font-medium color-000 leading-[24px] truncate mb-8">
+  <div v-if="orderType != 0" class=" bg-white p-[12px] rounded-[12px] mb-[12px]">
+    <div class="text-[16px] font-medium text-black leading-[24px] truncate mb-8">
       {{ orderData.commodityName }}
     </div>
 
     <div class="flex text-[12px]">
-      <span class="w-60 color-99A0AE">购买数量</span>
+      <span class="w-60 text-ink-400">购买数量</span>
       <span class="text-ink-600">{{ commodityAmount }}</span>
     </div>
 
-    <div v-if="orderData.orderStatus === '0'" class=" border-top pt-12 text-[14px] font-medium color-171717 mt-12">
+    <div v-if="orderData.orderStatus === '0'"
+      class=" border-top pt-[12px] text-[14px] font-medium text-[#171717] mt-[12px]">
       凭[电子凭证]直接验证使用
     </div>
   </div>
diff --git a/src/pages/order/order/components/OrderCard/InfoRow.vue b/src/pages/order/order/components/OrderCard/InfoRow.vue
index c2cf300..dc22b09 100644
--- a/src/pages/order/order/components/OrderCard/InfoRow.vue
+++ b/src/pages/order/order/components/OrderCard/InfoRow.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="info-row flex items-center mt-8">
-    <span class="label text-[12px] color-99A0AE">{{ label }}：</span>
-    <span class="value flex-full text-[12px] color-99A0AE">{{ value }}</span>
+    <span class="label text-[12px] text-ink-400">{{ label }}：</span>
+    <span class="value flex-full text-[12px] text-ink-400">{{ value }}</span>
   </div>
 </template>
 
diff --git a/src/pages/order/order/components/OrderCard/OrderCardContent.vue b/src/pages/order/order/components/OrderCard/OrderCardContent.vue
index 05d593a..098ec4c 100644
--- a/src/pages/order/order/components/OrderCard/OrderCardContent.vue
+++ b/src/pages/order/order/components/OrderCard/OrderCardContent.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="card-content  pt-12">
+  <div class="card-content  pt-[12px]">
     <div class="flex items-center justify-between">
-      <div class="left flex-full text-[14px] leading-[20px] color-171717 mr-12">
+      <div class="left flex-full text-[14px] leading-[20px] text-[#171717] mr-12">
         {{ orderData.commodityName }}
       </div>
       <div :class="[
diff --git a/src/pages/order/order/components/OrderInfo/index.vue b/src/pages/order/order/components/OrderInfo/index.vue
index daafb7e..1a89f23 100644
--- a/src/pages/order/order/components/OrderInfo/index.vue
+++ b/src/pages/order/order/components/OrderInfo/index.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="bg-white  rounded-10 p-[12px]">
     <div class="flex mb-8 text-[12px]">
-      <span class="w-60 color-99A0AE">订单编号</span>
+      <span class="w-60 text-ink-400">订单编号</span>
       <span class="text-ink-600">{{ orderData.orderId }}</span>
     </div>
     <div class="flex mb-8 text-[12px]">
-      <span class="w-60 color-99A0AE">下单时间</span>
+      <span class="w-60 text-ink-400">下单时间</span>
       <span class="text-ink-600">{{ orderData.createTime }}</span>
     </div>
     <div class="flex text-[12px]">
-      <span class="w-60 color-99A0AE">支付状态</span>
+      <span class="w-60 text-ink-400">支付状态</span>
       <span :class="[
         {
           'color-FF3D60': statusCode === '0' || statusCode === '3',
diff --git a/src/pages/order/order/components/UserInfo/index.vue b/src/pages/order/order/components/UserInfo/index.vue
index 6422fdc..c0ce662 100644
--- a/src/pages/order/order/components/UserInfo/index.vue
+++ b/src/pages/order/order/components/UserInfo/index.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="bg-white  rounded-10 p-[12px] mb-12" v-if="hasConsumerData">
+  <div class="bg-white  rounded-10 p-[12px] mb-[12px]" v-if="hasConsumerData">
     <div v-for="(item, index) in consumerList" :key="index">
       <div class="flex mb-8 text-[12px]">
-        <span class="w-60 color-99A0AE">住客姓名</span>
+        <span class="w-60 text-ink-400">住客姓名</span>
         <span class="text-ink-600">{{ item.visitorName }}</span>
       </div>
     </div>
     <div class="flex text-[12px]">
-      <span class="w-60 color-99A0AE">联系电话</span>
+      <span class="w-60 text-ink-400">联系电话</span>
       <span class="text-ink-600">{{ contactPhone }}</span>
     </div>
   </div>
diff --git a/src/pages/order/order/components/VoucherList/index.vue b/src/pages/order/order/components/VoucherList/index.vue
index 6fd091e..7a52b6f 100644
--- a/src/pages/order/order/components/VoucherList/index.vue
+++ b/src/pages/order/order/components/VoucherList/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="bg-white  rounded-[12px] px-12 pt-12 mb-12">
-    <span class="text-[16px] color-171717 leading-[24px] font-medium">
+  <div class="bg-white  rounded-[12px] px-12 pt-[12px] mb-[12px]">
+    <span class="text-[16px] text-[#171717] leading-[24px] font-medium">
       核销凭证列表
     </span>
 
@@ -12,10 +12,10 @@
       <div class="flex flex-col">
         <span class="span-color-900 text-[16px]">{{ item.name }}</span>
         <div class="flex flex-row mt-8">
-          <div class="bg-F5F7FA span-color-600 text-[12px] p-4 rounded-4 mr-[4px]">
+          <div class="bg-F5F7FA span-color-600 text-[12px] p-4 rounded-[4px] mr-[4px]">
             总计{{ item.count }}{{ item.unit }}
           </div>
-          <div class="bg-theme-color-50 theme-color-500 text-[12px] p-4 rounded-4">
+          <div class="bg-theme-color-50 theme-color-500 text-[12px] p-4 rounded-[4px]">
             剩{{ item.count - item.writeOffCount }}{{ item.unit }}可用
           </div>
         </div>
diff --git a/src/pages/quick/components/Card/index.vue b/src/pages/quick/components/Card/index.vue
index 67904cc..55f58d6 100644
--- a/src/pages/quick/components/Card/index.vue
+++ b/src/pages/quick/components/Card/index.vue
@@ -5,7 +5,7 @@
       <div class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
         {{ item.commodityName }}
       </div>
-      <div v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-[#99A0AE] mb-4 truncate">
+      <div v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-ink-400 mb-4 truncate">
         {{ item.commodityFacility.join(" ") }}
       </div>
       <div class="text-[12px] leading-[18px] text-[#43669A]">
@@ -19,7 +19,7 @@
             {{ item.specificationPrice }}
           </span>
         </div>
-        <span v-if="item.stockUnitLabel" class="text-[12px] leading-[16px] text-[#99A0AE]">
+        <span v-if="item.stockUnitLabel" class="text-[12px] leading-[16px] text-ink-400">
           /{{ item.stockUnitLabel }}
         </span>
         <span
diff --git a/src/pages/quick/index.vue b/src/pages/quick/index.vue
index 4ec85a0..b72b4c7 100644
--- a/src/pages/quick/index.vue
+++ b/src/pages/quick/index.vue
@@ -10,8 +10,8 @@
       <div v-if="didSelectedTabItem && didSelectedTabItem.orderType == 0"
         class="bg-white  flex flex-items-center p-[12px]">
         <div class="in flex flex-items-center">
-          <span class="text-[11px] font-medium color-99A0AE mr-[4px]">入住</span>
-          <span class="text-[14px] font-medium color-171717">
+          <span class="text-[11px] font-medium text-ink-400 mr-[4px]">入住</span>
+          <span class="text-[14px] font-medium text-[#171717]">
             {{ selectedDate.startDate }}
           </span>
         </div>
@@ -22,8 +22,8 @@
         </span>
 
         <div class="out flex flex-items-center">
-          <span class="text-[11px] font-medium color-99A0AE mr-[4px]">离店</span>
-          <span class="text-[14px] font-medium color-171717">
+          <span class="text-[11px] font-medium text-ink-400 mr-[4px]">离店</span>
+          <span class="text-[14px] font-medium text-[#171717]">
             {{ selectedDate.endDate }}
           </span>
         </div>