From b273fdd23b7d431d894ed9c9040e349dde289145 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Thu, 28 May 2026 16:15:28 +0800
Subject: [PATCH] refactor: migrate styles to inline utility classes

delete unused SCSS style files for OrderCard and Tabs components
remove scoped style imports from both Vue component files
migrate all styling to inline Tailwind utility classes
update icon components to use project's current ZnIcon and VanIcon
---
 src/pages/quick/components/Tabs/index.vue     | 34 +++----
 .../quick/components/Tabs/styles/index.scss   | 92 -------------------
 .../order/components/OrderCard/index.vue      | 43 ++++-----
 .../components/OrderCard/styles/index.scss    | 28 ------
 4 files changed, 38 insertions(+), 159 deletions(-)
 delete mode 100644 src/pages/quick/components/Tabs/styles/index.scss
 delete mode 100644 src/pages/service/order/components/OrderCard/styles/index.scss

diff --git a/src/pages/quick/components/Tabs/index.vue b/src/pages/quick/components/Tabs/index.vue
index 59b532f..0971d1c 100644
--- a/src/pages/quick/components/Tabs/index.vue
+++ b/src/pages/quick/components/Tabs/index.vue
@@ -1,26 +1,31 @@
 <template>
-  <div class="tab-container relative">
-    <div class="tab-wrapper flex flex-items-center">
+  <div class="relative">
+    <div
+      class="bg-[#e8fff1] h-[48px] overflow-x-auto whitespace-nowrap justify-start flex items-center [-webkit-overflow-scrolling:touch]">
       <div v-for="(item, index) in tabList" :key="item.id" :class="[
-        'tab-item flex flex-items-center flex-justify-center relative',
-        activeIndex === index && 'tab-item-active',
+        'h-full flex-none flex items-center justify-center relative px-[12px] min-w-[68px]',
+        activeIndex === index &&
+        `before:content-[''] before:absolute before:left-[4px] before:top-0 before:right-[4px] before:bottom-0 before:bg-white before:rounded-t-[20px] before:[transform:perspective(40px)_rotateX(6deg)_translate(0,-1px)] before:origin-bottom before:shadow-[0_-0.5px_0_#0ccd58]`,
       ]" @click="handleTabClick(index)">
-        <div class="tab-item-inner flex flex-items-center">
-          <uni-icons :class="['icon mr-4', activeIndex === index && 'icon-active']" fontFamily="znicons" size="20"
-            color="opacity">
-            {{ iconsMap[item.iconCode] }}
-          </uni-icons>
+        <div class="inline-flex items-center relative z-[3]">
+          <zn-icon :class="[
+            'h-[20px] w-[20px] mr-[4px]',
+            activeIndex === index ? 'text-[#0ccd58]' : 'text-ink-600',
+          ]" :name="item.iconCode" size="20" color="opacity">
+          </zn-icon>
 
           <span :class="[
-            'font-size-16 font-500 color-525866 ',
-            activeIndex === index && 'tab-span-active',
+            'text-[16px] font-medium',
+            activeIndex === index ? 'text-[#0ccd58]' : 'text-ink-600',
           ]">
             {{ item.iconTitle }}
           </span>
         </div>
 
         <!-- 每项内的下划线指示器，通过类控制显示/隐藏 -->
-        <div class="tab-item-indicator" :class="{ visible: activeIndex === index }"></div>
+        <div
+          class="absolute bottom-0 left-1/2 -translate-x-1/2 h-[3px] w-[24px] bg-[#0ccd58] rounded-t-[3px] z-[3] transition-[opacity,transform] duration-200 ease-in-out"
+          :class="activeIndex === index ? 'opacity-100 scale-x-100' : 'opacity-0 scale-x-[0.9]'"></div>
       </div>
     </div>
   </div>
@@ -28,7 +33,7 @@
 
 <script setup>
 import { onMounted, ref, watch } from "vue";
