refactor(home components): replace SCSS with Tailwind and clean up

Delete standalone SCSS style files for three home components, convert all component styling to Tailwind utility classes, remove redundant style import blocks, fix import order for Vue composables, and update navigation to use vue-router.

src/pages/home/components/QuickBookingComponent/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <QuickBookingCalender class="calendar" @update:date="onDateSelected" />
+  <div class="w-full flex-1 mb-3">
+    <QuickBookingCalender class="w-full" @update:date="onDateSelected" />
     <div v-for="item in commodityGroupDTOList" :key="commodityGroupKey(item.title)">
       <QuickBookingContentList :commodityDTO="item" />
     </div>
@@ -8,9 +8,10 @@
 </template>
 
 <script setup>
+import { ref, nextTick } from "vue";
+import { emitter } from '@/utils/events.ts'
 import QuickBookingCalender from "../QuickBookingCalender/index.vue";
 import QuickBookingContentList from "../QuickBookingContentList/index.vue";
-import { ref, nextTick } from "vue";
 import { onMounted } from "vue";
 import { quickBookingComponent } from "@/api/home";
 import { SCROLL_TO_BOTTOM } from "@/constants/constant";
@@ -27,7 +28,7 @@ const loadQuickBookingComponent = async () => {
     commodityGroupDTOList.value = res.data.commodityGroupDTOList;
     nextTick(() => {
       setTimeout(() => {
-        uni.$emit(SCROLL_TO_BOTTOM, true);
+        emitter.emit(SCROLL_TO_BOTTOM, true);
       }, 300);
     });
   }
@@ -57,7 +58,3 @@ onMounted(() => {
   loadQuickBookingComponent();
 });
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>

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

@@ -1,9 +0,0 @@
-.container {
-  width: 100%;
-  flex: 1;
-  margin-bottom: 12px;
-
-  .calendar {
-    width: 100%;
-  }
-}

src/pages/home/components/QuickBookingContentList/index.vue

@@ -1,29 +1,35 @@
 <template>
-  <div class="container">
+  <div>
     <ModuleTitle :title="commodityDTO.title" />
-    <div class="container-scroll">
+    <div class="flex flex-row overflow-x-auto overflow-y-hidden my-1">
       <div v-for="(item, index) in commodityDTO.commodityList" :key="`${item.commodityId}-${index}`">
-        <div class="mk-card-item" @click="placeOrderHandle(item)">
-          <!-- <div class="card-badge">超值推荐</div> -->
-          <img class="card-img" :src="item.commodityIcon" mode="aspectFill" />
-          <div class="card-content">
-            <div class="card-title-column">
-              <span class="card-title">{{ item.commodityName }}</span>
-              <div class="card-tags" v-for="tag in item.commodityTradeRuleList" :key="tag">
-                <span class="card-tag">{{ tag }}</span>
+        <div class="relative flex flex-col items-start w-[188px] bg-white rounded-[10px] mr-2 pb-3"
+          @click="placeOrderHandle(item)">
+          <img class="w-[188px] h-[114px] rounded-[10px] object-cover shrink-0" :src="item.commodityIcon" />
+          <div class="pt-[10px] px-3 pb-0 flex flex-col justify-between items-start w-full flex-1 overflow-hidden">
+            <div class="flex items-start flex-col w-full">
+              <span
+                class="text-base font-bold text-[#222] w-full line-clamp-2 overflow-hidden text-ellipsis leading-[1.4] max-h-[2.8em]">
+                {{ item.commodityName }}
+              </span>
+              <div class="flex flex-row items-start py-1.5 w-full" v-for="tag in item.commodityTradeRuleList"
+                :key="tag">
+                <span class="text-[#ff6600] text-[10px] rounded px-1.5 ml-[2px] border border-[#ff6600]">
+                  {{ tag }}
+                </span>
               </div>
             </div>
             <template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
-              <div v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</div>
+              <div v-if="index < 3" class="text-[13px] text-[#888] mt-[2px]">· {{ serviceItem.serviceTitle }}</div>
             </template>
-            <div class="card-bottom-row">
-              <div class="card-price-row">
-                <span class="card-price-fu">￥</span>
-                <span class="card-price">{{ item.commodityPrice }}</span>
-                <span class="card-unit">/{{ item.stockUnitLabel }}</span>
+            <div class="flex items-center justify-between mt-2 w-full">
+              <div>
+                <span class="text-[#ff6600] text-[11px] font-normal">￥</span>
+                <span class="text-[#ff6600] text-base font-bold">{{ item.commodityPrice }}</span>
+                <span class="text-[11px] text-[#888] font-normal ml-[2px]">/{{ item.stockUnitLabel }}</span>
               </div>
 
