From e52f916231339a03479da8d9e034e7b7fea790e5 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Fri, 29 May 2026 09:21:36 +0800
Subject: [PATCH] style: migrate font-size classes to text-[size] syntax

Additionally update spacing utilities and refactor the OrderQrcode component:
- Switch popup implementation from uni-popup to van-popup
- Remove the deprecated SCSS stylesheet
- Clean up component template and script code
---
 src/components/CreateServiceOrder/index.vue   |  16 +--
 src/components/CustomEmpty/index.vue          |   2 +-
 src/components/DateRangeSection/index.vue     |  10 +-
 src/components/DetailPopup/index.vue          |   4 +-
 src/components/Feedback/index.vue             |  12 +-
 src/components/GoodDetail/index.vue           |   4 +-
 src/components/RefundPopup/index.vue          |   4 +-
 src/components/Stepper/index.vue              |   4 +-
 src/components/UseDateRange/index.vue         |  11 +-
 .../components/ConactSection/index.vue        |  33 ++---
 .../components/FooterSection/index.vue        |   2 +-
 .../booking/components/UserSection/index.vue  |  27 ++--
 src/pages/booking/index.vue                   |   6 +-
 .../home/components/AnswerComponent/index.vue |   6 +-
 .../home/components/ChatMoreTips/index.vue    |   2 +-
 .../home/components/ChatTopWelcome/index.vue  |   2 +-
 .../components/FacilityLocationCard/index.vue |   4 +-
 .../GeneratorPhotoComponent/index.vue         |   2 +-
 .../components/LongTextGuideCard/index.vue    |  14 +-
 .../LongTextGuideCardPreview/index.vue        |   6 +-
 .../components/MapNavigationCard/index.vue    |   4 +-
 .../home/components/MoreService/index.vue     |   4 +-
 .../home/components/NoticeCard/index.vue      |   8 +-
 .../home/components/NoticeMessage/detail.vue  |   8 +-
 .../components/OpenMapComponent/index.vue     |   4 +-
 .../home/components/PoiCompareCard/index.vue  |  18 +--
 .../home/components/PoiDetailCard/index.vue   |   2 +-
 .../RecommendationListCard/index.vue          |   4 +-
 .../home/components/RoutePlanCard/index.vue   |  14 +-
 .../home/components/ScenicImageCard/index.vue |   2 +-
 .../components/SharedVisual/ActionRow.vue     |   2 +-
 .../components/SharedVisual/DetailShell.vue   |   2 +-
 .../order/components/AmtSection/index.vue     |  11 +-
 .../order/components/FooterSection/index.vue  |   4 +-
 .../order/components/GoodsInfo/index.vue      |  24 +---
 .../order/components/OrderCard/InfoRow.vue    |   4 +-
 .../components/OrderCard/OrderCardContent.vue |  21 +--
 .../order/components/OrderCard/index.vue      |  23 ++--
 .../order/components/OrderInfo/index.vue      |  20 ++-
 .../order/components/OrderQrcode/index.vue    | 127 ++++++------------
 .../components/OrderQrcode/styles/index.scss  |  23 ----
 .../order/order/components/UserInfo/index.vue |   4 +-
 .../order/components/VoucherList/index.vue    |  34 ++---
 src/pages/quick/index.vue                     |   4 +-
 44 files changed, 202 insertions(+), 340 deletions(-)
 delete mode 100644 src/pages/order/order/components/OrderQrcode/styles/index.scss

diff --git a/src/components/CreateServiceOrder/index.vue b/src/components/CreateServiceOrder/index.vue
index 292f676..b1f3458 100644
--- a/src/components/CreateServiceOrder/index.vue
+++ b/src/components/CreateServiceOrder/index.vue
@@ -9,23 +9,23 @@
       </div>
 
       <div v-if="!isCallSuccess" class="border-box p-12">
-        <div class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
+        <div class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 text-[14px] color-171717 mb-12">
           <span class="font-500 line-height-22 mr-20">所在位置</span>
           <input placeholder="请填写所在位置" v-model="roomId" />
         </div>
 
-        <div class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
+        <div class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 text-[14px] color-171717 mb-12">
           <span class="font-500 line-height-22 mr-20">联系电话</span>
           <input placeholder="请填写联系电话" v-model="contactPhone" @input="handleContactPhoneInput" />
         </div>
 
-        <div class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
+        <div class="bg-F5F7FA border-box p-12 rounded-10 text-[14px] font-500 color-171717 mb-12">
           <div class="font-500 line-height-22 mb-12">需求信息描述</div>
-          <textarea class="h-80" placeholder="请输入需求信息描述" placeholder-class="font-size-14 font-400" maxlength="100"
+          <textarea class="h-80" placeholder="请输入需求信息描述" placeholder-class="text-[14px] font-400" maxlength="100"
             v-model="contactText" />
         </div>
 
-        <div class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
+        <div class="bg-F5F7FA border-box p-12 rounded-10 text-[14px] font-500 color-171717 mb-12">
           <div class="font-500 line-height-22 mb-12">照片上传</div>
 
           <div class="w-80 h-80 bg-white rounded-8 overflow-hidden flex flex-items-center flex-justify-center">
@@ -45,13 +45,13 @@
 
       <div v-else class="border-box card-content flex flex-items-center p-12">
         <div class="border-box left flex-full pr-20">
-          <div class="font-size-12 color-525866 line-height-20 mb-4">
+          <div class="text-[12px] color-525866 line-height-20 mb-4">
             所在位置：{{ roomId }}
           </div>
-          <div class="font-size-12 color-525866 line-height-20 mb-4">
+          <div class="text-[12px] color-525866 line-height-20 mb-4">
             联系方式: {{ contactPhone }}
           </div>
-          <div class="font-size-12 color-525866 line-height-20 ellipsis-2">
+          <div class="text-[12px] color-525866 line-height-20 ellipsis-2">
             需求描述: {{ contactspan }}
           </div>
         </div>
diff --git a/src/components/CustomEmpty/index.vue b/src/components/CustomEmpty/index.vue
index f1247e1..13e8a65 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="font-size-12 text-center color-99A0AE mt-8">
+    <span class="text-[12px] text-center color-99A0AE mt-8">
       {{ statusText }}
     </span>
   </div>
diff --git a/src/components/DateRangeSection/index.vue b/src/components/DateRangeSection/index.vue
index f21e4b3..3d40d39 100644
--- a/src/components/DateRangeSection/index.vue
+++ b/src/components/DateRangeSection/index.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="border-box flex flex-items-center flex-justify-between mb-12">
     <div class="left flex flex-items-center">
-      <span class="font-size-12 color-99A0AE mr-4">入住</span>
-      <span class="font-size-12 color-171717 mr-16">
+      <span class="text-[12px] color-99A0AE mr-4">入住</span>
+      <span class="text-[12px] color-171717 mr-16">
         {{ selectedDate.startDate }}
       </span>
       <span class="total border-box rounded-50 flex flex-items-center font-size-11 color-43669A relative">{{
         selectedDate.totalDays }}晚</span>
-      <span class="font-size-12 color-99A0AE ml-16">离店</span>
-      <span class="font-size-12 color-171717 ml-4">
+      <span class="text-[12px] color-99A0AE ml-16">离店</span>
+      <span class="text-[12px] color-171717 ml-4">
         {{ selectedDate.endDate }}
       </span>
     </div>
     <div class="flex flex-items-center" v-if="showBtn" @click="emit('click')">
-      <span class="font-size-12 theme-color-500 line-height-16">房间详情</span>
+      <span class="text-[12px] theme-color-500 line-height-16">房间详情</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 82aab7a..cb4f6b7 100644
--- a/src/components/DetailPopup/index.vue
+++ b/src/components/DetailPopup/index.vue
@@ -12,11 +12,11 @@
       <div class="rounded-12 bg-white ml-12 mr-12 mb-40">
         <div class="border-box border-bottom flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12">
           <span class="font-size-16 font-500 color-171717">在线支付</span>
-          <span class="font-size-14 color-171717">239</span>
+          <span class="text-[14px] color-171717">239</span>
         </div>
         <div class="border-box flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12">
           <span class="font-size-16 font-500 color-171717">房费</span>
-          <span class="font-size-14 color-171717">239</span>
+          <span class="text-[14px] color-171717">239</span>
         </div>
       </div>
     </div>
