|
|
@@ -212,71 +212,80 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-.screen-container { min-height: 100vh; background: linear-gradient(180deg, #F0F4FF 0%, #FFFFFF 100%); padding-bottom: 40rpx; }
|
|
|
+<style scoped lang="scss">
|
|
|
+// ===== 页面级局部调色板（单页专有色阶；同值才映射全局令牌，约定见 uni.scss §14） =====
|
|
|
+$c-tint-blue: #F0F4FF; // 容器渐变起点（蓝灰浅底）
|
|
|
+$c-tint-violet-soft:#F8F6FF; // 题目卡/选中项浅底（violet 淡档）
|
|
|
+$c-border-radio: #D0D0D0; // 单选框未选中描边
|
|
|
+$c-risk-ink: #E53E3E; // 风险条目文字（red-600）
|
|
|
+$c-crisis-from: #FF6B6B; // 危机横幅渐变起点（red-400）
|
|
|
+// 严重程度四级 ramp：值与全局 $status-success/$dim-wealth/$dim-body/$status-danger 同值，
|
|
|
+// 按「同值映射全局」纪律直接引用全局令牌（若后续建 $severity-* 语义族再收敛）
|
|
|
+
|
|
|
+.screen-container { min-height: 100vh; background: linear-gradient(180deg, $c-tint-blue 0%, $app-surface 100%); padding-bottom: 40rpx; }
|
|
|
.screen-header { padding: 40rpx 32rpx 20rpx; }
|
|
|
-.screen-title { font-size: 36rpx; font-weight: 700; color: #333; display: block; }
|
|
|
-.screen-subtitle { font-size: 26rpx; color: #999; margin-top: 8rpx; display: block; }
|
|
|
-.section { margin: 20rpx 32rpx; background: #fff; border-radius: 20rpx; padding: 28rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04); }
|
|
|
-.scale-card { display: flex; align-items: center; padding: 24rpx; background: #FAFAFA; border-radius: 16rpx; margin-bottom: 16rpx; gap: 20rpx; }
|
|
|
+.screen-title { font-size: 36rpx; font-weight: 700; color: $facade-text-strong; display: block; }
|
|
|
+.screen-subtitle { font-size: 26rpx; color: $facade-text-muted; margin-top: 8rpx; display: block; }
|
|
|
+.section { margin: 20rpx 32rpx; background: $app-surface; border-radius: 20rpx; padding: 28rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04); }
|
|
|
+.scale-card { display: flex; align-items: center; padding: 24rpx; background: $facade-fill-ghost; border-radius: 16rpx; margin-bottom: 16rpx; gap: 20rpx; }
|
|
|
.scale-icon-wrap { width: 72rpx; height: 72rpx; border-radius: 36rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
|
.scale-icon { font-size: 36rpx; }
|
|
|
.scale-info { flex: 1; }
|
|
|
-.scale-name { font-size: 28rpx; font-weight: 600; color: #333; display: block; }
|
|
|
-.scale-desc { font-size: 22rpx; color: #999; margin-top: 4rpx; display: block; }
|
|
|
-.scale-arrow { font-size: 28rpx; color: #ccc; }
|
|
|
+.scale-name { font-size: 28rpx; font-weight: 600; color: $facade-text-strong; display: block; }
|
|
|
+.scale-desc { font-size: 22rpx; color: $facade-text-muted; margin-top: 4rpx; display: block; }
|
|
|
+.scale-arrow { font-size: 28rpx; color: $facade-text-ghost; }
|
|
|
.quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16rpx; }
|
|
|
-.quiz-title { font-size: 28rpx; font-weight: 600; color: #333; }
|
|
|
-.quiz-progress { font-size: 24rpx; color: #999; }
|
|
|
-.progress-track { height: 6rpx; background: #F0F0F0; border-radius: 3rpx; margin-bottom: 24rpx; overflow: hidden; }
|
|
|
-.progress-fill { height: 100%; background: linear-gradient(90deg, #6366F1, #8B5CF6); border-radius: 3rpx; transition: width 0.3s; }
|
|
|
-.question-card { background: #F8F6FF; border-radius: 16rpx; padding: 24rpx; margin-bottom: 24rpx; }
|
|
|
-.question-num { font-size: 22rpx; color: #8B5CF6; font-weight: 600; display: block; margin-bottom: 8rpx; }
|
|
|
-.question-text { font-size: 30rpx; color: #333; line-height: 1.5; }
|
|
|
+.quiz-title { font-size: 28rpx; font-weight: 600; color: $facade-text-strong; }
|
|
|
+.quiz-progress { font-size: 24rpx; color: $facade-text-muted; }
|
|
|
+.progress-track { height: 6rpx; background: $facade-fill; border-radius: 3rpx; margin-bottom: 24rpx; overflow: hidden; }
|
|
|
+.progress-fill { height: 100%; background: linear-gradient(90deg, $dim-wisdom, $facade-violet); border-radius: 3rpx; transition: width 0.3s; }
|
|
|
+.question-card { background: $c-tint-violet-soft; border-radius: 16rpx; padding: 24rpx; margin-bottom: 24rpx; }
|
|
|
+.question-num { font-size: 22rpx; color: $facade-violet; font-weight: 600; display: block; margin-bottom: 8rpx; }
|
|
|
+.question-text { font-size: 30rpx; color: $facade-text-strong; line-height: 1.5; }
|
|
|
.options-list { display: flex; flex-direction: column; gap: 12rpx; }
|
|
|
-.option-btn { display: flex; align-items: center; padding: 20rpx 24rpx; border-radius: 14rpx; border: 2rpx solid #F0F0F0; gap: 16rpx; }
|
|
|
-.option-active { border-color: #8B5CF6; background: #F8F6FF; }
|
|
|
-.option-radio { width: 40rpx; height: 40rpx; border-radius: 20rpx; border: 3rpx solid #D0D0D0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
|
-.radio-checked { border-color: #8B5CF6; }
|
|
|
-.radio-dot { width: 22rpx; height: 22rpx; border-radius: 11rpx; background: #8B5CF6; }
|
|
|
-.option-text { font-size: 28rpx; color: #444; }
|
|
|
-.option-active .option-text { color: #333; font-weight: 500; }
|
|
|
+.option-btn { display: flex; align-items: center; padding: 20rpx 24rpx; border-radius: 14rpx; border: 2rpx solid $facade-fill; gap: 16rpx; }
|
|
|
+.option-active { border-color: $facade-violet; background: $c-tint-violet-soft; }
|
|
|
+.option-radio { width: 40rpx; height: 40rpx; border-radius: 20rpx; border: 3rpx solid $c-border-radio; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
|
+.radio-checked { border-color: $facade-violet; }
|
|
|
+.radio-dot { width: 22rpx; height: 22rpx; border-radius: 11rpx; background: $facade-violet; }
|
|
|
+.option-text { font-size: 28rpx; color: $facade-text-deep-2; }
|
|
|
+.option-active .option-text { color: $facade-text-strong; font-weight: 500; }
|
|
|
.quiz-nav { display: flex; gap: 16rpx; margin-top: 32rpx; }
|
|
|
.nav-btn { flex: 1; height: 80rpx; line-height: 80rpx; border-radius: 40rpx; font-size: 28rpx; text-align: center; }
|
|
|
-.prev-btn { background: #F0F0F0; color: #666; }
|
|
|
-.next-btn { background: #6366F1; color: #fff; }
|
|
|
-.submit-btn { background: linear-gradient(135deg, #6366F1, #8B5CF6); color: #fff; }
|
|
|
+.prev-btn { background: $facade-fill; color: $facade-text-body; }
|
|
|
+.next-btn { background: $dim-wisdom; color: $app-surface; }
|
|
|
+.submit-btn { background: linear-gradient(135deg, $dim-wisdom, $facade-violet); color: $app-surface; }
|
|
|
.result-header { display: flex; flex-direction: column; align-items: center; padding: 20rpx 0; }
|
|
|
-.result-type { font-size: 24rpx; color: #999; margin-bottom: 16rpx; }
|
|
|
+.result-type { font-size: 24rpx; color: $facade-text-muted; margin-bottom: 16rpx; }
|
|
|
.result-score-circle { width: 120rpx; height: 120rpx; border-radius: 60rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 12rpx; }
|
|
|
-.result-score { font-size: 48rpx; font-weight: 700; color: #fff; line-height: 1; }
|
|
|
+.result-score { font-size: 48rpx; font-weight: 700; color: $app-surface; line-height: 1; }
|
|
|
.result-score-label { font-size: 20rpx; color: rgba(255,255,255,0.8); margin-top: 2rpx; }
|
|
|
.result-severity { font-size: 30rpx; font-weight: 600; }
|
|
|
-.severity-good { background: #10B981; color: #10B981; }
|
|
|
-.severity-mild { background: #F59E0B; color: #F59E0B; }
|
|
|
-.severity-moderate { background: #FF8C42; color: #FF8C42; }
|
|
|
-.severity-severe { background: #EF4444; color: #EF4444; }
|
|
|
-.result-score-circle.severity-good { background: #10B981; }
|
|
|
-.result-score-circle.severity-mild { background: #F59E0B; }
|
|
|
-.result-score-circle.severity-moderate { background: #FF8C42; }
|
|
|
-.result-score-circle.severity-severe { background: #EF4444; }
|
|
|
-.suggestion-card { background: #F0FFF4; border-radius: 14rpx; padding: 20rpx; margin-top: 16rpx; }
|
|
|
-.suggestion-title { font-size: 24rpx; color: #10B981; font-weight: 600; display: block; margin-bottom: 8rpx; }
|
|
|
-.suggestion-text { font-size: 26rpx; color: #555; line-height: 1.6; }
|
|
|
+.severity-good { background: $status-success; color: $status-success; }
|
|
|
+.severity-mild { background: $dim-wealth; color: $dim-wealth; }
|
|
|
+.severity-moderate { background: $dim-body; color: $dim-body; }
|
|
|
+.severity-severe { background: $status-danger; color: $status-danger; }
|
|
|
+.result-score-circle.severity-good { background: $status-success; }
|
|
|
+.result-score-circle.severity-mild { background: $dim-wealth; }
|
|
|
+.result-score-circle.severity-moderate { background: $dim-body; }
|
|
|
+.result-score-circle.severity-severe { background: $status-danger; }
|
|
|
+.suggestion-card { background: $dim-action-tint; border-radius: 14rpx; padding: 20rpx; margin-top: 16rpx; }
|
|
|
+.suggestion-title { font-size: 24rpx; color: $status-success; font-weight: 600; display: block; margin-bottom: 8rpx; }
|
|
|
+.suggestion-text { font-size: 26rpx; color: $facade-text-deep; line-height: 1.6; }
|
|
|
.risk-section { margin-top: 16rpx; }
|
|
|
-.risk-item { display: flex; align-items: flex-start; gap: 8rpx; padding: 12rpx 16rpx; background: #FFF5F5; border-radius: 12rpx; margin-bottom: 8rpx; }
|
|
|
+.risk-item { display: flex; align-items: flex-start; gap: 8rpx; padding: 12rpx 16rpx; background: $status-danger-tint; border-radius: 12rpx; margin-bottom: 8rpx; }
|
|
|
.risk-icon { font-size: 24rpx; flex-shrink: 0; }
|
|
|
-.risk-text { font-size: 24rpx; color: #E53E3E; line-height: 1.5; }
|
|
|
-.crisis-banner { margin-top: 16rpx; padding: 24rpx; background: linear-gradient(135deg, #FF6B6B, #E53E3E); border-radius: 16rpx; text-align: center; }
|
|
|
-.crisis-title { font-size: 28rpx; color: #fff; font-weight: 700; display: block; }
|
|
|
+.risk-text { font-size: 24rpx; color: $c-risk-ink; line-height: 1.5; }
|
|
|
+.crisis-banner { margin-top: 16rpx; padding: 24rpx; background: linear-gradient(135deg, $c-crisis-from, $c-risk-ink); border-radius: 16rpx; text-align: center; }
|
|
|
+.crisis-title { font-size: 28rpx; color: $app-surface; font-weight: 700; display: block; }
|
|
|
.crisis-phone { font-size: 22rpx; color: rgba(255,255,255,0.8); margin-top: 12rpx; display: block; }
|
|
|
-.crisis-number { font-size: 40rpx; color: #fff; font-weight: 700; margin-top: 4rpx; display: block; letter-spacing: 2rpx; }
|
|
|
+.crisis-number { font-size: 40rpx; color: $app-surface; font-weight: 700; margin-top: 4rpx; display: block; letter-spacing: 2rpx; }
|
|
|
.crisis-hint { font-size: 20rpx; color: rgba(255,255,255,0.7); margin-top: 4rpx; display: block; }
|
|
|
.result-actions { display: flex; gap: 16rpx; margin-top: 28rpx; }
|
|
|
.action-btn { flex: 1; height: 76rpx; line-height: 76rpx; border-radius: 38rpx; font-size: 26rpx; text-align: center; }
|
|
|
-.primary-btn { background: #FF6B9D; color: #fff; }
|
|
|
-.secondary-btn { background: #F0F0F0; color: #666; }
|
|
|
+.primary-btn { background: $dim-mind; color: $app-surface; }
|
|
|
+.secondary-btn { background: $facade-fill; color: $facade-text-body; }
|
|
|
.loading-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; z-index: 999; }
|
|
|
-.loading-box { background: #fff; padding: 40rpx 60rpx; border-radius: 20rpx; }
|
|
|
-.loading-text { font-size: 28rpx; color: #666; }
|
|
|
+.loading-box { background: $app-surface; padding: 40rpx 60rpx; border-radius: 20rpx; }
|
|
|
+.loading-text { font-size: 28rpx; color: $facade-text-body; }
|
|
|
</style>
|
