From 4232f7bc362cebc56987b829c9f7817376223eaf Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Fri, 29 May 2026 09:38:41 +0800
Subject: [PATCH] refactor: adopt text-ink-600 token and clean up OrderCard

Replace all hardcoded #525866 text color with the text-ink-600 design token across components and pages. Refactor the OrderCard component by moving external SCSS styles to scoped styles, replace legacy class names with Tailwind utilities, and fix minor inconsistencies. Fix the typo in src/pages/quick/index.vue where rounded-[5px]0 was used incorrectly, and delete the unused OrderCard styles file.
---
 src/components/CreateServiceOrder/index.vue   |  6 +--
 src/components/Feedback/index.vue             |  4 +-
 src/components/GoodDetail/index.vue           |  2 +-
 src/components/RefundPopup/index.vue          |  4 +-
 .../components/ConactSection/index.vue        |  4 +-
 .../booking/components/UserSection/index.vue  |  4 +-
 src/pages/booking/index.vue                   |  4 +-
 .../goods/components/GoodFacility/index.vue   |  2 +-
 .../order/components/AmtSection/index.vue     |  2 +-
 .../order/components/FooterSection/index.vue  |  2 +-
 .../order/components/GoodsInfo/index.vue      |  4 +-
 .../components/OrderCard/OrderCardContent.vue |  2 +-
 .../order/components/OrderCard/index.vue      | 46 +++++++++++++++----
 .../components/OrderCard/styles/index.scss    | 43 -----------------
 .../order/components/OrderInfo/index.vue      |  4 +-
 .../order/order/components/UserInfo/index.vue |  4 +-
 src/pages/quick/index.vue                     |  2 +-
 17 files changed, 62 insertions(+), 77 deletions(-)
 delete mode 100644 src/pages/order/order/components/OrderCard/styles/index.scss

diff --git a/src/components/CreateServiceOrder/index.vue b/src/components/CreateServiceOrder/index.vue
index f33309b..744c03d 100644
--- a/src/components/CreateServiceOrder/index.vue
+++ b/src/components/CreateServiceOrder/index.vue
@@ -45,13 +45,13 @@
 
       <div v-else class=" card-content flex flex-items-center p-[12px]">
         <div class=" left flex-full pr-20">
-          <div class="text-[12px] text-[#525866] leading-[20px] mb-4">
+          <div class="text-[12px] text-ink-600 leading-[20px] mb-4">
             所在位置：{{ roomId }}
           </div>
-          <div class="text-[12px] text-[#525866] leading-[20px] mb-4">
+          <div class="text-[12px] text-ink-600 leading-[20px] mb-4">
             联系方式: {{ contactPhone }}
           </div>
-          <div class="text-[12px] text-[#525866] leading-[20px] ellipsis-2">
+          <div class="text-[12px] text-ink-600 leading-[20px] ellipsis-2">
             需求描述: {{ contactspan }}
           </div>
         </div>
diff --git a/src/components/Feedback/index.vue b/src/components/Feedback/index.vue
index 9ba6106..f3c8873 100644
--- a/src/components/Feedback/index.vue
+++ b/src/components/Feedback/index.vue
@@ -26,10 +26,10 @@
       </div>
 
       <div v-else class=" left flex-full p-[12px]">
-        <div class="text-[12px] text-[#525866] leading-[20px] mb-4">
+        <div class="text-[12px] text-ink-600 leading-[20px] mb-4">
           联系方式: {{ contactPhone }}
         </div>
-        <div class="text-[12px] text-[#525866] leading-[20px] ellipsis-2">
+        <div class="text-[12px] text-ink-600 leading-[20px] ellipsis-2">
           意见内容: {{ contactText }}
         </div>
       </div>
diff --git a/src/components/GoodDetail/index.vue b/src/components/GoodDetail/index.vue
index d300247..48cfb1e 100644
--- a/src/components/GoodDetail/index.vue
+++ b/src/components/GoodDetail/index.vue
@@ -17,7 +17,7 @@
               {{ moduleItem.moduleTitle }}
             </span>
           </div>
-          <span class="flex-full text-[12px] text-[#525866] leading-[20px] mt-4">
+          <span class="flex-full text-[12px] text-ink-600 leading-[20px] mt-4">
             {{ moduleItem.moduleContent }}
           </span>
         </div>
diff --git a/src/components/RefundPopup/index.vue b/src/components/RefundPopup/index.vue
index 6b39ea6..b662006 100644
--- a/src/components/RefundPopup/index.vue
+++ b/src/components/RefundPopup/index.vue
@@ -18,8 +18,8 @@
             {{ refundTitle }}
           </span>
         </div>