-              <span class="card-btn">下单</span>
+              <span class="bg-[#ff6600] text-white text-[15px] rounded-[20px] px-[18px] h-8 leading-[32px]">下单</span>
             </div>
           </div>
         </div>
@@ -34,6 +40,7 @@
 
 <script setup>
 import { defineProps } from "vue";
+import { useRouter } from 'vue-router'
 import { checkToken } from "@/hooks/useGoLogin";
 import ModuleTitle from "@/components/ModuleTitle/index.vue";
 
@@ -44,16 +51,17 @@ const props = defineProps({
   },
 });
 
-/// 去下单
+const router = useRouter()
+
+// 去下单
 const placeOrderHandle = (item) => {
   checkToken().then(() => {
-    uni.navigateTo({
-      url: `/pages/goods/index?commodityId=${item.commodityId}`,
-    });
+    router.push({
+      name: 'goods',
+      query: {
+        commodityId: item.commodityId,
+      }
+    })
   });
 };
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>

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

@@ -1,137 +0,0 @@
-.container {
-  .container-scroll {
-    display: flex;
-    flex-direction: row;
-    overflow-x: auto;
-    overflow-y: hidden;
-    margin: 4px 0;
-
-    .mk-card-item {
-      position: relative;
-
-      display: flex;
-      flex-direction: column;
-      align-items: start;
-      width: 188px;
-      //   height: 244px;
-      background-color: #fff;
-      border-radius: 10px;
-      margin-right: 8px;
-      padding-bottom: 12px;
-
-      .card-badge {
-        position: absolute;
-        top: 8px;
-        left: 8px;
-        background: #ffe7b2;
-        color: #b97a00;
-        font-size: 12px;
-        padding: 2px 8px;
-        border-radius: 4px;
-        z-index: 2;
-      }
-
-      .card-img {
-        width: 188px;
-        height: 114px;
-        border-radius: 10px;
-        object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
-        flex-shrink: 0; /* 防止图片被压缩 */
-      }
-
-      .card-content {
-        box-sizing: border-box;
-        padding: 10px 12px 0 12px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: start;
-        width: 100%;
-        flex: 1; /* 让内容区域占据剩余空间 */
-        overflow: hidden; /* 防止内容溢出 */
-      }
-
-      .card-title-column {
-        display: flex;
-        align-items: start;
-        flex-direction: column;
-        width: 100%;
-      }
-
-      .card-title {
-        font-size: 16px;
-        font-weight: bold;
-        color: #222;
-        width: 100%;
-        /* 限制标题最多显示两行 */
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        line-height: 1.4;
-        max-height: 2.8em; /* 2行的高度 */
-      }
-
-      .card-tags {
-        display: flex;
-        flex-direction: row;
-        align-items: start;
-        padding: 6px 0;
-      }
-
-      .card-tag {
-        color: #ff6600;
-        font-size: 10px;
-        border-radius: 4px;
-        padding: 0 6px;
-        margin-left: 2px;
-        border: 1px solid #ff6600;
-      }
-
-      .card-desc {
-        font-size: 13px;
-        color: #888;
-        margin-top: 2px;
-      }
-
-      .card-bottom-row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-top: 8px;
-        width: 100%;
-      }
-
-      .card-price-row {
-        .card-price-fu {
-          color: #ff6600;
-          font-size: 11px;
-          font-weight: normal;
-        }
-
-        .card-price {
-          color: #ff6600;
-          font-size: 16px;
-          font-weight: bold;
-        }
-        .card-unit {
-          font-size: 11px;
-          color: #888;
-          font-weight: normal;
-          margin-left: 2px;
-        }
-      }
-
-      .card-btn {
-        background: #ff6600;
-        color: #fff;
-        font-size: 15px;
-        border-radius: 20px;
-        padding: 0 18px;
-        height: 32px;
-        line-height: 32px;
-      }
-    }
-  }
-}

src/pages/home/components/RecommendPostsComponent/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="w-full flex-1 mb-[12px]">
     <div v-for="item in recommendThemeList" :key="item.themeName">
       <RecommendPostsList v-if="item.recommendPostsList.length > 0" :recommendTheme="item" />
     </div>
@@ -7,9 +7,9 @@
 </template>
 
 <script setup>
+import { defineProps } from "vue";
 import RecommendPostsList from "../RecommendPostsList/index.vue";
 
-import { defineProps } from "vue";
 const props = defineProps({
   recommendThemeList: {
     type: Array,
@@ -17,7 +17,3 @@ const props = defineProps({
   },
 });
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>

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

@@ -1,5 +0,0 @@
-.container {
-  width: 100%;
-  flex: 1;
-  margin-bottom: 12px;
-}