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
<!--
* @Date: 2025-01-25 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-23 13:38:31
* @LastEditTime: 2026-01-23 13:43:28
* @FilePath: /mlaj/src/components/calendar/CollapsibleCalendar.vue
* @Description: 可折叠日历组件
-->
......@@ -28,23 +28,25 @@
<div class="calendar-content">
<div class="calendar-date-display" @click="expandCalendar">
<div class="calendar-date-main">{{ formattedCurrentDate }}</div>
<div class="calendar-weekday">{{ formattedWeekday }}</div>
<div
v-if="!isHeaderHidden"
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"
:class="[
hasSelectedDate
? 'text-green-600 bg-green-50 border-green-200 font-medium'
: 'text-gray-500 bg-white border-gray-200'
]"
>
<span>{{ toggleButtonText }}</span>
<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}">
<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"/>
<path d="M16 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 10H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="flex items-center gap-2">
<div class="calendar-weekday">{{ formattedWeekday }}</div>
<div
v-if="!isHeaderHidden"
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"
:class="[
hasSelectedDate
? 'text-green-600 bg-green-50 border-green-200 font-medium'
: 'text-gray-500 bg-white border-gray-200'
]"
>
<span>{{ toggleButtonText }}</span>
<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}">
<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"/>
<path d="M16 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 10H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</div>
<!-- <div class="calendar-action">
......