diff --git a/src/components/Feedback/index.vue b/src/components/Feedback/index.vue
index d168d85..105c7e6 100644
--- a/src/components/Feedback/index.vue
+++ b/src/components/Feedback/index.vue
@@ -9,13 +9,13 @@
       </div>
 
       <div v-if="!isCallSuccess" class="border-box p-12">
-        <div class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
+        <div class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 text-[14px] color-171717 mb-12">
           <span class="font-500 line-height-22 mr-20">联系电话</span>
           <input placeholder="请填写联系电话" v-model="contactPhone" />
         </div>
-        <div class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
+        <div class="bg-F5F7FA border-box p-12 rounded-10 text-[14px] font-500 color-171717 mb-12">
           <div class="font-500 line-height-22 mb-12">意见内容</div>
-          <textarea class="h-80" placeholder="请输入反馈意见" placeholder-class="font-size-14 font-400" maxlength="100"
+          <textarea class="h-80" placeholder="请输入反馈意见" placeholder-class="text-[14px] font-400" maxlength="100"
             v-model="contactText" />
         </div>
 
@@ -26,17 +26,17 @@
       </div>
 
       <div v-else class="border-box left flex-full p-12">
-        <div class="font-size-12 color-525866 line-height-20 mb-4">
+        <div class="text-[12px] color-525866 line-height-20 mb-4">
           联系方式: {{ contactPhone }}
         </div>
-        <div class="font-size-12 color-525866 line-height-20 ellipsis-2">
+        <div class="text-[12px] color-525866 line-height-20 ellipsis-2">
           意见内容: {{ contactText }}
         </div>
       </div>
 
       <div class="footer-help flex flex-items-center pl-12 mb-12">
         <img class="help-icon mr-4" src="./images/icon_volume.png" />
-        <span class="font-size-12 font-500 color-FA7319">
+        <span class="text-[12px] font-500 color-FA7319">
           {{ appName }}收到您的意见将第一时间为您处理!
         </span>
       </div>
diff --git a/src/components/GoodDetail/index.vue b/src/components/GoodDetail/index.vue
index 66943d5..16d39d4 100644
--- a/src/components/GoodDetail/index.vue
+++ b/src/components/GoodDetail/index.vue
@@ -13,11 +13,11 @@
         }">
           <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 font-size-14 color-171717 line-height-20">
+            <span class="ml-4 text-[14px] color-171717 line-height-20">
               {{ moduleItem.moduleTitle }}
             </span>
           </div>
-          <span class="flex-full font-size-12 color-525866 line-height-20 mt-4">
+          <span class="flex-full text-[12px] color-525866 line-height-20 mt-4">
             {{ moduleItem.moduleContent }}
           </span>
         </div>
diff --git a/src/components/RefundPopup/index.vue b/src/components/RefundPopup/index.vue
index 556f40b..44fd645 100644
--- a/src/components/RefundPopup/index.vue
+++ b/src/components/RefundPopup/index.vue
@@ -14,11 +14,11 @@
           <uni-icons fontFamily="znicons" size="20" color="#333">
             {{ iconsMap["zn-refund"] }}
           </uni-icons>
-          <span class="font-size-14 font-600 color-171717 ml-8">
+          <span class="text-[14px] font-600 color-171717 ml-8">
             {{ refundTitle }}
           </span>
         </div>
-        <div class="font-size-14 color-525866 line-height-16 mb-4" v-for="(item, index) in commodityPurchaseInstruction"
+        <div class="text-[14px] color-525866 line-height-16 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 9633d7a..f543b28 100644
--- a/src/components/Stepper/index.vue
+++ b/src/components/Stepper/index.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="stepper-wrapper border-box flex flex-items-center rounded-8">
     <uni-icons type="minus" size="24" color="#D1D1D1" @click="decrease" />
-    <text
-      class="stepper-text text-center font-size-14 font-500 color-000 ml-4 mr-4"
-    >
+    <text class="stepper-text text-center text-[14px] font-500 color-000 ml-4 mr-4">
       {{ value }} {{ unit }}
     </text>
     <uni-icons type="plus" size="24" color="#198CFF" @click="increase" />
diff --git a/src/components/UseDateRange/index.vue b/src/components/UseDateRange/index.vue
index 9b0ba7c..1edba24 100644
--- a/src/components/UseDateRange/index.vue
+++ b/src/components/UseDateRange/index.vue
@@ -7,16 +7,13 @@
       <scroll-div class="date-scroll" scroll-x>
         <div class="date-list">
           <block v-for="item in openDateRangeList" :key="item.date">
-            <div
-              class="date-item"
-              :class="{ selected: isSameDate(selectedDate, item.date) }"
-              @click="onDateClick(item)"
-            >
-              <div class="label font-size-12">{{ item.weekDesc }}</div>
+            <div class="date-item" :class="{ selected: isSameDate(selectedDate, item.date) }"
+              @click="onDateClick(item)">
+              <div class="label text-[12px]">{{ item.weekDesc }}</div>
               <div class="md font-size-16 font-600">
                 {{ formatMD(item.date) }}
               </div>
-              <div class="status font-size-12">{{ item.canOrder }}</div>
+              <div class="status text-[12px]">{{ item.canOrder }}</div>
               <div v-if="isSameDate(selectedDate, item.date)" class="check">
                 ✔
               </div>
diff --git a/src/pages/booking/components/ConactSection/index.vue b/src/pages/booking/components/ConactSection/index.vue
index 87c8501..0168ca9 100644
--- a/src/pages/booking/components/ConactSection/index.vue
+++ b/src/pages/booking/components/ConactSection/index.vue
@@ -3,7 +3,7 @@
   <div class="border-box bg-white p-12 rounded-12 flex flex-items-center mb-12">
     <div class="flex-full">
       <div class="font-size-16 font-500 color-000 line-height-24">选择数量</div>
-      <div class="font-size-12 color-A3A3A3 line-height-16">请选择套餐数量</div>
+      <div class="text-[12px] color-A3A3A3 line-height-16">请选择套餐数量</div>
     </div>
     <div class="right">
       <Stepper v-model="count" />
@@ -11,40 +11,27 @@
   </div>
 
   <!-- 使用日期 -->
-  <UseDateRange
-    v-if="orderData.reservationEnabled"
-    :openDateRangeList="orderData.openDateRangeList"
-    v-model:selectedDate="reservationDate"
-  />
+  <UseDateRange v-if="orderData.reservationEnabled" :openDateRangeList="orderData.openDateRangeList"
+    v-model:selectedDate="reservationDate" />
 
   <!-- 联系方式 -->
   <div class="bg-white rounded-12 overflow-hidden">
-    <div
-      class="border-box border-bottom font-size-16 font-500 color-000 line-height-24 p-12"
-    >
+    <div class="border-box border-bottom font-size-16 font-500 color-000 line-height-24 p-12">
       联系方式
     </div>
     <div class="flex flex-items-center border-box p-12">
-      <div class="font-size-14 font-500 color-525866 mr-12">联系人姓名</div>
+      <div class="text-[14px] font-500 color-525866 mr-12">联系人姓名</div>
       <div class="right">
-        <input
-          class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
-          v-model.trim="userFormList[0].visitorName"
-          placeholder="请输入联系人"
-          maxlength="20"
-        />
+        <input class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
+          v-model.trim="userFormList[0].visitorName" placeholder="请输入联系人" maxlength="20" />
       </div>
     </div>
 
     <div class="flex flex-items-center border-box p-12">
-      <div class="font-size-14 font-500 color-525866 mr-12">手机号码</div>
+      <div class="text-[14px] font-500 color-525866 mr-12">手机号码</div>
       <div class="right">
-        <input
-          class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
-          v-model.trim="userFormList[0].contactPhone"
-          placeholder="请输入联系手机"
-          maxlength="11"
-        />
+        <input class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
+          v-model.trim="userFormList[0].contactPhone" placeholder="请输入联系手机" maxlength="11" />
       </div>
     </div>
   </div>
diff --git a/src/pages/booking/components/FooterSection/index.vue b/src/pages/booking/components/FooterSection/index.vue
index e2fd1af..a1c3884 100644
--- a/src/pages/booking/components/FooterSection/index.vue
+++ b/src/pages/booking/components/FooterSection/index.vue
@@ -4,7 +4,7 @@
       {{ totalAmt }}
     </span>
     <!-- <div class="flex flex-items-center" @click="emit('detailClick')">
