style: 优化登录页面布局(方案 A - 紧凑型)

布局调整:
- 内容区域改为 flex-start 对齐,从顶部 18vh 处开始
- 登录卡片内边距 64rpx → 48rpx
- 标题区域底部间距 64rpx → 48rpx

尺寸优化:
- 标题字号 48rpx → 42rpx
- 副标题字号 28rpx → 24rpx
- 输入框高度 92rpx → 80rpx
- 输入框内边距 32rpx → 28rpx
- 输入框字号 28rpx → 26rpx
- 验证码按钮 220rpx×92rpx → 200rpx×80rpx
- 登录按钮高度 100rpx → 88rpx
- 登录按钮字号 30rpx → 28rpx

间距优化:
- 表单底部间距 48rpx → 40rpx
- 输入组间距 32rpx → 24rpx
- 标签底部间距 16rpx → 12rpx
- 登录按钮底部间距 32rpx → 24rpx

其他:
- 输入框添加 box-sizing: border-box 防止溢出

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-07 18:41:56 +08:00
parent ff99c8633e
commit 103ec9fa32
+22 -21
View File
@@ -198,11 +198,11 @@ const handleLogin = async () => {
z-index: 1;
min-height: 100vh;
display: flex;
align-items: center;
align-items: flex-start;
justify-content: center;
padding: 40rpx;
padding-top: calc(40rpx + constant(safe-area-inset-top));
padding-top: calc(40rpx + env(safe-area-inset-top));
padding: 18vh 40rpx;
padding-top: calc(18vh + constant(safe-area-inset-top));
padding-top: calc(18vh + env(safe-area-inset-top));
}
.login-card {
@@ -212,56 +212,57 @@ const handleLogin = async () => {
backdrop-filter: blur(40rpx);
border: 1px solid rgba(168, 85, 247, 0.15);
border-radius: 48rpx;
padding: 64rpx 40rpx;
padding: 48rpx 40rpx;
}
.header {
text-align: center;
margin-bottom: 64rpx;
margin-bottom: 48rpx;
}
.title {
display: block;
font-size: 48rpx;
font-size: 42rpx;
font-weight: 300;
color: rgba(255, 255, 255, 0.9);
letter-spacing: 6rpx;
margin-bottom: 16rpx;
margin-bottom: 12rpx;
}
.subtitle {
display: block;
font-size: 28rpx;
font-size: 24rpx;
color: rgba(255, 255, 255, 0.4);
font-style: italic;
}
.form {
margin-bottom: 48rpx;
margin-bottom: 40rpx;
}
.input-group {
margin-bottom: 32rpx;
margin-bottom: 24rpx;
}
.input-label {
display: block;
font-size: 18rpx;
color: rgba(255, 255, 255, 0.35);
margin-bottom: 16rpx;
margin-bottom: 12rpx;
letter-spacing: 4rpx;
text-transform: uppercase;
}
.glass-input {
width: 100%;
height: 92rpx;
height: 80rpx;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24rpx;
padding: 0 32rpx;
padding: 0 28rpx;
color: #F3E8FF;
font-size: 28rpx;
font-size: 26rpx;
box-sizing: border-box;
}
.glass-input::placeholder {
@@ -283,13 +284,13 @@ const handleLogin = async () => {
}
.code-btn {
width: 220rpx;
height: 92rpx;
width: 200rpx;
height: 80rpx;
background: linear-gradient(135deg, rgba(147, 51, 234, 0.5), rgba(124, 58, 237, 0.4));
border: 1px solid rgba(168, 85, 247, 0.4);
border-radius: 24rpx;
color: rgba(255, 255, 255, 0.95);
font-size: 22rpx;
font-size: 20rpx;
display: flex;
align-items: center;
justify-content: center;
@@ -316,18 +317,18 @@ const handleLogin = async () => {
.btn-primary {
width: 100%;
height: 100rpx;
height: 88rpx;
background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
border-radius: 32rpx;
color: white;
font-weight: 600;
font-size: 30rpx;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
border: none;
box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
margin-bottom: 32rpx;
margin-bottom: 24rpx;
}
.btn-primary.disabled {