diff --git a/pages/module/booking/QuickBookingCalender.vue b/pages/module/booking/QuickBookingCalender.vue
index 4bc4fe3..181852f 100644
--- a/pages/module/booking/QuickBookingCalender.vue
+++ b/pages/module/booking/QuickBookingCalender.vue
@@ -70,62 +70,6 @@ onMounted(() => {
 });
 </script>
 
-<style scoped>
-.date-picker {
-  background: rgba(140, 236, 255, 0.24);
-  padding: 8rpx 0;
-  border-radius: 16rpx;
-  margin: 12px 0 6px;
-  min-width: 325px;
-  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 阴影 */
-}
-
-.date-list {
-  display: flex;
-}
-
-.date-item,
-.calendar-btn {
-  flex: 1; /* 等宽 */
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 12rpx 0;
-  border-radius: 16rpx;
-}
-
-.label {
-  font-size: 24rpx;
-  color: #999;
-}
-.date {
-  font-size: 28rpx;
-  font-weight: bold;
-  color: #555;
-}
-
-.date-item.active {
-  background-color: #00a6ff;
-}
-.date-item.active .label,
-.date-item.active .date {
-  color: #fff;
-}
-
-/* 日历按钮 */
-.calendar-btn {
-  background: #fff;
-  border-radius: 0 16rpx 16rpx 0;
-  margin: -8rpx 0;
-}
-.calendar-img {
-  width: 16px;
-  height: 16px;
-}
-.calendar-text {
-  font-size: 22rpx;
-  color: #666;
-  margin-top: 4rpx;
-}
+<style scoped lang="scss">
+@import "./styles/QuickBookingCalender.scss";
 </style>
diff --git a/pages/module/booking/QuickBookingComponent.vue b/pages/module/booking/QuickBookingComponent.vue
index d5df1b4..4aa6780 100644
--- a/pages/module/booking/QuickBookingComponent.vue
+++ b/pages/module/booking/QuickBookingComponent.vue
@@ -62,13 +62,5 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.container {
-  width: 100%;
-  flex: 1;
-  margin-bottom: 12px;
-
-  .calendar {
-    width: 100%;
-  }
-}
+@import './styles/QuickBookingComponent.scss'
 </style>
diff --git a/pages/module/booking/QuickBookingContentList.vue b/pages/module/booking/QuickBookingContentList.vue
index 4b9cc85..01cc926 100644
--- a/pages/module/booking/QuickBookingContentList.vue
+++ b/pages/module/booking/QuickBookingContentList.vue
@@ -6,7 +6,7 @@
         v-for="(item, index) in commodityDTO.commodityList"
         :key="`${item.commodityId}-${index}`"
       >
-        <view class="mk-card-item" @click="placeOrderHandle(item)">
+        <Interceptor class="mk-card-item" @click="placeOrderHandle(item)">
           <!-- <view class="card-badge">超值推荐</view> -->
           <image class="card-img" :src="item.commodityIcon" mode="aspectFill" />
           <view class="card-content">
@@ -38,7 +38,7 @@
               <text class="card-btn">下单</text>
             </view>
           </view>
-        </view>
+        </Interceptor>
       </view>
     </view>
   </view>
@@ -47,6 +47,8 @@
 <script setup>
 import ModuleTitle from "@/components/ModuleTitle/index.vue";
 import { defineProps } from "vue";
+import Interceptor from "@/components/Interceptor/index.vue";
+
 const props = defineProps({
   commodityDTO: {
     type: Object,
@@ -63,141 +65,5 @@ const placeOrderHandle = (item) => {
 </script>
 
 <style lang="scss" scoped>
-.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: #ffffff;
-      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;
-      }
-    }
-  }
-}
+@import "./styles/QuickBookingContentList.scss";
 </style>
diff --git a/pages/module/booking/styles/QuickBookingCalender.scss b/pages/module/booking/styles/QuickBookingCalender.scss
new file mode 100644
index 0000000..0418511
--- /dev/null
+++ b/pages/module/booking/styles/QuickBookingCalender.scss
@@ -0,0 +1,57 @@
+.date-picker {
+  background: rgba(140, 236, 255, 0.24);
+  padding: 8rpx 0;
+  border-radius: 16rpx;
+  margin: 12px 0 6px;
+  min-width: 325px;
+  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 阴影 */
+}
+
+.date-list {
+  display: flex;
+}
+
+.date-item,
+.calendar-btn {
+  flex: 1; /* 等宽 */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 12rpx 0;
+  border-radius: 16rpx;
+}
+
+.label {
+  font-size: 24rpx;
+  color: #999;
+}
+.date {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #555;
+}
+
+.date-item.active {
+  background-color: #00a6ff;
+}
+.date-item.active .label,
+.date-item.active .date {
+  color: #fff;
+}
+
+/* 日历按钮 */
+.calendar-btn {
+  background: #fff;
+  border-radius: 0 16rpx 16rpx 0;
+  margin: -8rpx 0;
+}
+.calendar-img {
+  width: 16px;
+  height: 16px;
+}
+.calendar-text {
+  font-size: 22rpx;
+  color: #666;
+  margin-top: 4rpx;
+}
\ No newline at end of file
diff --git a/pages/module/booking/styles/QuickBookingComponent.scss b/pages/module/booking/styles/QuickBookingComponent.scss
new file mode 100644
index 0000000..34a5eee
--- /dev/null
+++ b/pages/module/booking/styles/QuickBookingComponent.scss
@@ -0,0 +1,9 @@
+.container {
+  width: 100%;
+  flex: 1;
+  margin-bottom: 12px;
+
+  .calendar {
+    width: 100%;
+  }
+}
diff --git a/pages/module/booking/styles/QuickBookingContentList.scss b/pages/module/booking/styles/QuickBookingContentList.scss
new file mode 100644
index 0000000..959d981
--- /dev/null
+++ b/pages/module/booking/styles/QuickBookingContentList.scss
@@ -0,0 +1,137 @@
+.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: #ffffff;
+      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;
+      }
+    }
+  }
+}