{{ steps[currentStep].icon }}
{{ steps[currentStep].title }}
{{ steps[currentStep].desc }}
{{ currentStep < steps.length - 1 ? '下一步' : '开始体验！' }}
/* ============================================================
OnboardingGuide — 首次登录引导浮层
设计体系：统一使用 uni.scss design tokens
============================================================ */
.onboarding-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9998;
animation: fadeIn 0.25s ease;
}
.onboarding-card {
width: 640rpx;
min-height: 680rpx;
background: var(--surface, $app-surface);
border-radius: var(--radius-xl, 32rpx);
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
box-shadow: var(--shadow-lg, 0 8rpx 32rpx rgba(249,115,22,0.10));
animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 顶部品牌装饰条 — 暖珊瑚色 */
.onboarding-topbar {
width: 100%;
height: 12rpx;
background: var(--color-primary, $brand-primary);
flex-shrink: 0;
}
/* ============================================================
内容区 — flex 居中，带淡入动画
============================================================ */
.onboarding-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80rpx 56rpx 48rpx;
animation: fadeIn 0.3s ease;
}
.onboarding-icon {
font-size: 80rpx;
margin-bottom: 32rpx;
display: block;
}
.onboarding-title {
font-size: 36rpx;
font-weight: 700;
color: var(--text, $uni-text-color);
text-align: center;
margin-bottom: 20rpx;
display: block;
line-height: 1.3;
}
.onboarding-desc {
font-size: 28rpx;
color: var(--text-secondary, $uni-text-color-secondary);
text-align: center;
line-height: 1.6;
display: block;
padding: 0 16rpx;
}
/* ============================================================
介绍步骤 — 开场身份定义页
============================================================ */
.onboarding-content--intro {
padding: 64rpx 56rpx 48rpx;
}
.onboarding-title--intro {
font-size: 32rpx;
font-weight: 800;
color: var(--color-primary, $brand-primary);
line-height: 1.4;
}
/* ============================================================
步进器圆点
============================================================ */
.onboarding-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
padding: 0 56rpx 40rpx;
flex-shrink: 0;
}
.dot {
width: 14rpx;
height: 14rpx;
border-radius: 50%;
background: var(--border, $uni-border-color);
transition: background 0.3s ease, transform 0.3s ease;
}
.dot.active {
background: var(--color-primary, $brand-primary);
transform: scale(1.3);
}
/* ============================================================
底部按钮
============================================================ */
.onboarding-action {
width: 100%;
padding: 0 56rpx 48rpx;
flex-shrink: 0;
box-sizing: border-box;
}
.onboarding-btn {
width: 100%;
height: 88rpx;
border-radius: 999rpx;
background: var(--color-primary, $brand-primary);
color: $app-surface;
font-size: 32rpx;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease, transform 0.15s ease;
box-shadow: 0 4rpx 16rpx rgba(249,115,22,0.25);
}
.onboarding-btn:active {
opacity: 0.85;
transform: scale(0.97);
}
/* 最后一步：暖珊瑚色按钮 */
.onboarding-btn--last {
background: var(--color-primary, $brand-primary);
box-shadow: 0 4rpx 16rpx rgba(249, 115, 22, 0.30);
}