-        <div class="text-[14px] text-[#525866] line-height-16 mb-4"
-          v-for="(item, index) in commodityPurchaseInstruction" :key="index">
+        <div class="text-[14px] text-ink-600 line-height-16 mb-4" v-for="(item, index) in commodityPurchaseInstruction"
+          :key="index">
           {{ item }}
         </div>
       </div>
diff --git a/src/pages/booking/components/ConactSection/index.vue b/src/pages/booking/components/ConactSection/index.vue
index fd5a2c1..30b062c 100644
--- a/src/pages/booking/components/ConactSection/index.vue
+++ b/src/pages/booking/components/ConactSection/index.vue
@@ -20,7 +20,7 @@
       联系方式
     </div>
     <div class="flex flex-items-center  p-[12px]">
-      <div class="text-[14px] font-500 text-[#525866] mr-12">联系人姓名</div>
+      <div class="text-[14px] font-500 text-ink-600 mr-12">联系人姓名</div>
       <div class="right">
         <input class=" px-4 py-2 font-size-15 color-000 leading-[20px]" v-model.trim="userFormList[0].visitorName"
           placeholder="请输入联系人" maxlength="20" />
@@ -28,7 +28,7 @@
     </div>
 
     <div class="flex flex-items-center  p-[12px]">
-      <div class="text-[14px] font-500 text-[#525866] mr-12">手机号码</div>
+      <div class="text-[14px] font-500 text-ink-600 mr-12">手机号码</div>
       <div class="right">
         <input class=" px-4 py-2 font-size-15 color-000 leading-[20px]" v-model.trim="userFormList[0].contactPhone"
           placeholder="请输入联系手机" maxlength="11" />
diff --git a/src/pages/booking/components/UserSection/index.vue b/src/pages/booking/components/UserSection/index.vue
index 5172912..fab7818 100644
--- a/src/pages/booking/components/UserSection/index.vue
+++ b/src/pages/booking/components/UserSection/index.vue
@@ -11,7 +11,7 @@
 
     <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="text-[14px] font-500 text-[#525866] mr-12">住客姓名</div>
+        <div class="text-[14px] font-500 text-ink-600 mr-12">住客姓名</div>
         <div class="right">
           <input class=" px-4 py-2 font-size-15 color-000 leading-[20px]" v-model.trim="item.visitorName"
             placeholder="请输入姓名" maxlength="11" />
@@ -19,7 +19,7 @@
       </div>
 
       <div class="flex flex-items-center  pt-12 pb-12">
-        <div class="text-[14px] font-500 text-[#525866] mr-12">联系手机</div>
+        <div class="text-[14px] font-500 text-ink-600 mr-12">联系手机</div>
         <div class="right">
           <input class=" px-4 py-2 font-size-15 color-000 leading-[20px]" v-model.trim="userFormList[0].contactPhone"
             placeholder="请输入联系手机" maxlength="11" />
diff --git a/src/pages/booking/index.vue b/src/pages/booking/index.vue
index 5d8dab7..f8736e3 100644
--- a/src/pages/booking/index.vue
+++ b/src/pages/booking/index.vue
@@ -24,7 +24,7 @@
 
           <!-- 权益部分 -->
           <div class="flex flex-items-center mb-8">
-            <span class="bg-F7F7F7  rounded-4 font-size-11 text-[#525866] mr-[4px] pt-4 pb-4 pl-6 pr-6"
+            <span class="bg-F7F7F7  rounded-4 font-size-11 text-ink-600 mr-[4px] pt-4 pb-4 pl-6 pr-6"
               v-for="(item, index) in orderData.commodityFacilityList" :key="index">
               {{ item }}
             </span>
@@ -32,7 +32,7 @@
         </div>
 
         <div class=" flex flex-items-center flex-justify-between pt-12">
-          <span class="text-[12px] text-[#525866] line-height-18">取消政策及说明</span>
+          <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>
             <uni-icons type="right" size="15" color="#99A0AE" />
diff --git a/src/pages/goods/components/GoodFacility/index.vue b/src/pages/goods/components/GoodFacility/index.vue
index 1a8f56e..b062576 100644
--- a/src/pages/goods/components/GoodFacility/index.vue
+++ b/src/pages/goods/components/GoodFacility/index.vue
@@ -11,7 +11,7 @@
           </span>
         </div>
         <div class="flex items-center flex-row mt-[4px] pb-[12px]">
-          <span class="text-[12px] text-[#525866] leading-[20px] mr-[4px]" v-for="(span, index) in moduleItem.desc"
+          <span class="text-[12px] text-ink-600 leading-[20px] mr-[4px]" v-for="(span, index) in moduleItem.desc"
             :key="index">
             {{ span }}
           </span>
