diff --git a/src/pages/home/components/QuickBookingCalender/index.vue b/src/pages/home/components/QuickBookingCalender/index.vue
index 453c387..7ac7a5c 100644
--- a/src/pages/home/components/QuickBookingCalender/index.vue
+++ b/src/pages/home/components/QuickBookingCalender/index.vue
@@ -1,23 +1,31 @@
 <template>
-  <div class="date-picker">
-    <div class="date-list">
-      <div v-for="(item, index) in dates" :key="index" class="date-item" :class="{ active: index === activeIndex }"
-        @click="selectDate(index)">
-        <span class="label">{{ item.label }}</span>
-        <span class="date">{{ item.date }}</span>
+  <div
+    class="bg-[#8cecff]/[0.24] py-[8rpx] rounded-[16rpx] my-[12px]_mt-[12px]_mb-[6px] min-w-[325px] shadow-[0_4rpx_8rpx_rgba(0,0,0,0.1)]">
+    <div class="flex">
+      <div v-for="(item, index) in dates" :key="index"
+        class="flex-1 flex flex-col items-center justify-center py-[6px] rounded-[8px]"
+        :class="{ 'bg-[#0ccd58]': index === activeIndex }" @click="selectDate(index)">
+        <span :class="['text-[12px]', index === activeIndex ? 'text-[#fff]' : 'text-[#333]']">{{ item.label }}</span>
+        <span :class="['text-[14px]', index === activeIndex ? 'text-[#fff]' : 'text-[#555] font-bold']">
+          {{ item.date }}
+        </span>
       </div>
 
       <!-- 日历按钮 -->
-      <div class="calendar-btn btn-bom" @click="openCalendar">
-        <img src="https://oss.nianxx.cn/mp/static/booking_calendar.png" mode="widthFix" class="calendar-img" />
-        <span class="calendar-text">日历</span>
+      <div
+        class="flex-1 flex flex-col items-center justify-center py-[6px] rounded-[8px] bg-white rounded-r-[8px] -my-[4px]"
+        @click="openCalendar">
+        <img src="https://oss.nianxx.cn/mp/static/booking_calendar.png" class="w-[16px] h-[16px]" />
+        <span class="text-[11px] text-[#666] mt-[2px]">日历</span>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, defineEmits } from "vue";
+import { emitter } from '@/utils/events.ts'
+
 const emit = defineEmits(["update:date"]); // 声明事件
 
 const activeIndex = ref(2); // 默认今天
@@ -48,11 +56,9 @@ const selectDate = (index) => {
 };
 
 const openCalendar = () => {
-  uni.$emit("openCalendar");
-
-  uni.$on("selectCalendarDate", (date) => {
+  emitter.emit("selectCalendarDate", (date) => {
     emit("update:date", { fullDate: date });
-    uni.$off("selectCalendarDate");
+    emitter.off("selectCalendarDate");
   });
 };
 
@@ -60,7 +66,3 @@ onMounted(() => {
   initDates();
 });
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/QuickBookingCalender/styles/index.scss b/src/pages/home/components/QuickBookingCalender/styles/index.scss
deleted file mode 100644
index 32bc4fa..0000000
--- a/src/pages/home/components/QuickBookingCalender/styles/index.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-.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: #333-grey;
-}
-.date {
-  font-size: 28rpx;
-  font-weight: bold;
-  color: #555;
-}
-
-.date-item.active {
-  background-color: #0ccd58;
-}
-.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;
-}