-import { iconsMap } from "@/static/fonts/znicons";
+import ZnIcon from "@/components/ZnIcon/index.vue";
 import { commodityTypePageList } from "@/api/goods";
 
 // Props
@@ -127,6 +132,3 @@ const getCommodityTypePageList = async () => {
   }
 };
 </script>
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/quick/components/Tabs/styles/index.scss b/src/pages/quick/components/Tabs/styles/index.scss
deleted file mode 100644
index 28e6e6a..0000000
--- a/src/pages/quick/components/Tabs/styles/index.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-.tab-wrapper {
-  background-color: #e8fff1;
-  height: 48px;
-  overflow-x: auto;
-  /* 支持横向滚动 */
-  -webkit-overflow-scrolling: touch;
-  /* 平滑滚动（移动端） */
-  white-space: nowrap;
-  /* 防止换行 */
-  justify-content: flex-start;
-  /* 覆盖工具类，靠左排列以便滚动 */
-}
-
-.tab-item {
-  height: 100%;
-  flex: 0 0 auto;
-  /* 不让子项拉伸，按内容宽度排列 */
-  padding: 0 12px;
-  /* 增加横向间距，便于触控 */
-  min-width: 68px;
-  /* 保证可点击区域 */
-}
-
-.icon {
-  height: 20px;
-  width: 20px;
-  color: #525866;
-}
-
-.icon-active {
-  color: #0ccd58;
-}
-
-/* 组件模板中使用了绝对定位的内部元素，为保证父元素宽度基于内容，重置该子元素为静态布局 */
-.tab-item > .absolute {
-  position: static !important;
-  display: flex;
-  align-items: center;
-}
-
-.tab-item-active {
-  &::before {
-    content: "";
-    position: absolute;
-    left: 4px;
-    top: 0;
-    right: 4px;
-    bottom: 0;
-    background-color: #fff;
-    border-radius: 20px 20px 0 0;
-    transform: perspective(40px) rotateX(6deg) translate(0, -1px);
-    transform-origin: bottom bottom;
-    box-shadow: 0 -0.5px 0 #0ccd58;
-  }
-}
-
-.tab-text-active {
-  color: #0ccd58;
-  z-index: 3;
-}
-
-/* 已改为每项内部指示器，移除了全局指示器样式 */
-
-/* 每项内的指示器（替代全局指示器） */
-.tab-item-inner {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  z-index: 3;
-  /* 确保内容（icon/text）位于 .tab-item-active::before 之上 */
-}
-
-.tab-item-indicator {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%) scaleX(0.9);
-  height: 3px;
-  width: 24px;
-  background-color: #0ccd58;
-  border-radius: 3px 3px 0 0;
-  opacity: 0;
-  transition:
-    opacity 0.2s ease,
-    transform 0.2s ease;
-  z-index: 3;
-}
-
-.tab-item-indicator.visible {
-  opacity: 1;
-  transform: translateX(-50%) scaleX(1);
-}
diff --git a/src/pages/service/order/components/OrderCard/index.vue b/src/pages/service/order/components/OrderCard/index.vue
index 6cdb797..984e41e 100644
--- a/src/pages/service/order/components/OrderCard/index.vue
+++ b/src/pages/service/order/components/OrderCard/index.vue
@@ -1,38 +1,39 @@
 <template>
-  <div class="order-card bg-white border-box p-12 rounded-12 m-12">
+  <div class="bg-white p-[12px] rounded-[12px] m-[12px]">
     <!-- 卡片头部 -->
