191 lines
2.9 KiB
Plaintext
191 lines
2.9 KiB
Plaintext
/* 登录页面样式 */
|
|
.login-page {
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg, #E8C3D4 0%, #f5e6ed 50%, #fff 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 背景装饰 */
|
|
.bg-decoration {
|
|
position: absolute;
|
|
top: -200rpx;
|
|
right: -200rpx;
|
|
width: 600rpx;
|
|
height: 600rpx;
|
|
background: radial-gradient(circle, rgba(145, 69, 132, 0.1) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* 导航栏 */
|
|
.nav-bar {
|
|
position: relative;
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 32rpx;
|
|
margin-top: 88rpx;
|
|
}
|
|
|
|
.back-btn {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.back-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
/* 主内容区 */
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 120rpx 64rpx 80rpx;
|
|
}
|
|
|
|
/* Logo区域 */
|
|
.logo-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 160rpx;
|
|
}
|
|
|
|
.logo-wrapper {
|
|
margin-bottom: 48rpx;
|
|
}
|
|
|
|
.logo-circle {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
}
|
|
|
|
.app-name {
|
|
font-size: 64rpx;
|
|
font-weight: bold;
|
|
color: #914584;
|
|
margin-bottom: 16rpx;
|
|
letter-spacing: 8rpx;
|
|
}
|
|
|
|
.app-slogan {
|
|
font-size: 28rpx;
|
|
color: #717182;
|
|
}
|
|
|
|
/* 登录按钮区域 */
|
|
.login-section {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 协议勾选区域 */
|
|
.agreement-section {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 40rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.checkbox-wrap {
|
|
padding: 8rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.checkbox {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border: 3rpx solid #d1d5db;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #fff;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.checkbox.checked {
|
|
background: linear-gradient(135deg, #914584 0%, #B378FE 100%);
|
|
border-color: #914584;
|
|
}
|
|
|
|
.check-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.agreement-text {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
line-height: 48rpx;
|
|
}
|
|
|
|
.agreement-label {
|
|
font-size: 26rpx;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.agreement-link {
|
|
font-size: 26rpx;
|
|
color: #914584;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.login-btn {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
background: linear-gradient(135deg, #07C160 0%, #2AAE67 100%);
|
|
border-radius: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16rpx;
|
|
border: none;
|
|
box-shadow: 0 16rpx 40rpx rgba(7, 193, 96, 0.3);
|
|
}
|
|
|
|
.login-btn::after {
|
|
border: none;
|
|
}
|
|
|
|
.login-btn.loading {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.login-btn.disabled {
|
|
opacity: 0.5;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-icon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
.btn-text {
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
letter-spacing: 2rpx;
|
|
white-space: nowrap;
|
|
}
|