style(mobile-h5): add login page SCSS for scheme B layout

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zlwuandCursor committed 2026-08-10 14:41:37 +08:00
1 parent fd51a0bee4
commit da33a4182c
2 files changed
+186

No files matched your search

+1
View File
@@ -22,4 +22,5 @@
@import './styles/components/attach.scss';
@import './styles/components/flow.scss';
@import './styles/components/form-shell.scss';
@import './styles/components/login.scss';
</style>
+185
View File
@@ -0,0 +1,185 @@
.login-page {
min-height: 100vh;
padding: 96rpx 48rpx 64rpx;
box-sizing: border-box;
background:
radial-gradient(520rpx 320rpx at 8% -8%, rgba(10, 159, 109, 0.16), transparent 60%),
radial-gradient(440rpx 280rpx at 96% 4%, rgba(214, 163, 67, 0.14), transparent 55%),
linear-gradient(180deg, #eef6f2 0%, #f5f8f7 48%, #f3f6f5 100%);
}
.login-brand {
text-align: center;
margin-bottom: 44rpx;
}
.login-brand__mark {
width: 128rpx;
height: 128rpx;
margin: 0 auto 24rpx;
border-radius: 36rpx;
background: linear-gradient(145deg, var(--brand-green-dark), var(--brand-green));
color: #fff;
font-size: 52rpx;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 20rpx 48rpx rgba(8, 127, 87, 0.28);
}
.login-brand__title {
font-size: 44rpx;
font-weight: 650;
color: var(--text-primary);
letter-spacing: 0.03em;
}
.login-brand__sub {
margin-top: 16rpx;
font-size: 26rpx;
color: var(--text-muted);
}
.login-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 32rpx;
padding: 36rpx 32rpx 32rpx;
box-shadow: var(--shadow-soft);
}
.login-field {
margin-bottom: 28rpx;
}
.login-field__label {
display: block;
font-size: 24rpx;
color: var(--text-muted);
margin-bottom: 12rpx;
}
.login-field__box {
display: flex;
align-items: center;
height: 88rpx;
padding: 0 24rpx;
border: 1px solid var(--border);
border-radius: 20rpx;
background: #f8fbfa;
}
.login-field__box.is-focus {
border-color: var(--brand-green);
background: #fff;
box-shadow: 0 0 0 6rpx rgba(10, 159, 109, 0.12);
}
.login-field__box.is-error {
border-color: var(--danger);
}
.login-field__input {
flex: 1;
height: 88rpx;
font-size: 28rpx;
color: var(--text-primary);
}
.login-field__action {
font-size: 24rpx;
color: var(--brand-green);
padding: 12rpx 0 12rpx 16rpx;
}
.login-field__error {
margin-top: 12rpx;
font-size: 24rpx;
color: var(--danger);
}
.login-submit {
margin-top: 8rpx;
height: 88rpx;
border-radius: 24rpx;
background: var(--brand-green);
color: #fff;
font-size: 30rpx;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.login-submit.is-disabled {
opacity: 0.55;
}
.login-agree {
display: flex;
align-items: flex-start;
gap: 16rpx;
margin-top: 28rpx;
}
.login-agree__box {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
border: 3rpx solid var(--brand-green);
margin-top: 4rpx;
flex-shrink: 0;
box-sizing: border-box;
}
.login-agree__box.is-on {
background: var(--brand-green);
}
.login-agree__text {
flex: 1;
font-size: 24rpx;
color: var(--text-muted);
line-height: 1.45;
}
.login-agree__link {
color: var(--brand-green);
}
.login-divider {
display: flex;
align-items: center;
gap: 24rpx;
margin: 44rpx 0 28rpx;
font-size: 24rpx;
color: var(--text-muted);
}
.login-divider::before,
.login-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.login-wechat {
height: 88rpx;
border-radius: 24rpx;
border: 1px solid var(--border);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
font-size: 28rpx;
font-weight: 500;
color: var(--text-primary);
}
.login-wechat__icon {
width: 44rpx;
height: 44rpx;
}