debugger

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