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

将日历组件改为固定定位，内容区域改为可滚动布局
动态计算日历高度并设置内容区域margin-top
移除日历背景样式以保持整体设计一致

 <!--
  * @Date: 2025-01-25 15:34:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-24 22:41:07
+ * @LastEditTime: 2025-09-25 09:37:57
  * @FilePath: /mlaj/src/components/ui/CollapsibleCalendar.vue
  * @Description: 可折叠日历组件
 -->
 <template>
-    <div class="collapsible-calendar">
+    <div class="collapsible-calendar ">
         <!-- 折叠状态显示 -->
         <div v-if="!isExpanded" class="calendar-collapsed" @click="expandCalendar">
             <div class="calendar-header">
@@ -165,8 +165,8 @@ defineExpose({
 }
 
 .calendar-collapsed {
-    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
-    border-radius: 16px;
+    // background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
+    // border-radius: 16px;
     padding: 20px;
     box-shadow: 0 4px 20px rgba(76, 175, 80, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
     cursor: pointer;