-      <span class="font-size-12 color-A3A3A3 mr-4">明细</span>
+      <span class="text-[12px] color-A3A3A3 mr-4">明细</span>
       <uni-icons type="up" size="16" color="#A3A3A3" />
     </div> -->
     <div class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8" @click="handleBooking">
diff --git a/src/pages/booking/components/UserSection/index.vue b/src/pages/booking/components/UserSection/index.vue
index 19f0546..7866932 100644
--- a/src/pages/booking/components/UserSection/index.vue
+++ b/src/pages/booking/components/UserSection/index.vue
@@ -10,31 +10,20 @@
     </div>
 
     <div class="border-box pl-12 pr-12">
-      <div
-        class="border-box border-bottom pt-12 pb-12 flex flex-items-center"
-        v-for="(item, index) in userFormList"
-        :key="index"
-      >
-        <div class="font-size-14 font-500 color-525866 mr-12">住客姓名</div>
+      <div class="border-box border-bottom pt-12 pb-12 flex flex-items-center" v-for="(item, index) in userFormList"
+        :key="index">
+        <div class="text-[14px] font-500 color-525866 mr-12">住客姓名</div>
         <div class="right">
-          <input
-            class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
-            v-model.trim="item.visitorName"
-            placeholder="请输入姓名"
-            maxlength="11"
-          />
+          <input class="border-box px-4 py-2 font-size-15 color-000 line-height-20" v-model.trim="item.visitorName"
+            placeholder="请输入姓名" maxlength="11" />
         </div>
       </div>
 
       <div class="flex flex-items-center border-box pt-12 pb-12">
-        <div class="font-size-14 font-500 color-525866 mr-12">联系手机</div>
+        <div class="text-[14px] font-500 color-525866 mr-12">联系手机</div>
         <div class="right">
-          <input
-            class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
-            v-model.trim="userFormList[0].contactPhone"
-            placeholder="请输入联系手机"
-            maxlength="11"
-          />
+          <input class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
+            v-model.trim="userFormList[0].contactPhone" placeholder="请输入联系手机" maxlength="11" />
         </div>
       </div>
     </div>
diff --git a/src/pages/booking/index.vue b/src/pages/booking/index.vue
index 1836dfb..3ae88e2 100644
--- a/src/pages/booking/index.vue
+++ b/src/pages/booking/index.vue
@@ -18,7 +18,7 @@
         </div>
 
         <div class="border-box border-bottom">
-          <div class="font-size-12 color-99A0AE line-height-16 pb-12 break-all">
+          <div class="text-[12px] color-99A0AE line-height-16 pb-12 break-all">
             {{ orderData.commodityDescription }}
           </div>
 
@@ -32,9 +32,9 @@
         </div>
 
         <div class="border-box flex flex-items-center flex-justify-between pt-12">
-          <span class="font-size-12 color-525866 line-height-18">取消政策及说明</span>
+          <span class="text-[12px] color-525866 line-height-18">取消政策及说明</span>
           <div class="flex flex-items-center">
-            <span class="font-size-12 theme-color-500 line-height-16" @click="refundVisible = true">取消政策</span>
+            <span class="text-[12px] theme-color-500 line-height-16" @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 30bc8a8..7a617b3 100644
--- a/src/pages/home/components/AnswerComponent/index.vue
+++ b/src/pages/home/components/AnswerComponent/index.vue
@@ -9,17 +9,17 @@
         <span class="font-size-16 font-500 span-color-900 ml-6"> {{ title }}</span>
       </div>
       <!-- 文字内容，最多显示3行 -->
-      <div v-if="processedContent" class="answer-content font-size-12 font-color-600">
+      <div v-if="processedContent" class="answer-content text-[12px] font-color-600">
         <ChatMarkdown :text="processedContent" />
       </div>
       <!-- 超过3行时显示...提示 -->
       <div v-if="!finish" class="flex flex-row flex-items-center mt-8">
-        <span class="font-size-12 font-400 font-color-600">正在生成</span>
+        <span class="text-[12px] font-400 font-color-600">正在生成</span>
         <ChatLoading />
       </div>
       <div v-if="isOverflow" class="flex flex-row flex-items-center flex-justify-between mt-4"
         @click="lookDetailAction">
-        <span class="font-size-12 font-400 theme-color-500 mr-4">查看完整{{ tag }}</span>
+        <span class="text-[12px] font-400 theme-color-500 mr-4">查看完整{{ tag }}</span>
         <uni-icons class="icon-active" type="right" size="14" color="opacity"></uni-icons>
       </div>
 
diff --git a/src/pages/home/components/ChatMoreTips/index.vue b/src/pages/home/components/ChatMoreTips/index.vue
index 28848b9..f655826 100644
--- a/src/pages/home/components/ChatMoreTips/index.vue
+++ b/src/pages/home/components/ChatMoreTips/index.vue
@@ -2,7 +2,7 @@
   <div class="more-tips bg-white border-box">
     <div class="font-size-0 whitespace-nowrap scroll-x">
       <div class="more-tips-item border-box inline-block mr-8" v-for="(item, index) in guideWords" :key="index">
-        <span :class="['font-500 font-size-12 text-center', `color-${index}`]" @click="sendReply(item)">
+        <span :class="['font-500 text-[12px] text-center', `color-${index}`]" @click="sendReply(item)">
           {{ item }}
         </span>
       </div>
diff --git a/src/pages/home/components/ChatTopWelcome/index.vue b/src/pages/home/components/ChatTopWelcome/index.vue
index fe8aeac..110b229 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 font-size-14 font-500 font-family-misans-vf color-171717 line-height-24">
+        <div class="welcome-text text-[14px] font-500 font-family-misans-vf color-171717 line-height-24">
           {{ welcomeContent }}
         </div>
       </div>
diff --git a/src/pages/home/components/FacilityLocationCard/index.vue b/src/pages/home/components/FacilityLocationCard/index.vue
index 0880b35..f98029c 100644
--- a/src/pages/home/components/FacilityLocationCard/index.vue
+++ b/src/pages/home/components/FacilityLocationCard/index.vue
@@ -4,7 +4,7 @@
 
     <div class="facility-location-card__body px-24 pb-24">
       <div class="facility-location-card__title-row flex flex-items-center">
-        <div class="facility-location-card__badge color-2563EB bg-EFF6FF font-size-12 font-900">
+        <div class="facility-location-card__badge color-2563EB bg-EFF6FF text-[12px] font-900">
           {{ type.text }}
         </div>
         <div class="facility-location-card__title color-1E293B font-size-18 font-900 ellipsis-1">
@@ -12,7 +12,7 @@
         </div>
       </div>
 
-      <div class="facility-location-card__distance flex flex-items-center color-94A3B8 font-size-14 font-900">
+      <div class="facility-location-card__distance flex flex-items-center color-94A3B8 text-[14px] font-900">
         <span class="facility-location-card__distance-icon">{{ distance.icon }}</span>
         <span>{{ distance.text }}</span>
       </div>
diff --git a/src/pages/home/components/GeneratorPhotoComponent/index.vue b/src/pages/home/components/GeneratorPhotoComponent/index.vue
index 5ae7653..0b1929d 100644
--- a/src/pages/home/components/GeneratorPhotoComponent/index.vue
+++ b/src/pages/home/components/GeneratorPhotoComponent/index.vue
@@ -14,7 +14,7 @@
 
         <img class="g_title mt-20" :src="props.toolCall.componentNameParams.title" />
 
-        <span class="font-size-14 font-400 color-white my-12 text-center">
+        <span class="text-[14px] font-400 color-white my-12 text-center">
           {{ props.toolCall.componentNameParams.description }}
         </span>
 
diff --git a/src/pages/home/components/LongTextGuideCard/index.vue b/src/pages/home/components/LongTextGuideCard/index.vue
index c808e12..df0d94c 100644
--- a/src/pages/home/components/LongTextGuideCard/index.vue
+++ b/src/pages/home/components/LongTextGuideCard/index.vue
@@ -4,17 +4,17 @@
       <div 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)">
-        <div class="long-text-guide-card__badge font-size-12 font-900" :class="`is-${item.badgeTone}`">
+        <div class="long-text-guide-card__badge text-[12px] font-900" :class="`is-${item.badgeTone}`">
           {{ item.badge }}
         </div>
         <div class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
           {{ item.title }}
         </div>
