diff --git a/Web/src/App.vue b/Web/src/App.vue index bdcf52b..c28633d 100644 --- a/Web/src/App.vue +++ b/Web/src/App.vue @@ -128,7 +128,9 @@ const handleTabClick = (path) => { height: 100%; width: 100%; position: relative; - margin-top: max(0px, calc(env(safe-area-inset-top, 0px) * 0.75)); + padding-top: max(0px, calc(env(safe-area-inset-top, 0px) * 0.75)); + box-sizing: border-box; + overflow: hidden; } /* TabBar 固定在底部 */ diff --git a/Web/src/assets/main.css b/Web/src/assets/main.css index 1547db8..1b19094 100644 --- a/Web/src/assets/main.css +++ b/Web/src/assets/main.css @@ -10,6 +10,10 @@ html, body { height: 100%; margin: 0; padding: 0; + overflow: hidden; /* 禁止 body 滚动 */ + position: fixed; /* 强制固定 body,防止 iOS 回弹 */ + left: 0; + top: 0; } body { @@ -24,7 +28,7 @@ body { font-weight: normal; width: 100%; height: 100%; - overflow-x: hidden; + overflow: hidden; /* 禁止 app 容器滚动 */ -webkit-overflow-scrolling: touch; } diff --git a/Web/src/styles/common.css b/Web/src/styles/common.css index 4370673..4a81dea 100644 --- a/Web/src/styles/common.css +++ b/Web/src/styles/common.css @@ -1,6 +1,8 @@ /* 通用页面容器样式 - 统一风格(灰色背景) */ .page-container { - min-height: 100vh; + height: 100%; + overflow-y: auto; + -webkit-overflow-scrolling: touch; background: #f7f8fa; padding-bottom: env(safe-area-inset-bottom, 0px); } @@ -170,10 +172,17 @@ .page-container-flex { display: flex; flex-direction: column; - height: 100vh; + height: 100%; /* 使用 100% 继承父容器高度,避免 100vh 导致的溢出 */ overflow: hidden; } +/* 修复嵌套使用 page-container-flex 时的布局问题 */ +.page-container-flex .page-container-flex { + height: auto; + flex: 1; + min-height: 0; +} + .page-container-flex :deep(.van-nav-bar) { flex-shrink: 0; } diff --git a/Web/src/views/LoginView.vue b/Web/src/views/LoginView.vue index d4b3b1e..d385a9e 100644 --- a/Web/src/views/LoginView.vue +++ b/Web/src/views/LoginView.vue @@ -64,7 +64,7 @@ const handleLogin = async () => {