diff --git a/src/pages/order/order/components/AmtSection/index.vue b/src/pages/order/order/components/AmtSection/index.vue
index bffa18a..4a3c78b 100644
--- a/src/pages/order/order/components/AmtSection/index.vue
+++ b/src/pages/order/order/components/AmtSection/index.vue
@@ -15,7 +15,7 @@
     </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">
-      <div class="text-[#525866]">取消政策及说明</div>
+      <div class="text-ink-600">取消政策及说明</div>
       <div class="flex flex-items-center" @click="emit('click')">
         <span class="theme-color-500 mr-[4px]">查看详情</span>
         <uni-icons type="right" size="12" color="#99A0AE" />
diff --git a/src/pages/order/order/components/FooterSection/index.vue b/src/pages/order/order/components/FooterSection/index.vue
index c471d20..59f66d3 100644
--- a/src/pages/order/order/components/FooterSection/index.vue
+++ b/src/pages/order/order/components/FooterSection/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="footer bg-white  flex flex-items-center flex-justify-between p-[12px]">
     <button v-if="['1', '2'].includes(statusCode)"
-      class="left border-none  bg-white rounded-10 flex flex-items-center flex-justify-center text-[14px] font-500 text-[#525866] mr-12"
+      class="left border-none  bg-white rounded-10 flex flex-items-center flex-justify-center text-[14px] font-500 text-ink-600 mr-12"
       @click="emit('refund', orderData)">
       申请退款
     </button>
diff --git a/src/pages/order/order/components/GoodsInfo/index.vue b/src/pages/order/order/components/GoodsInfo/index.vue
index a15e1de..6a479eb 100644
--- a/src/pages/order/order/components/GoodsInfo/index.vue
+++ b/src/pages/order/order/components/GoodsInfo/index.vue
@@ -13,7 +13,7 @@
 
     <!-- 权益部分 -->
     <div class=" flex flex-items-center pt-12">
-      <span class="bg-F7F7F7  rounded-4 font-size-11 text-[#525866] mr-[4px] pt-4 pb-4 pl-6 pr-6"
+      <span class="bg-F7F7F7  rounded-4 font-size-11 text-ink-600 mr-[4px] pt-4 pb-4 pl-6 pr-6"
         v-for="(item, index) in commodityFacilityList" :key="index">
         {{ item }}
       </span>
@@ -27,7 +27,7 @@
 
     <div class="flex text-[12px]">
       <span class="w-60 color-99A0AE">购买数量</span>
-      <span class="text-[#525866]">{{ commodityAmount }}</span>
+      <span class="text-ink-600">{{ commodityAmount }}</span>
     </div>
 
     <div v-if="orderData.orderStatus === '0'" class=" border-top pt-12 text-[14px] font-500 color-171717 mt-12">
diff --git a/src/pages/order/order/components/OrderCard/OrderCardContent.vue b/src/pages/order/order/components/OrderCard/OrderCardContent.vue
index 08ce3ae..3de75b9 100644
--- a/src/pages/order/order/components/OrderCard/OrderCardContent.vue
+++ b/src/pages/order/order/components/OrderCard/OrderCardContent.vue
@@ -6,7 +6,7 @@
       </div>
       <div :class="[
         'right font-size-18 font-bold leading-[20px]',
-        orderData.orderStatus === '0' ? 'color-FF3D60' : 'text-[#525866]',
+        orderData.orderStatus === '0' ? 'color-FF3D60' : 'text-ink-600',
       ]">
         {{ orderData.orderAmt }}
       </div>
diff --git a/src/pages/order/order/components/OrderCard/index.vue b/src/pages/order/order/components/OrderCard/index.vue
index e105f8b..f2112e5 100644
--- a/src/pages/order/order/components/OrderCard/index.vue
+++ b/src/pages/order/order/components/OrderCard/index.vue
@@ -1,15 +1,17 @@
 <template>
-  <div class="order-card bg-white  p-[12px] rounded-[12px] m-[12px]" @click.stop="handleCardClick">
+  <div
+    class="transition-all duration-300 ease-out bg-white p-[12px] rounded-[12px] m-[12px] active:scale-98 active:shadow-md"
+    @click.stop="handleCardClick">
     <!-- 卡片头部 -->
     <div class="card-header flex items-center">
-      <div class="status-info flex items-center flex-full">
-        <img class="status-icon mr-[4px]" :src="getStatusIcon()" />
-        <div class="order-title text-[14px] leading-[20px] text-[#525866]">
+      <div class="flex items-center flex-full">
+        <img class="w-[20px] h-[20px] mr-[4px]" :src="getStatusIcon()" />
+        <div class="order-title text-[14px] leading-[20px] text-ink-600">
           {{ getOrderTypeName() }}
         </div>
       </div>
       <div v-if="orderData.status !== 'pending'" :class="[