-        <div class="long-text-guide-card__summary-text color-94A3B8 font-size-14 font-500 ellipsis-2">
+        <div class="long-text-guide-card__summary-text color-94A3B8 text-[14px] font-500 ellipsis-2">
           {{ item.summary }}
         </div>
         <div class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
-          <text class="color-CBD5E1 font-size-12 font-800">{{ item.footer }}</text>
+          <text class="color-CBD5E1 text-[12px] font-800">{{ item.footer }}</text>
           <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
         </div>
       </div>
@@ -29,7 +29,7 @@
         <div class="long-text-guide-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1">
           {{ activeItem.title }}
         </div>
-        <div class="long-text-guide-card__badge long-text-guide-card__detail-badge font-size-12 font-900"
+        <div class="long-text-guide-card__badge long-text-guide-card__detail-badge text-[12px] font-900"
           :class="`is-${activeItem.badgeTone}`">
           {{ activeItem.badge }}
         </div>
@@ -55,7 +55,7 @@
         </div>
         <div class="long-text-guide-card__tip-block bg-ECFDF5">
           <div v-for="(tip, index) in activeItem.tips || []" :key="tip"
-            class="long-text-guide-card__tip color-047857 font-size-14 font-800">
+            class="long-text-guide-card__tip color-047857 text-[14px] font-800">
             {{ index + 1 }} {{ tip }}
           </div>
         </div>
@@ -87,9 +87,9 @@
           <div class="long-text-guide-card__map-bar flex flex-items-center bg-white">
             <div class="flex-full">
               <div class="color-1E293B font-size-15 font-900">{{ activeItem.action.title }}</div>
-              <div class="color-94A3B8 font-size-12 font-800 mt-2">{{ activeItem.action.subtitle }}</div>
+              <div class="color-94A3B8 text-[12px] font-800 mt-2">{{ activeItem.action.subtitle }}</div>
             </div>
-            <div class="long-text-guide-card__nav-btn color-white bg-0F172A font-size-14 font-900"
+            <div class="long-text-guide-card__nav-btn color-white bg-0F172A text-[14px] font-900"
               @click="handleAction(activeItem)">
               {{ activeItem.action.buttonText }}
             </div>
diff --git a/src/pages/home/components/LongTextGuideCardPreview/index.vue b/src/pages/home/components/LongTextGuideCardPreview/index.vue
index 0992a4d..3e48406 100644
--- a/src/pages/home/components/LongTextGuideCardPreview/index.vue
+++ b/src/pages/home/components/LongTextGuideCardPreview/index.vue
@@ -4,18 +4,18 @@
     <div class="w-vw"></div>
     <div class="flex flex-col px-16 pt-16 pb-12 border-box" @click="openDetail(item)">
 
-      <div class="long-text-guide-card__badge font-size-12 font-900" :class="`is-${item.badgeTone}`">
+      <div class="long-text-guide-card__badge text-[12px] font-900" :class="`is-${item.badgeTone}`">
         {{ item.badge }}
       </div>
 
       <div class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
         {{ item.title }}
       </div>
-      <div class="long-text-guide-card__summary-text color-94A3B8 font-size-14 font-500 ellipsis-2">
+      <div class="long-text-guide-card__summary-text color-94A3B8 text-[14px] font-500 ellipsis-2">
         {{ item.summary }}
       </div>
       <div class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
-        <span class="color-CBD5E1 font-size-12 font-800">{{ item.footer }}</span>
+        <span class="color-CBD5E1 text-[12px] font-800">{{ item.footer }}</span>
         <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
       </div>
 
diff --git a/src/pages/home/components/MapNavigationCard/index.vue b/src/pages/home/components/MapNavigationCard/index.vue
index c74844d..eb9fc2b 100644
--- a/src/pages/home/components/MapNavigationCard/index.vue
+++ b/src/pages/home/components/MapNavigationCard/index.vue
@@ -2,7 +2,7 @@
   <div class="map-navigation-card bg-white rounded-24 overflow-hidden w-full">
     <div class="map-navigation-card__media">
       <img class="map-navigation-card__image block w-full" :src="data.image" mode="aspectFill" />
-      <div class="map-navigation-card__badge flex flex-items-center color-white font-size-12 font-900">
+      <div class="map-navigation-card__badge flex flex-items-center color-white text-[12px] font-900">
         <span class="map-navigation-card__badge-icon">{{ badge.icon }}</span>
         <span>{{ badge.text }}</span>
       </div>
@@ -13,7 +13,7 @@
         <div class="map-navigation-card__title color-1E293B font-size-18 font-900 ellipsis-1">
           {{ data.title }}
         </div>
-        <div class="map-navigation-card__distance color-94A3B8 font-size-14 font-900 ellipsis-1">
+        <div class="map-navigation-card__distance color-94A3B8 text-[14px] font-900 ellipsis-1">
           {{ data.distance }}
         </div>
       </div>
diff --git a/src/pages/home/components/MoreService/index.vue b/src/pages/home/components/MoreService/index.vue
index b02f79b..fe4aa76 100644
--- a/src/pages/home/components/MoreService/index.vue
+++ b/src/pages/home/components/MoreService/index.vue
@@ -14,11 +14,11 @@
               <div class="font-size-16 color-000 line-height-24 font-500">
                 {{ item.title }}
               </div>
-              <div class="font-size-12 color-A3A3A3 line-height-16">
+              <div class="text-[12px] color-A3A3A3 line-height-16">
                 {{ item.content }}
               </div>
             </div>
-            <div class="right border-box font-size-12 color-white line-height-16" @click="handleClick(item)">
+            <div class="right border-box text-[12px] color-white line-height-16" @click="handleClick(item)">
               {{ item.btnText }}
             </div>
           </div>
diff --git a/src/pages/home/components/NoticeCard/index.vue b/src/pages/home/components/NoticeCard/index.vue
index c6506bb..df361aa 100644
--- a/src/pages/home/components/NoticeCard/index.vue
+++ b/src/pages/home/components/NoticeCard/index.vue
@@ -4,14 +4,14 @@
       <div class="notice-card__summary-title color-B45309 font-size-16 font-900">
         {{ summary.title }}
       </div>
-      <div class="notice-card__summary-content color-D97706 font-size-14 font-900">
+      <div class="notice-card__summary-content color-D97706 text-[14px] font-900">
         {{ summary.content }}
       </div>
       <div class="notice-card__summary-footer flex flex-items-center flex-justify-between">
-        <div class="notice-card__summary-time color-D97706 font-size-12 font-900">
+        <div class="notice-card__summary-time color-D97706 text-[12px] font-900">
           {{ summary.publishTime }}
         </div>
-        <div class="notice-card__summary-link color-B45309 font-size-14 font-900" :class="{ 'is-disabled': disabled }"
+        <div class="notice-card__summary-link color-B45309 text-[14px] font-900" :class="{ 'is-disabled': disabled }"
           @click="openDetail">
           {{ summary.actionText }}
         </div>
@@ -41,7 +41,7 @@
         </div>
         <div class="notice-card__divider"></div>
         <div v-for="paragraph in paragraphs" :key="paragraph.id"
-          class="notice-card__paragraph color-475569 font-size-14 font-800">
+          class="notice-card__paragraph color-475569 text-[14px] font-800">
           <span v-for="segment in paragraph.segments" :key="segment.text"
             :class="{ 'notice-card__strong': segment.strong }">
             {{ segment.text }}
diff --git a/src/pages/home/components/NoticeMessage/detail.vue b/src/pages/home/components/NoticeMessage/detail.vue
index e9fd2ea..462ac33 100644
--- a/src/pages/home/components/NoticeMessage/detail.vue
+++ b/src/pages/home/components/NoticeMessage/detail.vue
@@ -13,14 +13,14 @@
         <div class="pt-16 px-12 pb-24 border-box">
           <div class="color-171717 font-size-16 font-weight-600">{{ detailTitle }}</div>
 
-          <div v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-16">
+          <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 font-size-12 font-weight-600 ml-8">发布时间：{{ publishTime }}</span>
+            <span class="color-171717 text-[12px] font-weight-600 ml-8">发布时间：{{ publishTime }}</span>
           </div>
 
-          <div class="mt-16 mx-12 bg-gray w-full height-1"></div>
+          <div class="mt-[16px] mx-12 bg-gray w-full height-1"></div>
 
