From 0b64f666c73e9710da54cafd21d37398770f6791 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Thu, 28 May 2026 15:20:31 +0800
Subject: [PATCH] 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
---
 .../ModuleTitle/images/2025-07-12_222027.png  | Bin 4581 -> 0 bytes
 src/components/ModuleTitle/index.vue          |  12 ++--
 src/components/ModuleTitle/styles/index.scss  |  22 -------
 src/components/SwipeCards/index.vue           |  46 +++++++-------
 src/components/SwipeCards/styles/index.scss   |  60 ------------------
 .../components/DetailCardCompontent/index.vue |   6 +-
 .../DetailCardGoodsContentList/index.vue      |   6 +-
 .../styles/index.scss                         |   3 -
 .../components/RecommendPostsList/index.vue   |  22 +++----
 .../RecommendPostsList/styles/index.scss      |  26 --------
 10 files changed, 40 insertions(+), 163 deletions(-)
 delete mode 100644 src/components/ModuleTitle/images/2025-07-12_222027.png
 delete mode 100644 src/components/ModuleTitle/styles/index.scss
 delete mode 100644 src/components/SwipeCards/styles/index.scss
 delete mode 100644 src/pages/home/components/DetailCardGoodsContentList/styles/index.scss
 delete mode 100644 src/pages/home/components/RecommendPostsList/styles/index.scss

diff --git a/src/components/ModuleTitle/images/2025-07-12_222027.png b/src/components/ModuleTitle/images/2025-07-12_222027.png
deleted file mode 100644
index c4c7b00699c47f61dab3af154795f1e7225ad3f6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4581
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

diff --git a/src/components/ModuleTitle/index.vue b/src/components/ModuleTitle/index.vue
index 5fa3443..7922f20 100644
--- a/src/components/ModuleTitle/index.vue
+++ b/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>
diff --git a/src/components/ModuleTitle/styles/index.scss b/src/components/ModuleTitle/styles/index.scss
deleted file mode 100644
index bfea704..0000000
--- a/src/components/ModuleTitle/styles/index.scss
+++ /dev/null
@@ -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;
-}
diff --git a/src/components/SwipeCards/index.vue b/src/components/SwipeCards/index.vue
index e0e40a0..c92e6e3 100644
--- a/src/components/SwipeCards/index.vue
+++ b/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>
diff --git a/src/components/SwipeCards/styles/index.scss b/src/components/SwipeCards/styles/index.scss
deleted file mode 100644
index 4d25d78..0000000
--- a/src/components/SwipeCards/styles/index.scss
+++ /dev/null
@@ -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;
-}
diff --git a/src/pages/home/components/DetailCardCompontent/index.vue b/src/pages/home/components/DetailCardCompontent/index.vue
index a642156..602eb0b 100644
--- a/src/pages/home/components/DetailCardCompontent/index.vue
+++ b/src/pages/home/components/DetailCardCompontent/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="w-full pb-12">
-    <template v-if="toolCall.picture && toolCall.picture.length > 0">
+  <div class="w-full pb-[12px]">
+    <template v-if="toolCall.picture && toolCall.picture.length">
       <ModuleTitle :title="图片详情" />
       <ImageSwiper :images="toolCall.picture" thumbnailBottom="12px" />
     </template>
@@ -24,5 +24,3 @@ const props = defineProps({
   },
 });
 </script>
-
-<style scoped lang="scss"></style>
diff --git a/src/pages/home/components/DetailCardGoodsContentList/index.vue b/src/pages/home/components/DetailCardGoodsContentList/index.vue
index 1f86b8a..a4c9765 100644
--- a/src/pages/home/components/DetailCardGoodsContentList/index.vue
+++ b/src/pages/home/components/DetailCardGoodsContentList/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="mt-[6px]">
     <ModuleTitle title="相关商品" />
 
     <SwipeCards :cardsData="commodityList" />
@@ -18,7 +18,3 @@ const props = defineProps({
   },
 });
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/DetailCardGoodsContentList/styles/index.scss b/src/pages/home/components/DetailCardGoodsContentList/styles/index.scss
deleted file mode 100644
index ae4d176..0000000
--- a/src/pages/home/components/DetailCardGoodsContentList/styles/index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.container {
-  margin: 6px 0 0;
-}
diff --git a/src/pages/home/components/RecommendPostsList/index.vue b/src/pages/home/components/RecommendPostsList/index.vue
index 9b095b0..3fc6b7e 100644
--- a/src/pages/home/components/RecommendPostsList/index.vue
+++ b/src/pages/home/components/RecommendPostsList/index.vue
@@ -1,18 +1,20 @@
 <template>
-  <div class="container">
+  <div>
     <ModuleTitle :title="recommendTheme.themeName" />
 
-    <div class="container-scroll font-size-0 scroll-x whitespace-nowrap">
-      <div class="card-item bg-white inline-block rounded-20 mr-8"
+    <div class="m-[4px_0_6px] text-[0px] overflow-x whitespace-nowrap">
+      <div class="w-[128px] bg-white inline-block rounded-[20px] mr-[8px]"
         v-for="(item, index) in recommendTheme.recommendPostsList" :key="index" @click="sendReply(item)">
-        <div class="m-4 relative">
-          <img class="card-img rounded-16 relative z-10" :src="item.coverPhoto" mode="aspectFill" />
+        <div class="m-[4px] relative">
+          <img class="w-[120px] h-[120px] rounded-[16px] relative z-10" :src="item.coverPhoto" />
 
-          <div class="shadow absolute rounded-16"></div>
+          <div
+            class="w-[96px] h-[96px] bg-ink-200 rounded-[16px] absolute bottom-[-4px] left-50% transform translate-x-[-50%] z-1">
+          </div>
         </div>
 
-        <div class="card-text border-box">
-          <div class="font-size-11 color-99A0AE ellipsis-1">
+        <div class="p-[4px_8px_8px]">
+          <div class="text-[11px] text-[#99A0AE] truncate">
             {{ item.topic }}
           </div>
         </div>
@@ -42,7 +44,3 @@ const sendReply = (item) => {
   uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item.userInputContent);
 };
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/RecommendPostsList/styles/index.scss b/src/pages/home/components/RecommendPostsList/styles/index.scss
deleted file mode 100644
index bd6fe32..0000000
--- a/src/pages/home/components/RecommendPostsList/styles/index.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.container-scroll {
-  margin: 4px 0 6px;
-}
-
-.card-item {
-  width: 128px;
-}
-
-.card-img {
-  height: 120px;
-  width: 120px;
-}
-
-.shadow {
-  background-color: #e5e8ee;
-  height: 96px;
-  width: 96px;
-  bottom: -4px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1;
-}
-
-.card-text {
-  padding: 4px 8px 8px;
-}