diff --git a/src/pages/home/components/QuickBookingComponent/index.vue b/src/pages/home/components/QuickBookingComponent/index.vue
index e186c47..f7e9771 100644
--- a/src/pages/home/components/QuickBookingComponent/index.vue
+++ b/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>
diff --git a/src/pages/home/components/QuickBookingComponent/styles/index.scss b/src/pages/home/components/QuickBookingComponent/styles/index.scss
deleted file mode 100644
index 34a5eee..0000000
--- a/src/pages/home/components/QuickBookingComponent/styles/index.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.container {
-  width: 100%;
-  flex: 1;
-  margin-bottom: 12px;
-
-  .calendar {
-    width: 100%;
-  }
-}
diff --git a/src/pages/home/components/QuickBookingContentList/index.vue b/src/pages/home/components/QuickBookingContentList/index.vue
index b5fa7e1..516ab34 100644
--- a/src/pages/home/components/QuickBookingContentList/index.vue
+++ b/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>
diff --git a/src/pages/home/components/QuickBookingContentList/styles/index.scss b/src/pages/home/components/QuickBookingContentList/styles/index.scss
deleted file mode 100644
index a616717..0000000
--- a/src/pages/home/components/QuickBookingContentList/styles/index.scss
+++ /dev/null
@@ -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;
-      }
-    }
-  }
-}
diff --git a/src/pages/home/components/RecommendPostsComponent/index.vue b/src/pages/home/components/RecommendPostsComponent/index.vue
index a2c4378..1e27e80 100644
--- a/src/pages/home/components/RecommendPostsComponent/index.vue
+++ b/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>
diff --git a/src/pages/home/components/RecommendPostsComponent/styles/index.scss b/src/pages/home/components/RecommendPostsComponent/styles/index.scss
deleted file mode 100644
index 9da07fd..0000000
--- a/src/pages/home/components/RecommendPostsComponent/styles/index.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.container {
-  width: 100%;
-  flex: 1;
-  margin-bottom: 12px;
-}