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:
2026-03-07 18:52:11 +08:00
parent 7e2a3768fd
commit 3a004cf704
+5 -4
View File
@@ -198,11 +198,11 @@ const handleLogin = async () => {
z-index: 1;
min-height: 100vh;
display: flex;
align-items: flex-start;
align-items: center;
justify-content: center;
padding: 25vh 40rpx;
padding-top: calc(25vh + constant(safe-area-inset-top));
padding-top: calc(25vh + env(safe-area-inset-top));
padding: 40rpx;
padding-top: calc(40rpx + constant(safe-area-inset-top));
padding-top: calc(40rpx + env(safe-area-inset-top));
}
.login-card {
@@ -214,6 +214,7 @@ const handleLogin = async () => {
border-radius: 48rpx;
padding: 48rpx 32rpx;
box-sizing: border-box;
transform: translateY(-12%);
}
.header {