Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
afd81edc 1 parent a783768c

refactor(页面布局): 重构打卡页面布局为固定日历和可滚动内容区域 

将日历组件改为固定定位，内容区域改为可滚动布局
动态计算日历高度并设置内容区域margin-top
移除日历背景样式以保持整体设计一致
Expand all
Inline Side-by-side
Showing 2 changed files with 4 additions and 4 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: 2025-09-24 22:41:07 4 + * @LastEditTime: 2025-09-25 09:37:57
5 * @FilePath: /mlaj/src/components/ui/CollapsibleCalendar.vue 5 * @FilePath: /mlaj/src/components/ui/CollapsibleCalendar.vue
6 * @Description: 可折叠日历组件 6 * @Description: 可折叠日历组件
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="collapsible-calendar"> 9 + <div class="collapsible-calendar ">
10 <!-- 折叠状态显示 --> 10 <!-- 折叠状态显示 -->
11 <div v-if="!isExpanded" class="calendar-collapsed" @click="expandCalendar"> 11 <div v-if="!isExpanded" class="calendar-collapsed" @click="expandCalendar">
12 <div class="calendar-header"> 12 <div class="calendar-header">
...@@ -165,8 +165,8 @@ defineExpose({ ...@@ -165,8 +165,8 @@ defineExpose({
165 } 165 }
166 166
167 .calendar-collapsed { 167 .calendar-collapsed {
168 - background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%); 168 + // background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
169 - border-radius: 16px; 169 + // border-radius: 16px;
170 padding: 20px; 170 padding: 20px;
171 box-shadow: 0 4px 20px rgba(76, 175, 80, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06); 171 box-shadow: 0 4px 20px rgba(76, 175, 80, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
172 cursor: pointer; 172 cursor: pointer;
......
This diff is collapsed. Click to expand it.