-          <div class="mt-16 color-666 font-size-14 line-height-20">{{ noticeContent }}</div>
+          <div class="mt-[16px] color-666 text-[14px] line-height-20">{{ noticeContent }}</div>
         </div>
       </div>
     </div>
diff --git a/src/pages/home/components/OpenMapComponent/index.vue b/src/pages/home/components/OpenMapComponent/index.vue
index 024ce13..82cbe85 100644
--- a/src/pages/home/components/OpenMapComponent/index.vue
+++ b/src/pages/home/components/OpenMapComponent/index.vue
@@ -9,8 +9,8 @@
                 </div>
             </div>
             <div class="center ml-12">
-                <div class="font-color-900 font-size-14">打开导览地图</div>
-                <div class="font-color-500 font-size-12 mt-6">距你 {{ distance }} · 步行 {{ walk }}</div>
+                <div class="font-color-900 text-[14px]">打开导览地图</div>
+                <div class="font-color-500 text-[12px] mt-6">距你 {{ distance }} · 步行 {{ walk }}</div>
             </div>
             <div class="ml-12 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" />
diff --git a/src/pages/home/components/PoiCompareCard/index.vue b/src/pages/home/components/PoiCompareCard/index.vue
index 2d97cf8..d2ae0dd 100644
--- a/src/pages/home/components/PoiCompareCard/index.vue
+++ b/src/pages/home/components/PoiCompareCard/index.vue
@@ -15,14 +15,14 @@
           :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
           <img class="poi-compare-card__image block w-full" :src="item.image" mode="aspectFill" />
           <div v-for="field in item.fields" :key="field.label" class="poi-compare-card__field">
-            <div class="poi-compare-card__field-label color-94A3B8 font-size-12 font-800">
+            <div class="poi-compare-card__field-label color-94A3B8 text-[12px] font-800">
               {{ field.label }}
             </div>
-            <div v-if="field.tone" class="poi-compare-card__chip font-size-12 font-900"
+            <div v-if="field.tone" class="poi-compare-card__chip text-[12px] font-900"
               :class="getToneClass(field.tone)">
               {{ field.value }}
             </div>
-            <div v-else class="poi-compare-card__field-value color-1E293B font-size-14 font-900">
+            <div v-else class="poi-compare-card__field-value color-1E293B text-[14px] font-900">
               {{ field.value }}
             </div>
           </div>
@@ -45,7 +45,7 @@
         <div class="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-full">
           {{ detail.title }}
         </div>
-        <div class="poi-compare-card__compare-label color-94A3B8 font-size-12 font-900">
+        <div class="poi-compare-card__compare-label color-94A3B8 text-[12px] font-900">
           {{ detail.compareLabel }}
         </div>
       </div>
@@ -54,29 +54,29 @@
         <div class="poi-compare-card__table-head poi-compare-card__table-row">
           <div></div>
           <div v-for="item in items" :key="item.id || item.name"
-            class="poi-compare-card__table-title color-1E293B font-size-14 font-900">
+            class="poi-compare-card__table-title color-1E293B text-[14px] font-900">
             {{ item.name }}
           </div>
         </div>
         <div v-for="row in detail.rows" :key="row.label" class="poi-compare-card__table-row poi-compare-card__data-row">
-          <div class="poi-compare-card__row-label color-94A3B8 font-size-12 font-900">
+          <div class="poi-compare-card__row-label color-94A3B8 text-[12px] font-900">
             {{ row.label }}
           </div>
           <div 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)">
+            class="poi-compare-card__cell color-1E293B text-[14px] font-900" :class="getCellClass(cell.tone)">
             {{ cell.text }}
           </div>
         </div>
       </div>
 
       <div class="poi-compare-card__recommend">
-        <div class="poi-compare-card__recommend-title color-94A3B8 font-size-12 font-900">
+        <div class="poi-compare-card__recommend-title color-94A3B8 text-[12px] font-900">
           {{ detail.recommendTitle }}
         </div>
         <div class="poi-compare-card__tips">
           <div v-for="tip in detail.tips" :key="tip.text" class="poi-compare-card__tip flex gap-10">
             <div class="poi-compare-card__dot rounded-full flex-shrink-0" :class="getDotClass(tip.tone)" />
-            <div class="poi-compare-card__tip-text color-334155 font-size-14 font-900">
+            <div class="poi-compare-card__tip-text color-334155 text-[14px] font-900">
               {{ tip.text }}
             </div>
           </div>
diff --git a/src/pages/home/components/PoiDetailCard/index.vue b/src/pages/home/components/PoiDetailCard/index.vue
index 14b4ee7..fc9893b 100644
--- a/src/pages/home/components/PoiDetailCard/index.vue
+++ b/src/pages/home/components/PoiDetailCard/index.vue
@@ -15,7 +15,7 @@
 
       <div class="poi-detail-card__tip flex flex-items-center gap-10">
         <div class="poi-detail-card__spark color-047857 font-size-18 font-900">✦</div>
-        <div class="poi-detail-card__tip-text color-047857 font-size-14 font-800">
+        <div class="poi-detail-card__tip-text color-047857 text-[14px] font-800">
           {{ data.tip?.text }}
         </div>
       </div>
diff --git a/src/pages/home/components/RecommendationListCard/index.vue b/src/pages/home/components/RecommendationListCard/index.vue
index 6212279..6758c7e 100644
--- a/src/pages/home/components/RecommendationListCard/index.vue
+++ b/src/pages/home/components/RecommendationListCard/index.vue
@@ -11,12 +11,12 @@
             {{ item.title }}
           </div>
           <div
-            class="recommendation-list-card__distance flex flex-items-center gap-4 mt-4 color-94A3B8 font-size-12 font-800">
+            class="recommendation-list-card__distance flex flex-items-center gap-4 mt-4 color-94A3B8 text-[12px] font-800">
             <span class="recommendation-list-card__pin">⌖</span>
             <span>{{ item.distance }}</span>
           </div>
           <div
-            class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-12 color-334155 font-size-12 font-900"
+            class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-12 color-334155 text-[12px] font-900"
             @click.stop="handleSelect(item)">
             {{ getActionText(item) }}
           </div>
diff --git a/src/pages/home/components/RoutePlanCard/index.vue b/src/pages/home/components/RoutePlanCard/index.vue
index 47432e7..1233a6d 100644
--- a/src/pages/home/components/RoutePlanCard/index.vue
+++ b/src/pages/home/components/RoutePlanCard/index.vue
@@ -9,7 +9,7 @@
           {{ data.title }}
         </div>
         <div class="route-plan-card__tags flex flex-items-center">
-          <div v-for="tag in summaryTags" :key="tag.id || tag.text" class="route-plan-card__tag font-size-12 font-900"
+          <div v-for="tag in summaryTags" :key="tag.id || tag.text" class="route-plan-card__tag text-[12px] font-900"
             :class="getTagClass(tag.tone)">
             {{ tag.text }}
           </div>
@@ -29,7 +29,7 @@
         <div class="route-plan-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
           {{ data.title }}
         </div>
-        <div class="route-plan-card__detail-badge color-047857 bg-ECFDF5 font-size-12 font-900">
+        <div class="route-plan-card__detail-badge color-047857 bg-ECFDF5 text-[12px] font-900">
           {{ detail.badge }}
         </div>
       </div>
@@ -38,7 +38,7 @@
         <template v-for="(node, index) in nodes" :key="node.id || node.title">
           <div class="route-plan-card__node-wrap" :class="{ 'is-disabled': disabled }" @click="handleSelect(node)">
             <div
-              class="route-plan-card__node-number flex flex-items-center flex-justify-center rounded-full color-047857 bg-ECFDF5 font-size-12 font-900">
+              class="route-plan-card__node-number flex flex-items-center flex-justify-center rounded-full color-047857 bg-ECFDF5 text-[12px] font-900">
               {{ index + 1 }}
             </div>
             <div class="route-plan-card__node bg-white rounded-20 flex flex-items-center">
@@ -47,10 +47,10 @@
                 <div class="route-plan-card__node-title color-1E293B font-size-16 font-900 ellipsis-1">
                   {{ node.title }}
                 </div>
-                <div class="route-plan-card__node-desc color-94A3B8 font-size-12 font-800 ellipsis-1">
+                <div class="route-plan-card__node-desc color-94A3B8 text-[12px] font-800 ellipsis-1">
                   {{ node.description }}
                 </div>
