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

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>

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>

src/pages/home/components/DetailCardGoodsContentList/styles/index.scss

@@ -1,3 +0,0 @@
-.container {
-  margin: 6px 0 0;
-}

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>

src/pages/home/components/RecommendPostsList/styles/index.scss

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