|
|
@@ -653,60 +653,48 @@ export default {
|
|
|
|
|
|
<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; }
|
|
|
.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.active { background: $c-brand-tint; }
|
|
|
+.tab-item.active { background: $facade-brand-tint; }
|
|
|
.tab-icon { font-size: 32rpx; margin-bottom: 4rpx; }
|
|
|
-.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-label { font-size: 26rpx; color: $facade-text-body; font-weight: 500; }
|
|
|
+.tab-item.active .tab-label { color: $facade-text-strong; font-weight: bold; }
|
|
|
.tab-underline { width: 40rpx; height: 4rpx; border-radius: 2rpx; margin-top: 6rpx; }
|
|
|
.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($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; }
|
|
|
+.chart-empty .empty-text { font-size: 28rpx; color: $facade-text-strong; font-weight: 500; display: block; }
|
|
|
+.chart-empty .empty-sub { font-size: 22rpx; color: $facade-text-muted; display: block; margin-top: 4rpx; }
|
|
|
.section-dc-header { margin: 20rpx 24rpx 8rpx; }
|
|
|
.dc-title-row { display: flex; align-items: center; }
|
|
|
.dc-icon { font-size: 32rpx; margin-right: 8rpx; }
|
|
|
-.dc-title { font-size: 32rpx; font-weight: bold; color: $c-text-strong; }
|
|
|
+.dc-title { font-size: 32rpx; font-weight: bold; color: $facade-text-strong; }
|
|
|
.section-data-collect { margin: 8rpx 24rpx; }
|
|
|
.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-info { flex: 1; }
|
|
|
-.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-title { font-size: 28rpx; font-weight: bold; color: $facade-text-strong; display: block; margin-bottom: 6rpx; }
|
|
|
+.data-card-desc { font-size: 22rpx; color: $facade-text-muted; }
|
|
|
+.data-card-arrow { font-size: 36rpx; color: $facade-text-ghost; }
|
|
|
.data-card-assessment { flex-direction: column; align-items: stretch; padding: 24rpx; }
|
|
|
.data-card-head { display: flex; align-items: center; margin-bottom: 16rpx; }
|
|
|
-.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; }
|
|
|
+.data-card-subtitle { font-size: 22rpx; color: $facade-text-muted; margin-left: 12rpx; }
|
|
|
+.quiz-item { display: flex; align-items: center; padding: 16rpx 0; border-top: 1rpx solid $facade-fill; }
|
|
|
.quiz-item:first-of-type { border-top: none; }
|
|
|
.quiz-info { display: flex; align-items: center; flex: 1; }
|
|
|
.quiz-icon { font-size: 36rpx; margin-right: 16rpx; }
|
|
|
-.quiz-label { font-size: 28rpx; color: $c-text-strong; }
|
|
|
+.quiz-label { font-size: 28rpx; color: $facade-text-strong; }
|
|
|
.quiz-score { display: flex; align-items: baseline; margin-right: 16rpx; }
|
|
|
.score-value { font-size: 36rpx; font-weight: bold; color: $brand-primary; }
|
|
|
-.score-unit { font-size: 22rpx; color: $c-text-muted; margin-left: 4rpx; }
|
|
|
+.score-unit { font-size: 22rpx; color: $facade-text-muted; margin-left: 4rpx; }
|
|
|
|
|
|
.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-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; }
|
|
|
-.section-title { font-size: 28rpx; font-weight: bold; color: $c-text-strong; }
|
|
|
+.section-title { font-size: 28rpx; font-weight: bold; color: $facade-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; }
|
|
|
@@ -714,37 +702,37 @@ $c-brand-tint: #FFF7ED; // 品牌淡底(与 index-home 同值,待提升
|
|
|
.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-type-badge.badge-default { background: rgba($facade-text-slate, 0.12); color: $facade-text-slate; }
|
|
|
.report-info { flex: 1; min-width: 0; }
|
|
|
-.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-name { font-size: 26rpx; color: $facade-text-strong; font-weight: 600; display: block; margin-bottom: 4rpx; }
|
|
|
+.report-meta { font-size: 20rpx; color: $facade-text-muted; display: block; }
|
|
|
.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: $brand-primary; line-height: 1; }
|
|
|
.report-status { font-size: 20rpx; margin-top: 4rpx; }
|
|
|
.report-status.status-resolved { color: $dim-action; }
|
|
|
.report-status.status-pending { color: $dim-wealth; }
|
|
|
-.report-arrow { font-size: 28rpx; color: $c-text-ghost; }
|
|
|
+.report-arrow { font-size: 28rpx; color: $facade-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; }
|
|
|
+.empty-hint .empty-text { font-size: 26rpx; color: $facade-text-muted; display: block; }
|
|
|
+.empty-hint .empty-sub { font-size: 22rpx; color: $facade-text-ghost; display: block; margin-top: 6rpx; }
|
|
|
.section-plan { margin: 8rpx 24rpx 16rpx; }
|
|
|
.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-title { font-size: 28rpx; font-weight: bold; color: $c-text-strong; }
|
|
|
+.plan-title { font-size: 28rpx; font-weight: bold; color: $facade-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; }
|
|
|
+.plan-goal { font-size: 24rpx; color: $facade-text-body; line-height: 1.5; display: block; margin-top: 12rpx; }
|
|
|
+.plan-hint { font-size: 22rpx; color: $facade-text-muted; display: block; margin-top: 12rpx; }
|
|
|
/* ===== 游客态样式 ===== */
|
|
|
-.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 { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, $facade-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; }
|
|
|
+.pain-quote { font-size: 32rpx; font-weight: bold; color: $facade-text-strong; display: block; margin-bottom: 8rpx; }
|
|
|
+.pain-desc { font-size: 26rpx; color: $facade-text-faint; display: block; }
|
|
|
.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: $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-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; }
|
|
|
+.feat-title { font-size: 26rpx; font-weight: 600; color: $facade-text-strong; display: block; margin-bottom: 4rpx; }
|
|
|
+.feat-desc { font-size: 22rpx; color: $facade-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-icon { font-size: 40rpx; margin-right: 16rpx; }
|
|
|
@@ -754,8 +742,8 @@ $c-brand-tint: #FFF7ED; // 品牌淡底(与 index-home 同值,待提升
|
|
|
.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-body { flex: 1; min-width: 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-text { font-size: 26rpx; font-weight: 600; color: $facade-text-strong; display: block; }
|
|
|
+.reminder-sub { font-size: 22rpx; color: $facade-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-icon { font-size: 40rpx; margin-right: 16rpx; }
|
|
|
@@ -765,33 +753,33 @@ $c-brand-tint: #FFF7ED; // 品牌淡底(与 index-home 同值,待提升
|
|
|
.self-test-arrow { font-size: 36rpx; color: rgba($app-surface, 0.7); }
|
|
|
.demo-section { margin: 0 24rpx 16rpx; }
|
|
|
.demo-section-head { margin-bottom: 8rpx; }
|
|
|
-.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-section-title { font-size: 30rpx; font-weight: bold; color: $facade-text-strong; display: block; }
|
|
|
+.demo-section-sub { font-size: 22rpx; color: $facade-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-name { font-size: 26rpx; font-weight: 600; color: $c-text-strong; }
|
|
|
+.demo-chart-name { font-size: 26rpx; font-weight: 600; color: $facade-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; }
|
|
|
|
|
|
/* ===== 五维闭环体系样式 ===== */
|
|
|
.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-title { font-size: 30rpx; font-weight: bold; color: $facade-text-strong; text-align: center; margin-bottom: 6rpx; }
|
|
|
+.wuxing-desc { font-size: 22rpx; color: $facade-text-muted; text-align: center; margin-bottom: 20rpx; }
|
|
|
.wuxing-diagram { position: relative; height: 320rpx; margin: 0 auto 20rpx; }
|
|
|
.wuxing-relations { margin-top: 8rpx; }
|
|
|
.rel-group { margin-bottom: 16rpx; }
|
|
|
-.rel-title { font-size: 24rpx; font-weight: bold; color: $c-text-strong; margin-bottom: 8rpx; display: block; }
|
|
|
+.rel-title { font-size: 24rpx; font-weight: bold; color: $facade-text-strong; margin-bottom: 8rpx; display: block; }
|
|
|
.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: $c-fill-cool; color: $c-text-deep; }
|
|
|
+.rel-item { font-size: 22rpx; padding: 4rpx 10rpx; border-radius: 8rpx; background: $facade-fill-cool; color: $facade-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; }
|
|
|
+.rel-dot { font-size: 20rpx; color: $facade-text-ghost; }
|
|
|
+.rel-hint { font-size: 20rpx; color: $facade-text-muted; line-height: 1.5; display: block; }
|
|
|
.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 $c-fill; }
|
|
|
+.wc-card { display: flex; align-items: center; padding: 16rpx 20rpx; border-radius: 16rpx; border: 2rpx solid $facade-fill; }
|
|
|
.wc-card:active { opacity: 0.85; }
|
|
|
.wc-icon { font-size: 36rpx; margin-right: 16rpx; flex-shrink: 0; }
|
|
|
.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-text { font-size: 20rpx; color: $c-text-muted; display: block; margin-top: 4rpx; white-space: normal; }
|
|
|
+.wc-text { font-size: 20rpx; color: $facade-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; }
|