lq/schedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化页面显示

Browse Source
This commit is contained in:
年糕崽崽
2025-06-11 15:42:48 +08:00
parent 62379b55fd
commit 11ccacfa9a
6 changed files with 217 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/CalendarView.vue
View File

@@ -12,7 +12,7 @@
</div>
</div>
<div class="grid grid-cols-7 gap-2 mt-3">
<div class="grid grid-cols-7 mt-3">
<div
v-for="(day, index) in monthDays"
:key="index"
@@ -21,15 +21,16 @@
@dragleave="handleDragLeave"
@drop="handleDropEvent($event, day.date)"
:class="{
'bg-primary-50': selectedDate === day.date,
'drag-over': isDragOverCell === day.date
}"
'bg-primary-50': selectedDate === day.date,
'active-day': selectedDate === day.date,
'drag-over': isDragOverCell === day.date
}"
class="calendar-cell dropzone rounded-xl border border-gray-100 p-3 cursor-pointer transition-all relative min-h-[120px] hover:shadow-md"
>
<!-- 日期和工作状态 -->
<div class="flex justify-between items-start">
<span
class="text-lg font-semibold w-8 h-8 flex items-center justify-center rounded-full"
class="text-lg font-semibold w-8 h-8 flex items-center justify-center rounded-full relative"
:class="{
'bg-primary-600 text-white': isToday(day.date),
'text-gray-900': day.currentMonth && !isToday(day.date),
@@ -39,6 +40,10 @@
{{ day.date.split('-')[2] }}
</span>
<!-- 农历日期 -->
<span class="lunar-date text-xs text-gray-500 mt-1" style="position: absolute; right: 5px; bottom: 5px">
{{ getLunarDate(day.date) }}
</span>
<span v-if="isHoliday(day.date)" class="work-marker day-off">休</span>
<span v-else-if="isWorkDayOnWeekend(day.date)" class="work-marker work-day">班</span>
</div>
@@ -56,10 +61,6 @@
</div>
</div>
<!-- 农历日期 -->
<div class="lunar-date text-xs text-gray-500 mt-1">
{{ getLunarDate(day.date) }}
</div>
<!-- 事件展示 -->
<div v-if="hasEvent(day.date)" class="mt-2 text-xs max-w-full overflow-hidden">
@@ -343,10 +344,18 @@ const handleDropEvent = (event, date, time = null) => {
}
.dropzone.drag-over {
background-color: rgba(100, 94, 255, 0.1);
background-color: rgba(100, 94, 255, 0.3);
box-shadow: inset 0 0 0 2px #645eff;
}
.dropzone.active-day {
background-color: rgba(100, 94, 255, 0.3);
box-shadow: inset 0 0 0 2px #645eff;
/* 用虚线美化边框 */
border-bottom: 1px dashed rgba(100, 94, 255, 0.5);
border-radius: 10px;
}
.work-marker {
position: absolute;
top: 6px;