{{ levelInfo.badgeIcon || '🌱' }}
{{ levelInfo.title || '健康探索者' }}
L{{ levelInfo.levelNum || 1 }}
{{ score }} 分
再{{ nextLevel.minScore - score }}分升级「{{ nextLevel.title }}」
已达最高等级！
.health-badge {
display: flex;
align-items: center;
gap: 16rpx;
padding: 20rpx 24rpx;
background: linear-gradient(135deg, $status-success-tint-2, #ECFDF5);
border-radius: 20rpx;
margin: 0 20rpx 16rpx 20rpx;
}
.badge-icon-wrap {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.badge-lv-1 { background: $status-success-soft; }
.badge-lv-2 { background: #A7F3D0; }
.badge-lv-3 { background: $status-warning-soft; }
.badge-lv-4 { background: $brand-primary-light-2; }
.badge-lv-5 { background: #FECDD3; }
.badge-icon { font-size: 40rpx; }
.badge-info { flex: 1; min-width: 0; }
.badge-title {
font-size: 28rpx;
font-weight: 700;
color: #065F46;
}
.badge-level-row {
display: flex;
align-items: center;
gap: 12rpx;
margin-top: 4rpx;
}
.badge-level {
font-size: 22rpx;
color: #047857;
font-weight: 600;
}
.badge-score {
font-size: 22rpx;
color: $facade-text-slate;
}
.badge-progress-bar {
height: 8rpx;
background: $status-success-soft;
border-radius: 999rpx;
overflow: hidden;
margin-top: 8rpx;
}
.badge-progress-fill {
height: 100%;
background: linear-gradient(90deg, $status-success, $status-success-light-3);
border-radius: 999rpx;
transition: width 0.5s ease;
}
.badge-next {
font-size: 20rpx;
color: $facade-text-slate;
margin-top: 4rpx;
display: block;
}