style: 优化登录框垂直位置(方案 C)
修改思路:垂直居中 + 向上偏移,避免底部留白过多 修改内容: - .content 改回垂直居中 (align-items: center) - .content 顶部留白改为固定 40rpx(安全区域) - .login-card 添加 transform: translateY(-12%) 向上偏移 12% 效果: - 登录框视觉上移,不再过于靠顶部 - 底部不会有多余空白 - 在各种屏幕尺寸下自动适配 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -198,11 +198,11 @@ const handleLogin = async () => {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 25vh 40rpx;
|
padding: 40rpx;
|
||||||
padding-top: calc(25vh + constant(safe-area-inset-top));
|
padding-top: calc(40rpx + constant(safe-area-inset-top));
|
||||||
padding-top: calc(25vh + env(safe-area-inset-top));
|
padding-top: calc(40rpx + env(safe-area-inset-top));
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-card {
|
.login-card {
|
||||||
@@ -214,6 +214,7 @@ const handleLogin = async () => {
|
|||||||
border-radius: 48rpx;
|
border-radius: 48rpx;
|
||||||
padding: 48rpx 32rpx;
|
padding: 48rpx 32rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
transform: translateY(-12%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
|||||||
Reference in New Issue
Block a user