|
|
@@ -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>
|