Bladeren bron

feat(schedule): card-wrap calendar and refine date selection styles

- Wrap calendar in mx-4 mt-4 bg-white rounded-xl shadow-sm p-4 card
- Update date cell selection styles: blue fill white text for selected, light blue bg blue text for today
- Simplify date text color logic
- Update schedule dot: white when selected, primary otherwise
- Replace active:scale-95 with hover-class="scale-down" + scoped CSS to avoid WXSS escape selectors

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
xuyunhui 1 week geleden
bovenliggende
commit
2c23142887
1 gewijzigde bestanden met toevoegingen van 17 en 7 verwijderingen
  1. 17 7
      src/components/dispatch/ScheduleView.vue

+ 17 - 7
src/components/dispatch/ScheduleView.vue

@@ -34,7 +34,7 @@
     </view>
 
     <!-- 日历 -->
-    <view class="bg-white px-4 py-3">
+    <view class="mx-4 mt-4 bg-white rounded-xl shadow-sm p-4">
       <!-- 星期标题 -->
       <view class="flex mb-2">
         <view v-for="day in weekDays" :key="day" class="flex-1 text-center">
@@ -47,20 +47,23 @@
         <view
           v-for="(date, dateIndex) in week"
           :key="dateIndex"
-          class="flex-1 h-14 flex flex-col items-center justify-center relative mx-1"
+          class="flex-1 h-14 flex flex-col items-center justify-center relative mx-1 rounded-xl transition-transform duration-150"
           :class="{
             'opacity-30': date.isOtherMonth,
-            'bg-blue-50 rounded-xl': date.isToday && !isSelected(date),
-            'border-2 border-primary rounded-xl shadow-sm': isSelected(date) && !date.isToday,
-            'bg-primary rounded-xl shadow-md': isSelected(date) && date.isToday,
+            'bg-blue-50 text-primary': date.isToday && !isSelected(date),
+            'bg-primary text-white shadow-sm': isSelected(date),
           }"
+          hover-class="scale-down"
+          :hover-start-time="0"
+          :hover-stay-time="150"
           @click="selectDate(date)"
         >
           <text
             class="text-sm font-medium"
             :class="{
               'text-primary': date.isToday && !isSelected(date),
-              'text-gray-800': !date.isToday || isSelected(date)
+              'text-white': isSelected(date),
+              'text-gray-800': !date.isToday && !isSelected(date)
             }"
           >
             {{ date.day }}
@@ -68,7 +71,7 @@
           <view
             v-if="date.hasSchedule"
             class="w-2 h-2 rounded-full mt-1"
-            :class="isSelected(date) ? 'bg-primary' : 'bg-primary'"
+            :class="isSelected(date) ? 'bg-white' : 'bg-primary'"
           ></view>
         </view>
       </view>
@@ -514,3 +517,10 @@ onMounted(() => {
   fetchSchedules()
 })
 </script>
+
+<style scoped>
+.scale-down {
+  transition: transform 0.15s ease;
+  transform: scale(0.95);
+}
+</style>