style(cfc-frontend): 三页访客态重设计（健康/成长/我的）+ 五维顺序修正 + 新暖调配色落地

cfc-frontend/components/LoginGuideCard.vue

@@ -1,14 +1,17 @@
 <template>
-  <view class="login-guide-card">
-    <view class="guide-header">
-      <text class="guide-icon">🔒</text>
+  <view class="lgc">
+    <view class="lgc-head">
+      <view class="lgc-icon"></view>
+      <text class="lgc-title">{{ title }}</text>
     </view>
-    <text class="guide-title">{{ title }}</text>
-    <view class="guide-desc">
-      <text class="guide-desc-item" v-for="(item, idx) in items" :key="idx">· {{ item }}</text>
+    <view class="lgc-list">
+      <view class="lgc-item" v-for="(item, idx) in items" :key="idx">
+        <view class="lgc-check"></view>
+        <text class="lgc-text">{{ item }}</text>
+      </view>
     </view>
-    <view class="guide-actions">
-      <view class="guide-btn primary" @click="goLogin">立即登录</view>
+    <view class="lgc-btn" @click="goLogin">
+      <text class="lgc-btn-text">手机号快捷登录</text>
     </view>
   </view>
 </template>
@@ -35,42 +38,87 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.login-guide-card {
-  margin: 20rpx $uni-space-lg;
-  background: linear-gradient(135deg, $uni-primary-pale, #FFE4D6);
+// 图标走 data-URI SVG 背景（mp-weixin 模板内禁写 svg 标签），颜色由品牌令牌插值，不硬编码色值
+$lgc-brand-hex: '#{$brand-primary}';
+$lgc-brand: str-slice($lgc-brand-hex, 2);
+
+.lgc {
+  margin: 0;
+  background: $facade-brand-tint;
+  border: 1rpx solid rgba($brand-primary, 0.14);
   border-radius: 24rpx;
-  padding: 40rpx 32rpx;
-  text-align: center;
+  padding: 32rpx 28rpx;
+  display: flex;
+  flex-direction: column;
 }
-.guide-icon { font-size: calc(48rpx * var(--font-scale, 1)); }
-.guide-title {
-  font-size: calc(32rpx * var(--font-scale, 1));
-  font-weight: bold;
+.lgc-head {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.lgc-icon {
+  width: 36rpx;
+  height: 36rpx;
+  flex-shrink: 0;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 36rpx 36rpx;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23#{$lgc-brand}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
+}
+.lgc-title {
+  flex: 1;
+  min-width: 0;
+  margin-left: 14rpx;
+  font-size: calc(30rpx * var(--font-scale, 1));
+  font-weight: 700;
   color: $facade-text-strong;
-  margin: 16rpx 0;
-  display: block;
+  line-height: 1.4;
+}
+.lgc-list {
+  margin-top: 20rpx;
+  display: flex;
+  flex-direction: column;
+}
+.lgc-item {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  margin-top: 14rpx;
 }
-.guide-desc { margin-bottom: 24rpx; }
-.guide-desc-item {
-  font-size: calc(26rpx * var(--font-scale, 1));
+.lgc-item:first-child { margin-top: 0; }
+.lgc-check {
+  width: 28rpx;
+  height: 28rpx;
+  flex-shrink: 0;
+  margin-top: 6rpx;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 28rpx 28rpx;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23#{$lgc-brand}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
+}
+.lgc-text {
+  flex: 1;
+  min-width: 0;
+  margin-left: 12rpx;
+  font-size: calc(24rpx * var(--font-scale, 1));
   color: $facade-text-body;
-  line-height: 1.8;
-  display: block;
+  line-height: 1.6;
 }
-.guide-actions {
+.lgc-btn {
+  margin-top: 28rpx;
+  padding: 24rpx 0;
+  border-radius: 999rpx;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-dark);
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: center;
+  box-shadow: 0 10rpx 24rpx rgba($brand-primary, 0.2);
 }
-.guide-btn {
-  padding: 16rpx 48rpx;
-  border-radius: 24rpx;
+.lgc-btn:active { opacity: 0.9; }
+.lgc-btn-text {
   font-size: calc(28rpx * var(--font-scale, 1));
-  font-weight: 500;
-}
-.guide-btn.primary {
-  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
+  font-weight: 600;
   color: $app-surface;
 }
-.guide-btn:active { opacity: 0.8; }
-</style>
+</style>

cfc-frontend/pages/growth-main/index.vue

@@ -2,150 +2,131 @@
   <view class="container" :style="{ '--font-scale': fontScale }">
     <login-sheet ref="loginSheet" @success="onLoginSuccess" />
     <view v-if="!isLoggedIn">
-      <!-- Hero 品牌区 -->
-      <view class="hero">
-        <view class="hero-glow"></view>
-        <view class="hero-content">
-          <text class="hero-eyebrow">浠艾福 · 成长记录</text>
-          <text class="hero-title">看见改变正在发生</text>
-          <text class="hero-desc">记录不是目的，看见改变才是。每一份饮食、运动、心情的记录，都在为成长提供依据。</text>
+      <view class="gg-page">
+        <!-- Hero -->
+        <view class="gg-hero">
+          <text class="gg-eyebrow">浠艾福 · 成长记录</text>
+          <text class="gg-hero-line gg-hero-line-top">看见改变</text>
+          <text class="gg-hero-line">正在发生</text>
+          <view class="gg-hero-bar"></view>
+          <text class="gg-hero-sub">记录不是目的，看见改变才是。每一份饮食、运动、心情的记录，都在为成长提供依据。</text>
         </view>
-      </view>
 
-      <!-- 真实案例 -->
-      <view class="card case-card">
-        <view class="card-head">
-          <text class="card-head-icon">📖</text>
-          <text class="card-head-title">真实案例（脱敏）</text>
-        </view>
-        <view class="case-body">
-          <text class="case-name">小明（10岁，体校生）</text>
-          <text class="case-change">3个月干预前后：</text>
-          <view class="case-metrics">
-            <view class="metric-pill">
-              <text class="metric-value up">↑ 5分</text>
-              <text class="metric-label">身维度</text>
+        <!-- 真实案例档案 -->
+        <view class="gg-card">
+          <view class="gg-case-head">
+            <text class="gg-case-title">真实案例（脱敏）</text>
+            <text class="gg-case-tag">示例</text>
+          </view>
+          <text class="gg-case-name">小明（10 岁，体校生）</text>
+          <text class="gg-case-change">3 个月干预前后：</text>
+          <view class="gg-metrics">
+            <view class="gg-metric">
+              <text class="gg-metric-value gg-metric-value-body">+5 分</text>
+              <text class="gg-metric-label">身维度</text>
             </view>
-            <view class="metric-pill">
-              <text class="metric-value up">↑ 3分</text>
-              <text class="metric-label">智维度</text>
+            <view class="gg-metric">
+              <text class="gg-metric-value gg-metric-value-wisdom">+3 分</text>
+              <text class="gg-metric-label">智维度</text>
             </view>
-            <view class="metric-pill">
-              <text class="metric-value up">↑ 8天</text>
-              <text class="metric-label">连续打卡</text>
+            <view class="gg-metric">
+              <text class="gg-metric-value gg-metric-value-action">+8 天</text>
+              <text class="gg-metric-label">连续打卡</text>
             </view>
           </view>
-          <text class="case-note">通过饮食记录 + 睡眠打卡，免疫力显著提升</text>
-        </view>
-      </view>
-
-      <!-- 功能预览 -->
-      <view class="section-title-row">
-        <text class="section-title-text">解锁完整功能</text>
-      </view>
-      <view class="feat-grid">
-        <view class="feat-card" @click="handleGuestFeatureTap">
-          <text class="feat-icon">✅</text>
-          <text class="feat-title">每日打卡</text>
-          <text class="feat-desc">饮食·运动·睡眠·心情</text>
-        </view>
-        <view class="feat-card" @click="handleGuestFeatureTap">
-          <text class="feat-icon">🏆</text>
-          <text class="feat-title">里程碑</text>
-          <text class="feat-desc">连续打卡·挑战完成</text>
-        </view>
-        <view class="feat-card" @click="handleGuestFeatureTap">
-          <text class="feat-icon">🎯</text>
-          <text class="feat-title">家庭挑战</text>
-          <text class="feat-desc">全家参与的互动任务</text>
-        </view>
-        <view class="feat-card" @click="handleGuestFeatureTap">
-          <text class="feat-icon">📋</text>
-          <text class="feat-title">任务中心</text>
-          <text class="feat-desc">执行任务·完成挑战</text>
+          <text class="gg-case-note">通过饮食记录 + 睡眠打卡，免疫力显著提升。</text>
         </view>
-      </view>
 
-      <!-- 五维健康体系 -->
-      <view class="card wuxing-card">
-        <view class="card-head">
-          <text class="card-head-icon">🌿</text>
-          <text class="card-head-title">身·心·智·行·富 · 可执行的成长闭环</text>
-        </view>
-        <text class="wuxing-desc">五行相生相克，动起来、坚持做，让成长真正发生</text>
-        <view class="wuxing-relations">
-          <view class="rel-group">
-            <text class="rel-title">相生 → 系统前进</text>
-            <view class="rel-chain">
-              <text class="rel-item">🌏 身</text><text class="rel-arrow">→</text>
-              <text class="rel-item">⚡ 智</text><text class="rel-arrow">→</text>
-              <text class="rel-item">💧 富</text><text class="rel-arrow">→</text>
-              <text class="rel-item">🌿 行</text><text class="rel-arrow">→</text>
-              <text class="rel-item">🔥 心</text><text class="rel-arrow">→</text>
-              <text class="rel-item">🌏 身</text>
+        <!-- 成长功能预览 -->
+        <view class="gg-block">
+          <text class="gg-tag">成长功能预览</text>
+          <view class="gg-rows">
+            <view class="gg-row" @click="handleGuestFeatureTap">
+              <view class="gg-ic gg-ic-body"><text class="gg-glyph">身</text></view>
+              <view class="gg-row-info">
+                <text class="gg-row-name">每日打卡</text>
+                <text class="gg-row-sub">饮食 · 运动 · 睡眠 · 心情</text>
+              </view>
+              <text class="gg-chev">›</text>
             </view>
-            <text class="rel-hint">身勤则强，智勤则开，富勤则聚，行勤则和，心勤则安</text>
-          </view>
-          <view class="rel-group">
-            <text class="rel-title">相克 → 系统平衡</text>
-            <view class="rel-chain">
-              <text class="rel-item">🌏 身</text><text class="rel-op">克</text><text class="rel-item">💧 富</text><text class="rel-dot">·</text>
-              <text class="rel-item">⚡ 智</text><text class="rel-op">克</text><text class="rel-item">🌿 行</text><text class="rel-dot">·</text>
-              <text class="rel-item">💧 富</text><text class="rel-op">克</text><text class="rel-item">🔥 心</text><text class="rel-dot">·</text>
-              <text class="rel-item">🌿 行</text><text class="rel-op">克</text><text class="rel-item">🌏 身</text><text class="rel-dot">·</text>
-              <text class="rel-item">🔥 心</text><text class="rel-op">克</text><text class="rel-item">⚡ 智</text>
+            <view class="gg-row" @click="handleGuestFeatureTap">
+              <view class="gg-ic gg-ic-wealth"><text class="gg-glyph">富</text></view>
+              <view class="gg-row-info">
+                <text class="gg-row-name">里程碑</text>
+                <text class="gg-row-sub">连续打卡 · 挑战完成</text>
+              </view>
+              <text class="gg-chev">›</text>
+            </view>
+            <view class="gg-row" @click="handleGuestFeatureTap">
+              <view class="gg-ic gg-ic-action"><text class="gg-glyph">行</text></view>
+              <view class="gg-row-info">
+                <text class="gg-row-name">家庭挑战</text>
+                <text class="gg-row-sub">全家参与的互动任务</text>
+              </view>
+              <text class="gg-chev">›</text>
+            </view>
+            <view class="gg-row" @click="handleGuestFeatureTap">
+              <view class="gg-ic gg-ic-wisdom"><text class="gg-glyph">智</text></view>
+              <view class="gg-row-info">
+                <text class="gg-row-name">任务中心</text>
+                <text class="gg-row-sub">执行任务 · 完成挑战</text>
+              </view>
+              <text class="gg-chev">›</text>
             </view>
-            <text class="rel-hint">不拿身体换快钱，不算计关系得失，财富服务家庭，关爱有度、不溺爱越界</text>
           </view>
         </view>
-        <view class="wuxing-cards">
-          <view class="wc-card wc-body" @click="goPage('/pages/body-detail/index')">
-            <text class="wc-icon">🌏</text>
-            <view class="wc-info">
-              <text class="wc-name">身 · 主动健康</text>
-              <text class="wc-text">每天动一动、睡得香，身体状态看得见地变好</text>
-            </view>
+
+        <!-- 五维行动速览 -->
+        <view class="gg-block">
+          <view class="gg-tag-row">
+            <text class="gg-tag">五维行动速览</text>
+            <text class="gg-tag-note">每天一个小动作</text>
           </view>
-          <view class="wc-card wc-wisdom" @click="goPage('/pages/wisdom-detail/index')">
-            <text class="wc-icon">⚡</text>
-            <view class="wc-info">
-              <text class="wc-name">智 · 面向未来</text>
-              <text class="wc-text">每天读几页、练一会专注，智慧是练出来的</text>
+          <view class="gg-acts">
+            <view class="gg-act">
+              <view class="gg-dot gg-dot-body"></view>
+              <text class="gg-act-dim gg-act-dim-body">身</text>
+              <text class="gg-act-title">今天动一动</text>
+              <text class="gg-act-sub">30 分钟微微出汗</text>
             </view>
-          </view>
-          <view class="wc-card wc-wealth" @click="goPage('/pages/wealth/index')">
-            <text class="wc-icon">💧</text>
-            <view class="wc-info">
-              <text class="wc-name">富 · 利他创富</text>
-              <text class="wc-text">坚持分享与积累，把第二收入曲线做出来</text>
+            <view class="gg-act">
+              <view class="gg-dot gg-dot-wisdom"></view>
+              <text class="gg-act-dim gg-act-dim-wisdom">智</text>
+              <text class="gg-act-title">读几页</text>
+              <text class="gg-act-sub">专注 15 分钟</text>
             </view>
-          </view>
-          <view class="wc-card wc-action" @click="goPage('/pages/action-detail/member-action-detail')">
-            <text class="wc-icon">🌿</text>
-            <view class="wc-info">
-              <text class="wc-name">行 · 人际和谐</text>
-              <text class="wc-text">从一次倾听开始，让家庭关系每天升温</text>
+            <view class="gg-act">
+              <view class="gg-dot gg-dot-wealth"></view>
+              <text class="gg-act-dim gg-act-dim-wealth">富</text>
+              <text class="gg-act-title">记一笔</text>
+              <text class="gg-act-sub">健康账本利他积累</text>
             </view>
-          </view>
-          <view class="wc-card wc-mind" @click="goPage('/pages/mind-detail/index')">
-            <text class="wc-icon">🔥</text>
-            <view class="wc-info">
-              <text class="wc-name">心 · 大爱相随</text>
-              <text class="wc-text">每天留 10 分钟说说话，把家人的心事接住</text>
+            <view class="gg-act">
+              <view class="gg-dot gg-dot-action"></view>
+              <text class="gg-act-dim gg-act-dim-action">行</text>
+              <text class="gg-act-title">陪家人</text>
+              <text class="gg-act-sub">一次倾听关系升温</text>
+            </view>
+            <view class="gg-act">
+              <view class="gg-dot gg-dot-mind"></view>
+              <text class="gg-act-dim gg-act-dim-mind">心</text>
+              <text class="gg-act-title">说说话</text>
+              <text class="gg-act-sub">10 分钟接住心事</text>
             </view>
           </view>
+          <text class="gg-act-note">五维相生相克，动起来、坚持做，让成长真正发生。</text>
         </view>
-      </view>
 
-      <!-- 登录引导 -->
-      <view class="login-guide-section">
-        <LoginGuideCard
-          title="解锁完整成长档案"
-          :items="[
-            '查看干预进度与追踪记录',
-            '完成每日打卡累积连续记录',
-            '参与家庭挑战获得里程碑奖励'
-          ]" />
+        <!-- 登录引导 -->
+        <view class="gg-guide">
+          <LoginGuideCard
+            title="登录后建立完整成长档案"
+            :items="[
+              '查看干预进度与追踪记录',
+              '完成每日打卡，累积连续记录',
+              '参与家庭挑战，获得里程碑奖励'
+            ]" />
+        </view>
       </view>
     </view>
 
@@ -507,249 +488,85 @@ $c-danger-ink:       $status-danger-deep;
 }
 .section { margin: 20rpx 24rpx 0; }
 
-// ---- 公共卡片基础 ----
-.card {
-  background: $app-surface;
-  border-radius: 24rpx;
-  padding: 28rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.06);
-  overflow: hidden;
-}
-.card-head {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
-  margin-bottom: 20rpx;
-}
-.card-head-icon {
-  font-size: calc(32rpx * var(--font-scale, 1));
-  flex-shrink: 0;
-}
-.card-head-title {
-  font-size: calc(28rpx * var(--font-scale, 1));
-  font-weight: 600;
-  color: $facade-text-strong;
-  flex: 1;
-}
+// ==================== 游客态（新暖调配色 · 令牌化） ====================
+.gg-page { background: $app-bg; min-height: 100vh; padding: 28rpx 0 40rpx; }
 
-// ==================== 游客态 ====================
-.hero {
-  position: relative;
-  margin: 0 24rpx 24rpx;
-  padding: 48rpx 32rpx 40rpx;
-  border-radius: 24rpx;
-  overflow: hidden;
-  background: linear-gradient(145deg, $c-growth-hero-from, $c-growth-hero-to);
-  box-shadow: 0 16rpx 48rpx rgba(249,115,22,0.32);
-  color: $uni-surface;
-}
-.hero-glow {
-  position: absolute;
-  top: -100rpx; right: -60rpx;
-  width: 320rpx; height: 320rpx;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, transparent 70%);
-}
-.hero-content {
-  position: relative; z-index: 1;
-  display: flex; flex-direction: column; gap: 12rpx;
-}
-.hero-eyebrow {
-  font-size: calc(22rpx * var(--font-scale, 1));
-  opacity: 0.85;
-  letter-spacing: 2rpx;
-  text-transform: uppercase;
-}
-.hero-title {
-  font-size: calc(44rpx * var(--font-scale, 1));
-  font-weight: 800;
-  line-height: 1.2;
-}
-.hero-desc {
-  font-size: calc(24rpx * var(--font-scale, 1));
-  opacity: 0.92;
-  line-height: 1.7;
-}
+/* Hero */
+.gg-hero { margin: 0 32rpx 28rpx; display: flex; flex-direction: column; }
+.gg-eyebrow { font-size: calc(22rpx * var(--font-scale, 1)); font-weight: 600; color: $brand-primary; letter-spacing: 2rpx; }
+.gg-hero-line { font-size: calc(52rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-strong; line-height: 1.28; }
+.gg-hero-line-top { margin-top: 16rpx; }
+.gg-hero-bar { width: 84rpx; height: 8rpx; border-radius: 999rpx; margin: 20rpx 0 18rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-dark); }
+.gg-hero-sub { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.7; }
 
-.case-card { margin-bottom: 20rpx; }
-.case-body { padding: 4rpx 0; }
-.case-name {
-  font-size: calc(28rpx * var(--font-scale, 1));
-  font-weight: 600;
-  color: $facade-text-strong;
-  display: block;
-  margin-bottom: 4rpx;
-}
-.case-change {
-  font-size: calc(24rpx * var(--font-scale, 1));
-  color: $facade-text-body;
-  display: block;
-  margin-bottom: 16rpx;
-}
-.case-metrics {
-  display: flex;
-  gap: 12rpx;
-  margin-bottom: 12rpx;
-}
-.metric-pill {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 16rpx 8rpx;
-  border-radius: 16rpx;
-  background: $dim-action-tint;
-  border: 1rpx solid rgba($dim-action, 0.12);
-}
-.metric-value {
-  font-size: calc(26rpx * var(--font-scale, 1));
-  font-weight: 700;
-}
-.metric-value.up { color: $dim-action; }
-.metric-label {
-  font-size: calc(20rpx * var(--font-scale, 1));
-  color: $facade-text-muted;
-  margin-top: 4rpx;
-}
-.case-note {
-  font-size: calc(22rpx * var(--font-scale, 1));
-  color: $facade-text-faint;
-  display: block;
-}
+/* 卡片基础 */
+.gg-card { margin: 0 32rpx 24rpx; background: $app-surface; border-radius: 24rpx; padding: 28rpx 24rpx; border: 1rpx solid $app-border-subtle; }
 
-.section-title-row { margin: 28rpx 24rpx 12rpx; }
-.section-title-text {
-  font-size: calc(24rpx * var(--font-scale, 1));
-  font-weight: 600;
-  color: $facade-text-muted;
-  letter-spacing: 1rpx;
-}
+/* 真实案例 */
+.gg-case-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 16rpx; }
+.gg-case-title { font-size: calc(26rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-strong; }
+.gg-case-tag { font-size: calc(20rpx * var(--font-scale, 1)); color: $brand-primary; background: rgba($brand-primary, 0.1); border-radius: 8rpx; padding: 2rpx 12rpx; }
+.gg-case-name { display: block; font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; }
+.gg-case-change { display: block; font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-body; margin-top: 8rpx; margin-bottom: 16rpx; }
+.gg-metrics { display: flex; flex-direction: row; }
+.gg-metric { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 18rpx 8rpx; border-radius: 16rpx; background: $app-bg; border: 1rpx solid $app-border-subtle; margin-right: 12rpx; }
+.gg-metric:last-child { margin-right: 0; }
+.gg-metric-value { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 700; }
+.gg-metric-value-body { color: $dim-body-deep; }
+.gg-metric-value-wisdom { color: $dim-wisdom-deep; }
+.gg-metric-value-action { color: $dim-action-deep; }
+.gg-metric-label { font-size: calc(20rpx * var(--font-scale, 1)); color: $facade-text-body; margin-top: 6rpx; }
+.gg-case-note { display: block; font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.6; margin-top: 16rpx; }
 
-.feat-grid {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: 0 24rpx 20rpx;
-}
-.feat-card {
-  width: calc(50% - 12rpx);
-  box-sizing: border-box;
-  background: $app-surface;
-  border-radius: 24rpx;
-  padding: 28rpx 20rpx;
-  margin-bottom: 16rpx;
-  box-shadow: 0 2rpx 16rpx rgba(0,0,0,0.05);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-.feat-card:active { opacity: 0.88; transform: scale(0.98); }
-.feat-icon { font-size: calc(48rpx * var(--font-scale, 1)); display: block; margin-bottom: 10rpx; }
-.feat-title {
-  font-size: calc(28rpx * var(--font-scale, 1));
-  font-weight: 600;
-  color: $facade-text-strong;
-  display: block;
-  margin-bottom: 6rpx;
-}
-.feat-desc {
-  font-size: calc(22rpx * var(--font-scale, 1));
-  color: $facade-text-muted;
-  line-height: 1.5;
-  display: block;
-}
+/* 区块标签 */
+.gg-block { margin: 0 32rpx 24rpx; background: $app-surface; border-radius: 24rpx; padding: 24rpx; border: 1rpx solid $app-border-subtle; }
+.gg-tag { font-size: calc(24rpx * var(--font-scale, 1)); font-weight: 700; color: $brand-primary; letter-spacing: 1rpx; }
+.gg-tag-row { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; }
+.gg-tag-note { font-size: calc(20rpx * var(--font-scale, 1)); color: $facade-text-muted; }
+
+/* 功能预览行 */
+.gg-rows { margin-top: 8rpx; display: flex; flex-direction: column; }
+.gg-row { display: flex; flex-direction: row; align-items: center; padding: 20rpx 0; border-top: 1rpx solid $app-border-subtle; }
+.gg-row:first-child { border-top: none; }
+.gg-row:active { opacity: 0.85; }
+.gg-ic { width: 76rpx; height: 76rpx; border-radius: 20rpx; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-shrink: 0; }
+.gg-ic-body { background: $dim-body-tint; }
+.gg-ic-wisdom { background: $dim-wisdom-tint; }
+.gg-ic-wealth { background: $dim-wealth-tint; }
+.gg-ic-action { background: $dim-action-tint; }
+.gg-glyph { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 700; }
+.gg-ic-body .gg-glyph { color: $dim-body-deep; }
+.gg-ic-wisdom .gg-glyph { color: $dim-wisdom-deep; }
+.gg-ic-wealth .gg-glyph { color: $dim-wealth-deep; }
+.gg-ic-action .gg-glyph { color: $dim-action-deep; }
+.gg-row-info { flex: 1; min-width: 0; margin-left: 20rpx; display: flex; flex-direction: column; }
+.gg-row-name { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; }
+.gg-row-sub { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-body; margin-top: 6rpx; }
+.gg-chev { font-size: calc(32rpx * var(--font-scale, 1)); color: $facade-text-ghost; margin-left: 12rpx; flex-shrink: 0; }
+
+/* 五维行动速览 */
+.gg-acts { margin-top: 8rpx; display: flex; flex-direction: column; }
+.gg-act { display: flex; flex-direction: row; align-items: center; padding: 18rpx 0; border-top: 1rpx solid $app-border-subtle; }
+.gg-act:first-child { border-top: none; }
+.gg-dot { width: 16rpx; height: 16rpx; border-radius: 50%; flex-shrink: 0; }
+.gg-dot-body { background: $dim-body; }
+.gg-dot-wisdom { background: $dim-wisdom; }
+.gg-dot-wealth { background: $dim-wealth; }
+.gg-dot-action { background: $dim-action; }
+.gg-dot-mind { background: $dim-mind; }
+.gg-act-dim { font-size: calc(24rpx * var(--font-scale, 1)); font-weight: 700; margin-left: 14rpx; }
+.gg-act-dim-body { color: $dim-body-deep; }
+.gg-act-dim-wisdom { color: $dim-wisdom-deep; }
+.gg-act-dim-wealth { color: $dim-wealth-deep; }
+.gg-act-dim-action { color: $dim-action-deep; }
+.gg-act-dim-mind { color: $dim-mind-deep; }
+.gg-act-title { font-size: calc(26rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; margin-left: 16rpx; }
+.gg-act-sub { flex: 1; min-width: 0; text-align: right; font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-body; margin-left: 12rpx; }
+.gg-act-note { display: block; font-size: calc(20rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.6; margin-top: 18rpx; }
+
+.gg-guide { margin: 0 32rpx 8rpx; }
 
-.wuxing-card {
-  margin: 0 24rpx 20rpx;
-  background: $app-surface;
-}
-.wuxing-desc {
-  font-size: calc(22rpx * var(--font-scale, 1));
-  color: $facade-text-muted;
-  text-align: center;
-  display: block;
-  margin-bottom: 20rpx;
-}
-.wuxing-relations { margin-top: 8rpx; }
-.rel-group { margin-bottom: 18rpx; }
-.rel-title {
-  font-size: calc(24rpx * var(--font-scale, 1));
-  font-weight: 600;
-  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: calc(22rpx * var(--font-scale, 1));
-  padding: 4rpx 10rpx;
-  border-radius: 8rpx;
-  background: $facade-fill-cool;
-  color: $facade-text-deep;
-}
-.rel-arrow { font-size: calc(20rpx * var(--font-scale, 1)); color: $dim-action; font-weight: bold; }
-.rel-op { font-size: calc(20rpx * var(--font-scale, 1)); color: $c-danger-ink; font-weight: bold; }
-.rel-dot { font-size: calc(20rpx * var(--font-scale, 1)); color: $facade-text-ghost; }
-.rel-hint {
-  font-size: calc(20rpx * var(--font-scale, 1));
-  color: $facade-text-muted;
-  line-height: 1.5;
-  display: block;
-}
-.wuxing-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 12rpx;
-  margin-top: 18rpx;
-  padding-top: 18rpx;
-  border-top: 1rpx solid $facade-fill-2;
-}
-.wc-card {
-  display: flex;
-  align-items: center;
-  padding: 18rpx 20rpx;
-  border-radius: 16rpx;
-  border: 2rpx solid $facade-fill;
-  background: $app-surface;
-}
-.wc-card:active { opacity: 0.88; transform: scale(0.985); }
-.wc-icon { font-size: calc(36rpx * var(--font-scale, 1)); margin-right: 16rpx; flex-shrink: 0; }
-.wc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-.wc-name {
-  font-size: calc(24rpx * var(--font-scale, 1));
-  font-weight: 600;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.wc-text {
-  font-size: calc(20rpx * var(--font-scale, 1));
-  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; }
-.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; }
 
-.login-guide-section { margin: 0 24rpx 28rpx; }
 
 // ==================== 已登录态 ====================
 .reminder-bar {

cfc-frontend/pages/health-main/index.vue

@@ -3,143 +3,160 @@
     <!-- 通用登录浮层 -->
     <login-sheet ref="loginSheet" @success="onSheetLoginSuccess" @open="onLoginSheetOpen" @close="onLoginSheetClose" />
     <block v-if="!isLoggedIn">
-      <!-- 品牌定位语 -->
-      <view class="brand-strap"><text class="brand-strap-text">科学管理全家健康数据</text></view>
-      <!-- 痛点卡 -->
-      <view class="pain-card">
-        <text class="pain-quote">指标正常 ≠ 健康</text>
-        <text class="pain-desc">家人反复生病，你扛了多少次了？</text>
-      </view>
-      <!-- 自测入口 -->
-      <view class="self-test-card" @click="goSelfTest">
-        <view class="self-test-head">
-          <text class="self-test-icon">⚡</text>
-          <view class="self-test-info">
-            <text class="self-test-title">15题五维健康自检</text>
-            <text class="self-test-sub">约20秒，了解家人健康概况</text>
+      <view class="gh-page">
+        <!-- 页面头 -->
+        <view class="gh-head">
+          <text class="gh-eyebrow">浠艾福 · 家庭主动健康</text>
+          <text class="gh-title">科学管理全家健康数据</text>
+          <text class="gh-sub">把每个家人的健康数据，变成看得懂的结论。</text>
+        </view>
+
+        <!-- 痛点条 -->
+        <view class="gh-pain">
+          <text class="gh-pain-quote">指标正常 ≠ 健康</text>
+          <text class="gh-pain-desc">家人反复生病，你扛了多少次了？</text>
+        </view>
+
+        <!-- 自检 hero CTA -->
+        <view class="gh-cta" @click="goSelfTest">
+          <view class="gh-cta-ic"></view>
+          <view class="gh-cta-info">
+            <text class="gh-cta-title">15 题五维健康自检</text>
+            <text class="gh-cta-sub">约 20 秒，了解家人的健康概况</text>
           </view>
-          <text class="self-test-arrow">›</text>
+          <text class="gh-chev">›</text>
         </view>
-      </view>
-      <!-- 本期待填调研（按周期计算，服务端返回 pending 列表） -->
-      <view v-for="(item, si) in pendingSurveys" :key="si" class="self-test-card" @click="goSurveyFill(item)">
-        <view class="self-test-head">
-          <text class="self-test-icon">📋</text>
-          <view class="self-test-info">
-            <text class="self-test-title">{{ item.title }}</text>
-            <text class="self-test-sub">{{ cycleLabel(item.cycleType) }} · {{ item.periodStart }} 至 {{ item.periodEnd }}</text>
+
+        <!-- 本期待填调研（按周期计算，服务端返回 pending 列表） -->
+        <view v-for="(item, si) in pendingSurveys" :key="si" class="gh-pending" @click="goSurveyFill(item)">
+          <view class="gh-pending-ic"><text class="gh-pending-glyph">研</text></view>
+          <view class="gh-pending-info">
+            <text class="gh-pending-title">{{ item.title }}</text>
+            <text class="gh-pending-sub">{{ cycleLabel(item.cycleType) }} · {{ item.periodStart }} 至 {{ item.periodEnd }}</text>
           </view>
-          <text class="survey-pending-tag">待填写</text>
+          <text class="gh-pending-tag">待填写</text>
         </view>
-      </view>
-      
+
         <!-- 演示雷达（登录浮层打开时隐藏：原生 canvas 会盖在浮层之上） -->
-        <view v-if="!loginSheetVisible">
+        <view class="gh-demo" v-if="!loginSheetVisible">
+          <view class="gh-demo-head">
+            <text class="gh-demo-name">身体雷达</text>
+            <text class="gh-demo-tag">示例</text>
+          </view>
           <RadarChart :dimensions="demoBodyDims" :scores="demoBodyScores" :fillColor="bodyColor" childName="示例" width="560" height="460" />
-          <view class="demo-chart-title-row">
-            <text class="demo-chart-name">🧠 认知雷达</text>
-            <text class="demo-chart-tag">示例</text>
+          <view class="gh-demo-head">
+            <text class="gh-demo-name">认知雷达</text>
+            <text class="gh-demo-tag">示例</text>
           </view>
           <RadarChart :dimensions="demoCogDims" :scores="demoCogScores" :fillColor="wisdomColor" childName="示例" width="560" height="460" />
         </view>
-      <!-- 五维健康体系 -->
-      <view class="wuxing-section">
-        <view class="wuxing-title">身·心·智·行·富 · 看得见的健康闭环</view>
-        <view class="wuxing-desc">五行相生相克，从报告和测评里，真正读懂家人的身体</view>
-        <view class="wuxing-relations">
-          <view class="rel-group">
-            <text class="rel-title">相生 → 系统前进</text>
-            <view class="rel-chain">
-              <text class="rel-item">🌏 身</text>
-              <text class="rel-arrow">→</text>
-              <text class="rel-item">⚡ 智</text>
-              <text class="rel-arrow">→</text>
-              <text class="rel-item">💧 富</text>
-              <text class="rel-arrow">→</text>
-              <text class="rel-item">🌿 行</text>
-              <text class="rel-arrow">→</text>
-              <text class="rel-item">🔥 心</text>
-              <text class="rel-arrow">→</text>
-              <text class="rel-item">🌏 身</text>
+
+        <!-- 五维健康体系 -->
+        <view class="gh-wuxing">
+          <text class="gh-wuxing-title">身 · 智 · 富 · 行 · 心，看得见的健康闭环</text>
+          <text class="gh-wuxing-sub">五行相生相克，从报告和测评里，真正读懂家人的身体。</text>
+
+          <view class="gh-rel">
+            <text class="gh-rel-title">相生 · 前进</text>
+            <view class="gh-chain">
+              <text class="gh-node gh-node-body">身</text>
+              <text class="gh-arrow">→</text>
+              <text class="gh-node gh-node-wisdom">智</text>
+              <text class="gh-arrow">→</text>
+              <text class="gh-node gh-node-wealth">富</text>
+              <text class="gh-arrow">→</text>
+              <text class="gh-node gh-node-action">行</text>
+              <text class="gh-arrow">→</text>
+              <text class="gh-node gh-node-mind">心</text>
+              <text class="gh-arrow">→</text>
+              <text class="gh-node gh-node-body">身</text>
             </view>
-            <text class="rel-hint">健康孕育智慧，智慧创造价值，价值滋养关系，关系反哺心灵，心灵守护健康</text>
+            <text class="gh-rel-hint">健康孕育智慧，智慧创造价值，价值滋养关系，关系反哺心灵，心灵守护健康。</text>
           </view>
-          <view class="rel-group">
-            <text class="rel-title">相克 → 系统平衡</text>
-            <view class="rel-chain">
-              <text class="rel-item">🌏 身</text>
-              <text class="rel-op">克</text>
-              <text class="rel-item">💧 富</text>
-              <text class="rel-dot">·</text>
-              <text class="rel-item">⚡ 智</text>
-              <text class="rel-op">克</text>
-              <text class="rel-item">🌿 行</text>
-              <text class="rel-dot">·</text>
-              <text class="rel-item">💧 富</text>
-              <text class="rel-op">克</text>
-              <text class="rel-item">🔥 心</text>
-              <text class="rel-dot">·</text>
-              <text class="rel-item">🌿 行</text>
-              <text class="rel-op">克</text>
-              <text class="rel-item">🌏 身</text>
-              <text class="rel-dot">·</text>
-              <text class="rel-item">🔥 心</text>
-              <text class="rel-op">克</text>
-              <text class="rel-item">⚡ 智</text>
+
+          <view class="gh-rel">
+            <text class="gh-rel-title">相克 · 平衡</text>
+            <view class="gh-chain">
+              <text class="gh-node gh-node-body">身</text>
+              <text class="gh-op">克</text>
+              <text class="gh-node gh-node-wealth">富</text>
+              <text class="gh-sep">·</text>
+              <text class="gh-node gh-node-wisdom">智</text>
+              <text class="gh-op">克</text>
+              <text class="gh-node gh-node-action">行</text>
+              <text class="gh-sep">·</text>
+              <text class="gh-node gh-node-wealth">富</text>
+              <text class="gh-op">克</text>
+              <text class="gh-node gh-node-mind">心</text>
+              <text class="gh-sep">·</text>
+              <text class="gh-node gh-node-action">行</text>
+              <text class="gh-op">克</text>
+              <text class="gh-node gh-node-body">身</text>
+              <text class="gh-sep">·</text>
+              <text class="gh-node gh-node-mind">心</text>
+              <text class="gh-op">克</text>
+              <text class="gh-node gh-node-wisdom">智</text>
             </view>
-            <text class="rel-hint">莫以健康换金钱，真诚胜过算计，财富服务家庭，关爱有度、大爱留白</text>
+            <text class="gh-rel-hint">莫以健康换金钱，真诚胜过算计，财富服务家庭，关爱有度、大爱留白。</text>
           </view>
-        </view>
-        <view class="wuxing-cards">
-          <view class="wc-card wc-body" @click="goPage('/pages/body-detail/index')">
-            <text class="wc-icon">🌏</text>
-            <view class="wc-info">
-              <text class="wc-name">身 · 主动健康</text>
-              <text class="wc-text">读懂每一份报告，看见全家体质的变化</text>
+
+          <view class="gh-rows">
+            <view class="gh-row" @click="goPage('/pages/body-detail/index')">
+              <view class="gh-ic gh-ic-body"><text class="gh-glyph">身</text></view>
+              <view class="gh-row-info">
+                <text class="gh-row-name">身 · 主动健康</text>
+                <text class="gh-row-sub">读懂每一份报告，看见全家体质的变化</text>
+              </view>
+              <text class="gh-row-chev">›</text>
             </view>
-          </view>
-          <view class="wc-card wc-wisdom" @click="goPage('/pages/wisdom-detail/index')">
-            <text class="wc-icon">⚡</text>
-            <view class="wc-info">
-              <text class="wc-name">智 · 面向未来</text>
-              <text class="wc-text">一次测评，看见成员真实的专注与潜能</text>
+            <view class="gh-row" @click="goPage('/pages/wisdom-detail/index')">
+              <view class="gh-ic gh-ic-wisdom"><text class="gh-glyph">智</text></view>
+              <view class="gh-row-info">
+                <text class="gh-row-name">智 · 面向未来</text>
+                <text class="gh-row-sub">一次测评，看见成员真实的专注与潜能</text>
+              </view>
+              <text class="gh-row-chev">›</text>
             </view>
-          </view>
-          <view class="wc-card wc-wealth" @click="goPage('/pages/wealth/index')">
-            <text class="wc-icon">💧</text>
-            <view class="wc-info">
-              <text class="wc-name">富 · 利他创富</text>
-              <text class="wc-text">看懂健康与财富的关系，明白身体是最大的本钱</text>
+            <view class="gh-row" @click="goPage('/pages/wealth/index')">
+              <view class="gh-ic gh-ic-wealth"><text class="gh-glyph">富</text></view>
+              <view class="gh-row-info">
+                <text class="gh-row-name">富 · 利他创富</text>
+                <text class="gh-row-sub">看懂健康与财富的关系，明白身体是最大的本钱</text>
+              </view>
+              <text class="gh-row-chev">›</text>
             </view>
-          </view>
-          <view class="wc-card wc-action" @click="goPage('/pages/action-detail/member-action-detail')">
-            <text class="wc-icon">🌿</text>
-            <view class="wc-info">
-              <text class="wc-name">行 · 人际和谐</text>
-              <text class="wc-text">看懂关系里的情绪，看见家人真实的需求</text>
+            <view class="gh-row" @click="goPage('/pages/action-detail/member-action-detail')">
+              <view class="gh-ic gh-ic-action"><text class="gh-glyph">行</text></view>
+              <view class="gh-row-info">
+                <text class="gh-row-name">行 · 人际和谐</text>
+                <text class="gh-row-sub">看懂关系里的情绪，看见家人真实的需求</text>
+              </view>
+              <text class="gh-row-chev">›</text>
             </view>
-          </view>
-          <view class="wc-card wc-mind" @click="goPage('/pages/mind-detail/index')">
-            <text class="wc-icon">🔥</text>
-            <view class="wc-info">
-              <text class="wc-name">心 · 大爱相随</text>
-              <text class="wc-text">读懂情绪的信号，听懂家人没说出口的话</text>
+            <view class="gh-row" @click="goPage('/pages/mind-detail/index')">
+              <view class="gh-ic gh-ic-mind"><text class="gh-glyph">心</text></view>
+              <view class="gh-row-info">
+                <text class="gh-row-name">心 · 大爱相随</text>
+                <text class="gh-row-sub">读懂情绪的信号，听懂家人没说出口的话</text>
+              </view>
+              <text class="gh-row-chev">›</text>
             </view>
           </view>
         </view>
-      </view>
 
-      <!-- 登录引导 -->
-      <view class="login-guide-section">
-        <LoginGuideCard
-          title="解锁全家健康数据"
-          :items="[
-            '查看七维雷达图与健康报告解读',
-            '完成测评获取个性化健康方案',
-            '每日打卡追踪身体/情绪/认知趋势'
-          ]" />
+        <!-- 登录引导 -->
+        <view class="gh-guide">
+          <LoginGuideCard
+            title="登录后查看全家健康数据"
+            :items="[
+              '查看七维雷达图与健康报告解读',
+              '完成测评获取个性化健康方案',
+              '每日打卡追踪身体 / 情绪 / 认知趋势'
+            ]" />
+        </view>
       </view>
     </block>
+
     <block v-else>
       <view class="tab-bar">
         <view v-for="tab in tabs" :key="tab.code" class="tab-item" :class="{ active: currentTab === tab.code }" @click="switchTab(tab.code)">
@@ -749,73 +766,93 @@ export default {
 .plan-btn { background: linear-gradient(135deg, $brand-primary, $brand-primary-light); color: $app-surface; font-size: calc(24rpx * var(--font-scale, 1)); border: none; border-radius: 24rpx; padding: 10rpx 28rpx; height: 56rpx; line-height: 36rpx; margin: 0; }
 .plan-goal { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.5; display: block; margin-top: 12rpx; }
 .plan-hint { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-muted; display: block; margin-top: 12rpx; }
-/* ===== 游客态样式 ===== */
-.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: calc(26rpx * var(--font-scale, 1)); color: $brand-primary; font-weight: 600; }
-.pain-card { margin: 0 24rpx 16rpx; background: $app-surface; border-radius: 24rpx; padding: 28rpx; border-left: 6rpx solid $brand-primary; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
-.pain-quote { font-size: calc(32rpx * var(--font-scale, 1)); font-weight: bold; color: $facade-text-strong; display: block; margin-bottom: 8rpx; }
-.pain-desc { font-size: calc(26rpx * var(--font-scale, 1)); 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: 24rpx; padding: 24rpx 20rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
-.feat-icon { font-size: calc(44rpx * var(--font-scale, 1)); display: block; margin-bottom: 10rpx; }
-.feat-title { font-size: calc(26rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; display: block; margin-bottom: 4rpx; }
-.feat-desc { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-muted; display: block; }
-.self-test-card { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-light); border-radius: 24rpx; padding: 24rpx 28rpx; }
-.self-test-head { display: flex; align-items: center; }
-.self-test-icon { font-size: calc(40rpx * var(--font-scale, 1)); margin-right: 16rpx; }
-.self-test-info { flex: 1; }
-.self-test-title { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: bold; color: $app-surface; display: block; }
-.self-test-sub { font-size: calc(22rpx * var(--font-scale, 1)); 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: 24rpx; padding: 24rpx 28rpx; }
-.reminder-icon { font-size: calc(40rpx * var(--font-scale, 1)); margin-right: 16rpx; flex-shrink: 0; }
-.reminder-body { flex: 1; min-width: 0; }
-.reminder-text { font-size: calc(26rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; display: block; }
-.reminder-sub { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-muted; margin-top: 4rpx; display: block; line-height: 1.4; }
-.reminder-arrow { font-size: calc(28rpx * var(--font-scale, 1)); color: $brand-primary; flex-shrink: 0; }
-.ai-q-head { display: flex; align-items: center; }
-.ai-q-icon { font-size: calc(40rpx * var(--font-scale, 1)); margin-right: 16rpx; }
-.ai-q-info { flex: 1; }
-.q-title { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: bold; color: $app-surface; display: block; }
-.ai-q-sub { font-size: calc(22rpx * var(--font-scale, 1)); color: rgba($app-surface, 0.85); display: block; margin-top: 4rpx; }
-.self-test-arrow { font-size: calc(36rpx * var(--font-scale, 1)); color: rgba($app-surface, 0.7); }
-.demo-section { margin: 0 24rpx 16rpx; }
-.demo-section-head { margin-bottom: 8rpx; }
-.demo-section-title { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: bold; color: $facade-text-strong; display: block; }
-.demo-section-sub { font-size: calc(22rpx * var(--font-scale, 1)); 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: calc(26rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; }
-.demo-chart-tag { font-size: calc(20rpx * var(--font-scale, 1)); 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: 24rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
-.wuxing-title { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: bold; color: $facade-text-strong; text-align: center; margin-bottom: 6rpx; }
-.wuxing-desc { font-size: calc(22rpx * var(--font-scale, 1)); 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: calc(24rpx * var(--font-scale, 1)); 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: calc(22rpx * var(--font-scale, 1)); padding: 4rpx 10rpx; border-radius: 8rpx; background: $facade-fill-cool; color: $facade-text-deep; }
-.rel-arrow { font-size: calc(20rpx * var(--font-scale, 1)); color: $brand-primary; font-weight: bold; }
-.rel-dot { font-size: calc(20rpx * var(--font-scale, 1)); color: $facade-text-ghost; }
-.rel-hint { font-size: calc(20rpx * var(--font-scale, 1)); 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 $facade-fill; }
-.wc-card:active { opacity: 0.85; }
-.wc-icon { font-size: calc(36rpx * var(--font-scale, 1)); margin-right: 16rpx; flex-shrink: 0; }
-.wc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-.wc-name { font-size: calc(24rpx * var(--font-scale, 1)); font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.wc-text { font-size: calc(20rpx * var(--font-scale, 1)); 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; }
-.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: calc(20rpx * var(--font-scale, 1)); color: $app-surface; background: $brand-primary; padding: 6rpx 16rpx; border-radius: 999rpx; }
+/* ===== 访客态（新暖调配色 · 令牌化） ===== */
+$gh-white: str-slice('#{$app-surface}', 2);
+
+.gh-page { background: $app-bg; min-height: 100vh; padding: 28rpx 0 40rpx; }
+
+/* 页面头 */
+.gh-head { margin: 0 32rpx 24rpx; display: flex; flex-direction: column; }
+.gh-eyebrow { font-size: calc(22rpx * var(--font-scale, 1)); font-weight: 600; color: $brand-primary; letter-spacing: 2rpx; }
+.gh-title { font-size: calc(46rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-strong; line-height: 1.32; margin-top: 12rpx; }
+.gh-sub { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.65; margin-top: 10rpx; }
+
+/* 痛点条 */
+.gh-pain { margin: 0 32rpx 24rpx; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
+.gh-pain-quote { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 700; color: $brand-primary; }
+.gh-pain-desc { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-body; }
+
+/* 自检 hero CTA */
+.gh-cta { margin: 0 32rpx 24rpx; display: flex; flex-direction: row; align-items: center; padding: 28rpx; border-radius: 24rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-dark); box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.24); }
+.gh-cta:active { opacity: 0.9; }
+.gh-cta-ic {
+  width: 88rpx; height: 88rpx; border-radius: 24rpx; flex-shrink: 0;
+  background-color: rgba($app-surface, 0.18);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 48rpx 48rpx;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23#{$gh-white}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/%3E%3C/svg%3E");
+}
+.gh-cta-info { flex: 1; min-width: 0; margin-left: 20rpx; display: flex; flex-direction: column; }
+.gh-cta-title { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 700; color: $app-surface; }
+.gh-cta-sub { font-size: calc(22rpx * var(--font-scale, 1)); color: rgba($app-surface, 0.82); margin-top: 6rpx; }
+.gh-chev { font-size: calc(36rpx * var(--font-scale, 1)); color: rgba($app-surface, 0.72); margin-left: 12rpx; }
+
+/* 待填调研 */
+.gh-pending { margin: 0 32rpx 20rpx; display: flex; flex-direction: row; align-items: center; padding: 24rpx; border-radius: 20rpx; background: $app-surface; border: 1rpx solid $app-border-subtle; }
+.gh-pending:active { opacity: 0.9; }
+.gh-pending-ic { width: 72rpx; height: 72rpx; border-radius: 20rpx; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-shrink: 0; background: $dim-body-tint; }
+.gh-pending-glyph { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 700; color: $dim-body-deep; }
+.gh-pending-info { flex: 1; min-width: 0; margin-left: 20rpx; display: flex; flex-direction: column; }
+.gh-pending-title { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; }
+.gh-pending-sub { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-body; margin-top: 6rpx; }
+.gh-pending-tag { flex-shrink: 0; margin-left: 12rpx; font-size: calc(20rpx * var(--font-scale, 1)); font-weight: 600; color: $brand-primary; background: rgba($brand-primary, 0.1); border-radius: 999rpx; padding: 6rpx 16rpx; }
+
+/* 演示雷达 */
+.gh-demo { margin: 0 32rpx 24rpx; background: $app-surface; border-radius: 24rpx; padding: 20rpx 12rpx 12rpx; border: 1rpx solid $app-border-subtle; }
+.gh-demo-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 20rpx; margin: 12rpx 0 4rpx; }
+.gh-demo-name { font-size: calc(24rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; }
+.gh-demo-tag { font-size: calc(20rpx * var(--font-scale, 1)); color: $brand-primary; background: rgba($brand-primary, 0.1); border-radius: 8rpx; padding: 2rpx 12rpx; }
+
+/* 五维健康体系 */
+.gh-wuxing { margin: 0 32rpx 24rpx; background: $app-surface; border-radius: 24rpx; padding: 28rpx 24rpx; border: 1rpx solid $app-border-subtle; }
+.gh-wuxing-title { display: block; text-align: center; font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-strong; line-height: 1.45; }
+.gh-wuxing-sub { display: block; text-align: center; font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.65; margin-top: 10rpx; }
+.gh-rel { margin-top: 24rpx; padding: 20rpx; border-radius: 20rpx; background: $app-bg; }
+.gh-rel-title { display: block; font-size: calc(24rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-strong; margin-bottom: 12rpx; }
+.gh-chain { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
+.gh-node { font-size: calc(22rpx * var(--font-scale, 1)); font-weight: 700; padding: 6rpx 14rpx; border-radius: 10rpx; }
+.gh-node-body { color: $dim-body-deep; background: $dim-body-tint; }
+.gh-node-wisdom { color: $dim-wisdom-deep; background: $dim-wisdom-tint; }
+.gh-node-wealth { color: $dim-wealth-deep; background: $dim-wealth-tint; }
+.gh-node-action { color: $dim-action-deep; background: $dim-action-tint; }
+.gh-node-mind { color: $dim-mind-deep; background: $dim-mind-tint; }
+.gh-arrow { font-size: calc(20rpx * var(--font-scale, 1)); color: $facade-text-ghost; margin: 0 6rpx; }
+.gh-op { font-size: calc(20rpx * var(--font-scale, 1)); color: $status-danger-deep; margin: 0 8rpx; }
+.gh-sep { font-size: calc(20rpx * var(--font-scale, 1)); color: $facade-text-ghost; margin: 0 8rpx; }
+.gh-rel-hint { display: block; font-size: calc(20rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.65; margin-top: 12rpx; }
+
+.gh-rows { margin-top: 24rpx; display: flex; flex-direction: column; }
+.gh-row { display: flex; flex-direction: row; align-items: center; padding: 20rpx 0; border-top: 1rpx solid $app-border-subtle; }
+.gh-row:first-child { border-top: none; padding-top: 4rpx; }
+.gh-row:active { opacity: 0.85; }
+.gh-ic { width: 76rpx; height: 76rpx; border-radius: 20rpx; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-shrink: 0; }
+.gh-ic-body { background: $dim-body-tint; }
+.gh-ic-wisdom { background: $dim-wisdom-tint; }
+.gh-ic-wealth { background: $dim-wealth-tint; }
+.gh-ic-action { background: $dim-action-tint; }
+.gh-ic-mind { background: $dim-mind-tint; }
+.gh-glyph { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 700; }
+.gh-ic-body .gh-glyph { color: $dim-body-deep; }
+.gh-ic-wisdom .gh-glyph { color: $dim-wisdom-deep; }
+.gh-ic-wealth .gh-glyph { color: $dim-wealth-deep; }
+.gh-ic-action .gh-glyph { color: $dim-action-deep; }
+.gh-ic-mind .gh-glyph { color: $dim-mind-deep; }
+.gh-row-info { flex: 1; min-width: 0; margin-left: 20rpx; display: flex; flex-direction: column; }
+.gh-row-name { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; }
+.gh-row-sub { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.5; margin-top: 6rpx; }
+.gh-row-chev { font-size: calc(32rpx * var(--font-scale, 1)); color: $facade-text-ghost; margin-left: 12rpx; flex-shrink: 0; }
+
+.gh-guide { margin: 0 32rpx 8rpx; }
+
 </style>

cfc-frontend/pages/profile-main/profile.vue

@@ -4,17 +4,55 @@
     <login-sheet ref="loginSheet" @success="onSheetLoginSuccess" />
     <!-- 未登录 -->
     <view v-if="!isLoggedIn">
-      <view class="login-prompt">
-        <text class="prompt-icon">👤</text>
-        <text class="prompt-title">登录浠艾福</text>
-        <text class="prompt-desc">登录后查看个人资料、积分记录、能量数据与家庭管理</text>
-        <button class="login-btn" @click="goLogin">登录 / 注册</button>
-        <text class="skip-link" @click="goSkip">暂不登录，先逛逛 ›</text>
-      </view>
+      <view class="gp-page">
+        <!-- 登录大卡 -->
+        <view class="gp-login">
+          <view class="gp-logo"><view class="gp-logo-heart"></view></view>
+          <text class="gp-login-title">登录浠艾福</text>
+          <text class="gp-login-desc">登录后查看个人资料、管理积分与家庭。</text>
+          <view class="gp-login-btn" @click="goLogin">
+            <view class="gp-login-btn-ic"></view>
+            <text class="gp-login-btn-text">登录 / 注册</text>
+          </view>
+          <text class="gp-skip" @click="goSkip">暂不登录，先逛逛 ›</text>
+        </view>
+
+        <!-- 登录后开启 -->
+        <view class="gp-block">
+          <text class="gp-tag">登录后开启</text>
+          <view class="gp-rows">
+            <view class="gp-row">
+              <view class="gp-ic gp-ic-wisdom"><text class="gp-glyph">智</text></view>
+              <view class="gp-row-info">
+                <text class="gp-row-name">个人身份档案</text>
+                <text class="gp-row-sub">资料、角色标签与会员状态</text>
+              </view>
+              <view class="gp-lock"></view>
+            </view>
+            <view class="gp-row">
+              <view class="gp-ic gp-ic-action"><text class="gp-glyph">行</text></view>
+              <view class="gp-row-info">
+                <text class="gp-row-name">我的家庭</text>
+                <text class="gp-row-sub">成员档案、家庭报告与关系管理</text>
+              </view>
+              <view class="gp-lock"></view>
+            </view>
+            <view class="gp-row">
+              <view class="gp-ic gp-ic-wealth"><text class="gp-glyph">富</text></view>
+              <view class="gp-row-info">
+                <text class="gp-row-name">积分与能量</text>
+                <text class="gp-row-sub">积分记录、能量数据与健康资产</text>
+              </view>
+              <view class="gp-lock"></view>
+            </view>
+          </view>
+        </view>
 
-      <view class="philosophy-card">
-        <text class="philosophy-title">照顾家庭，从照顾好自己开始</text>
-        <text class="philosophy-desc">你的状态，就是家的状态。先安顿好自己，才有余力温暖家人。</text>
+        <!-- 理念卡 -->
+        <view class="gp-philosophy">
+          <text class="gp-philosophy-title">照顾家庭，从照顾好自己开始</text>
+          <text class="gp-philosophy-desc">你的状态，就是家的状态。先安顿好自己，才有余力温暖家人。</text>
+        </view>
       </view>
     </view>
 
@@ -849,50 +887,70 @@ $c-fill-2b:         #F2F2F2;
   padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
 }
 
-/* 登录引导 */
-.login-prompt {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 200rpx 60rpx;
-}
-.prompt-icon { font-size: calc(100rpx * var(--font-scale, 1)); margin-bottom: $uni-space-lg; }
-.prompt-title { font-size: calc(40rpx * var(--font-scale, 1)); font-weight: bold; color: $facade-text-strong; margin-bottom: 16rpx; }
-.prompt-desc { font-size: calc(26rpx * var(--font-scale, 1)); color: $facade-text-muted; margin-bottom: 20rpx; }
-.login-btn {
-  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
-  color: $app-surface;
-  border-radius: 24rpx;
-  font-size: calc(30rpx * var(--font-scale, 1));
-  padding: 24rpx 80rpx;
-}
-.skip-link {
-  font-size: calc(26rpx * var(--font-scale, 1));
-  color: $facade-text-muted;
-  margin-top: 24rpx;
-  text-decoration: underline;
-}
-.philosophy-card {
-  margin: 0 40rpx 48rpx;
-  background: linear-gradient(135deg, $facade-brand-tint, rgba($brand-primary, 0.06));
-  border-radius: 24rpx;
-  padding: 28rpx 32rpx;
-  border-left: 6rpx solid $brand-primary;
-}
-.philosophy-title {
-  font-size: calc(28rpx * var(--font-scale, 1));
-  font-weight: bold;
-  color: $facade-text-strong;
-  display: block;
-  margin-bottom: 8rpx;
-}
-.philosophy-desc {
-  font-size: calc(24rpx * var(--font-scale, 1));
-  color: $facade-text-faint;
-  line-height: 1.6;
-  display: block;
+/* ===== 访客态（新暖调配色 · 令牌化） ===== */
+$gp-white: str-slice('#{$app-surface}', 2);
+$gp-brand-hex: '#{$brand-primary}';
+$gp-brand: str-slice($gp-brand-hex, 2);
+$gp-ghost-hex: '#{$facade-text-ghost}';
+$gp-ghost: str-slice($gp-ghost-hex, 2);
+
+.gp-page { background: $app-bg; min-height: 100vh; padding: 28rpx 0 40rpx; }
+
+/* 登录大卡 */
+.gp-login { margin: 0 32rpx 24rpx; background: $app-surface; border-radius: 24rpx; padding: 48rpx 32rpx 40rpx; border: 1rpx solid $app-border-subtle; display: flex; flex-direction: column; align-items: center; box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.06); }
+.gp-logo { width: 112rpx; height: 112rpx; border-radius: 28rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-dark); display: flex; flex-direction: row; align-items: center; justify-content: center; box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.22); }
+.gp-logo-heart {
+  width: 56rpx; height: 56rpx;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 56rpx 56rpx;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23#{$gp-white}' d='M12 20.6 4.6 13.2a4.8 4.8 0 0 1 6.8-6.8l.6.6.6-.6a4.8 4.8 0 0 1 6.8 6.8z'/%3E%3C/svg%3E");
+}
+.gp-login-title { font-size: calc(38rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-strong; margin-top: 24rpx; }
+.gp-login-desc { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.65; margin-top: 12rpx; text-align: center; }
+.gp-login-btn { margin-top: 32rpx; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 26rpx 0; border-radius: 999rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-dark); box-shadow: 0 10rpx 24rpx rgba($brand-primary, 0.22); }
+.gp-login-btn:active { opacity: 0.9; }
+.gp-login-btn-ic {
+  width: 36rpx; height: 36rpx; flex-shrink: 0;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 36rpx 36rpx;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23#{$gp-white}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20.4a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E");
+}
+.gp-login-btn-text { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 600; color: $app-surface; margin-left: 12rpx; }
+.gp-skip { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-muted; margin-top: 24rpx; }
+
+/* 登录后开启 */
+.gp-block { margin: 0 32rpx 24rpx; background: $app-surface; border-radius: 24rpx; padding: 24rpx; border: 1rpx solid $app-border-subtle; }
+.gp-tag { font-size: calc(24rpx * var(--font-scale, 1)); font-weight: 700; color: $brand-primary; letter-spacing: 1rpx; }
+.gp-rows { margin-top: 8rpx; display: flex; flex-direction: column; }
+.gp-row { display: flex; flex-direction: row; align-items: center; padding: 20rpx 0; border-top: 1rpx solid $app-border-subtle; }
+.gp-row:first-child { border-top: none; }
+.gp-ic { width: 76rpx; height: 76rpx; border-radius: 20rpx; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-shrink: 0; }
+.gp-ic-wisdom { background: $dim-wisdom-tint; }
+.gp-ic-action { background: $dim-action-tint; }
+.gp-ic-wealth { background: $dim-wealth-tint; }
+.gp-glyph { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 700; }
+.gp-ic-wisdom .gp-glyph { color: $dim-wisdom-deep; }
+.gp-ic-action .gp-glyph { color: $dim-action-deep; }
+.gp-ic-wealth .gp-glyph { color: $dim-wealth-deep; }
+.gp-row-info { flex: 1; min-width: 0; margin-left: 20rpx; display: flex; flex-direction: column; }
+.gp-row-name { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; }
+.gp-row-sub { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-body; margin-top: 6rpx; }
+.gp-lock {
+  width: 32rpx; height: 32rpx; flex-shrink: 0; margin-left: 12rpx;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 32rpx 32rpx;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23#{$gp-ghost}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
 }
 
+/* 理念卡 */
+.gp-philosophy { margin: 0 32rpx 8rpx; background: $facade-brand-tint; border-radius: 24rpx; padding: 28rpx 24rpx; border-left: 6rpx solid $brand-primary; }
+.gp-philosophy-title { display: block; font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-strong; }
+.gp-philosophy-desc { display: block; font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-body; line-height: 1.65; margin-top: 10rpx; }
+
+
 /* 退出切换 */
 .exit-switch {
   margin: 0 $uni-space-lg 16rpx;