-    <div class="border-box flex flex-items-center pb-12">
-      <img class="icon mr-4" src="https://oss.nianxx.cn/mp/static/version_101/service/service_icon.png" />
-      <span class="font-size-14 color-525866 line-height-20">工单</span>
-      <span class="font-size-12 color-525866 line-height-20 ml-auto">{{
-        isCancelWork ? "已取消" : workOrderStatus(orderData.workOrderStatus)
-      }}</span>
+    <div class="flex items-center pb-[12px]">
+      <img class="w-[20px] h-[20px] mr-[4px]"
+        src="https://oss.nianxx.cn/mp/static/version_101/service/service_icon.png" />
+      <span class="text-[14px] text-ink-600 leading-[20px]">工单</span>
+      <span class="text-[12px] text-ink-600 ml-auto">
+        {{ isCancelWork ? "已取消" : workOrderStatus(orderData.workOrderStatus) }}
+      </span>
     </div>
     <!-- 卡片内容 -->
-    <div class="border-box card-content flex flex-items-center pb-12">
-      <div class="border-box left flex-full pr-20">
-        <div class="font-size-12 color-525866 line-height-20 mb-4">
+    <div class="flex items-center pb-[12px]">
+      <div class="flex-1 pr-[20px]">
+        <div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
           所在位置：{{ orderData.roomNo }}
         </div>
-        <div class="font-size-12 color-525866 line-height-20 mb-4">
+        <div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
           联系方式: {{ orderData.userPhone }}
         </div>
-        <div class="font-size-12 color-525866 line-height-20 ellipsis-2">
+        <div class="text-[12px] text-ink-600 line-clamp-2">
           需求描述: {{ orderData.content }}
         </div>
       </div>
 
-      <img v-if="orderData.contentImgUrl" class="right rounded-6" :src="orderData.contentImgUrl" mode="aspectFill" />
+      <img v-if="orderData.contentImgUrl" class="w-[88px] h-[88px] rounded-[6px]" :src="orderData.contentImgUrl" />
     </div>
 
     <!-- 服务人员 -->
     <div v-if="orderData.processMemberName && orderData.processMemberPhone"
-      class="service-user border-box p-8 flex flex-items-center flex-justify-between mb-12">
-      <div class="font-size-12 line-height-16">
+      class="bg-[rgba(67, 103, 153, 0.1)] rounded-[5px] text-[#436799] p-[8px] flex items-center justify-between mb-[12px]">
+      <div class="text-[12px] leading-[16px]">
         服务人员：{{ orderData.processMemberName }}
       </div>
-      <uni-icons class="ml-auto mr-4" type="phone-filled" size="14" color="#436799" />
-      <span class="font-size-12 line-height-16" @click="callService">拨打电话</span>
+      <van-icon class="ml-auto mr-[4px]" name="phone-o" size="14" color="#436799" />
+      <span class="text-[12px] leading-[16px]" @click="callService">拨打电话</span>
     </div>
 
     <!-- 取消操作 -->
@@ -40,8 +41,8 @@
       !isCancelWork &&
       orderData.workOrderStatus !== '2' &&
       orderData.workOrderStatus !== '3'
-    " class="flex flex-items-center flex-justify-between">
-      <span class="cancel border-box border rounded-6 font-size-12 line-height-16 color-525866 ml-auto"
+    " class="flex items-center justify-between">
+      <span class="p-[4px_10px] border border-ink-200 rounded-control text-[12px] leading-[16px] text-ink-600 ml-auto"
         @click="cancelCall">取消呼叫</span>
     </div>
   </div>
@@ -99,7 +100,3 @@ const cancelCall = async () => {
   });
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/service/order/components/OrderCard/styles/index.scss b/src/pages/service/order/components/OrderCard/styles/index.scss
deleted file mode 100644
index 3e680a8..0000000
--- a/src/pages/service/order/components/OrderCard/styles/index.scss
+++ /dev/null
@@ -1,28 +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);
-  }
-}
-
-.icon {
-  height: 20px;
-  width: 20px;
-}
-
-.right {
-  height: 88px;
-  width: 88px;
-}
-
-.service-user {
-  background-color: rgba(67, 103, 153, 0.1);
-  border-radius: 5px;
-  color: #436799;
-}
-
-.cancel {
-  padding: 4px 10px;
-}