From 4af4255610e1462cc82d2380f8c6c7b9cc2f7429 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Fri, 24 Jul 2026 22:28:16 +0800
Subject: [PATCH] refactor: migrate to tailwind arbitrary width classes

remove the unused src/static/scss/width.scss file and its import from index.scss, replace all existing custom width utility class usages with the equivalent Tailwind arbitrary width syntax
---
 src/components/CreateServiceOrder/index.vue   |  4 +-
 src/components/Feedback/index.vue             |  2 +-
 src/components/SurveyQuestionnaire/index.vue  |  4 +-
 .../order/components/GoodsInfo/index.vue      |  2 +-
 .../order/components/OrderInfo/index.vue      |  6 +-
 .../order/components/UserInfo/index.vue       |  4 +-
 src/pages/ChatMain/ChatTopNavBar/index.vue    |  2 +-
 src/pages/ChatModule/AigcPhotoCard/index.vue  |  2 +-
 .../ChatModule/AnswerComponent/index.vue      |  2 +-
 .../ChatModule/DetailCardCompontent/index.vue |  2 +-
 .../GeneratorPhotoComponent/index.vue         |  2 +-
 .../LongTextGuideCardPreview/index.vue        |  2 +-
 .../ChatModule/OpenMapComponent/index.vue     |  6 +-
 .../ChatModule/SharedVisual/ActionRow.vue     |  2 +-
 src/pages/ChatModule/ZModuleBase/index.vue    |  2 +-
 src/static/scss/index.scss                    |  1 -
 src/static/scss/width.scss                    | 75 -------------------
 17 files changed, 22 insertions(+), 98 deletions(-)
 delete mode 100644 src/static/scss/width.scss

diff --git a/src/components/CreateServiceOrder/index.vue b/src/components/CreateServiceOrder/index.vue
index 8e80a2d..5adecb2 100644
--- a/src/components/CreateServiceOrder/index.vue
+++ b/src/components/CreateServiceOrder/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view class="create-service-order">
     <view class="w-full bg-white border-ff overflow-hidden rounded-[20px]">
