Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
eb690c70 1 parent 5471481a

style(calendar): 调整日期显示区域布局以改善视觉对齐

Inline Side-by-side
Showing 1 changed file with 20 additions and 18 deletions
1 <!-- 1 <!--
2 * @Date: 2025-01-25 15:34:17 2 * @Date: 2025-01-25 15:34:17
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2026-01-23 13:38:31 4 + * @LastEditTime: 2026-01-23 13:43:28
5 * @FilePath: /mlaj/src/components/calendar/CollapsibleCalendar.vue 5 * @FilePath: /mlaj/src/components/calendar/CollapsibleCalendar.vue
6 * @Description: 可折叠日历组件 6 * @Description: 可折叠日历组件
7 --> 7 -->
...@@ -28,23 +28,25 @@ ...@@ -28,23 +28,25 @@
28 <div class="calendar-content"> 28 <div class="calendar-content">
29 <div class="calendar-date-display" @click="expandCalendar"> 29 <div class="calendar-date-display" @click="expandCalendar">
30 <div class="calendar-date-main">{{ formattedCurrentDate }}</div> 30 <div class="calendar-date-main">{{ formattedCurrentDate }}</div>
31 - <div class="calendar-weekday">{{ formattedWeekday }}</div> 31 + <div class="flex items-center gap-2">
32 - <div 32 + <div class="calendar-weekday">{{ formattedWeekday }}</div>
33 - v-if="!isHeaderHidden" 33 + <div
34 - class="text-xs mt-1 collapsible-text px-3 py-1 text-center rounded-full border inline-flex items-center justify-center gap-1 min-w-[5rem] transition-colors duration-200" 34 + v-if="!isHeaderHidden"
35 - :class="[ 35 + class="text-xs collapsible-text px-3 py-1 text-center rounded-full border inline-flex items-center justify-center gap-1 min-w-[5rem] transition-colors duration-200"
36 - hasSelectedDate 36 + :class="[
37 - ? 'text-green-600 bg-green-50 border-green-200 font-medium' 37 + hasSelectedDate
38 - : 'text-gray-500 bg-white border-gray-200' 38 + ? 'text-green-600 bg-green-50 border-green-200 font-medium'
39 - ]" 39 + : 'text-gray-500 bg-white border-gray-200'
40 - > 40 + ]"
41 - <span>{{ toggleButtonText }}</span> 41 + >
42 - <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" :class="{'text-green-600': hasSelectedDate, 'text-gray-400': !hasSelectedDate}"> 42 + <span>{{ toggleButtonText }}</span>
43 - <path d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 43 + <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" :class="{'text-green-600': hasSelectedDate, 'text-gray-400': !hasSelectedDate}">
44 - <path d="M16 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 44 + <path d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
45 - <path d="M8 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 45 + <path d="M16 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
46 - <path d="M3 10H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 46 + <path d="M8 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
47 - </svg> 47 + <path d="M3 10H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
48 + </svg>
49 + </div>
48 </div> 50 </div>
49 </div> 51 </div>
50 <!-- <div class="calendar-action"> 52 <!-- <div class="calendar-action">
......