From da227d13ea1c3ac484d7cca739035b22019fc99d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AD=99=E8=AF=9A?= Date: Thu, 25 Dec 2025 17:28:06 +0800 Subject: [PATCH] debugger --- Web/src/App.vue | 27 +++++++++++++++++++++------ Web/src/views/CalendarView.vue | 17 ++++++++++++++++- Web/src/views/TransactionsRecord.vue | 2 +- 3 files changed, 38 insertions(+), 8 deletions(-) diff --git a/Web/src/App.vue b/Web/src/App.vue index 7e28ff9..29ab1b6 100644 --- a/Web/src/App.vue +++ b/Web/src/App.vue @@ -35,10 +35,16 @@ const log = ref('') const updateInfo = () => { // 获取真实的视口高度(PWA 模式下准确) const vh = window.innerHeight + const safeAreaBottom = getComputedStyle(document.documentElement).getPropertyValue('padding-bottom') + // 设置 CSS 变量,让所有组件使用准确的视口高度 document.documentElement.style.setProperty('--vh', `${vh}px`) document.documentElement.style.setProperty('--vh-offset', `${vh}px`) + // 获取 TabBar 的实际高度 + const tabbar = document.querySelector('.van-tabbar') + const tabbarHeight = tabbar ? tabbar.offsetHeight : 0 + log.value = JSON.stringify({ innerHeight: window.innerHeight, outerHeight: window.outerHeight, @@ -50,6 +56,9 @@ const updateInfo = () => { } : null, cssVarVh: getComputedStyle(document.documentElement).getPropertyValue('--vh'), + tabbarHeight: tabbarHeight, + safeAreaInsetBottom: safeAreaBottom, + computedSpace: `${vh} - ${tabbarHeight} = ${vh - tabbarHeight}px`, }, null, 2) } @@ -126,13 +135,19 @@ const handleTabClick = (path) => { /* TabBar 固定在底部 */ :deep(.van-tabbar) { - position: fixed; - bottom: 0; + position: fixed !important; + bottom: 0 !important; left: 0; right: 0; - padding-bottom: 0 !important; - /* 移除可能的安全区域内边距 */ - padding-bottom: constant(safe-area-inset-bottom) !important; - padding-bottom: env(safe-area-inset-bottom) !important; + /* 重置所有 padding,然后只添加安全区域 */ + padding: 0 !important; + padding-bottom: env(safe-area-inset-bottom, 0px) !important; + height: 50px !important; + min-height: 50px !important; +} + +/* 确保 TabBar 项目居中 */ +:deep(.van-tabbar-item) { + padding: 0 !important; } diff --git a/Web/src/views/CalendarView.vue b/Web/src/views/CalendarView.vue index 18b5f98..d26e556 100644 --- a/Web/src/views/CalendarView.vue +++ b/Web/src/views/CalendarView.vue @@ -185,14 +185,29 @@ fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1) .calendar-container { /* 使用准确的视口高度减去 TabBar 高度(50px)和安全区域 */ height: calc(var(--vh, 100vh) - 50px - env(safe-area-inset-bottom, 0px)); + max-height: calc(var(--vh, 100vh) - 50px - env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; overflow: hidden; + margin: 0; + padding: 0; } .calendar-container :deep(.van-calendar) { - height: 100%; + height: 100% !important; + flex: 1; overflow: auto; + margin: 0; + padding: 0; +} + +/* 移除日历组件可能的底部 padding */ +.calendar-container :deep(.van-calendar__body) { + padding-bottom: 0 !important; +} + +.calendar-container :deep(.van-calendar__months) { + padding-bottom: 0 !important; } .date-transactions { diff --git a/Web/src/views/TransactionsRecord.vue b/Web/src/views/TransactionsRecord.vue index 1344d9f..2b0b32c 100644 --- a/Web/src/views/TransactionsRecord.vue +++ b/Web/src/views/TransactionsRecord.vue @@ -572,7 +572,7 @@ onMounted(async () => { .floating-search { position: fixed; - bottom: 50px; + bottom: 90px; left: 0; right: 0; z-index: 999;