调整页面布局,修复滚动和高度问题
This commit is contained in:
@@ -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 固定在底部 */
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@ const handleLogin = async () => {
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
Reference in New Issue
Block a user