调整页面布局,修复滚动和高度问题
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 18s
Docker Build & Deploy / Deploy to Production (push) Successful in 5s

This commit is contained in:
孙诚
2025-12-29 11:14:29 +08:00
parent be4e303ba5
commit 35e3a82673
4 changed files with 20 additions and 5 deletions

View File

@@ -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 固定在底部 */

View File

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

View File

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

View File

@@ -64,7 +64,7 @@ const handleLogin = async () => {
<style scoped>
.login-container {
height: 100vh;
height: 100%;
display: flex;
align-items: center;
justify-content: center;