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;
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user