141 lines
2.3 KiB
SCSS
141 lines
2.3 KiB
SCSS
@import '../mixins.scss';
|
|
|
|
.form-page {
|
|
min-height: 100vh;
|
|
background: var(--bg-page, #ffffff);
|
|
padding-bottom: 176rpx;
|
|
}
|
|
|
|
.form-nav {
|
|
@include hero-green;
|
|
padding: 88rpx 16rpx 20rpx;
|
|
}
|
|
|
|
.form-section-title {
|
|
margin: 28rpx 32rpx 16rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
color: var(--text-muted, #6b7b74);
|
|
}
|
|
|
|
.form-tip {
|
|
margin: 16rpx 32rpx 0;
|
|
font-size: 22rpx;
|
|
color: var(--text-muted, #6b7b74);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.form-footer {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
gap: 20rpx;
|
|
padding: 24rpx 28rpx calc(24rpx + env(safe-area-inset-bottom));
|
|
background: rgba(255, 255, 255, 0.96);
|
|
border-top: 1rpx solid var(--border, #d8f3e5);
|
|
z-index: 20;
|
|
}
|
|
|
|
.form-footer .btn-flex {
|
|
flex: 1;
|
|
}
|
|
|
|
.home-header {
|
|
@include hero-green;
|
|
padding: 108rpx 32rpx 56rpx;
|
|
}
|
|
|
|
.home-header__top {
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.home-header .brand {
|
|
font-size: 24rpx;
|
|
opacity: 0.78;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.home-logout {
|
|
font-size: 24rpx;
|
|
color: var(--header-fg, #065f46);
|
|
opacity: 0.85;
|
|
padding: 8rpx 20rpx;
|
|
flex-shrink: 0;
|
|
border: 1rpx solid rgba(6, 95, 70, 0.35);
|
|
border-radius: 12rpx;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.home-header .hello {
|
|
font-size: 44rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.home-header .meta {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16rpx;
|
|
font-size: 24rpx;
|
|
opacity: 0.82;
|
|
}
|
|
|
|
.home-header .meta__left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
min-width: 0;
|
|
}
|
|
|
|
.home-header .meta .dot {
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
opacity: 0.45;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.home-body {
|
|
padding: 28rpx 24rpx 48rpx;
|
|
}
|
|
|
|
.panel {
|
|
@include surface-card;
|
|
padding: 28rpx 24rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.panel-hd {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 24rpx;
|
|
padding: 0 8rpx;
|
|
}
|
|
|
|
.panel-hd .panel-title {
|
|
font-size: 30rpx;
|
|
font-weight: 650;
|
|
color: var(--text-primary, #0f291e);
|
|
}
|
|
|
|
.panel-hd .hint {
|
|
font-size: 22rpx;
|
|
color: var(--text-muted, #5f7a6d);
|
|
}
|
|
|
|
.perm-banner {
|
|
padding: 20rpx 24rpx;
|
|
border-radius: 24rpx;
|
|
background: var(--barley-yellow-soft, #fffbeb);
|
|
border: 1rpx solid #fde68a;
|
|
font-size: 24rpx;
|
|
color: #a16207;
|
|
margin-bottom: 24rpx;
|
|
line-height: 1.45;
|
|
}
|