feat(checkin): 动态调整日历高度以适应不同屏幕尺寸

添加响应式布局功能，根据窗口尺寸和设备类型计算日历高度
移除组件时清理事件监听器

 <!--
 <!--
   * @Date: 2025-05-29 15:34:17
   * @Date: 2025-05-29 15:34:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-13 14:12:53
+ * @LastEditTime: 2025-06-13 14:23:31
  * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
  * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
   * @Description: 文件描述
   * @Description: 文件描述
 -->
 -->
 <template>
 <template>
   <AppLayout :hasTitle="false">
   <AppLayout :hasTitle="false">
     <van-config-provider :theme-vars="themeVars">
     <van-config-provider :theme-vars="themeVars">
-      <van-calendar ref="myRefCalendar" :title="taskDetail.title" :poppable="false" :show-confirm="false" :style="{ height: '24rem' }"
+      <van-calendar ref="myRefCalendar" :title="taskDetail.title" :poppable="false" :show-confirm="false" :style="{ height: calendarHeight }"
         switch-mode="year-month" color="#4caf50" :formatter="formatter" row-height="50" :show-mark="false"
         switch-mode="year-month" color="#4caf50" :formatter="formatter" row-height="50" :show-mark="false"
         @select="onSelectDay"
         @select="onSelectDay"
         @click-subtitle="onClickSubtitle">
         @click-subtitle="onClickSubtitle">
@@ -163,7 +163,7 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref, onBeforeUnmount } from 'vue'
+import { ref, onBeforeUnmount, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 import { showConfirmDialog, showSuccessToast, showFailToast, showLoadingToast } from 'vant';
 import { showConfirmDialog, showSuccessToast, showFailToast, showLoadingToast } from 'vant';
 import AppLayout from "@/components/layout/AppLayout.vue";
 import AppLayout from "@/components/layout/AppLayout.vue";
@@ -181,13 +181,75 @@ useTitle(route.meta.title);
 
 
 const myRefCalendar = ref(null);
 const myRefCalendar = ref(null);
 
 
+// 窗口尺寸相关的响应式数据
+const windowHeight = ref(window.innerHeight);
+const windowWidth = ref(window.innerWidth);
+
+/**
+ * 动态计算日历高度
+ * 根据屏幕尺寸和设备类型自适应调整
+ */
+const calendarHeight = computed(() => {
+  // 获取可视窗口高度
+  const viewportHeight = windowHeight.value;
+
+  // 预留给其他内容的空间（头部、底部等）
+  const reservedSpace = 200; // 可根据实际需要调整
+
+  // 计算可用高度
+  const availableHeight = viewportHeight - reservedSpace;
+
+  // 设置最小和最大高度限制
+  const minHeight = 300; // 最小高度
+  const maxHeight = 500; // 最大高度
+
+  // 根据屏幕宽度调整高度比例
+  let heightRatio = 0.6; // 默认占可用高度的55%
+
+  if (windowWidth.value < 375) {
+    // 小屏手机
+    heightRatio = 0.45;
+  } else if (windowWidth.value < 414) {
+    // 中等屏幕手机
+    heightRatio = 0.42;
+  } else if (windowWidth.value >= 768) {
+    // 平板或更大屏幕
+    heightRatio = 0.35;
+  }
+
+  const calculatedHeight = Math.floor(availableHeight * heightRatio);
+
+  // 确保高度在合理范围内
+  const finalHeight = Math.max(minHeight, Math.min(maxHeight, calculatedHeight));
+
+  return `${finalHeight}px`;
+});
+
+/**
+ * 监听窗口尺寸变化
+ */
+const handleResize = () => {
+  windowHeight.value = window.innerHeight;
+  windowWidth.value = window.innerWidth;
+};
+
+// 组件挂载时添加事件监听
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+  // 监听屏幕方向变化（移动端）
+  window.addEventListener('orientationchange', () => {
+    // 延迟更新，等待方向变化完成
+    setTimeout(handleResize, 100);
+  });
+});
+
 // 存储所有视频播放器的引用
 // 存储所有视频播放器的引用
 const videoPlayers = ref([]);
 const videoPlayers = ref([]);
 
 
 // 存储所有音频播放器的引用
 // 存储所有音频播放器的引用
 const audioPlayers = ref([]);
 const audioPlayers = ref([]);
 
 
-// 组件卸载前清理播放器引用
+// 组件卸载前清理播放器引用和事件监听器
 onBeforeUnmount(() => {
 onBeforeUnmount(() => {
   // 停止所有视频和音频播放
   // 停止所有视频和音频播放
   if (videoPlayers.value) {
   if (videoPlayers.value) {
@@ -204,6 +266,9 @@ onBeforeUnmount(() => {
   if (videoPlayers.value) videoPlayers.value = [];
   if (videoPlayers.value) videoPlayers.value = [];
   if (audioPlayers.value) audioPlayers.value = [];
   if (audioPlayers.value) audioPlayers.value = [];
 
 
+  // 清理事件监听器
+  window.removeEventListener('resize', handleResize);
+  window.removeEventListener('orientationchange', handleResize);
 });
 });