-      <view class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-[#F0F8F3]">
+      <view class="border-box order-header w-screen flex flex-items-center flex-justify-between bg-[#F0F8F3]">
         <text class="text-[18px] font-[500] text-[#171717] text-left ml-[12px]">
           {{ isCallSuccess ? "服务已创建" : "呼叫服务" }}
         </text>
@@ -28,7 +28,7 @@
         <view class="bg-[#f5f7fa] p-[12px] rounded-[10px] text-[14px] font-[500] text-[#171717] mb-[12px]">
           <view class="font-[500] leading-[22px] mb-[12px]">照片上传</view>
 
-          <view class="w-80 h-80 bg-white rounded-[8px] overflow-hidden flex flex-items-center flex-justify-center">
+          <view class="w-[80px] h-80 bg-white rounded-[8px] overflow-hidden flex flex-items-center flex-justify-center">
             <view v-if="contentImgUrl" class="w-full h-full relative inline-block">
               <image class="w-full h-full block" :src="contentImgUrl" mode="aspectFill" />
               <uni-icons class="close-btn absolute z-10" type="close" size="20" color="#6A717F"
diff --git a/src/components/Feedback/index.vue b/src/components/Feedback/index.vue
index 8ffadf5..c920dcd 100644
--- a/src/components/Feedback/index.vue
+++ b/src/components/Feedback/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view class="create-service-order">
     <view class="w-full bg-white border-ff overflow-hidden rounded-[20px]">
-      <view class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-[#F0F8F3]">
+      <view class="border-box order-header w-screen flex flex-items-center flex-justify-between bg-[#F0F8F3]">
         <text class="text-[18px] font-[500] text-[#171717] text-left ml-[12px]">
           {{ isCallSuccess ? "反馈已创建" : "反馈意见" }}
         </text>
diff --git a/src/components/SurveyQuestionnaire/index.vue b/src/components/SurveyQuestionnaire/index.vue
index 4aae2e7..8acf8bf 100644
--- a/src/components/SurveyQuestionnaire/index.vue
+++ b/src/components/SurveyQuestionnaire/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <view class="survey-questionnaire w-vw-24">
+  <view class="survey-questionnaire w-[calc(100vw_-_24px)]">
     <view class="bg-white border-ff overflow-hidden rounded-[20px]">
       <view class="border-box flex flex-items-center flex-justify-between bg-[#F0F8F3]">
         <text class="text-[18px] font-[500] text-[#171717] text-left ml-[12px]">
           调查问卷
         </text>
-        <image class="w-102 h-72" :src="surveyData.logoUrl" mode="widthFix" />
+        <image class="w-[102px] h-72" :src="surveyData.logoUrl" mode="widthFix" />
       </view>
 
       <image class="w-full" :src="surveyData.bannerUrl" mode="widthFix" />
diff --git a/src/pages-order/order/components/GoodsInfo/index.vue b/src/pages-order/order/components/GoodsInfo/index.vue
index 425651c..c9eb8f3 100644
--- a/src/pages-order/order/components/GoodsInfo/index.vue
+++ b/src/pages-order/order/components/GoodsInfo/index.vue
@@ -26,7 +26,7 @@
     </view>
 
     <view class="flex text-[12px]">
-      <text class="w-60 text-[#99a0ae]">购买数量</text>
+      <text class="w-[60px] text-[#99a0ae]">购买数量</text>
       <text class="text-[#525866]">{{ commodityAmount }}</text>
     </view>
 
diff --git a/src/pages-order/order/components/OrderInfo/index.vue b/src/pages-order/order/components/OrderInfo/index.vue
index a2ab675..4574781 100644
--- a/src/pages-order/order/components/OrderInfo/index.vue
+++ b/src/pages-order/order/components/OrderInfo/index.vue
@@ -1,15 +1,15 @@
 <template>
   <view class="bg-white rounded-[10px] p-[12px]">
     <view class="flex mb-[8px] text-[12px]">
-      <text class="w-60 text-[#99a0ae]">订单编号</text>
+      <text class="w-[60px] text-[#99a0ae]">订单编号</text>
       <text class="text-[#525866]">{{ orderData.orderId }}</text>
     </view>
     <view class="flex mb-[8px] text-[12px]">
-      <text class="w-60 text-[#99a0ae]">下单时间</text>
+      <text class="w-[60px] text-[#99a0ae]">下单时间</text>
       <text class="text-[#525866]">{{ orderData.createTime }}</text>
     </view>
     <view class="flex text-[12px]">
-      <text class="w-60 text-[#99a0ae]">支付状态</text>
+      <text class="w-[60px] text-[#99a0ae]">支付状态</text>
       <text :class="[
         {
           'text-[#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 9be11ef..d5e5715 100644
--- a/src/pages-order/order/components/UserInfo/index.vue
+++ b/src/pages-order/order/components/UserInfo/index.vue
@@ -2,12 +2,12 @@
   <view class="bg-white rounded-[10px] p-[12px] mb-[12px]" v-if="hasConsumerData">
     <view v-for="(item, index) in consumerList" :key="index">
       <view class="flex mb-[8px] text-[12px]">
-        <text class="w-60 text-[#99a0ae]">住客姓名</text>
+        <text class="w-[60px] text-[#99a0ae]">住客姓名</text>
         <text class="text-[#525866]">{{ item.visitorName }}</text>
       </view>
     </view>
     <view class="flex text-[12px]">
-      <text class="w-60 text-[#99a0ae]">联系电话</text>
+      <text class="w-[60px] text-[#99a0ae]">联系电话</text>
       <text class="text-[#525866]">{{ contactPhone }}</text>
     </view>
   </view>
diff --git a/src/pages/ChatMain/ChatTopNavBar/index.vue b/src/pages/ChatMain/ChatTopNavBar/index.vue
index c2cb0fd..348d48d 100644
--- a/src/pages/ChatMain/ChatTopNavBar/index.vue
+++ b/src/pages/ChatMain/ChatTopNavBar/index.vue
@@ -19,7 +19,7 @@
       </text>
     </view>
 
-    <view class="w-24 h-24"></view>
+    <view class="w-[24px] h-24"></view>
   </view>
 </template>
 
diff --git a/src/pages/ChatModule/AigcPhotoCard/index.vue b/src/pages/ChatModule/AigcPhotoCard/index.vue
index 95ac187..29300d0 100644
--- a/src/pages/ChatModule/AigcPhotoCard/index.vue
+++ b/src/pages/ChatModule/AigcPhotoCard/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view class="w-full bg-white border-ff overflow-hidden rounded-[20px] flex flex-col">
     <!-- 占位撑开 -->
-    <view class="w-vw"></view>
+    <view class="w-screen"></view>
 
     <view class="aigc-photo-card relative rounded-[24px] overflow-hidden w-full"
       :class="{ 'is-disabled': disabled, 'is-empty': !videoUrl }" @click="handleAction">
diff --git a/src/pages/ChatModule/AnswerComponent/index.vue b/src/pages/ChatModule/AnswerComponent/index.vue
index 9b59971..89dc09b 100644
--- a/src/pages/ChatModule/AnswerComponent/index.vue
+++ b/src/pages/ChatModule/AnswerComponent/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view v-if="shouldRenderCard" class="w-full bg-white border-ff overflow-hidden rounded-[20px] flex flex-col">
     <!-- 占位撑开 -->
-    <view class="w-vw"></view>
+    <view class="w-screen"></view>
     <view class="flex flex-col px-[16px] pt-[16px] pb-[12px] border-box" @click="lookDetailAction">
       <view v-if="tag" class="long-answer-tag" :style="longAnswerTagStyle">{{ tag }}</view>
       <view v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-[4px]">
diff --git a/src/pages/ChatModule/DetailCardCompontent/index.vue b/src/pages/ChatModule/DetailCardCompontent/index.vue
index fffd17d..a75043a 100644
--- a/src/pages/ChatModule/DetailCardCompontent/index.vue
+++ b/src/pages/ChatModule/DetailCardCompontent/index.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="w-full pb-[12px]">
-    <view class="w-vw"></view>
+    <view class="w-screen"></view>
     <template v-if="toolCall.picture && toolCall.picture.length > 0">
       <ModuleTitle :title="图片详情" />
       <ImageSwiper :images="toolCall.picture" thumbnailBottom="12px" />
diff --git a/src/pages/ChatModule/GeneratorPhotoComponent/index.vue b/src/pages/ChatModule/GeneratorPhotoComponent/index.vue
index 1917655..0c81d7c 100644
--- a/src/pages/ChatModule/GeneratorPhotoComponent/index.vue
+++ b/src/pages/ChatModule/GeneratorPhotoComponent/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view class="container w-full border-ff overflow-hidden rounded-[24px] flex flex-col">
     <!-- 占位撑开 -->
-    <view class="w-vw"></view>
+    <view class="w-screen"></view>
     <view class="content flex flex-col m-[4px] rounded-[24px]">
       <view class="flex flex-col p-[6px] flex-items-center justify-center">
         <image class="w-full rounded-[20px]" :src="componentDataMap.background" mode="widthFix" />
diff --git a/src/pages/ChatModule/LongTextGuideCardPreview/index.vue b/src/pages/ChatModule/LongTextGuideCardPreview/index.vue
index d870a12..2b652f2 100644
--- a/src/pages/ChatModule/LongTextGuideCardPreview/index.vue
+++ b/src/pages/ChatModule/LongTextGuideCardPreview/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view class="w-full bg-white border-ff overflow-hidden rounded-[20px] flex flex-col">
     <!-- 占位撑开 -->
-    <view class="w-vw"></view>
+    <view class="w-screen"></view>
     <view class="flex flex-col px-[16px] pt-[16px] pb-[12px] border-box" @click="openDetail(item)">
 
       <view class="long-text-guide-card__badge text-[12px] font-bold" :class="`is-${item.badgeTone}`">
diff --git a/src/pages/ChatModule/OpenMapComponent/index.vue b/src/pages/ChatModule/OpenMapComponent/index.vue
index 788d0e8..3983561 100644
--- a/src/pages/ChatModule/OpenMapComponent/index.vue
+++ b/src/pages/ChatModule/OpenMapComponent/index.vue
@@ -1,10 +1,10 @@
 <template>
     <view class="w-full bg-white border-ff overflow-hidden rounded-[20px] flex flex-col">
         <!-- 占位撑开 -->
-        <view class="w-vw"></view>
+        <view class="w-screen"></view>
         <view class="flex flex-items-center flex-justify-between p-[12px] border-box" @click="openMap">
             <view class="rounded-[16px] p-[16px] bg-[#F0F8F3]">
-                <view class="w-32 h-32 rounded-full bg-white flex flex-items-center flex-justify-center">
+                <view class="w-[32px] h-32 rounded-full bg-white flex flex-items-center flex-justify-center">
                     <uni-icons type="location" size="16" color="#171717" />
                 </view>
             </view>
@@ -12,7 +12,7 @@
                 <view class="font-color-900 text-[14px]">打开导览地图</view>
                 <view class="font-color-500 text-[12px] mt-[6px]">距你 {{ distance }} · 步行 {{ walk }}</view>
             </view>
-            <view class="ml-[12px] flex flex-items-center flex-justify-center w-32 h-32 rounded-full bg-[#f2f5f8]">
+            <view class="ml-[12px] flex flex-items-center flex-justify-center w-[32px] h-32 rounded-full bg-[#f2f5f8]">
                 <uni-icons class="mb-[2px]" type="right" size="12" color="#99A0AE" />
             </view>
         </view>
diff --git a/src/pages/ChatModule/SharedVisual/ActionRow.vue b/src/pages/ChatModule/SharedVisual/ActionRow.vue
index f71de1e..3ec06a2 100644
--- a/src/pages/ChatModule/SharedVisual/ActionRow.vue
+++ b/src/pages/ChatModule/SharedVisual/ActionRow.vue
@@ -2,7 +2,7 @@
   <view class="visual-action-row flex flex-items-center  gap-[12px] p-[12px] bg-white rounded-[18px] border-box"
     :class="{ 'is-disabled': disabled }" @click="handleClick">
     <view
-      class="visual-action-row__icon flex flex-items-center flex-justify-center w-42 h-42 rounded-[14px] text-[18px] font-bold"
+      class="visual-action-row__icon flex flex-items-center flex-justify-center w-[42px] h-42 rounded-[14px] text-[18px] font-bold"
       :class="toneClass">
       <slot name="icon">{{ icon }}</slot>
     </view>
diff --git a/src/pages/ChatModule/ZModuleBase/index.vue b/src/pages/ChatModule/ZModuleBase/index.vue
index 1496b3e..cbf4770 100644
--- a/src/pages/ChatModule/ZModuleBase/index.vue
+++ b/src/pages/ChatModule/ZModuleBase/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view class="container w-full border-ff overflow-hidden rounded-[24px] flex flex-col">
     <!-- 占位撑开 -->
-    <view class="w-vw"></view>
+    <view class="w-screen"></view>
     <view class="flex flex-col m-[4px] rounded-[24px]">
       <slot name="content"></slot>
     </view>
diff --git a/src/static/scss/index.scss b/src/static/scss/index.scss
index b7cb510..62df85e 100644
--- a/src/static/scss/index.scss
+++ b/src/static/scss/index.scss
@@ -5,4 +5,3 @@
 @import "./font-family.scss";
 @import "./overflow.scss";
 @import "./scroll.scss";
-@import "./width.scss";
diff --git a/src/static/scss/width.scss b/src/static/scss/width.scss
deleted file mode 100644
index b57f260..0000000
--- a/src/static/scss/width.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-.w-full {
-  width: 100%;
-}
-
-.w-vw {
-  width: 100vw;
-}
-
-.w-auto {
-  width: auto;
-}
-
-.w-vw-24 {
-  width: calc(100vw - 24px);
-}
-
-.w-8 {
-  width: 8px;
-}
-
-.w-10 {
-  width: 10px;
-}
-
-.w-12 {
-  width: 12px;
-}
-
-.w-16 {
-  width: 16px;
-}
-
-.w-24 {
-  width: 24px;
-}
-
-.w-32 {
-  width: 32px;
-}
-
-.w-42 {
-  width: 42px;
-}
-
-.w-44 {
-  width: 44px;
-}
-
-.w-54 {
-  width: 54px;
-}
-
-.w-72 {
-  width: 72px;
-}
-
-.w-50 {
-  width: 50%;
-}
-
-.w-60 {
-  width: 60px;
-}
-
-.w-64 {
-  width: 64px;
-}
-
-.w-80 {
-  width: 80px;
-}
-
-.w-102 {
-  width: 102px;
-}