兼容性修改

src/components/DateSelector.vue

@@ -11,8 +11,8 @@
     </view>
 
     <!-- 自定义日期选择弹窗 -->
-    <view v-if="showDatePicker" class="date-picker-mask" @tap="closeDatePicker">
-      <view class="date-picker-popup" @tap.stop>
+    <view v-if="showDatePicker" class="date-picker-mask" @tap="closeDatePicker" @touchmove.stop.prevent>
+      <view class="date-picker-popup" @tap.stop @touchmove.stop>
         <view class="picker-header">
           <text class="picker-cancel" @tap="closeDatePicker">取消</text>
           <text class="picker-title">选择日期</text>
@@ -102,11 +102,25 @@ const openDatePicker = () => {
     tempDay.value = 0
   }
   showDatePicker.value = true
+
+  // 锁定页面滚动
+  // #ifdef H5
+  document.body.style.overflow = 'hidden'
+  document.body.style.position = 'fixed'
+  document.body.style.width = '100%'
+  // #endif
 }
 
 // 关闭日期选择器
 const closeDatePicker = () => {
   showDatePicker.value = false
+
+  // 恢复页面滚动
+  // #ifdef H5
+  document.body.style.overflow = ''
+  document.body.style.position = ''
+  document.body.style.width = ''
+  // #endif
 }
 
 // 上一个月
@@ -186,6 +200,13 @@ const confirmDate = () => {
   selectedDate.value = dateStr
   showDatePicker.value = false
 
+  // 恢复页面滚动
+  // #ifdef H5
+  document.body.style.overflow = ''
+  document.body.style.position = ''
+  document.body.style.width = ''
+  // #endif
+
   emit('dateChange', dateStr)
 }
 
@@ -257,27 +278,36 @@ const clearDate = () => {
   align-items: flex-end;
   justify-content: center;
   z-index: 99999 !important;
-  /* 确保在所有平台都能覆盖 TabBar */
-  padding-bottom: 0;
+  box-sizing: border-box;
+  /* 阻止触摸事件穿透 */
+  overflow: hidden;
+  touch-action: none;
 }
 
 .date-picker-popup {
   width: 100%;
   max-width: 600rpx;
-  max-height: 60vh;
   background: #ffffff;
   border-radius: 24rpx 24rpx 0 0;
   padding: 32rpx;
-  padding-bottom: 32rpx;
+  padding-bottom: calc(32rpx + 120rpx + constant(safe-area-inset-bottom));
+  padding-bottom: calc(32rpx + 120rpx + env(safe-area-inset-bottom));
   overflow-y: auto;
   box-sizing: border-box;
   position: relative;
   z-index: 100000 !important;
-  /* 关键：为底部留出足够空间，避免被 TabBar 遮挡 */
-  margin-bottom: 120rpx;
-  /* iOS 安全区域额外处理 */
-  margin-bottom: calc(120rpx + constant(safe-area-inset-bottom));
-  margin-bottom: calc(120rpx + env(safe-area-inset-bottom));
+  /* 限制最大高度，确保不会太高 */
+  max-height: 65vh;
+  /* 隐藏滚动条 */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+  /* 允许弹窗内部滚动 */
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-y;
+}
+
+.date-picker-popup::-webkit-scrollbar {
+  display: none; /* Chrome/Safari/Opera */
 }
 
 .picker-header {
@@ -347,8 +377,8 @@ const clearDate = () => {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 8rpx;
-  /* 确保网格底部有足够的内边距 */
-  padding-bottom: 16rpx;
+  /* 确保网格底部有足够的内边距，让最后一行日期完全可见 */
+  padding-bottom: 80rpx;
 }
 
 .day-item {
@@ -396,12 +426,7 @@ const clearDate = () => {
 
 /* 底部安全区域占位 */
 .safe-area-placeholder {
-  /* 基础高度，确保最后一行日期可见 */
-  height: 80rpx;
-  /* iOS 设备额外增加安全区域高度 */
-  height: calc(80rpx + constant(safe-area-inset-bottom));
-  height: calc(80rpx + env(safe-area-inset-bottom));
-  /* 确保至少有最小高度 */
-  min-height: 80rpx;
+  /* 移除占位元素，改用 padding-bottom 处理 */
+  height: 0;
 }
 </style>

src/components/HistorySearchCard.vue

@@ -354,7 +354,8 @@ onMounted(() => {
   background: #ffffff;
   border-radius: 32rpx 32rpx 0 0;
   padding: 32rpx;
-  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
+  padding-bottom: calc(32rpx + 120rpx + constant(safe-area-inset-bottom));
+  padding-bottom: calc(32rpx + 120rpx + env(safe-area-inset-bottom));
 }
 
 .picker-header {