|
|
@@ -50,6 +50,9 @@
|
|
|
<text v-if="day" class="day-text">{{ day }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 底部安全区域占位 -->
|
|
|
+ <view class="safe-area-placeholder"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -253,19 +256,28 @@ const clearDate = () => {
|
|
|
display: flex;
|
|
|
align-items: flex-end;
|
|
|
justify-content: center;
|
|
|
- z-index: 99999;
|
|
|
- padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ z-index: 99999 !important;
|
|
|
+ /* 确保在所有平台都能覆盖 TabBar */
|
|
|
+ padding-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.date-picker-popup {
|
|
|
width: 100%;
|
|
|
max-width: 600rpx;
|
|
|
- max-height: 80vh;
|
|
|
+ max-height: 60vh;
|
|
|
background: #ffffff;
|
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
|
padding: 32rpx;
|
|
|
- padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
|
|
|
+ padding-bottom: 32rpx;
|
|
|
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));
|
|
|
}
|
|
|
|
|
|
.picker-header {
|
|
|
@@ -335,6 +347,8 @@ const clearDate = () => {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(7, 1fr);
|
|
|
gap: 8rpx;
|
|
|
+ /* 确保网格底部有足够的内边距 */
|
|
|
+ padding-bottom: 16rpx;
|
|
|
}
|
|
|
|
|
|
.day-item {
|
|
|
@@ -379,4 +393,15 @@ const clearDate = () => {
|
|
|
.day-item.today.selected .day-text {
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
+
|
|
|
+/* 底部安全区域占位 */
|
|
|
+.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;
|
|
|
+}
|
|
|
</style>
|