-                <div v-if="node.tag" class="route-plan-card__node-tag color-D97706 bg-FFFBEB font-size-12 font-900">
+                <div v-if="node.tag" class="route-plan-card__node-tag color-D97706 bg-FFFBEB text-[12px] font-900">
                   {{ node.tag }}
                 </div>
               </div>
@@ -61,7 +61,7 @@
             <div class="route-plan-card__connector-line"></div>
             <div class="route-plan-card__connector-arrow"></div>
             <div
-              class="route-plan-card__connector-chip flex flex-items-center bg-F8FAFC rounded-full color-64748B font-size-12 font-900">
+              class="route-plan-card__connector-chip flex flex-items-center bg-F8FAFC rounded-full color-64748B text-[12px] font-900">
               <span class="route-plan-card__connector-icon">{{ connectors[index].icon }}</span>
               <span>{{ connectors[index].text }}</span>
             </div>
@@ -70,7 +70,7 @@
       </div>
 
       <div v-if="tips.length" class="route-plan-card__tips bg-F8FAFC rounded-20">
-        <div class="route-plan-card__tips-title color-64748B font-size-14 font-900">
+        <div class="route-plan-card__tips-title color-64748B text-[14px] font-900">
           {{ detail.tipsTitle }}
         </div>
         <div v-for="tip in tips" :key="tip"
diff --git a/src/pages/home/components/ScenicImageCard/index.vue b/src/pages/home/components/ScenicImageCard/index.vue
index d154aa0..f83e370 100644
--- a/src/pages/home/components/ScenicImageCard/index.vue
+++ b/src/pages/home/components/ScenicImageCard/index.vue
@@ -13,7 +13,7 @@
       <div v-if="caption.title" class="scenic-image-card__title color-white font-size-18 font-900 ellipsis-1">
         {{ caption.title }}
       </div>
-      <div v-if="caption.subtitle" class="scenic-image-card__subtitle color-white font-size-14 font-900 ellipsis-1">
+      <div v-if="caption.subtitle" class="scenic-image-card__subtitle color-white text-[14px] font-900 ellipsis-1">
         {{ caption.subtitle }}
       </div>
     </div>
diff --git a/src/pages/home/components/SharedVisual/ActionRow.vue b/src/pages/home/components/SharedVisual/ActionRow.vue
index 59de945..042a2a8 100644
--- a/src/pages/home/components/SharedVisual/ActionRow.vue
+++ b/src/pages/home/components/SharedVisual/ActionRow.vue
@@ -7,7 +7,7 @@
       <slot name="icon">{{ icon }}</slot>
     </div>
     <div class="visual-action-row__body flex-full">
-      <div class="visual-action-row__title color-1E293B font-size-14 font-900 ellipsis-1">{{ title }}</div>
+      <div class="visual-action-row__title color-1E293B text-[14px] font-900 ellipsis-1">{{ title }}</div>
       <div v-if="subtitle" class="visual-action-row__subtitle ellipsis-1">
         {{ subtitle }}
       </div>
diff --git a/src/pages/home/components/SharedVisual/DetailShell.vue b/src/pages/home/components/SharedVisual/DetailShell.vue
index 9dea8c2..2feebe4 100644
--- a/src/pages/home/components/SharedVisual/DetailShell.vue
+++ b/src/pages/home/components/SharedVisual/DetailShell.vue
@@ -5,7 +5,7 @@
         @click="$emit('back')">
         <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
       </div>
-      <div class="visual-detail__title flex-full color-1E293B font-size-14 font-900 ellipsis-1">{{ title }}</div>
+      <div class="visual-detail__title flex-full color-1E293B text-[14px] font-900 ellipsis-1">{{ title }}</div>
       <BadgePill v-if="tag" :label="tag" :tone="tone" />
     </div>
     <slot />
diff --git a/src/pages/order/order/components/AmtSection/index.vue b/src/pages/order/order/components/AmtSection/index.vue
index e65b5a1..5bcb780 100644
--- a/src/pages/order/order/components/AmtSection/index.vue
+++ b/src/pages/order/order/components/AmtSection/index.vue
@@ -10,16 +10,11 @@
         </span>
       </div>
     </div>
-    <div
-      v-if="orderData.orderStatus === '0'"
-      class="font-size-11 color-99A0AE mt-4"
-    >
+    <div v-if="orderData.orderStatus === '0'" class="font-size-11 color-99A0AE mt-4">
       超时后，订单将自动取消
     </div>
-    <div
-      v-if="['1', '2'].includes(orderData.orderStatus)"
-      class="border-box border-top flex flex-items-center flex-justify-between font-size-12 pt-12 mt-12"
-    >
+    <div v-if="['1', '2'].includes(orderData.orderStatus)"
+      class="border-box border-top flex flex-items-center flex-justify-between text-[12px] pt-12 mt-12">
       <div class="color-525866">取消政策及说明</div>
       <div class="flex flex-items-center" @click="emit('click')">
         <span class="theme-color-500 mr-4">查看详情</span>
diff --git a/src/pages/order/order/components/FooterSection/index.vue b/src/pages/order/order/components/FooterSection/index.vue
index f572861..bd215ec 100644
--- a/src/pages/order/order/components/FooterSection/index.vue
+++ b/src/pages/order/order/components/FooterSection/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="footer bg-white border-box flex flex-items-center flex-justify-between p-12">
     <button v-if="['1', '2'].includes(statusCode)"
-      class="left border-none border-box bg-white rounded-10 flex flex-items-center flex-justify-center font-size-14 font-500 color-525866 mr-12"
+      class="left border-none border-box bg-white rounded-10 flex flex-items-center flex-justify-center text-[14px] font-500 color-525866 mr-12"
       @click="emit('refund', orderData)">
       申请退款
     </button>
     <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',
+      'right border-none rounded-10 flex flex-full flex-items-center flex-justify-center text-[14px] font-500 bg-theme-color-500',
       {
         'bg-FF3D60': statusCode === '0',
         'color-white': ['1', '2', '3', '4', '5', '6'].includes(statusCode),
diff --git a/src/pages/order/order/components/GoodsInfo/index.vue b/src/pages/order/order/components/GoodsInfo/index.vue
index a25f9ca..e67a6a3 100644
--- a/src/pages/order/order/components/GoodsInfo/index.vue
+++ b/src/pages/order/order/components/GoodsInfo/index.vue
@@ -1,28 +1,20 @@
 <template>
   <div 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" />
 
     <div class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
       {{ orderData.commodityName }}
     </div>
 
-    <div
-      class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12"
-    >
+    <div class="border-box border-bottom text-[12px] color-99A0AE line-height-16 pb-12">
       {{ orderData.commodityDescription }}
     </div>
 
     <!-- 权益部分 -->
     <div class="border-box flex flex-items-center pt-12">
-      <span
-        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"
-      >
+      <span 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 }}
       </span>
     </div>
@@ -33,15 +25,13 @@
       {{ orderData.commodityName }}
     </div>
 
-    <div class="flex font-size-12">
+    <div class="flex text-[12px]">
       <span class="w-60 color-99A0AE">购买数量</span>
       <span class="color-525866">{{ commodityAmount }}</span>
     </div>
 
-    <div
-      v-if="orderData.orderStatus === '0'"
-      class="border-box border-top pt-12 font-size-14 font-500 color-171717 mt-12"
-    >
+    <div v-if="orderData.orderStatus === '0'"
+      class="border-box border-top pt-12 text-[14px] font-500 color-171717 mt-12">
       凭[电子凭证]直接验证使用
     </div>
   </div>
