|
@@ -651,141 +651,156 @@ export default {
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
-<style scoped>
|
|
|
|
|
- .container { background: #F8F8F8; min-height: 100vh; padding-bottom: calc(160rpx + env(safe-area-inset-bottom)); }
|
|
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
|
+// ===== 页面级局部调色板(单页专有色阶;同值才映射全局令牌,约定见 uni.scss §14) =====
|
|
|
|
|
+// 与 index-home 同族:$c-text-strong/$c-text-muted/$c-brand-tint 等保持同名同值,
|
|
|
|
|
+// A 批 6 个门面页完成后统一做「局部 → 全局」提升
|
|
|
|
|
+$c-text-strong: #333;
|
|
|
|
|
+$c-text-body: #666;
|
|
|
|
|
+$c-text-deep: #555;
|
|
|
|
|
+$c-text-muted: #999;
|
|
|
|
|
+$c-text-faint: #888;
|
|
|
|
|
+$c-text-ghost: #CCC;
|
|
|
|
|
+$c-text-slate-2: #6B7280; // gray-500
|
|
|
|
|
+$c-fill: #F0F0F0;
|
|
|
|
|
+$c-fill-warm: #F8F8F8;
|
|
|
|
|
+$c-fill-cool: #F7F7F7;
|
|
|
|
|
+$c-brand-tint: #FFF7ED; // 品牌淡底(与 index-home 同值,待提升全局)
|
|
|
|
|
+
|
|
|
|
|
+ .container { background: $c-fill-warm; min-height: 100vh; padding-bottom: calc(160rpx + env(safe-area-inset-bottom)); }
|
|
|
.section { margin: 16rpx 24rpx; }
|
|
.section { margin: 16rpx 24rpx; }
|
|
|
-.tab-bar { display: flex; background: #fff; margin: 0 24rpx 16rpx; border-radius: 16rpx; padding: 8rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
|
|
|
|
+.tab-bar { display: flex; background: $app-surface; margin: 0 24rpx 16rpx; border-radius: 16rpx; padding: 8rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12rpx 0; position: relative; border-radius: 12rpx; }
|
|
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12rpx 0; position: relative; border-radius: 12rpx; }
|
|
|
-.tab-item.active { background: #FFF7ED; }
|
|
|
|
|
|
|
+.tab-item.active { background: $c-brand-tint; }
|
|
|
.tab-icon { font-size: 32rpx; margin-bottom: 4rpx; }
|
|
.tab-icon { font-size: 32rpx; margin-bottom: 4rpx; }
|
|
|
-.tab-label { font-size: 26rpx; color: #666; font-weight: 500; }
|
|
|
|
|
-.tab-item.active .tab-label { color: #333; font-weight: bold; }
|
|
|
|
|
|
|
+.tab-label { font-size: 26rpx; color: $c-text-body; font-weight: 500; }
|
|
|
|
|
+.tab-item.active .tab-label { color: $c-text-strong; font-weight: bold; }
|
|
|
.tab-underline { width: 40rpx; height: 4rpx; border-radius: 2rpx; margin-top: 6rpx; }
|
|
.tab-underline { width: 40rpx; height: 4rpx; border-radius: 2rpx; margin-top: 6rpx; }
|
|
|
.section-chart { position: relative; margin: 0 24rpx 16rpx; }
|
|
.section-chart { position: relative; margin: 0 24rpx 16rpx; }
|
|
|
-.chart-empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 3; background: rgba(255,255,255,0.85); border-radius: 12rpx; padding: 20rpx 30rpx; }
|
|
|
|
|
-.chart-empty .empty-text { font-size: 28rpx; color: #333; font-weight: 500; display: block; }
|
|
|
|
|
-.chart-empty .empty-sub { font-size: 22rpx; color: #999; display: block; margin-top: 4rpx; }
|
|
|
|
|
|
|
+.chart-empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 3; background: rgba($app-surface, 0.85); border-radius: 12rpx; padding: 20rpx 30rpx; }
|
|
|
|
|
+.chart-empty .empty-text { font-size: 28rpx; color: $c-text-strong; font-weight: 500; display: block; }
|
|
|
|
|
+.chart-empty .empty-sub { font-size: 22rpx; color: $c-text-muted; display: block; margin-top: 4rpx; }
|
|
|
.section-dc-header { margin: 20rpx 24rpx 8rpx; }
|
|
.section-dc-header { margin: 20rpx 24rpx 8rpx; }
|
|
|
.dc-title-row { display: flex; align-items: center; }
|
|
.dc-title-row { display: flex; align-items: center; }
|
|
|
.dc-icon { font-size: 32rpx; margin-right: 8rpx; }
|
|
.dc-icon { font-size: 32rpx; margin-right: 8rpx; }
|
|
|
-.dc-title { font-size: 32rpx; font-weight: bold; color: #333; }
|
|
|
|
|
|
|
+.dc-title { font-size: 32rpx; font-weight: bold; color: $c-text-strong; }
|
|
|
.section-data-collect { margin: 8rpx 24rpx; }
|
|
.section-data-collect { margin: 8rpx 24rpx; }
|
|
|
-.data-card { display: flex; align-items: center; background: #fff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 12rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
|
|
|
|
+.data-card { display: flex; align-items: center; background: $app-surface; border-radius: 20rpx; padding: 24rpx; margin-bottom: 12rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
.data-card-icon { width: 88rpx; height: 88rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; font-size: 40rpx; }
|
|
.data-card-icon { width: 88rpx; height: 88rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; font-size: 40rpx; }
|
|
|
.data-card-info { flex: 1; }
|
|
.data-card-info { flex: 1; }
|
|
|
-.data-card-title { font-size: 28rpx; font-weight: bold; color: #333; display: block; margin-bottom: 6rpx; }
|
|
|
|
|
-.data-card-desc { font-size: 22rpx; color: #999; }
|
|
|
|
|
-.data-card-arrow { font-size: 36rpx; color: #ccc; }
|
|
|
|
|
|
|
+.data-card-title { font-size: 28rpx; font-weight: bold; color: $c-text-strong; display: block; margin-bottom: 6rpx; }
|
|
|
|
|
+.data-card-desc { font-size: 22rpx; color: $c-text-muted; }
|
|
|
|
|
+.data-card-arrow { font-size: 36rpx; color: $c-text-ghost; }
|
|
|
.data-card-assessment { flex-direction: column; align-items: stretch; padding: 24rpx; }
|
|
.data-card-assessment { flex-direction: column; align-items: stretch; padding: 24rpx; }
|
|
|
.data-card-head { display: flex; align-items: center; margin-bottom: 16rpx; }
|
|
.data-card-head { display: flex; align-items: center; margin-bottom: 16rpx; }
|
|
|
-.data-card-subtitle { font-size: 22rpx; color: #999; margin-left: 12rpx; }
|
|
|
|
|
-.quiz-item { display: flex; align-items: center; padding: 16rpx 0; border-top: 1rpx solid #f0f0f0; }
|
|
|
|
|
|
|
+.data-card-subtitle { font-size: 22rpx; color: $c-text-muted; margin-left: 12rpx; }
|
|
|
|
|
+.quiz-item { display: flex; align-items: center; padding: 16rpx 0; border-top: 1rpx solid $c-fill; }
|
|
|
.quiz-item:first-of-type { border-top: none; }
|
|
.quiz-item:first-of-type { border-top: none; }
|
|
|
.quiz-info { display: flex; align-items: center; flex: 1; }
|
|
.quiz-info { display: flex; align-items: center; flex: 1; }
|
|
|
.quiz-icon { font-size: 36rpx; margin-right: 16rpx; }
|
|
.quiz-icon { font-size: 36rpx; margin-right: 16rpx; }
|
|
|
-.quiz-label { font-size: 28rpx; color: #333; }
|
|
|
|
|
|
|
+.quiz-label { font-size: 28rpx; color: $c-text-strong; }
|
|
|
.quiz-score { display: flex; align-items: baseline; margin-right: 16rpx; }
|
|
.quiz-score { display: flex; align-items: baseline; margin-right: 16rpx; }
|
|
|
-.score-value { font-size: 36rpx; font-weight: bold; color: #F97316; }
|
|
|
|
|
-.score-unit { font-size: 22rpx; color: #999; margin-left: 4rpx; }
|
|
|
|
|
|
|
+.score-value { font-size: 36rpx; font-weight: bold; color: $brand-primary; }
|
|
|
|
|
+.score-unit { font-size: 22rpx; color: $c-text-muted; margin-left: 4rpx; }
|
|
|
|
|
|
|
|
-.quiz-btn { background: #F97316; color: #fff; font-size: 24rpx; border: none; border-radius: 20rpx; padding: 10rpx 30rpx; height: 56rpx; line-height: 36rpx; margin: 0; }
|
|
|
|
|
|
|
+.quiz-btn { background: $brand-primary; color: $app-surface; font-size: 24rpx; border: none; border-radius: 20rpx; padding: 10rpx 30rpx; height: 56rpx; line-height: 36rpx; margin: 0; }
|
|
|
.section-data-view { margin: 16rpx 24rpx; }
|
|
.section-data-view { margin: 16rpx 24rpx; }
|
|
|
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; }
|
|
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; }
|
|
|
-.section-title { font-size: 28rpx; font-weight: bold; color: #333; }
|
|
|
|
|
-.section-more { font-size: 24rpx; color: #F97316; }
|
|
|
|
|
-.report-card { display: flex; align-items: center; background: #fff; border-radius: 16rpx; padding: 16rpx 20rpx; margin-bottom: 10rpx; }
|
|
|
|
|
|
|
+.section-title { font-size: 28rpx; font-weight: bold; color: $c-text-strong; }
|
|
|
|
|
+.section-more { font-size: 24rpx; color: $brand-primary; }
|
|
|
|
|
+.report-card { display: flex; align-items: center; background: $app-surface; border-radius: 16rpx; padding: 16rpx 20rpx; margin-bottom: 10rpx; }
|
|
|
.report-type-badge { font-size: 20rpx; padding: 4rpx 12rpx; border-radius: 8rpx; margin-right: 12rpx; flex-shrink: 0; font-weight: 600; }
|
|
.report-type-badge { font-size: 20rpx; padding: 4rpx 12rpx; border-radius: 8rpx; margin-right: 12rpx; flex-shrink: 0; font-weight: 600; }
|
|
|
-.report-type-badge.badge-gut { background: rgba(249,115,22,0.12); color: #F97316; }
|
|
|
|
|
-.report-type-badge.badge-exam { background: rgba(99,102,241,0.12); color: #6366F1; }
|
|
|
|
|
-.report-type-badge.badge-tongue { background: rgba(16,185,129,0.12); color: #10B981; }
|
|
|
|
|
-.report-type-badge.badge-blood { background: rgba(239,68,68,0.12); color: #EF4444; }
|
|
|
|
|
-.report-type-badge.badge-default { background: rgba(107,114,128,0.12); color: #6B7280; }
|
|
|
|
|
|
|
+.report-type-badge.badge-gut { background: rgba($brand-primary, 0.12); color: $brand-primary; }
|
|
|
|
|
+.report-type-badge.badge-exam { background: rgba($dim-wisdom, 0.12); color: $dim-wisdom; }
|
|
|
|
|
+.report-type-badge.badge-tongue { background: rgba($dim-action, 0.12); color: $dim-action; }
|
|
|
|
|
+.report-type-badge.badge-blood { background: rgba($status-danger, 0.12); color: $status-danger; }
|
|
|
|
|
+.report-type-badge.badge-default { background: rgba($c-text-slate-2, 0.12); color: $c-text-slate-2; }
|
|
|
.report-info { flex: 1; min-width: 0; }
|
|
.report-info { flex: 1; min-width: 0; }
|
|
|
-.report-name { font-size: 26rpx; color: #333; font-weight: 600; display: block; margin-bottom: 4rpx; }
|
|
|
|
|
-.report-meta { font-size: 20rpx; color: #999; display: block; }
|
|
|
|
|
|
|
+.report-name { font-size: 26rpx; color: $c-text-strong; font-weight: 600; display: block; margin-bottom: 4rpx; }
|
|
|
|
|
+.report-meta { font-size: 20rpx; color: $c-text-muted; display: block; }
|
|
|
.report-score-wrap { display: flex; flex-direction: column; align-items: flex-end; margin-right: 8rpx; flex-shrink: 0; }
|
|
.report-score-wrap { display: flex; flex-direction: column; align-items: flex-end; margin-right: 8rpx; flex-shrink: 0; }
|
|
|
-.report-score { font-size: 32rpx; font-weight: bold; color: #F97316; line-height: 1; }
|
|
|
|
|
|
|
+.report-score { font-size: 32rpx; font-weight: bold; color: $brand-primary; line-height: 1; }
|
|
|
.report-status { font-size: 20rpx; margin-top: 4rpx; }
|
|
.report-status { font-size: 20rpx; margin-top: 4rpx; }
|
|
|
-.report-status.status-resolved { color: #10B981; }
|
|
|
|
|
-.report-status.status-pending { color: #F59E0B; }
|
|
|
|
|
-.report-arrow { font-size: 28rpx; color: #ccc; }
|
|
|
|
|
-.empty-hint { text-align: center; padding: 30rpx 0; background: #fff; border-radius: 16rpx; }
|
|
|
|
|
-.empty-hint .empty-text { font-size: 26rpx; color: #999; display: block; }
|
|
|
|
|
-.empty-hint .empty-sub { font-size: 22rpx; color: #ccc; display: block; margin-top: 6rpx; }
|
|
|
|
|
|
|
+.report-status.status-resolved { color: $dim-action; }
|
|
|
|
|
+.report-status.status-pending { color: $dim-wealth; }
|
|
|
|
|
+.report-arrow { font-size: 28rpx; color: $c-text-ghost; }
|
|
|
|
|
+.empty-hint { text-align: center; padding: 30rpx 0; background: $app-surface; border-radius: 16rpx; }
|
|
|
|
|
+.empty-hint .empty-text { font-size: 26rpx; color: $c-text-muted; display: block; }
|
|
|
|
|
+.empty-hint .empty-sub { font-size: 22rpx; color: $c-text-ghost; display: block; margin-top: 6rpx; }
|
|
|
.section-plan { margin: 8rpx 24rpx 16rpx; }
|
|
.section-plan { margin: 8rpx 24rpx 16rpx; }
|
|
|
-.plan-card { background: #fff; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
|
|
|
|
+.plan-card { background: $app-surface; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
.plan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12rpx; }
|
|
.plan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12rpx; }
|
|
|
-.plan-title { font-size: 28rpx; font-weight: bold; color: #333; }
|
|
|
|
|
-.plan-btn { background: linear-gradient(135deg, #F97316, #FB923C); color: #fff; font-size: 24rpx; border: none; border-radius: 20rpx; padding: 10rpx 28rpx; height: 56rpx; line-height: 36rpx; margin: 0; }
|
|
|
|
|
-.plan-goal { font-size: 24rpx; color: #666; line-height: 1.5; display: block; margin-top: 12rpx; }
|
|
|
|
|
-.plan-hint { font-size: 22rpx; color: #999; display: block; margin-top: 12rpx; }
|
|
|
|
|
|
|
+.plan-title { font-size: 28rpx; font-weight: bold; color: $c-text-strong; }
|
|
|
|
|
+.plan-btn { background: linear-gradient(135deg, $brand-primary, $brand-primary-light); color: $app-surface; font-size: 24rpx; border: none; border-radius: 20rpx; padding: 10rpx 28rpx; height: 56rpx; line-height: 36rpx; margin: 0; }
|
|
|
|
|
+.plan-goal { font-size: 24rpx; color: $c-text-body; line-height: 1.5; display: block; margin-top: 12rpx; }
|
|
|
|
|
+.plan-hint { font-size: 22rpx; color: $c-text-muted; display: block; margin-top: 12rpx; }
|
|
|
/* ===== 游客态样式 ===== */
|
|
/* ===== 游客态样式 ===== */
|
|
|
-.brand-strap { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, #FFF7ED, rgba(249,115,22,0.08)); border-radius: 16rpx; padding: 20rpx 24rpx; }
|
|
|
|
|
-.brand-strap-text { font-size: 26rpx; color: #F97316; font-weight: 600; }
|
|
|
|
|
-.pain-card { margin: 0 24rpx 16rpx; background: #fff; border-radius: 20rpx; padding: 28rpx; border-left: 6rpx solid #F97316; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
|
|
-.pain-quote { font-size: 32rpx; font-weight: bold; color: #333; display: block; margin-bottom: 8rpx; }
|
|
|
|
|
-.pain-desc { font-size: 26rpx; color: #888; display: block; }
|
|
|
|
|
|
|
+.brand-strap { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, $c-brand-tint, rgba($brand-primary, 0.08)); border-radius: 16rpx; padding: 20rpx 24rpx; }
|
|
|
|
|
+.brand-strap-text { font-size: 26rpx; color: $brand-primary; font-weight: 600; }
|
|
|
|
|
+.pain-card { margin: 0 24rpx 16rpx; background: $app-surface; border-radius: 20rpx; padding: 28rpx; border-left: 6rpx solid $brand-primary; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
|
|
+.pain-quote { font-size: 32rpx; font-weight: bold; color: $c-text-strong; display: block; margin-bottom: 8rpx; }
|
|
|
|
|
+.pain-desc { font-size: 26rpx; color: $c-text-faint; display: block; }
|
|
|
.guest-features { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 24rpx 16rpx; }
|
|
.guest-features { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 24rpx 16rpx; }
|
|
|
-.feat-card { width: 48.5%; box-sizing: border-box; background: #fff; border-radius: 20rpx; padding: 24rpx 20rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
|
|
|
|
+.feat-card { width: 48.5%; box-sizing: border-box; background: $app-surface; border-radius: 20rpx; padding: 24rpx 20rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
.feat-icon { font-size: 44rpx; display: block; margin-bottom: 10rpx; }
|
|
.feat-icon { font-size: 44rpx; display: block; margin-bottom: 10rpx; }
|
|
|
-.feat-title { font-size: 26rpx; font-weight: 600; color: #333; display: block; margin-bottom: 4rpx; }
|
|
|
|
|
-.feat-desc { font-size: 22rpx; color: #999; display: block; }
|
|
|
|
|
-.self-test-card { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, #F97316, #FB923C); border-radius: 20rpx; padding: 24rpx 28rpx; }
|
|
|
|
|
|
|
+.feat-title { font-size: 26rpx; font-weight: 600; color: $c-text-strong; display: block; margin-bottom: 4rpx; }
|
|
|
|
|
+.feat-desc { font-size: 22rpx; color: $c-text-muted; display: block; }
|
|
|
|
|
+.self-test-card { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-light); border-radius: 20rpx; padding: 24rpx 28rpx; }
|
|
|
.self-test-head { display: flex; align-items: center; }
|
|
.self-test-head { display: flex; align-items: center; }
|
|
|
.self-test-icon { font-size: 40rpx; margin-right: 16rpx; }
|
|
.self-test-icon { font-size: 40rpx; margin-right: 16rpx; }
|
|
|
.self-test-info { flex: 1; }
|
|
.self-test-info { flex: 1; }
|
|
|
-.self-test-title { font-size: 28rpx; font-weight: bold; color: #fff; display: block; }
|
|
|
|
|
-.self-test-sub { font-size: 22rpx; color: rgba(255,255,255,0.8); display: block; margin-top: 4rpx; }
|
|
|
|
|
-.ai-q-entry { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, #F97316, #F59E0B); border-radius: 20rpx; padding: 24rpx 28rpx; }
|
|
|
|
|
|
|
+.self-test-title { font-size: 28rpx; font-weight: bold; color: $app-surface; display: block; }
|
|
|
|
|
+.self-test-sub { font-size: 22rpx; color: rgba($app-surface, 0.8); display: block; margin-top: 4rpx; }
|
|
|
|
|
+.ai-q-entry { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, $brand-primary, $dim-wealth); border-radius: 20rpx; padding: 24rpx 28rpx; }
|
|
|
.reminder-icon { font-size: 40rpx; margin-right: 16rpx; flex-shrink: 0; }
|
|
.reminder-icon { font-size: 40rpx; margin-right: 16rpx; flex-shrink: 0; }
|
|
|
.reminder-body { flex: 1; min-width: 0; }
|
|
.reminder-body { flex: 1; min-width: 0; }
|
|
|
-.reminder-text { font-size: 26rpx; font-weight: 600; color: #333; display: block; }
|
|
|
|
|
-.reminder-sub { font-size: 22rpx; color: #999; margin-top: 4rpx; display: block; line-height: 1.4; }
|
|
|
|
|
-.reminder-arrow { font-size: 28rpx; color: #F97316; flex-shrink: 0; }
|
|
|
|
|
|
|
+.reminder-text { font-size: 26rpx; font-weight: 600; color: $c-text-strong; display: block; }
|
|
|
|
|
+.reminder-sub { font-size: 22rpx; color: $c-text-muted; margin-top: 4rpx; display: block; line-height: 1.4; }
|
|
|
|
|
+.reminder-arrow { font-size: 28rpx; color: $brand-primary; flex-shrink: 0; }
|
|
|
.ai-q-head { display: flex; align-items: center; }
|
|
.ai-q-head { display: flex; align-items: center; }
|
|
|
.ai-q-icon { font-size: 40rpx; margin-right: 16rpx; }
|
|
.ai-q-icon { font-size: 40rpx; margin-right: 16rpx; }
|
|
|
.ai-q-info { flex: 1; }
|
|
.ai-q-info { flex: 1; }
|
|
|
-.q-title { font-size: 28rpx; font-weight: bold; color: #fff; display: block; }
|
|
|
|
|
-.ai-q-sub { font-size: 22rpx; color: rgba(255,255,255,0.85); display: block; margin-top: 4rpx; }
|
|
|
|
|
-.self-test-arrow { font-size: 36rpx; color: rgba(255,255,255,0.7); }
|
|
|
|
|
|
|
+.q-title { font-size: 28rpx; font-weight: bold; color: $app-surface; display: block; }
|
|
|
|
|
+.ai-q-sub { font-size: 22rpx; color: rgba($app-surface, 0.85); display: block; margin-top: 4rpx; }
|
|
|
|
|
+.self-test-arrow { font-size: 36rpx; color: rgba($app-surface, 0.7); }
|
|
|
.demo-section { margin: 0 24rpx 16rpx; }
|
|
.demo-section { margin: 0 24rpx 16rpx; }
|
|
|
.demo-section-head { margin-bottom: 8rpx; }
|
|
.demo-section-head { margin-bottom: 8rpx; }
|
|
|
-.demo-section-title { font-size: 30rpx; font-weight: bold; color: #333; display: block; }
|
|
|
|
|
-.demo-section-sub { font-size: 22rpx; color: #999; display: block; margin-top: 4rpx; }
|
|
|
|
|
|
|
+.demo-section-title { font-size: 30rpx; font-weight: bold; color: $c-text-strong; display: block; }
|
|
|
|
|
+.demo-section-sub { font-size: 22rpx; color: $c-text-muted; display: block; margin-top: 4rpx; }
|
|
|
.demo-chart-title-row { display: flex; align-items: center; justify-content: space-between; margin: 8rpx 8rpx 0; padding: 0 8rpx; }
|
|
.demo-chart-title-row { display: flex; align-items: center; justify-content: space-between; margin: 8rpx 8rpx 0; padding: 0 8rpx; }
|
|
|
-.demo-chart-name { font-size: 26rpx; font-weight: 600; color: #333; }
|
|
|
|
|
-.demo-chart-tag { font-size: 20rpx; color: #F97316; background: rgba(249,115,22,0.1); border-radius: 8rpx; padding: 4rpx 12rpx; }
|
|
|
|
|
|
|
+.demo-chart-name { font-size: 26rpx; font-weight: 600; color: $c-text-strong; }
|
|
|
|
|
+.demo-chart-tag { font-size: 20rpx; color: $brand-primary; background: rgba($brand-primary, 0.1); border-radius: 8rpx; padding: 4rpx 12rpx; }
|
|
|
.login-guide-section { margin: 0 24rpx 24rpx; }
|
|
.login-guide-section { margin: 0 24rpx 24rpx; }
|
|
|
|
|
|
|
|
/* ===== 五维闭环体系样式 ===== */
|
|
/* ===== 五维闭环体系样式 ===== */
|
|
|
-.wuxing-section { margin: 0 24rpx 16rpx; background: #fff; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
|
|
-.wuxing-title { font-size: 30rpx; font-weight: bold; color: #333; text-align: center; margin-bottom: 6rpx; }
|
|
|
|
|
-.wuxing-desc { font-size: 22rpx; color: #999; text-align: center; margin-bottom: 20rpx; }
|
|
|
|
|
|
|
+.wuxing-section { margin: 0 24rpx 16rpx; background: $app-surface; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
|
|
+.wuxing-title { font-size: 30rpx; font-weight: bold; color: $c-text-strong; text-align: center; margin-bottom: 6rpx; }
|
|
|
|
|
+.wuxing-desc { font-size: 22rpx; color: $c-text-muted; text-align: center; margin-bottom: 20rpx; }
|
|
|
.wuxing-diagram { position: relative; height: 320rpx; margin: 0 auto 20rpx; }
|
|
.wuxing-diagram { position: relative; height: 320rpx; margin: 0 auto 20rpx; }
|
|
|
.wuxing-relations { margin-top: 8rpx; }
|
|
.wuxing-relations { margin-top: 8rpx; }
|
|
|
.rel-group { margin-bottom: 16rpx; }
|
|
.rel-group { margin-bottom: 16rpx; }
|
|
|
-.rel-title { font-size: 24rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; display: block; }
|
|
|
|
|
|
|
+.rel-title { font-size: 24rpx; font-weight: bold; color: $c-text-strong; margin-bottom: 8rpx; display: block; }
|
|
|
.rel-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4rpx; margin-bottom: 6rpx; }
|
|
.rel-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4rpx; margin-bottom: 6rpx; }
|
|
|
-.rel-item { font-size: 22rpx; padding: 4rpx 10rpx; border-radius: 8rpx; background: #f7f7f7; color: #555; }
|
|
|
|
|
-.rel-arrow { font-size: 20rpx; color: #F97316; font-weight: bold; }
|
|
|
|
|
-.rel-dot { font-size: 20rpx; color: #ccc; }
|
|
|
|
|
-.rel-hint { font-size: 20rpx; color: #999; line-height: 1.5; display: block; }
|
|
|
|
|
|
|
+.rel-item { font-size: 22rpx; padding: 4rpx 10rpx; border-radius: 8rpx; background: $c-fill-cool; color: $c-text-deep; }
|
|
|
|
|
+.rel-arrow { font-size: 20rpx; color: $brand-primary; font-weight: bold; }
|
|
|
|
|
+.rel-dot { font-size: 20rpx; color: $c-text-ghost; }
|
|
|
|
|
+.rel-hint { font-size: 20rpx; color: $c-text-muted; line-height: 1.5; display: block; }
|
|
|
.wuxing-cards { display: flex; flex-direction: column; gap: 10rpx; margin-top: 16rpx; }
|
|
.wuxing-cards { display: flex; flex-direction: column; gap: 10rpx; margin-top: 16rpx; }
|
|
|
-.wc-card { display: flex; align-items: center; padding: 16rpx 20rpx; border-radius: 16rpx; border: 2rpx solid #f0f0f0; }
|
|
|
|
|
|
|
+.wc-card { display: flex; align-items: center; padding: 16rpx 20rpx; border-radius: 16rpx; border: 2rpx solid $c-fill; }
|
|
|
.wc-card:active { opacity: 0.85; }
|
|
.wc-card:active { opacity: 0.85; }
|
|
|
.wc-icon { font-size: 36rpx; margin-right: 16rpx; flex-shrink: 0; }
|
|
.wc-icon { font-size: 36rpx; margin-right: 16rpx; flex-shrink: 0; }
|
|
|
.wc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
|
.wc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
|
|
.wc-name { font-size: 24rpx; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.wc-name { font-size: 24rpx; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
-.wc-text { font-size: 20rpx; color: #999; display: block; margin-top: 4rpx; white-space: normal; }
|
|
|
|
|
-.wc-body { border-color: rgba(255,140,66,0.3); background: rgba(255,140,66,0.04); border-left: 8rpx solid #FF8C42; }
|
|
|
|
|
-.wc-body .wc-name { color: #FF8C42; }
|
|
|
|
|
-.wc-wisdom { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.04); border-left: 8rpx solid #6366F1; }
|
|
|
|
|
-.wc-wisdom .wc-name { color: #6366F1; }
|
|
|
|
|
-.wc-wealth { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.04); border-left: 8rpx solid #F59E0B; }
|
|
|
|
|
-.wc-wealth .wc-name { color: #F59E0B; }
|
|
|
|
|
-.wc-action { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.04); border-left: 8rpx solid #10B981; }
|
|
|
|
|
-.wc-action .wc-name { color: #10B981; }
|
|
|
|
|
-.wc-mind { border-color: rgba(255,107,157,0.3); background: rgba(255,107,157,0.04); border-left: 8rpx solid #FF6B9D; }
|
|
|
|
|
-.wc-mind .wc-name { color: #FF6B9D; }
|
|
|
|
|
-.survey-pending-tag { flex-shrink: 0; font-size: 20rpx; color: #fff; background: #F97316; padding: 6rpx 16rpx; border-radius: 999rpx; }
|
|
|
|
|
|
|
+.wc-text { font-size: 20rpx; color: $c-text-muted; display: block; margin-top: 4rpx; white-space: normal; }
|
|
|
|
|
+.wc-body { border-color: rgba($dim-body, 0.3); background: rgba($dim-body, 0.04); border-left: 8rpx solid $dim-body; }
|
|
|
|
|
+.wc-body .wc-name { color: $dim-body; }
|
|
|
|
|
+.wc-wisdom { border-color: rgba($dim-wisdom, 0.3); background: rgba($dim-wisdom, 0.04); border-left: 8rpx solid $dim-wisdom; }
|
|
|
|
|
+.wc-wisdom .wc-name { color: $dim-wisdom; }
|
|
|
|
|
+.wc-wealth { border-color: rgba($dim-wealth, 0.3); background: rgba($dim-wealth, 0.04); border-left: 8rpx solid $dim-wealth; }
|
|
|
|
|
+.wc-wealth .wc-name { color: $dim-wealth; }
|
|
|
|
|
+.wc-action { border-color: rgba($dim-action, 0.3); background: rgba($dim-action, 0.04); border-left: 8rpx solid $dim-action; }
|
|
|
|
|
+.wc-action .wc-name { color: $dim-action; }
|
|
|
|
|
+.wc-mind { border-color: rgba($dim-mind, 0.3); background: rgba($dim-mind, 0.04); border-left: 8rpx solid $dim-mind; }
|
|
|
|
|
+.wc-mind .wc-name { color: $dim-mind; }
|
|
|
|
|
+.survey-pending-tag { flex-shrink: 0; font-size: 20rpx; color: $app-surface; background: $brand-primary; padding: 6rpx 16rpx; border-radius: 999rpx; }
|
|
|
</style>
|
|
</style>
|