-        'status-tag text-[12px]',
+        'text-[12px]',
         `tag-${orderData.orderStatus || orderData.workOrderStatus}`,
       ]">
         {{ getStatusspan(orderData.orderStatus || orderData.workOrderStatus) }}
@@ -19,9 +21,9 @@
     <!-- 卡片内容 -->
     <OrderCardContent :order-data="orderData" />
 
-    <div v-if="orderData.orderStatus === '0'" class="span-right">
+    <div v-if="orderData.orderStatus === '0'" class="text-right">
       <button
-        class="go-pay  border-none text-[14px] text-white text-[#ff3d60] rounded-[5px] inline-block text-center leading-[30px]"
+        class="go-pay border-none text-[14px] text-[#ff3d60] rounded-[5px] inline-block text-center leading-[30px]"
         @click.stop="handleCardClick">
         去支付
       </button>
@@ -123,6 +125,32 @@ const handleCardClick = () => {
 };
 </script>
 
-<style scoped lang="scss">
-@import "./styles/index.scss";
+<style scoped>
+.tag-0 {
+  color: #ff3d60;
+}
+
+.tag-1 {
+  color: #f00044;
+}
+
+.tag-2 {
+  color: #40ae36;
+}
+
+.tag-3 {
+  color: #808389;
+}
+
+.tag-4 {
+  color: #0ccd58;
+}
+
+.tag-5 {
+  color: #808389;
+}
+
+.tag-6 {
+  color: #fd8702;
+}
 </style>
diff --git a/src/pages/order/order/components/OrderCard/styles/index.scss b/src/pages/order/order/components/OrderCard/styles/index.scss
deleted file mode 100644
index 8d20ec3..0000000
--- a/src/pages/order/order/components/OrderCard/styles/index.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.order-card {
-  transition: all 0.3s ease;
-
-  &:active {
-    transform: scale(0.98);
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-  }
-}
-
-.status-icon {
-  width: 20px;
-  height: 20px;
-}
-
-.status-tag {
-  &.tag-0 {
-    color: #ff3d60;
-  }
-
-  &.tag-1 {
-    color: #f00044;
-  }
-
-  &.tag-2 {
-    color: #40ae36;
-  }
-
-  &.tag-3 {
-    color: #808389;
-  }
-
-  &.tag-4 {
-    color: #0ccd58;
-  }
-
-  &.tag-5 {
-    color: #808389;
-  }
-
-  &.tag-6 {
-    color: #fd8702;
-  }
-}
diff --git a/src/pages/order/order/components/OrderInfo/index.vue b/src/pages/order/order/components/OrderInfo/index.vue
index 31c43a5..daafb7e 100644
--- a/src/pages/order/order/components/OrderInfo/index.vue
+++ b/src/pages/order/order/components/OrderInfo/index.vue
@@ -2,11 +2,11 @@
   <div class="bg-white  rounded-10 p-[12px]">
     <div class="flex mb-8 text-[12px]">
       <span class="w-60 color-99A0AE">订单编号</span>
-      <span class="text-[#525866]">{{ orderData.orderId }}</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="text-[#525866]">{{ orderData.createTime }}</span>
+      <span class="text-ink-600">{{ orderData.createTime }}</span>
     </div>
     <div class="flex text-[12px]">
       <span class="w-60 color-99A0AE">支付状态</span>
diff --git a/src/pages/order/order/components/UserInfo/index.vue b/src/pages/order/order/components/UserInfo/index.vue
index 550d6f5..6422fdc 100644
--- a/src/pages/order/order/components/UserInfo/index.vue
+++ b/src/pages/order/order/components/UserInfo/index.vue
@@ -3,12 +3,12 @@
     <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="text-[#525866]">{{ item.visitorName }}</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="text-[#525866]">{{ contactPhone }}</span>
+      <span class="text-ink-600">{{ contactPhone }}</span>
     </div>
   </div>
 </template>
diff --git a/src/pages/quick/index.vue b/src/pages/quick/index.vue
index 351b82c..8a59633 100644
--- a/src/pages/quick/index.vue
+++ b/src/pages/quick/index.vue
@@ -17,7 +17,7 @@
         </div>
 
         <!-- 几晚 -->
-        <span class="nights bg-E5E8EE  font-size-11 font-500 text-[#525866] rounded-[5px]0 ml-8 mr-8">
+        <span class="nights bg-E5E8EE  font-size-11 font-500 text-ink-600 rounded-[5px]0 ml-8 mr-8">
           {{ selectedDate.totalDays }}晚
         </span>