diff --git a/src/pages/order/order/components/OrderCard/InfoRow.vue b/src/pages/order/order/components/OrderCard/InfoRow.vue
index dc14b49..c2cf300 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 font-size-12 color-99A0AE">{{ label }}：</span>
-    <span class="value flex-full font-size-12 color-99A0AE">{{ value }}</span>
+    <span class="label text-[12px] color-99A0AE">{{ label }}：</span>
+    <span class="value flex-full text-[12px] color-99A0AE">{{ 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 1839328..e6acfa5 100644
--- a/src/pages/order/order/components/OrderCard/OrderCardContent.vue
+++ b/src/pages/order/order/components/OrderCard/OrderCardContent.vue
@@ -1,27 +1,18 @@
 <template>
   <div class="card-content border-box pt-12">
     <div class="flex items-center justify-between">
-      <div
-        class="left flex-full font-size-14 line-height-20 color-171717 mr-12"
-      >
+      <div class="left flex-full text-[14px] line-height-20 color-171717 mr-12">
         {{ orderData.commodityName }}
       </div>
-      <div
-        :class="[
-          'right font-size-18 font-bold line-height-20',
-          orderData.orderStatus === '0' ? 'color-FF3D60' : 'color-525866',
-        ]"
-      >
+      <div :class="[
+        'right font-size-18 font-bold line-height-20',
+        orderData.orderStatus === '0' ? 'color-FF3D60' : 'color-525866',
+      ]">
         {{ orderData.orderAmt }}
       </div>
     </div>
     <!-- 动态渲染信息行 -->
-    <InfoRow
-      v-for="item in displayItems"
-      :key="item.label"
-      :label="item.label"
-      :value="item.value"
-    />
+    <InfoRow v-for="item in displayItems" :key="item.label" :label="item.label" :value="item.value" />
   </div>
 </template>
 
diff --git a/src/pages/order/order/components/OrderCard/index.vue b/src/pages/order/order/components/OrderCard/index.vue
index a72613a..9ce1624 100644
--- a/src/pages/order/order/components/OrderCard/index.vue
+++ b/src/pages/order/order/components/OrderCard/index.vue
@@ -1,23 +1,17 @@
 <template>
-  <div
-    class="order-card bg-white border-box p-12 rounded-12 m-12"
-    @click.stop="handleCardClick"
-  >
+  <div class="order-card bg-white border-box p-12 rounded-12 m-12" @click.stop="handleCardClick">
     <!-- 卡片头部 -->
     <div class="card-header flex items-center">
       <div class="status-info flex items-center flex-full">
         <img class="status-icon mr-4" :src="getStatusIcon()" />
-        <div class="order-title font-size-14 line-height-20 color-525866">
+        <div class="order-title text-[14px] line-height-20 color-525866">
           {{ getOrderTypeName() }}
         </div>
       </div>
-      <div
-        v-if="orderData.status !== 'pending'"
-        :class="[
-          'status-tag font-size-12',
-          `tag-${orderData.orderStatus || orderData.workOrderStatus}`,
-        ]"
-      >
+      <div v-if="orderData.status !== 'pending'" :class="[
+        'status-tag text-[12px]',
+        `tag-${orderData.orderStatus || orderData.workOrderStatus}`,
+      ]">
         {{ getStatusspan(orderData.orderStatus || orderData.workOrderStatus) }}
       </div>
     </div>
@@ -27,9 +21,8 @@
 
     <div v-if="orderData.orderStatus === '0'" class="span-right">
       <button
-        class="go-pay border-box border-none font-size-14 color-white bg-FF3D60 rounded-5 inline-block span-center line-height-30"
-        @click.stop="handleCardClick"
-      >
+        class="go-pay border-box border-none text-[14px] color-white bg-FF3D60 rounded-5 inline-block span-center line-height-30"
+        @click.stop="handleCardClick">
         去支付
       </button>
     </div>
diff --git a/src/pages/order/order/components/OrderInfo/index.vue b/src/pages/order/order/components/OrderInfo/index.vue
index 9bfccc5..1f536d6 100644
--- a/src/pages/order/order/components/OrderInfo/index.vue
+++ b/src/pages/order/order/components/OrderInfo/index.vue
@@ -1,23 +1,21 @@
 <template>
   <div class="bg-white border-box rounded-10 p-12">
-    <div class="flex mb-8 font-size-12">
+    <div class="flex mb-8 text-[12px]">
       <span class="w-60 color-99A0AE">订单编号</span>
       <span class="color-525866">{{ orderData.orderId }}</span>
     </div>
-    <div class="flex mb-8 font-size-12">
+    <div class="flex mb-8 text-[12px]">
       <span class="w-60 color-99A0AE">下单时间</span>
       <span class="color-525866">{{ orderData.createTime }}</span>
     </div>
-    <div class="flex font-size-12">
+    <div class="flex text-[12px]">
       <span class="w-60 color-99A0AE">支付状态</span>
-      <span
-        :class="[
-          {
-            'color-FF3D60': statusCode === '0' || statusCode === '3',
-            'color-21B466': ['1', '2', '4', '5', '6'].includes(statusCode),
-          },
-        ]"
-      >
+      <span :class="[
+        {
+          'color-FF3D60': statusCode === '0' || statusCode === '3',
+          'color-21B466': ['1', '2', '4', '5', '6'].includes(statusCode),
+        },
+      ]">
         {{ statusspan }}
       </span>
     </div>
diff --git a/src/pages/order/order/components/OrderQrcode/index.vue b/src/pages/order/order/components/OrderQrcode/index.vue
index 67213e4..4dc4bf5 100644
--- a/src/pages/order/order/components/OrderQrcode/index.vue
+++ b/src/pages/order/order/components/OrderQrcode/index.vue
@@ -1,56 +1,33 @@
 <template>
-  <uni-popup
-    ref="popupRef"
-    type="bottom"
-    :safe-area="false"
-    @maskClick="handleClose"
-    @change="handlePopupChange"
-  >
-    <div class="refund-popup bg-F5F7FA border-box">
-      <div
-        class="border-box flex flex-items-center justify-between pt-12 pb-12 relative"
-      >
-        <div class="flex flex-col flex-items-center flex-full">
-          <div class="flex-full font-size-16 span-color-900 span-center">
+  <van-popup ref="popupRef" position="bottom" v-model:show="show">
+    <div class="rounded-t-[15px] pb-10 bg-[#F5F7FA]">
+      <div class="flex items-center justify-between pt-[12px] pb-[12px] relative">
+        <div class="flex flex-col items-center flex-1">
+          <div class="flex-1 text-[16px] text-[#181B25] text-center">
             核销凭证
           </div>
-          <div class="flex-full font-size-12 span-color-600 span-center mt-4">
+          <div class="flex-1 text-[12px] text-[#666666] text-center mt-[4px]">
             请向工作人员出示此码
           </div>
         </div>
         <!-- 关闭按钮 -->
-        <uni-icons
-          class="close absolute"
-          type="close"
-          size="20"
-          color="#CACFD8"
-          @click="handleClose"
-        />
+        <van-icon class="top-[14px] right-[12px] absolute" name="cross" size="20" color="#CACFD8"
+          @click="handleClose" />
       </div>
 
-      <div
-        class="bg-white border-box rounded-12 flex flex-col flex-items-center flex-justify-center p-12 mb-12 mx-12"
-      >
-        <div
-          class="flex w-full flex-row flex-items-center flex-justify-between py-4"
-        >
+      <div class="bg-white rounded-[12px] flex flex-col items-center justify-center p-[12px] mb-[12px] mx-[12px]">
+        <div class="flex w-full flex-row items-center justify-between py-[4px]">
           <div>
-            <div
-              class="font-size-16 font-500 color-000 line-height-24 ellipsis-1"
-            >
+            <div class="text-[16px] font-medium text-black leading-[24px] truncate">
               {{ selectedVoucher.name }}
             </div>
           </div>
 
           <div v-if="selectedVoucher" class="flex flex-row">
-            <div
-              class="bg-F5F7FA span-color-600 font-size-12 p-4 rounded-4 mr-4"
-            >
+            <div class="bg-[#F5F7FA] text-[#666666] font-medium px-[4px] rounded-[4px] mr-[4px]">
               总计{{ selectedVoucher.count }}{{ selectedVoucher.unit }}
             </div>
-            <div
-              class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4"
-            >
+            <div class="bg-[#F0F8F3] text-[#0CCD58] text-[12px] p-[4px] rounded-[4px]">
               剩{{ selectedVoucher.count - selectedVoucher.writeOffCount
               }}{{ selectedVoucher.unit }}可用
             </div>
@@ -58,84 +35,64 @@
         </div>
 
         <div
-          class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border pt-16 pb-32 mt-12"
-        >
-          <div
-            class="flex flex-row flex-justify-between border-box w-full px-12"
-          >
-            <div
-              class="bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12"
-            >
+          class="flex flex-col w-full items-center justify-center rounded-[8px] border border-ink-200 pt-[16px] pb-[32px] mt-[12px]">
+          <div class="flex flex-row justify-between w-full px-[12px]">
+            <div class="bg-[#F9FAFB] text-[#0CCD58] text-[14px] px-[12px] leading-[24px] rounded-[12px]">
               凭证{{
                 selectedVoucherList.length > 1 ? currentVoucherIndex + 1 : ""
               }}
             </div>
