338 lines
7.0 KiB
Plaintext
338 lines
7.0 KiB
Plaintext
/* pages/login/login.wxss — 忠于 H5 原型，TDesign 组件定制 */
|
||
|
||
.page {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: linear-gradient(160deg, #dbeafe 0%, #eff6ff 45%, #e0f2fe 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
/* padding-top 由 JS statusBarHeight 动态设置，box-sizing 确保 padding 包含在 100vh 内 */
|
||
}
|
||
|
||
/* ---- 动态背景层 ---- */
|
||
.login-bg-layer {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ---- 装饰圆形 ---- */
|
||
.deco-circle {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
z-index: 0;
|
||
}
|
||
|
||
.deco-circle--1 {
|
||
width: 176rpx;
|
||
height: 176rpx;
|
||
background: radial-gradient(circle, var(--color-primary-shadow-minimal) 0%, transparent 70%);
|
||
top: 140rpx;
|
||
left: 56rpx;
|
||
opacity: 0.8;
|
||
animation: pulse-soft 3s ease-in-out infinite;
|
||
}
|
||
|
||
.deco-circle--2 {
|
||
width: 210rpx;
|
||
height: 210rpx;
|
||
background: radial-gradient(circle, rgba(103, 232, 249, 0.12) 0%, transparent 70%);
|
||
top: 280rpx;
|
||
right: 42rpx;
|
||
opacity: 0.8;
|
||
animation: pulse-soft 3s ease-in-out infinite 1s;
|
||
}
|
||
|
||
.deco-circle--3 {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
background: radial-gradient(circle, rgba(96, 165, 250, 0.12) 0%, transparent 70%);
|
||
bottom: 280rpx;
|
||
left: 84rpx;
|
||
opacity: 0.8;
|
||
animation: pulse-soft 3s ease-in-out infinite 0.5s;
|
||
}
|
||
|
||
/* ---- Hero 区域 ---- */
|
||
.hero {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 56rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* ---- Logo ---- */
|
||
.logo-wrap {
|
||
position: relative;
|
||
margin-bottom: 42rpx;
|
||
}
|
||
|
||
.logo-box {
|
||
width: 168rpx;
|
||
height: 168rpx;
|
||
border-radius: 42rpx;
|
||
background: linear-gradient(135deg, var(--color-primary), var(--primary-500));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 14rpx 42rpx var(--color-primary-shadow);
|
||
}
|
||
|
||
.logo-icon {
|
||
width: 98rpx;
|
||
height: 98rpx;
|
||
}
|
||
|
||
.logo-dot {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.logo-dot--tr {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
background: var(--primary-dot-cyan);
|
||
top: -8rpx;
|
||
right: -8rpx;
|
||
box-shadow: 0 4rpx 10rpx var(--primary-dot-cyan-shadow);
|
||
}
|
||
|
||
.logo-dot--bl {
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
background: var(--primary-dot-blue);
|
||
bottom: -14rpx;
|
||
left: -14rpx;
|
||
box-shadow: 0 4rpx 10rpx var(--primary-dot-blue-shadow);
|
||
}
|
||
|
||
/* ---- 应用名称 ---- */
|
||
.app-name {
|
||
font-size: 42rpx;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: 14rpx;
|
||
}
|
||
|
||
.app-desc {
|
||
font-size: 24rpx;
|
||
color: var(--text-secondary);
|
||
text-align: center;
|
||
line-height: 1.625;
|
||
margin-bottom: 56rpx;
|
||
}
|
||
|
||
/* ---- 功能亮点 ---- */
|
||
.features {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
background: rgba(255, 255, 255, 0.62);
|
||
border-radius: 32rpx;
|
||
padding: 40rpx 18rpx 36rpx;
|
||
margin-bottom: 42rpx;
|
||
box-shadow: 0 4rpx 32rpx rgba(59, 130, 246, 0.10), 0 1rpx 4rpx rgba(59, 130, 246, 0.07);
|
||
border: 1.5rpx solid rgba(255, 255, 255, 0.85);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.feature-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
border-radius: 22rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.feature-icon--primary { background: var(--color-primary-shadow-minimal); }
|
||
.feature-icon--success { background: var(--color-success-shadow-minimal); }
|
||
.feature-icon--warning { background: var(--color-warning-shadow-minimal); }
|
||
|
||
/* ---- 华丽 SVG 功能图标 ---- */
|
||
.feature-icon-svg {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: visible;
|
||
}
|
||
|
||
.feature-icon-svg--task {
|
||
background: linear-gradient(145deg, #e8f0fe 0%, #c7d9ff 100%);
|
||
box-shadow: 0 8rpx 24rpx rgba(79, 142, 247, 0.28), 0 2rpx 6rpx rgba(26, 95, 216, 0.15);
|
||
animation: icon-float 4s ease-in-out infinite;
|
||
}
|
||
|
||
.feature-icon-svg--board {
|
||
background: linear-gradient(145deg, #d1fae5 0%, #a7f3d0 100%);
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 200, 150, 0.28), 0 2rpx 6rpx rgba(0, 140, 106, 0.15);
|
||
animation: icon-float 4s ease-in-out infinite 1.3s;
|
||
}
|
||
|
||
.feature-icon-svg--ai {
|
||
background: linear-gradient(145deg, #fef3e2 0%, #fde0b8 100%);
|
||
box-shadow: 0 8rpx 24rpx rgba(255, 140, 66, 0.28), 0 2rpx 6rpx rgba(224, 90, 0, 0.15);
|
||
animation: icon-float 4s ease-in-out infinite 2.6s;
|
||
}
|
||
|
||
.feature-svg-img {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
}
|
||
|
||
@keyframes icon-float {
|
||
0%, 100% { transform: translateY(0) scale(1); }
|
||
40% { transform: translateY(-8rpx) scale(1.04); }
|
||
60% { transform: translateY(-6rpx) scale(1.03); }
|
||
}
|
||
|
||
.feature-text {
|
||
font-size: 24rpx;
|
||
color: var(--text-secondary);
|
||
font-weight: 600;
|
||
letter-spacing: 0.5rpx;
|
||
}
|
||
|
||
/* ---- 底部操作区 ---- */
|
||
.bottom-area {
|
||
width: 100%;
|
||
padding: 0 56rpx 70rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* TDesign Button 替换为原生 view 按钮，避免 TDesign 默认样式干扰 */
|
||
.login-btn-wrap {
|
||
width: 100%;
|
||
height: 84rpx;
|
||
border-radius: 22rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.wechat-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
|
||
.login-btn-text {
|
||
color: var(--color-white);
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 未勾选协议 → 灰色禁用态（忠于原型 btn-disabled） */
|
||
.login-btn--disabled {
|
||
background: var(--color-gray-4);
|
||
}
|
||
.login-btn--disabled .login-btn-text {
|
||
color: var(--color-white);
|
||
}
|
||
|
||
/* 勾选协议 → 蓝色渐变（忠于原型 from-primary to-blue-500） */
|
||
.login-btn--active {
|
||
background: linear-gradient(135deg, var(--color-primary), var(--primary-500));
|
||
box-shadow: 0 10rpx 28rpx var(--color-primary-shadow);
|
||
}
|
||
|
||
/* ---- 协议勾选 ---- */
|
||
.agreement {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
margin-top: 36rpx;
|
||
}
|
||
|
||
.checkbox {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
min-width: 28rpx;
|
||
min-height: 28rpx;
|
||
border: 2rpx solid var(--color-gray-4);
|
||
border-radius: 6rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 4rpx;
|
||
margin-right: 10rpx;
|
||
background: transparent;
|
||
flex-shrink: 0;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.checkbox--checked {
|
||
background: var(--color-primary);
|
||
border-color: var(--color-primary);
|
||
}
|
||
|
||
.agreement-text-wrap {
|
||
flex: 1;
|
||
font-size: 22rpx;
|
||
line-height: 1.625;
|
||
}
|
||
|
||
.agreement-text {
|
||
font-size: 22rpx;
|
||
color: var(--text-secondary);
|
||
line-height: 1.625;
|
||
}
|
||
|
||
.link {
|
||
color: var(--color-primary);
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
line-height: 1.625;
|
||
}
|
||
|
||
/* ---- 底部提示 ---- */
|
||
.footer-tip {
|
||
display: block;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 22rpx;
|
||
color: var(--text-disabled);
|
||
margin-top: 42rpx;
|
||
}
|
||
|
||
/* ---- 动画 ---- */
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-14rpx); }
|
||
}
|
||
|
||
.float-animation {
|
||
animation: float 4s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulse-soft {
|
||
0%, 100% { opacity: 0.4; }
|
||
50% { opacity: 0.8; }
|
||
}
|