From 8468301806a22e2dcc381cac861167c83ebd9e83 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Fri, 29 May 2026 11:24:42 +0800
Subject: [PATCH] refactor(ui): clean up stepper and standardize margin spacing

- replace uni-icons with van-icon in Stepper component
- fix semantic markup by replacing <text> tag with <span> in Stepper
- inline SCSS styles for Stepper and remove unused image and style files
- standardize ml-4 utility class to ml-[4px] across multiple UI components for consistent exact 4px horizontal margins
---
 src/components/DateRangeSection/index.vue        |   2 +-
 src/components/GoodDetail/index.vue              |   2 +-
 .../Stepper/images/2025-07-15_100917.png         | Bin 5926 -> 0 bytes
 src/components/Stepper/index.vue                 |  14 +++++---------
 src/components/Stepper/styles/index.scss         |   8 --------
 src/pages/album/index.vue                        |   2 +-
 .../order/order/components/AmtSection/index.vue  |   2 +-
 7 files changed, 9 insertions(+), 21 deletions(-)
 delete mode 100644 src/components/Stepper/images/2025-07-15_100917.png
 delete mode 100644 src/components/Stepper/styles/index.scss

diff --git a/src/components/DateRangeSection/index.vue b/src/components/DateRangeSection/index.vue
index 9e6599b..90539cf 100644
--- a/src/components/DateRangeSection/index.vue
+++ b/src/components/DateRangeSection/index.vue
@@ -8,7 +8,7 @@
       <span class="total rounded-[5px] flex items-center text-[11px] color-43669A relative">{{
         selectedDate.totalDays }}晚</span>
       <span class="text-[12px] text-ink-400 ml-16">离店</span>
-      <span class="text-[12px] text-[#171717] ml-4">
+      <span class="text-[12px] text-[#171717] ml-[4px]">
         {{ selectedDate.endDate }}
       </span>
     </div>
diff --git a/src/components/GoodDetail/index.vue b/src/components/GoodDetail/index.vue
index 36acfa7..2177e9a 100644
--- a/src/components/GoodDetail/index.vue
+++ b/src/components/GoodDetail/index.vue
@@ -13,7 +13,7 @@
         }">
           <div class="flex items-center flex-row flex-shrink-0 mr-[8px]">
             <zn-icon :name="moduleItem.moduleIcon" size="20" color="#333"></zn-icon>
-            <span class="ml-4 text-[14px] text-[#171717] leading-[20px]">
+            <span class="ml-[4px] text-[14px] text-[#171717] leading-[20px]">
               {{ moduleItem.moduleTitle }}
             </span>
           </div>
diff --git a/src/components/Stepper/images/2025-07-15_100917.png b/src/components/Stepper/images/2025-07-15_100917.png
deleted file mode 100644
index 881189fd90b3a2383bfcfb51d9bc270d490de795..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5926
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
IM6N<$f`E;H761SM

diff --git a/src/components/Stepper/index.vue b/src/components/Stepper/index.vue
index 3a9b7a2..4b7231a 100644
--- a/src/components/Stepper/index.vue
+++ b/src/components/Stepper/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="stepper-wrapper  flex items-center rounded-[8px]">
-    <uni-icons type="minus" size="24" color="#D1D1D1" @click="decrease" />
-    <text class="stepper-text text-center text-[14px] font-medium text-black ml-4 mr-[4px]">
+  <div class="bg-[#f3f9ff] p-[4px_7px] flex items-center rounded-[8px]">
+    <van-icon name="minus" size="24" color="#D1D1D1" @click="decrease" />
+    <span class="max-w-[40px] text-center text-[14px] font-medium text-black ml-[4px] mr-[4px]">
       {{ value }} {{ unit }}
-    </text>
-    <uni-icons type="plus" size="24" color="#198CFF" @click="increase" />
+    </span>
+    <van-icon name="plus" size="24" color="#198CFF" @click="increase" />
   </div>
 </template>
 
@@ -65,7 +65,3 @@ const increase = () => {
   }
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/components/Stepper/styles/index.scss b/src/components/Stepper/styles/index.scss
deleted file mode 100644
index 2b3f89c..0000000
--- a/src/components/Stepper/styles/index.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.stepper-wrapper {
-  background-color: #f3f9ff;
-  padding: 4px 7px;
-}
-
-.stepper-text {
-  max-width: 40px;
-}
diff --git a/src/pages/album/index.vue b/src/pages/album/index.vue
index b8f90bd..ae3db05 100644
--- a/src/pages/album/index.vue
+++ b/src/pages/album/index.vue
@@ -2,7 +2,7 @@
   <div class="bg-[#f5f7fa] flex flex-col h-screen overflow-hidden">
     <TopNavBar title="房间相册" backgroundColor="transparent" />
     <div class="p-8">
-      <span class="ml-4 text-[18px] text-[#171717] font-medium">全部({{ albumList.length }})</span>
+      <span class="ml-[4px] text-[18px] text-[#171717] font-medium">全部({{ albumList.length }})</span>
     </div>
 
     <scroll-div scroll-y class="scroll-container overflow-auto">
diff --git a/src/pages/order/order/components/AmtSection/index.vue b/src/pages/order/order/components/AmtSection/index.vue
index a780654..625d3a7 100644
--- a/src/pages/order/order/components/AmtSection/index.vue
+++ b/src/pages/order/order/components/AmtSection/index.vue
@@ -5,7 +5,7 @@
         <span class="text-[16px] text-[#171717] leading-[24px] font-medium">
           订单金额
         </span>
-        <span class="amt text-[18px] font-bold color-FF3D60 ml-4">
+        <span class="amt text-[18px] font-bold color-FF3D60 ml-[4px]">
           {{ orderData.payAmt }}
         </span>
       </div>