refactor(component): replace scoped scss with inline tailwind css

delete unused module title image asset
remove scoped style blocks from all vue single-file components
delete all deprecated scss style directories and files
replace legacy class names with inline tailwind utility classes across affected components
preserve original ui appearance and functionality

src/components/ModuleTitle/index.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="module-header mb-4">
-    <span class="module-title">{{ title }}</span>
-    <img class="underline" :src="isZhiNian ? indicatorSrcB : indicatorSrc" mode="aspectFill" />
+  <div class="relative inline-block p-[6px_2px_2px] mb-[4px]">
+    <span class="text-[18px] font-bold text-[#171717] relative z-10">
+      {{ title }}
+    </span>
+    <img class="absolute bottom-[-3px] left-0 w-full h-[10px] z-0" :src="isZhiNian ? indicatorSrcB : indicatorSrc" />
   </div>
 </template>
 
@@ -17,7 +19,3 @@ defineProps({
   },
 });
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>

src/components/ModuleTitle/styles/index.scss

@@ -1,22 +0,0 @@
-.module-header {
-  position: relative;
-  padding: 6px 2px 2px;
-  display: inline-block;
-}
-
-.module-title {
-  font-size: 18px;
-  font-weight: bold;
-  color: #171717;
-  position: relative;
-  z-index: 1;
-}
-
-.underline {
-  position: absolute;
-  bottom: 3px;
-  left: 0;
-  width: 100%;
-  height: 10px;
-  z-index: 0;
-}

src/components/SwipeCards/index.vue

@@ -1,31 +1,33 @@
 <template>
-  <div class="card border-box pb-12 relative mt-12">
-    <div class="card-item absolute overflow-hidden" v-for="(card, index) in list" :key="card.__uid"
-      :style="[itemStyle(index, card), transformStyle(index, card)]" @touchstart.stop="touchStart($event, index)"
-      @touchmove.stop.prevent="touchMove($event, index)" @touchend.stop="touchEnd(index)"
-      @touchcancel.stop="touchCancel(index)" @transitionend="onTransitionEnd(index)">
-      <div class="inner-card bg-white">
+  <div class="h-[308px] pb-[12px] relative mt-[12px]">
+    <div class="h-[277px] rounded-[20px] shadow-[0_8px_8px_rgba(0_0_0_0.08)] absolute overflow-hidden"
+      v-for="(card, index) in list" :key="card.__uid" :style="[itemStyle(index, card), transformStyle(index, card)]"
+      @touchstart.stop="touchStart($event, index)" @touchmove.stop.prevent="touchMove($event, index)"
+      @touchend.stop="touchEnd(index)" @touchcancel.stop="touchCancel(index)" @transitionend="onTransitionEnd(index)">
+      <div class="w-full h-full bg-white">
         <!-- 商品大图部分：自适应剩余空间 -->
-        <div class="goods-image-wrapper relative">
-          <img class="w-full h-full" :src="card.commodityPhoto" mode="aspectFill" />
+        <div class="w-full h-[193px] relative">
+          <img class="w-full h-full" :src="card.commodityPhoto" />
         </div>
 
         <!-- 底部：价格 + 购买按钮 -->
-        <div class="card-footer border-box p-12 flex flex-justify-between flex-items-center">
-          <div class="border-box">
-            <div class="font-size-14 font-500 color-333 ellipsis-1">
+        <div class="border-t border-[rgba(0_0_0_0.04)] border-solid p-[12px] flex justify-between items-center">
+          <div>
+            <div class="text-[14px] font-semibold text-[#333] truncate">
               {{ card.commodityName }}
             </div>
-            <div class="card-price-row color-333">
-              <span class="font-size-11">￥</span>
-              <span class="font-size-24 font-bold">
+            <div class="text-[#333]">
+              <span class="text-[11px]">￥</span>
+              <span class="text-[24px] font-bold">
                 {{ card.specificationPrice }}
               </span>
-              <span class="font-size-11 ml-2" v-if="card.stockUnitLabel">/{{ card.stockUnitLabel }}</span>
+              <span class="text-[11px] ml-[2px]" v-if="card.stockUnitLabel">/{{ card.stockUnitLabel }}</span>
             </div>
           </div>
 
-          <div class="buy-btn" @click.stop="placeOrderHandle(card)">购买</div>
+          <div
+            class="bd-[#0ccd58] text-[14px] text-white leading-1 mt-[12px] p-[12px_24px] rounded-[12px] inline-flex items-center justify-center"
+            @click.stop="placeOrderHandle(card)">购买</div>
         </div>
       </div>
     </div>
@@ -200,10 +202,10 @@ const transformStyle = (index, card) => {
     };
   }
   // 预览层：轻微位移与缩放，确保连贯顶上
-  const predivScales = [1, 0.94, 0.86];
-  const predivOffsets = [0, 18, 39];
-  const scale = predivScales[index] ?? 0.94;
-  const y = predivOffsets[index] ?? 24;
+  const previewScales = [1, 0.94, 0.86];
+  const previewOffsets = [0, 18, 39];
+  const scale = previewScales[index] ?? 0.94;
+  const y = previewOffsets[index] ?? 24;
   return {
     transform: `translate3d(0, ${y}px, 0) scale(${scale})`,
   };
@@ -218,7 +220,3 @@ const placeOrderHandle = (item) => {
   });
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>

src/components/SwipeCards/styles/index.scss

@@ -1,60 +0,0 @@
-.card {
-  height: 308px;
-}
-
-.card-item {
-  inset: 0;
-  will-change: transform, opacity;
-  height: 277px;
-  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.08);
-  border-radius: 20px;
-}
-
-.inner-card {
-  width: 100%;
-  height: 100%;
-}
-
-/* 商品大图部分：撑满除相册外的空间 */
-.goods-image-wrapper {
-  width: 100%;
-  height: 193px;
-}
-
-.album-item {
-  width: 96px;
-  height: 60px;
-}
-
-.album-title {
-  background: rgba(0, 0, 0, 0.5);
-  height: 20px;
-}
-
-/* 底部价格与购买按钮 */
-.card-footer {
-  border-top: 1px solid rgba(0, 0, 0, 0.04);
-}
-
-.card-footer .price-left {
-  display: flex;
-  align-items: baseline;
-  color: #171717;
-}
-
-.buy-btn {
-  background-color: #0ccd58;
-  color: #fff;
-  margin-top: 12px;
-  padding: 12px 24px;
-  border-radius: 12px;
-  font-size: 14px;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.buy-btn:active {
-  opacity: 0.9;
-}