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;
-}