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:
@@ -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: center;
|
align-items: flex-start;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 40rpx;
|
padding: 18vh 40rpx;
|
||||||
padding-top: calc(40rpx + constant(safe-area-inset-top));
|
padding-top: calc(18vh + constant(safe-area-inset-top));
|
||||||
padding-top: calc(40rpx + env(safe-area-inset-top));
|
padding-top: calc(18vh + env(safe-area-inset-top));
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-card {
|
.login-card {
|
||||||
@@ -212,56 +212,57 @@ const handleLogin = async () => {
|
|||||||
backdrop-filter: blur(40rpx);
|
backdrop-filter: blur(40rpx);
|
||||||
border: 1px solid rgba(168, 85, 247, 0.15);
|
border: 1px solid rgba(168, 85, 247, 0.15);
|
||||||
border-radius: 48rpx;
|
border-radius: 48rpx;
|
||||||
padding: 64rpx 40rpx;
|
padding: 48rpx 40rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 64rpx;
|
margin-bottom: 48rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 48rpx;
|
font-size: 42rpx;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: rgba(255, 255, 255, 0.9);
|
color: rgba(255, 255, 255, 0.9);
|
||||||
letter-spacing: 6rpx;
|
letter-spacing: 6rpx;
|
||||||
margin-bottom: 16rpx;
|
margin-bottom: 12rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 28rpx;
|
font-size: 24rpx;
|
||||||
color: rgba(255, 255, 255, 0.4);
|
color: rgba(255, 255, 255, 0.4);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
margin-bottom: 48rpx;
|
margin-bottom: 40rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-group {
|
.input-group {
|
||||||
margin-bottom: 32rpx;
|
margin-bottom: 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-label {
|
.input-label {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 18rpx;
|
font-size: 18rpx;
|
||||||
color: rgba(255, 255, 255, 0.35);
|
color: rgba(255, 255, 255, 0.35);
|
||||||
margin-bottom: 16rpx;
|
margin-bottom: 12rpx;
|
||||||
letter-spacing: 4rpx;
|
letter-spacing: 4rpx;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.glass-input {
|
.glass-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 92rpx;
|
height: 80rpx;
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: rgba(255, 255, 255, 0.05);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
padding: 0 32rpx;
|
padding: 0 28rpx;
|
||||||
color: #F3E8FF;
|
color: #F3E8FF;
|
||||||
font-size: 28rpx;
|
font-size: 26rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.glass-input::placeholder {
|
.glass-input::placeholder {
|
||||||
@@ -283,13 +284,13 @@ const handleLogin = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.code-btn {
|
.code-btn {
|
||||||
width: 220rpx;
|
width: 200rpx;
|
||||||
height: 92rpx;
|
height: 80rpx;
|
||||||
background: linear-gradient(135deg, rgba(147, 51, 234, 0.5), rgba(124, 58, 237, 0.4));
|
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: 1px solid rgba(168, 85, 247, 0.4);
|
||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
color: rgba(255, 255, 255, 0.95);
|
color: rgba(255, 255, 255, 0.95);
|
||||||
font-size: 22rpx;
|
font-size: 20rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -316,18 +317,18 @@ const handleLogin = async () => {
|
|||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100rpx;
|
height: 88rpx;
|
||||||
background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
|
background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
|
||||||
border-radius: 32rpx;
|
border-radius: 32rpx;
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 30rpx;
|
font-size: 28rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border: none;
|
border: none;
|
||||||
box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
|
box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
|
||||||
margin-bottom: 32rpx;
|
margin-bottom: 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary.disabled {
|
.btn-primary.disabled {
|
||||||
|
|||||||
Reference in New Issue
Block a user