debugger
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 14s
Docker Build & Deploy / Deploy to Production (push) Successful in 6s

This commit is contained in:
孙诚
2025-12-25 17:28:06 +08:00
parent 239d9dcae3
commit da227d13ea
3 changed files with 38 additions and 8 deletions

View File

@@ -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;
}
</style>

View File

@@ -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 {

View File

@@ -572,7 +572,7 @@ onMounted(async () => {
.floating-search {
position: fixed;
bottom: 50px;
bottom: 90px;
left: 0;
right: 0;
z-index: 999;