-            <div
-              class="span-color-500 font-size-14 px-12 line-height-24 rounded-12"
-            >
+            <div class="text-ink-500 text-[14px] px-[12px] leading-[24px] rounded-[12px]">
               此码仅可核销{{
                 selectedVoucher.count - selectedVoucher.writeOffCount
               }}份
             </div>
           </div>
 
-          <div
-            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"
-            />
+          <div class="flex items-center justify-center mt-[20px] p-[20px] rounded-[12px] border border-[#0CCD58]"
+            :style="{ borderColor: selectedVoucher?.color }">
+            <Qrcode v-if="showQrcode" :size="props.size" :unit="props.unit" :val="qrcodeVal" :loadMake="true"
+              :onval="true" />
           </div>
 
-          <div
-            v-if="false"
-            class="mt-20 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12"
-          >
+          <div v-if="false"
+            class="mt-[20px] bg-theme-color-50 text-[#0CCD58] text-[14px] px-12 line-height-24 rounded-12">
             {{ selectedVoucher.name }}
           </div>
         </div>
 
-        <div
-          v-if="selectedVoucherList.length > 1"
-          class="flex flex-row w-full flex-items-center flex-justify-between mt-16 mb-24"
-        >
+        <div v-if="selectedVoucherList.length > 1"
+          class="flex flex-row w-full items-center justify-between mt-[16px] mb-[24px]">
           <div class="actions-btn" @click.stop="upAction">
-            <uni-icons type="left" size="16" color="#171717" />
+            <van-icon name="arrow-left" size="16" color="#171717" />
           </div>
 
           <div class="flex flex-col">
-            <div class="flex flex-row flex-justify-center flex-items-center">
-              <div class="theme-color-500 font-size-16">
+            <div class="flex flex-row justify-center items-center">
+              <div class="text-[#0CCD58] text-[16px]">
                 {{ currentVoucherIndex + 1 }}
               </div>
-              <div class="span-color-600 font-size-12">
+              <div class="text-[#02C34E] text-[12px]">
                 /{{ selectedVoucherList.length }}
               </div>
             </div>
 
-            <div class="span-color-600 font-size-14">扫码后点击下一张</div>
+            <div class="text-[#02C34E] text-[14px]">扫码后点击下一张</div>
           </div>
 
-          <div class="actions-btn" @click.stop="downAction">
-            <uni-icons type="right" size="16" color="#171717" />
+          <div class="w-10 h-10 rounded-full bg-[#f5f5f5] flex items-center justify-center" @click.stop="downAction">
+            <van-icon type="right" size="16" color="#171717" />
           </div>
         </div>
-        <div v-else class="mb-24"></div>
+        <div v-else class="mb-[24px]"></div>
       </div>
     </div>
-  </uni-popup>
+  </van-popup>
 </template>
 
 <script setup>
+import { ref, watch, computed, nextTick, defineProps, defineEmits, defineExpose } from "vue";
 import Qrcode from "@/components/Qrcode/index.vue";
-import { defineProps, defineEmits } from "vue";
-import { ref, watch, computed, nextTick } from "vue";
 
 const props = defineProps({
   // 弹窗显示状态
@@ -177,6 +134,7 @@ const emit = defineEmits([
 
 // 弹窗引用
 const popupRef = ref(null);
+const show = ref(false)
 
 // 控制二维码渲染
 const showQrcode = ref(false);
@@ -208,8 +166,8 @@ const qrcodeVal = computed(() => {
 });
 
 // 方法定义
-const show = () => popupRef.value && popupRef.value.open();
-const hide = () => popupRef.value && popupRef.value.close();
+const open = () => show.value = true;
+const close = () => show.value = false;
 
 const handlePopupChange = ({ show }) => {
   // popup 真实打开后再渲染二维码，避免 canvas 尺寸为 0 报错
@@ -297,8 +255,9 @@ const downAction = () => {
   if (idx >= len) idx = 0;
   currentVoucherIndex.value = idx;
 };
-</script>
 
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
+defineExpose({
+  open,
+  close,
+})
+</script>
diff --git a/src/pages/order/order/components/OrderQrcode/styles/index.scss b/src/pages/order/order/components/OrderQrcode/styles/index.scss
deleted file mode 100644
index ff7c010..0000000
--- a/src/pages/order/order/components/OrderQrcode/styles/index.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.refund-popup {
-  border-radius: 15px 15px 0 0;
-  padding-bottom: 40px;
-}
-
-.close {
-  top: 14px;
-  right: 12px;
-}
-
-.borderColor {
-  border-color: #0ccd58;
-}
-
-.actions-btn {
-  width: 40px;
-  height: 40px;
-  border-radius: 20px;
-  background-color: #f5f5f5;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/src/pages/order/order/components/UserInfo/index.vue b/src/pages/order/order/components/UserInfo/index.vue
index 400232c..2050fd0 100644
--- a/src/pages/order/order/components/UserInfo/index.vue
+++ b/src/pages/order/order/components/UserInfo/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="bg-white border-box rounded-10 p-12 mb-12" v-if="hasConsumerData">
     <div v-for="(item, index) in consumerList" :key="index">
-      <div class="flex mb-8 font-size-12">
+      <div class="flex mb-8 text-[12px]">
         <span class="w-60 color-99A0AE">住客姓名</span>
         <span class="color-525866">{{ item.visitorName }}</span>
       </div>
     </div>
-    <div class="flex font-size-12">
+    <div class="flex text-[12px]">
       <span class="w-60 color-99A0AE">联系电话</span>
       <span class="color-525866">{{ contactPhone }}</span>
     </div>
diff --git a/src/pages/order/order/components/VoucherList/index.vue b/src/pages/order/order/components/VoucherList/index.vue
index 04143d5..aef57e9 100644
--- a/src/pages/order/order/components/VoucherList/index.vue
+++ b/src/pages/order/order/components/VoucherList/index.vue
@@ -4,39 +4,27 @@
       核销凭证列表
     </span>
 
-    <div
-      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"
-    >
+    <div 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">
       <div class="flex flex-col">
         <span class="span-color-900 font-size-16">{{ item.name }}</span>
         <div class="flex flex-row mt-8">
-          <div class="bg-F5F7FA span-color-600 font-size-12 p-4 rounded-4 mr-4">
+          <div class="bg-F5F7FA span-color-600 text-[12px] p-4 rounded-4 mr-4">
             总计{{ item.count }}{{ item.unit }}
           </div>
-          <div
-            class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4"
-          >
+          <div class="bg-theme-color-50 theme-color-500 text-[12px] p-4 rounded-4">
             剩{{ item.count - item.writeOffCount }}{{ item.unit }}可用
           </div>
         </div>
       </div>
 
-      <div
-        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)"
-      >
-        <span v-if="item.packageStatus === 0" class="font-size-14 color-white"
-          >出示凭证</span
-        >
-        <span v-else class="font-size-14 span-color-300">已核销</span>
+      <div 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)">
+        <span v-if="item.packageStatus === 0" class="text-[14px] color-white">出示凭证</span>
+        <span v-else class="text-[14px] span-color-300">已核销</span>
       </div>
     </div>
   </div>
diff --git a/src/pages/quick/index.vue b/src/pages/quick/index.vue
index 13169e2..be86370 100644
--- a/src/pages/quick/index.vue
+++ b/src/pages/quick/index.vue
@@ -11,7 +11,7 @@
         class="bg-white border-box flex flex-items-center p-12">
         <div class="in flex flex-items-center">
           <span class="font-size-11 font-500 color-99A0AE mr-4">入住</span>
-          <span class="font-size-14 font-500 color-171717">
+          <span class="text-[14px] font-500 color-171717">
             {{ selectedDate.startDate }}
           </span>
         </div>
@@ -23,7 +23,7 @@
 
         <div class="out flex flex-items-center">
           <span class="font-size-11 font-500 color-99A0AE mr-4">离店</span>
-          <span class="font-size-14 font-500 color-171717">
+          <span class="text-[14px] font-500 color-171717">
             {{ selectedDate.endDate }}
           </span>
         </div>