重新设计 身维度身体指页：顶部关键指标卡片+健康概览+雷达趋势图+报告导航按钮

cfc-frontend/pages/body-detail/index.vue

@@ -4,22 +4,50 @@
     <tab-transition v-if="showTabTransition" dimCode="body" ref="tabTransition" @close="showTabTransition = false" />
 
     <!-- 品牌头部 -->
-    <PageBanner theme="body"
-      tagline="科学管理全家健康"
-      quote="身体健康是幸福的基础" />
+    <PageBanner theme="body" tagline="科学管理全家健康" quote="身体健康是幸福的基础" />
 
-    <!-- 品牌定位语（登录前显示） -->
-    <view class="brand-strap" v-if="!isLoggedIn">
-      <text class="brand-strap-text">科学管理全家健康数据</text>
+    <!-- 健康概览卡片：关键物理指标一眼看清 -->
+    <view class="health-overview-card">
+      <view class="overview-header">
+        <text class="overview-title">健康概览</text>
+        <text class="overview-sub">当前身体状况 &amp; 趋势</text>
+      </view>
+      <view class="overview-grid">
+        <view v-for="(ind, i) in keyIndicators" :key="i" class="overview-card-item" @click="goIndicatorDetail(ind)">
+          <view class="overview-icon-wrap">
+            <text class="overview-icon">{{ ind.icon }}</text>
+          </view>
+          <view class="overview-details">
+            <text class="overview-name">{{ ind.name }}</text>
+            <text class="overview-value" v-if="ind.value !== null && ind.value !== undefined">{{ ind.value }}{{ ind.unit || '' }}</text>
+            <text class="overview-placeholder" v-else>暂无数据</text>
+          </view>
+          <view v-if="ind.trend" class="overview-trend">
+            <text class="trend-icon" :class="ind.trend === 'up' ? 'trend-up' : ind.trend === 'down' ? 'trend-down' : 'trend-stable'">
+              {{ ind.trendIcon }}
+            </text>
+            <text class="trend-desc" v-if="ind.trendDesc">{{ ind.trendDesc }}</text>
+          </view>
+        </view>
+      </view>
+      <!-- 快捷导航：查看完整报告 -->
+      <view class="overview-nav-row">
+        <view class="overview-nav-btn" @click="goToReportList">
+          <text class="overview-nav-btn-text">📋 查看完整健康报告</text>
+        </view>
+        <view class="overview-nav-btn-secondary" @click="goToUploadReport">
+          <text class="overview-nav-btn-secondary-text">上传新报告</text>
+        </view>
+      </view>
     </view>
 
-    <!-- 雷达图（始终显示，无用户数据时仅显示人群平均值） -->
-    <view class="section">
+    <!-- 雷达趋势图：直观看到五维身体指标趋势 -->
+    <view class="section" v-if="isLoggedIn">
       <view class="section-header">
-        <text class="section-title">健康指标</text>
-        <text class="section-sub">身体健康各项指标，分数越高代表越健康</text>
-        <text class="avg-badge" v-if="!dimensionData">同龄同性平均值 · 上传健康报告后显示个人数据</text>
+        <text class="section-title">📊 健康趋势分析</text>
+        <text class="section-more" @click="goToReportList">查看完整报告 ›</text>
       </view>
+      <text class="avg-badge" v-if="!dimensionData">同龄同性平均值 · 上传健康报告后显示个人数据</text>
       <RadarChart
         v-if="radarDimensions && radarDimensions.length >= 3"
         :dimensions="radarDimensions"
@@ -34,60 +62,66 @@
         @dimensionClick="goDimensionDetail" />
     </view>
 
-    <!-- 身体指标卡片 -->
-    <view class="indicator-cards-section" v-if="isLoggedIn && (bodyIndicators.length > 0 || gutFloraIndicators.length > 0)">
-      <view class="section-header">
-        <text class="section-title">📊 身体指标</text>
-        <text class="section-more" @click="goToBodyDetail">更多 ›</text>
-      </view>
-      <view class="indicator-cards">
-        <view
-          v-for="(ind, i) in bodyIndicators"
-          :key="ind.code"
-          class="indicator-card"
-          :class="{ 'no-data': !ind.value }"
-          @click="goIndicatorDetail(ind)"
-        >
-          <view class="indicator-header">
-            <text class="indicator-name">{{ ind.name }}</text>
-            <text class="indicator-unit" v-if="ind.unit">{{ ind.unit }}</text>
-          </view>
-          <view class="indicator-body">
-            <text class="indicator-value" v-if="ind.value || ind.numericValue !== null">
-              {{ ind.value || formatNumeric(ind.numericValue) }}
-            </text>
-            <text class="indicator-placeholder" v-else>暂无数据</text>
-          </view>
-          <view class="indicator-footer">
-            <text class="indicator-range" v-if="ind.refRange">参考: {{ ind.refRange }}</text>
+    <!-- 游客引导语（每月更换） -->
+    <view class="monthly-guidance" v-if="!isLoggedIn">
+      <text class="guidance-icon">🌿</text>
+      <text class="guidance-text">{{ monthlyGuidance }}</text>
+    </view>
+
+    <!-- 已登录用户区域 -->
+    <view v-if="isLoggedIn">
+      <!-- 身体指标卡片 -->
+      <view class="indicator-section" v-if="bodyIndicators.length > 0">
+        <view class="section-header">
+          <text class="section-title">📊 身体指标</text>
+          <text class="section-more" @click="goToReportList">查看完整报告 ›</text>
+        </view>
+        <view class="indicator-cards">
+          <view
+            v-for="(ind, i) in bodyIndicators"
+            :key="ind.code"
+            class="indicator-card"
+            :class="{ 'no-data': !ind.value }"
+            @click="goIndicatorDetail(ind)"
+          >
+            <view class="indicator-header">
+              <text class="indicator-name">{{ ind.name }}</text>
+              <text class="indicator-unit" v-if="ind.unit">{{ ind.unit }}</text>
+            </view>
+            <view class="indicator-body">
+              <text class="indicator-value" v-if="ind.value || ind.numericValue !== null">
+                {{ ind.value || formatNumeric(ind.numericValue) }}
+              </text>
+              <text class="indicator-placeholder" v-else>暂无数据</text>
+            </view>
+            <view class="indicator-footer">
+              <text class="indicator-range" v-if="ind.refRange">参考范围: {{ ind.refRange }}</text>
+            </view>
           </view>
         </view>
       </view>
-    </view>
 
-    <!-- 肠道菌群卡片（有菌群报告时显示） -->
-    <view class="gut-section" v-if="isLoggedIn">
-      <view class="section-header">
-        <text class="section-title">🦠 肠道菌群</text>
-        <text class="section-more" @click="goToBodyDetail">更多 ›</text>
-      </view>
-      <view class="gut-summary" v-if="gutSummary && gutFloraIndicators.length > 0">
-        <text class="gut-summary-text">{{ gutSummary }}</text>
-      </view>
-      <view class="gut-groups" v-if="gutFloraIndicators.length > 0">
-        <view class="gut-group" v-for="group in gutGrouped" :key="group.category">
-          <text class="gut-group-title">{{ group.title }}</text>
-          <view class="gut-items">
-            <view
-              v-for="(ind, i) in group.items"
-              :key="i"
-              class="gut-item"
-              :class="{ 'gut-abnormal': ind.status === 'high' || ind.status === 'low' }"
-            >
-              <text class="gut-item-name">{{ ind.name }}</text>
-              <view class="gut-item-right">
-                <text class="gut-item-value" v-if="ind.value">{{ ind.value }}</text>
-                <text class="gut-item-status" :class="'status-' + (ind.status || 'normal')">{{ ind.status === 'high' ? '偏高' : ind.status === 'low' ? '偏低' : (ind.status || '正常') }}</text>
+      <!-- 肠道菌群（有菌群报告时显示） -->
+      <view class="gut-section" v-if="gutFloraIndicators.length > 0">
+        <view class="section-header">
+          <text class="section-title">🦠 肠道菌群</text>
+          <text class="section-more" @click="goToReportList">查看完整报告 ›</text>
+        </view>
+        <view class="gut-summary">
+          <text class="gut-summary-text">{{ gutSummary }}</text>
+        </view>
+        <view class="gut-groups">
+          <view class="gut-group" v-for="group in gutGrouped" :key="group.category">
+            <text class="gut-group-title">{{ group.title }}</text>
+            <view class="gut-items">
+              <view v-for="(ind, i) in group.items" :key="i" class="gut-item" :class="{ 'gut-abnormal': ind.status === 'high' || ind.status === 'low' }">
+                <text class="gut-item-name">{{ ind.name }}</text>
+                <view class="gut-item-right">
+                  <text class="gut-item-value" v-if="ind.value">{{ ind.value }}</text>
+                  <text class="gut-item-status" :class="'status-' + (ind.status || 'normal')">
+                    {{ ind.status === 'high' ? '偏高' : ind.status === 'low' ? '偏低' : '正常' }}
+                  </text>
+                </view>
               </view>
             </view>
           </view>
@@ -97,65 +131,66 @@
         <text>上传菌群检测报告，查看肠道健康指标</text>
         <text class="gut-upload-link" @click="goToUploadReport">去上传 →</text>
       </view>
-    </view>
 
-    <!-- 疾病风险卡片（有报告且有风险项时显示） -->
-    <view class="risk-section" v-if="isLoggedIn && diseaseRisks.length > 0">
-      <view class="section-header">
-        <text class="section-title">⚠️ 疾病风险</text>
-        <text class="section-more" @click="goToBodyDetail">更多 ›</text>
-      </view>
-      <view class="risk-list">
-        <view
-          v-for="(risk, i) in diseaseRisks"
-          :key="i"
-          class="risk-item"
-          :class="'risk-' + (risk.level || 'normal')"
-        >
-          <text class="risk-name">{{ risk.name }}</text>
-          <view class="risk-right">
-            <text class="risk-value" v-if="risk.value">{{ risk.value }}</text>
-            <text class="risk-level">{{ risk.level === 'severe' ? '高风险' : risk.level === 'attention' ? '需注意' : (risk.level || '未知') }}</text>
+      <!-- 疾病风险卡片 -->
+      <view class="risk-section" v-if="diseaseRisks.length > 0">
+        <view class="section-header">
+          <text class="section-title">⚠️ 疾病风险</text>
+          <text class="section-more" @click="goToReportList">查看完整报告 ›</text>
+        </view>
+        <view class="risk-list">
+          <view v-for="(risk, i) in diseaseRisks" :key="i" class="risk-item" :class="'risk-' + (risk.level || 'normal')">
+            <text class="risk-name">{{ risk.name }}</text>
+            <view class="risk-right">
+              <text class="risk-value" v-if="risk.value">{{ risk.value }}</text>
+              <text class="risk-level">
+                {{ risk.level === 'severe' ? '高风险' : risk.level === 'attention' ? '需注意' : (risk.level || '未知') }}
+              </text>
+            </view>
           </view>
         </view>
       </view>
-    </view>
 
-    <!-- 家庭成员选择条 -->
-    <FamilyMemberStrip
-      v-if="currentView === 'self' && isLoggedIn"
-      :members="familyMembersVisible"
-      :selectedMemberId="selectedMemberId"
-      @select="onFamilyMemberSelect"
-      @removed="loadFamilyMembersVisible" />
+      <!-- 家庭成员选择条 -->
+      <FamilyMemberStrip
+        v-if="currentView === 'self'"
+        :members="familyMembersVisible"
+        :selectedMemberId="selectedMemberId"
+        @select="onFamilyMemberSelect"
+        @removed="loadFamilyMembersVisible" />
 
-    <!-- 游客引导语（每月更换） -->
-    <view class="monthly-guidance" v-if="!isLoggedIn">
-      <text class="guidance-icon">🌿</text>
-      <text class="guidance-text">{{ monthlyGuidance }}</text>
-    </view>
+      <!-- 五维能量条 -->
+      <FamilyEnergyBar v-if="dualDimension" dimensionCode="body" :sandboxData="sandboxData" :dualDimension="dualDimension" />
 
-    <!-- 登录后：五维能量条 -->
-    <FamilyEnergyBar
-      v-if="isLoggedIn"
-      dimensionCode="body"
-      :sandboxData="sandboxData"
-      :dualDimension="dualDimension" />
-    <!-- 身体指标卡片 -->
-    <view class="func-section" v-if="sectionVisible('func_entries')">
-      <view class="func-grid">
-        <view class="func-item" v-for="item in funcList" :key="item.label" @click="onFuncClick(item)">
-          <view class="func-icon-wrap">
-            <text class="func-icon">{{ item.icon }}</text>
+      <!-- 身体维度介绍 -->
+      <DimensionIntroCard dimCode="body" v-if="isLoggedIn" learn-more-url="/pages/body-detail/dimension-intro" />
+
+      <!-- 功能入口网格 -->
+      <view v-if="sectionVisible('func_entries')" class="func-section">
+        <view class="func-grid">
+          <view class="func-item" v-for="item in funcList" :key="item.label" @click="onFuncClick(item)">
+            <view class="func-icon-wrap">
+              <text class="func-icon">{{ item.icon }}</text>
+            </view>
+            <text class="func-label">{{ item.label }}</text>
           </view>
-          <text class="func-label">{{ item.label }}</text>
         </view>
       </view>
     </view>
-    <!-- 身维度介绍卡片（登录后显示） -->
-    <DimensionIntroCard dimCode="body" v-if="isLoggedIn" learn-more-url="/pages/body-detail/dimension-intro" />
 
-    <!-- 底部占位 -->
+    <!-- 游客主区域 -->
+    <view v-else class="visitor-body">
+      <view class="visitor-intro">
+        <text class="visitor-icon">🌿</text>
+        <text class="visitor-title">欢迎来到身维度</text>
+        <text class="visitor-desc">登录后查看身高体重、血压、心率等身体指标及趋势报告</text>
+      </view>
+      <view class="visitor-actions">
+        <button class="visitor-btn-primary" @click="goLogin">立即登录</button>
+        <button class="visitor-btn-secondary" @click="goReportList">查看报告</button>
+      </view>
+    </view>
+
     <view class="bottom-spacer"></view>
     <FloatingAvatar />
   </view>
@@ -166,11 +201,23 @@ import TabTransition from '../../components/tab-transition.vue'
 import PageBanner from '../../components/PageBanner.vue'
 import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
 import RadarChart from '../../components/RadarChart.vue'
-
 import FloatingAvatar from '../../components/AIFloatingAvatar.vue'
 import DimensionIntroCard from '../../components/DimensionIntroCard.vue'
 import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
-import { getVisibleSections, getEnergyOverview, getChildren, getFamilyEnergySandbox, getEnergySandbox, getFamilyMemberList, getDimensionOverview, getRadarData, getGutFloraIndicators, getBodyAbnormalIndicators } from '../../utils/api.js'
+
+import {
+  getVisibleSections,
+  getEnergyOverview,
+  getChildren,
+  getFamilyEnergySandbox,
+  getEnergySandbox,
+  getFamilyMemberList,
+  getDimensionOverview,
+  getRadarData,
+  getGutFloraIndicators,
+  getBodyAbnormalIndicators,
+  getLatestIndicators
+} from '../../utils/api.js'
 
 export default {
   components: { TabTransition, PageBanner, FamilyEnergyBar, RadarChart, FloatingAvatar, FamilyMemberStrip, DimensionIntroCard },
@@ -182,39 +229,39 @@ export default {
       activeChildId: null,
       selectedMemberId: null,
       activeChildName: '',
-      userName: '',
       children: [],
       familyMembersVisible: [],
-      // 接口数据是否已检查（避免"暂无数据"闪烁）
-      childrenChecked: false,
-      membersChecked: false,
-            healthSubDims: [],
+      healthSubDims: [],
       bodyIndicators: [],
       gutFloraIndicators: [],
       hasGutReport: false,
       diseaseRisks: [],
       sandboxData: null,
-      currentView: 'self', // 'self' | 'family'
+      currentView: 'self',
       dualDimension: null,
       visibleSections: [],
       dimensionData: null,
-      /** 雷达图家庭平均分（来自接口） */
       radarFamilyScores: [],
-      /** 雷达图人群位置分（来自接口） */
       radarPopulationScores: [],
+      // 关键指标 - 直接显示的物理指标
+      keyIndicators: [
+        { name: '身高', icon: '📏', unit: 'cm', value: null, trend: 'stable', trendIcon: '─', trendDesc: '' },
+        { name: '体重', icon: '⚖️', unit: 'kg', value: null, trend: 'stable', trendIcon: '─', trendDesc: '' },
+        { name: '血压', icon: '🩺', unit: '/mmHg', value: null, trend: 'stable', trendIcon: '─', trendDesc: '' },
+        { name: '体温', icon: '🌡️', unit: '°C', value: null, trend: 'stable', trendIcon: '─', trendDesc: '' },
+        { name: '心率', icon: '❤️', unit: '次/分', value: null, trend: 'stable', trendIcon: '─', trendDesc: '' }
+      ],
       funcList: [
         { icon: '\u{1F3C3}', label: '运动', needLogin: true, page: '/pages/body/exercise-record' },
         { icon: '\u{1F957}', label: '饮食', needLogin: true, page: '/pages/diet/index' },
         { icon: '\u{1F634}', label: '作息', needLogin: true, page: '/pages/body/sleep-record' },
         { icon: '\u{1F9D8}', label: '冥想', needLogin: true, page: '/pages/health/meditation-index' },
         { icon: '\u{1F4CA}', label: '舌诊', needLogin: true, page: '/pages/health/report-upload?reportType=tongue' },
-        // 问答功能已屏蔽: { icon: '\u{1F3E5}', label: '健康管家', needLogin: true, page: '/pages/ai/chat?mode=butler&fromPage=pages/body/index' },
         { icon: '\u{1F9EC}', label: '健康维度', needLogin: true, page: 'health-dimensions' }
       ]
     }
   },
   computed: {
-    /** 七维雷达图：维度标签（API无数据时使用默认标签） */
     radarDimensions: function() {
       var dims = this.dimensionData && this.dimensionData.dimensions
       if (dims && dims.length > 0) {
@@ -226,7 +273,6 @@ export default {
         }
         return result
       }
-      // 无数据时使用默认七维标签
       return [
         { label: '生长发育', key: 'growth' },
         { label: '睡眠质量', key: 'sleep' },
@@ -237,7 +283,6 @@ export default {
         { label: '运动活力', key: 'exercise' }
       ]
     },
-    /** 七维雷达图：分值（无数据时返回空数组，仅显示平均值） */
     radarScores: function() {
       var dims = this.dimensionData && this.dimensionData.dimensions
       if (!dims) return []
@@ -269,12 +314,15 @@ export default {
     },
     gutSummary: function() {
       if (!this.gutFloraIndicators.length) return ''
-      var abnormal = this.gutFloraIndicators.filter(function(i) { return i.status === 'high' || i.status === 'low' }).length
+      var abnormal = 0
+      for (var k = 0; k < this.gutFloraIndicators.length; k++) {
+        var s = this.gutFloraIndicators[k]
+        if (s.status === 'high' || s.status === 'low') abnormal++
+      }
       if (abnormal === 0) return '菌群整体平衡良好'
       if (abnormal <= 2) return '部分菌群指标略有波动'
       return '多项菌群指标异常，建议咨询专业营养师'
     },
-    /** 每月引导语 */
     monthlyGuidance: function() {
       var month = new Date().getMonth()
       var messages = [
@@ -296,26 +344,21 @@ export default {
   },
   onShow() {
     this.showTabTransition = true
-
     var token = uni.getStorageSync('token')
     this.isLoggedIn = !!token
     if (this.isLoggedIn) {
       this.role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
-      this.userName = uni.getStorageSync('nickname') || uni.getStorageSync('userName') || '家长'
     }
     this.loadSectionConfig()
     if (this.isLoggedIn) {
       this.loadChildren()
       this.loadFamilyMembersVisible()
     }
-    // 游客也能浏览活动和商品
-    // 游客也能浏览文章
-    this._watchPageReady()
   },
   methods: {
     loadSectionConfig: function() {
       var baseSections = ['func_entries']
-      if (!uni.getStorageSync('token')) {
+      if (!this.isLoggedIn) {
         this.visibleSections = baseSections
         return
       }
@@ -325,7 +368,9 @@ export default {
         if (res.code === 200 && res.data) {
           var keys = res.data.map(function(s) { return s.sectionKey })
           var merged = baseSections.slice()
-          keys.forEach(function(k) { if (merged.indexOf(k) === -1) merged.push(k) })
+          for (var k = 0; k < keys.length; k++) {
+            if (merged.indexOf(keys[k]) === -1) merged.push(keys[k])
+          }
           self.visibleSections = merged
         }
       }).catch(function(e) {
@@ -356,11 +401,7 @@ export default {
             self.loadDashboardData()
           }
         }
-        self.childrenChecked = true
-      }).catch(function(e) {
-        console.log('获取孩子列表失败', e)
-        self.childrenChecked = true
-      })
+      }).catch(function(e) { console.log('获取孩子列表失败', e) })
     },
     loadDashboardData: function() {
       if (!this.activeChildId) return
@@ -369,7 +410,7 @@ export default {
       this.loadHealthDimensions()
     },
     loadHealthDimensions: function() {
-      var memberId = this.activeChildId || (this.userInfo && this.userInfo.userId)
+      var memberId = this.activeChildId
       if (!memberId) {
         console.log('[body] loadHealthDimensions skipped: no memberId')
         return
@@ -378,15 +419,11 @@ export default {
       getDimensionOverview({ memberId: memberId }).then(function(res) {
         if (res && res.data) {
           self.dimensionData = res.data
-          self.healthSubDims = (self.dimensionData.dimensions || []).map(function(d) { return {label: d.label || d.dimension, score: d.score || 0, desc: d.description || ''}; });
-          console.log('[body] dimensionData loaded:', res.data.dimensions ? res.data.dimensions.length : 0, 'dimensions')
-        } else if (res) {
-          console.warn('[body] dimension API error:', res.message || res.code)
+          self.healthSubDims = (self.dimensionData.dimensions || []).map(function(d) { return {label: d.label || d.dimension, score: d.score || 0, desc: d.description || ''} })
         }
       }).catch(function(e) {
         console.error('[body] loadHealthDimensions failed', e)
       })
-      // 加载雷达图三层数据（实际值/人群位置/家庭占比）
       getRadarData({ memberId: memberId, dimensions: ['growth','sleep','vision','immunity','nutrition','gut','exercise'] }).then(function(res) {
         if (res && res.data) {
           self.radarFamilyScores = res.data.familyScores || []
@@ -395,18 +432,30 @@ export default {
       }).catch(function(e) {
         console.warn('[body] radar-data failed', e)
       })
-      // 加载身体指标列表
       self.loadBodyIndicators(memberId)
-      // 加载菌群指标
       self.loadGutFlora(memberId)
-      // 加载疾病风险
       self.loadDiseaseRisks(memberId)
     },
     loadBodyIndicators: function(memberId) {
       var self = this
       getLatestIndicators({ memberId: memberId, domain: 'body' }).then(function(res) {
         if (res.code === 200) {
-          self.bodyIndicators = res.data || []
+          var data = res.data || []
+          self.bodyIndicators = data
+          // 将API数据同步到keyIndicators中匹配的项目
+          for (var i = 0; i < self.keyIndicators.length; i++) {
+            var keyInd = self.keyIndicators[i]
+            for (var j = 0; j < data.length; j++) {
+              if (data[j].code === keyInd.code) {
+                keyInd.value = data[j].value
+                keyInd.unit = data[j].unit || keyInd.unit
+                keyInd.trend = data[j].trend || 'stable'
+                keyInd.trendIcon = data[j].trend === 'up' ? '▲' : data[j].trend === 'down' ? '▼' : '─'
+                keyInd.trendDesc = data[j].trendDesc || ''
+                break
+              }
+            }
+          }
         }
       }).catch(function(e) {
         console.log('[body] loadBodyIndicators failed', e)
@@ -415,9 +464,20 @@ export default {
     loadGutFlora: function(memberId) {
       var self = this
       getGutFloraIndicators({ memberId: memberId }).then(function(res) {
-        if (res.code === 200) { self.gutFloraIndicators = res.data || []; self.hasGutReport = (res.data && res.data.length > 0) }
+        if (res.code === 200) {
+          self.gutFloraIndicators = res.data || []
+          self.hasGutReport = self.gutFloraIndicators.length > 0
+        }
       }).catch(function(e) { console.log('[body] loadGutFlora failed', e) })
     },
+    loadDiseaseRisks: function(memberId) {
+      var self = this
+      getBodyAbnormalIndicators({ memberId: memberId }).then(function(res) {
+        if (res.code === 200) {
+          self.diseaseRisks = res.data || []
+        }
+      }).catch(function(e) { console.log('[body] loadDiseaseRisks failed', e) })
+    },
     loadSandboxData: function() {
       var self = this
       getFamilyEnergySandbox().then(function(res) {
@@ -428,20 +488,6 @@ export default {
         console.log('获取沙盘数据失败', e)
       })
     },
-    switchView: function(view) {
-      this.currentView = view
-      if (view === 'family') {
-        this.selectedMemberId = null
-        var self = this
-        getEnergySandbox('family').then(function(res) {
-          if (res && res.data && !res.data.locked) {
-            self.sandboxData = res.data.familyData || res.data
-          }
-        }).catch(function(e) { console.log('获取家庭数据失败', e) })
-      } else {
-        this.loadSandboxData()
-      }
-    },
     loadEnergyData: function() {
       var self = this
       getEnergyOverview(this.activeChildId).then(function(res) {
@@ -456,115 +502,60 @@ export default {
             }
           }
         }
-      }).catch(function(e) {
-        console.log('获取能量概览失败', e)
-      })
+      }).catch(function() {})
     },
-    onFamilyMemberSelect: function(member) {
-      this.selectedMemberId = member.id
+    goIndicatorDetail: function(ind) {
+      var url = '/pages/health/report-list'
+      uni.navigateTo({ url: url })
     },
-    onChildChanged: function(child) {
-      this.activeChildId = child.memberId
-      this.activeChildName = child.name || child.nickname || '孩子'
-      this.loadDashboardData()
+    goToReportList: function() {
+      uni.navigateTo({ url: '/pages/health/report-list' })
     },
-    loadFamilyMembersVisible: function() {
-      var self = this
-      getFamilyMemberList({ visibleOnly: true }).then(function(res) {
-        self.familyMembersVisible = res.data || []
-        self.membersChecked = true
-      }).catch(function(e) {
-        console.log('获取可见家庭成员失败', e)
-        self.familyMembersVisible = []
-        self.membersChecked = true
-      })
+    goToUploadReport: function() {
+      uni.navigateTo({ url: '/pages/health/report-upload' })
     },
-    scrollToSection: function(section) {
-      uni.pageScrollTo({ selector: '#' + section, duration: 300 })
+    goToLogin: function() {
+      uni.navigateTo({ url: '/pages/login/login' })
     },
-    sectionVisible: function(key) {
-      return this.visibleSections.length === 0 || this.visibleSections.indexOf(key) !== -1
+    goDimensionDetail: function(dim) {
+      var url = '/pages/body-detail/dimension-detail?dim=' + dim.key
+      uni.navigateTo({ url: url })
     },
     onFuncClick: function(item) {
       if (item.needLogin && !this.isLoggedIn) {
-        uni.showModal({
-          title: '提示',
-          content: '请先登录后使用此功能',
-          success: function(res) {
-            if (res.confirm) uni.navigateTo({ url: '/pages/login/login' })
-          }
-        })
+        uni.showToast({ title: '请先登录', icon: 'none' })
         return
       }
-      if (item.page === 'health-dimensions') {
-        if (!this.activeChildId) {
-          uni.showToast({ title: '请先选择孩子', icon: 'none' })
-          return
-        }
-        uni.navigateTo({ url: '/pages/body-detail/health-dimensions?memberId=' + this.activeChildId })
-        return
-      }
-      if (item.page) uni.navigateTo({ url: item.page })
-    },
-    goDimensionDetail: function(dimKey) {
-      uni.navigateTo({ url: '/pages/body-detail/dimension-detail?dimension=' + dimKey + '&memberId=' + this.activeChildId })
-    },
-    goToCheckin: function() {
-      var id = this.activeChildId || uni.getStorageSync('currentChildId')
-      if (!id) {
-        uni.showToast({ title: '请先选择成员', icon: 'none' })
-        return
-      }
-      uni.navigateTo({ url: '/pages/body-detail/checkin?memberId=' + id })
+      uni.navigateTo({ url: item.page })
     },
-    goToNutritionProfile: function() {
-      var id = this.activeChildId || uni.getStorageSync('currentChildId')
-      if (!id) {
-        uni.showToast({ title: '请先选择成员', icon: 'none' })
-        return
-      }
-      uni.navigateTo({ url: '/pages/health/nutrition-profile?memberId=' + id })
+    onFamilyMemberSelect: function(memberId) {
+      this.selectedMemberId = memberId
+      this.loadDashboardData()
     },
-    loadDiseaseRisks: function(memberId) {
+    loadFamilyMembersVisible: function() {
       var self = this
-      getBodyAbnormalIndicators(memberId).then(function(res) {
-        if (res.code === 200 && res.data && res.data.diseaseRisks) {
-          self.diseaseRisks = res.data.diseaseRisks
+      getFamilyMemberList({}).then(function(res) {
+        if (res.code === 200 && res.data) {
+          self.familyMembersVisible = res.data.map(function(m) {
+            return { id: m.id, nickname: m.nickname, avatar: m.avatar }
+          })
         }
-      }).catch(function(e) { console.log('[body] loadDiseaseRisks failed', e) })
-    },
-    goToBodyDetail: function() {
-      var id = this.activeChildId || uni.getStorageSync('currentChildId')
-      if (!id) return
-      uni.navigateTo({ url: '/pages/body-detail/member-body-detail?memberId=' + id })
+      }).catch(function(e) { console.log('获取家庭成员失败', e) })
     },
-    goIndicatorDetail: function(ind) {
-      var id = this.activeChildId || uni.getStorageSync('currentChildId')
-      if (!id) return
-      uni.navigateTo({ url: '/pages/body-detail/dimension-detail?dimension=' + ind.code + '&memberId=' + id })
+    sectionVisible: function(key) {
+      return this.visibleSections.indexOf(key) >= 0
     },
-    formatNumeric: function(v) {
-      if (v === null || v === undefined) return ''
-      var n = parseFloat(v)
-      if (isNaN(n)) return String(v)
-      return n % 1 === 0 ? String(n) : n.toFixed(1)
+    formatNumeric: function(val) {
+      if (val === null || val === undefined) return ''
+      var n = parseFloat(val)
+      if (isNaN(n)) return String(val)
+      return n.toFixed(1)
     },
-    goToUploadReport: function() {
-      var id = this.activeChildId || uni.getStorageSync('currentChildId') || ''
-      uni.navigateTo({ url: '/pages/health/report-upload?memberId=' + id + '&from=body' })
+    goLogin: function() {
+      uni.navigateTo({ url: '/pages/login/login' })
     },
-    _watchPageReady() {
-      var self = this
-      var unwatch = this.$watch(function() {
-        if (self.isLoggedIn) {
-          return !!(self.dualDimension || self.sandboxData)
-        }
-      }, function(val) {
-        if (val) {
-          if (unwatch) unwatch()
-          if (self.$refs.tabTransition) self.$refs.tabTransition.markReady()
-        }
-      })
+    goReportList: function() {
+      uni.navigateTo({ url: '/pages/health/report-list' })
     }
   }
 }
@@ -573,370 +564,502 @@ export default {
 <style scoped>
 .body-container {
   min-height: 100vh;
-  background: #f5f7fa;
-  padding-bottom: 120rpx;
+  background-color: #F5F7FA;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ─── 健康概览卡片 ─── */
+.health-overview-card {
+  background-color: #FFFFFF;
+  border-radius: 24rpx;
+  margin: 20rpx 20rpx 12rpx;
+  box-shadow: 0 4rpx 16rpx rgba(255, 140, 66, 0.12);
+  overflow: hidden;
+}
+
+.overview-header {
+  padding: 24rpx 24rpx 16rpx;
+  border-bottom: 1rpx solid #FFF0E4;
+}
+
+.overview-title {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #FF8C42;
+  margin-bottom: 4rpx;
+  display: block;
 }
 
-/* ===== 功能入口 ===== */
-.func-section {
-  margin: 20rpx 30rpx;
+.overview-sub {
+  font-size: 22rpx;
+  color: #999;
 }
-.func-grid {
+
+.overview-grid {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  background: #fff;
+  flex-wrap: wrap;
+  padding: 20rpx 20rpx 0;
+}
+
+.overview-card-item {
+  width: calc(50% - 16rpx);
+  margin: 0 0 20rpx 0;
+  margin-right: 16rpx;
+  padding: 20rpx;
+  background: linear-gradient(135deg, #FFF8F0 0%, #FFF3E8 100%);
   border-radius: 20rpx;
-  padding: 24rpx 16rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+  box-shadow: 0 2rpx 8rpx rgba(255, 140, 66, 0.08);
 }
-.func-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
+
+.overview-card-item:nth-child(4n) {
+  margin-right: 0;
 }
-.func-icon-wrap {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 40rpx;
-  background: linear-gradient(135deg, #D6EAF8, #EBF2FA);
+
+.overview-icon-wrap {
+  width: 52rpx;
+  height: 52rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #FF8C42, #FFB366);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 10rpx;
+  margin-bottom: 12rpx;
+  box-shadow: 0 2rpx 8rpx rgba(255, 140, 66, 0.3);
 }
-.func-icon {
-  font-size: 40rpx;
+
+.overview-icon {
+  font-size: 28rpx;
+}
+
+.overview-details {
+  width: 100%;
 }
-.func-label {
+
+.overview-name {
   font-size: 22rpx;
-  color: #666;
-  font-weight: 500;
+  color: #999;
+  display: block;
+  margin-bottom: 4rpx;
 }
 
-/* ===== 通用区块 ===== */
-.section {
-  margin: 20rpx 30rpx;
+.overview-value {
+  font-size: 40rpx;
+  font-weight: 700;
+  color: #FF8C42;
 }
-.section-header {
+
+.overview-placeholder {
+  font-size: 22rpx;
+  color: #ccc;
+}
+
+.overview-trend {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16rpx;
-}
-.section-title {
-  font-size: 30rpx;
-  font-weight: bold;
-  color: #333;
+  margin-top: 6rpx;
+  gap: 4rpx;
 }
-.avg-badge {
+
+.trend-icon {
   font-size: 20rpx;
-  color: #F97316;
-  background: #FFF7ED;
-  padding: 4rpx 12rpx;
-  border-radius: 20rpx;
-  margin-left: 12rpx;
+  flex-shrink: 0;
 }
-/* ===== 快捷操作 ===== */
-.quick-actions {
+
+.trend-up { color: #10B981; }
+.trend-down { color: #FF6B6B; }
+.trend-stable { color: #999; }
+
+.trend-desc {
+  font-size: 18rpx;
+  color: #888;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 快捷导航按钮 */
+.overview-nav-row {
   display: flex;
-  flex-direction: row;
-  margin-top: 30rpx;
+  padding: 20rpx 24rpx 24rpx;
+  gap: 16rpx;
 }
-.action-btn {
+
+.overview-nav-btn {
   flex: 1;
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 24rpx;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  margin-right: 20rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+  justify-content: center;
+  background: linear-gradient(135deg, #FF8C42, #FF6B1A);
+  border-radius: 48rpx;
+  padding: 20rpx 0;
+  box-shadow: 0 4rpx 16rpx rgba(255, 107, 26, 0.35);
 }
-.action-btn:last-child {
-  margin-right: 0;
+
+.overview-nav-btn-text {
+  color: #FFFFFF;
+  font-size: 26rpx;
+  font-weight: 600;
 }
-.action-icon {
-  font-size: 48rpx;
-  margin-bottom: 8rpx;
+
+.overview-nav-btn-secondary {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #FFFFFF;
+  border-radius: 48rpx;
+  padding: 20rpx 0;
+  border: 2rpx solid #FF8C42;
 }
-.action-text {
+
+.overview-nav-btn-secondary-text {
+  color: #FF8C42;
   font-size: 26rpx;
-  color: #666;
+  font-weight: 600;
 }
 
-/* ===== 底部 ===== */
-/* ===== 肠道菌群 ===== */
-.gut-section { margin: 20rpx 30rpx; }
-.gut-summary { background: #F0F9FF; border-radius: 16rpx; padding: 16rpx 20rpx; margin-bottom: 16rpx; }
-.gut-summary-text { font-size: 26rpx; color: #0369A1; }
-.gut-group { background: #fff; border-radius: 16rpx; padding: 20rpx 24rpx; margin-bottom: 16rpx; }
-.gut-group-title { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 12rpx; display: block; }
-.gut-item { display: flex; align-items: center; justify-content: space-between; padding: 12rpx 0; border-bottom: 1rpx solid #F3F4F6; }
-.gut-item:last-child { border-bottom: none; }
-.gut-item.gut-abnormal .gut-item-name { color: #EF4444; }
-.gut-item-name { font-size: 26rpx; color: #333; flex: 1; }
-.gut-item-right { display: flex; align-items: center; gap: 12rpx; }
-.gut-item-value { font-size: 26rpx; color: #666; }
-.gut-item-status { font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 20rpx; }
-.gut-item-status.status-high { background: #FEE2E2; color: #DC2626; }
-.gut-item-status.status-low { background: #FEF3C7; color: #D97706; }
-.gut-item-status.status-normal { background: #D1FAE5; color: #059669; }
-.gut-empty-hint { text-align: center; padding: 30rpx; color: #999; font-size: 26rpx; background: #fff; border-radius: 16rpx; margin-bottom: 16rpx; }
-.gut-upload-link { color: #3B82F6; margin-left: 8rpx; }
-
-/* ===== 疾病风险 ===== */
-.risk-section { margin: 20rpx 30rpx; }
-.risk-list { background: #fff; border-radius: 16rpx; padding: 8rpx 0; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
-.risk-item { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 24rpx; border-bottom: 1rpx solid #F3F4F6; }
-.risk-item:last-child { border-bottom: none; }
-.risk-item.risk-severe { background: #FEF2F2; }
-.risk-item.risk-attention { background: #FFFBEB; }
-.risk-name { font-size: 28rpx; font-weight: 500; color: #333; flex: 1; }
-.risk-right { display: flex; align-items: center; gap: 12rpx; }
-.risk-value { font-size: 24rpx; color: #666; }
-.risk-level { font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 20rpx; }
-.risk-level.risk-severe { background: #FEE2E2; color: #DC2626; }
-.risk-level.risk-attention { background: #FEF3C7; color: #D97706; }
+/* ─── 通用区块 ─── */
+.section,
+.indicator-section,
+.gut-section,
+.risk-section {
+  background-color: #FFFFFF;
+  border-radius: 24rpx;
+  margin: 0 20rpx 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
 
-.bottom-spacer {
-  height: 120rpx;
+.section-header {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 24rpx 16rpx;
+  border-bottom: 1rpx solid #F5F5F5;
 }
 
-.indicator-cards-section { margin: 20rpx 30rpx; }
-.indicator-cards { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16rpx; }
-.indicator-card { width: calc(50% - 8rpx); background: #fff; border-radius: 20rpx; padding: 24rpx 20rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
-.indicator-card.no-data { opacity: 0.5; }
-.indicator-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12rpx; }
-.indicator-name { font-size: 26rpx; color: #666; font-weight: 500; }
-.indicator-unit { font-size: 22rpx; color: #999; }
-.indicator-body { margin-bottom: 8rpx; }
-.indicator-value { font-size: 40rpx; font-weight: bold; color: #FF8C42; }
-.indicator-placeholder { font-size: 26rpx; color: #ccc; }
-.indicator-range { font-size: 20rpx; color: #bbb; }
+.section-title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333;
+}
 
-.func-item:active, .action-btn:active {
-  opacity: 0.7;
+.section-more {
+  font-size: 24rpx;
+  color: #FF8C42;
+  font-weight: 500;
+  margin-left: auto;
+  padding-left: 16rpx;
 }
 
-/* ===== 精准营养 ===== */
-.nutrition-section {
-  margin-top: 20rpx;
+.avg-badge {
+  display: block;
+  font-size: 22rpx;
+  color: #999;
+  padding: 0 24rpx 16rpx;
 }
-.nutrition-report-card {
+
+/* ─── 身体指标卡片 ─── */
+.indicator-cards {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
-  border-radius: 20rpx;
-  padding: 28rpx 24rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+  flex-wrap: wrap;
+  padding: 20rpx 20rpx 24rpx;
 }
-.nutrition-report-left {
-  width: 100rpx;
-  height: 100rpx;
-  background: rgba(255,255,255,0.7);
+
+.indicator-card {
+  width: calc(50% - 16rpx);
+  margin: 0 0 20rpx 0;
+  margin-right: 16rpx;
+  padding: 20rpx;
+  background: linear-gradient(135deg, #FFF9F5 0%, #FFF5EE 100%);
   border-radius: 20rpx;
+  border: 2rpx solid rgba(255, 140, 66, 0.15);
+}
+
+.indicator-card:nth-child(4n) {
+  margin-right: 0;
+}
+
+.indicator-card.no-data {
+  background: #F8F8F8;
+  border-color: #eee;
+}
+
+.indicator-header {
   display: flex;
   align-items: center;
-  justify-content: center;
-  margin-right: 20rpx;
-  flex-shrink: 0;
+  justify-content: space-between;
+  margin-bottom: 8rpx;
 }
-.nutrition-icon-large {
-  font-size: 52rpx;
+
+.indicator-name {
+  font-size: 24rpx;
+  color: #666;
 }
-.nutrition-report-right {
-  flex: 1;
+
+.indicator-unit {
+  font-size: 20rpx;
+  color: #999;
 }
-.nutrition-title {
-  font-size: 30rpx;
-  font-weight: bold;
-  color: #2E7D32;
-  display: block;
+
+.indicator-body {
   margin-bottom: 6rpx;
 }
-.nutrition-desc {
-  font-size: 22rpx;
-  color: #558B2F;
-  line-height: 1.5;
-  display: block;
-  margin-bottom: 10rpx;
+
+.indicator-value {
+  font-size: 40rpx;
+  font-weight: 700;
+  color: #FF8C42;
 }
-.nutrition-report-tags {
-  display: flex;
-  flex-direction: row;
-  gap: 10rpx;
+
+.indicator-placeholder {
+  font-size: 24rpx;
+  color: #ccc;
 }
-.nutrition-report-tags .tag {
+
+.indicator-footer {
   font-size: 20rpx;
-  color: #33691E;
-  background: rgba(255,255,255,0.6);
-  padding: 4rpx 14rpx;
-  border-radius: 20rpx;
+  color: #999;
+  text-align: right;
 }
-.nutrition-arrow {
-  font-size: 40rpx;
-  color: #A5D6A7;
-  margin-left: 12rpx;
+
+/* ─── 肠道菌群 ─── */
+.gut-section {
+  background-color: #FFFFFF;
+  border-radius: 24rpx;
+  margin: 0 20rpx 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+  overflow: hidden;
 }
 
-.nutrition-links {
-  margin-bottom: 20rpx;
+.gut-summary {
+  padding: 20rpx 24rpx;
+  background-color: #FFF8F0;
+  border-bottom: 1rpx solid #FFF0E4;
+  text-align: center;
 }
-.links-label {
+
+.gut-summary-text {
   font-size: 26rpx;
-  font-weight: bold;
-  color: #333;
-  display: block;
+  color: #FF8C42;
+  font-weight: 500;
+}
+
+.gut-groups {
+  padding: 20rpx 24rpx;
+}
+
+.gut-group {
+  margin-bottom: 20rpx;
+}
+
+.gut-group-title {
+  font-size: 22rpx;
+  color: #999;
   margin-bottom: 12rpx;
+  display: block;
 }
-.links-row {
+
+.gut-items {
   display: flex;
-  flex-direction: row;
-  gap: 16rpx;
+  flex-wrap: wrap;
+  gap: 12rpx;
 }
-.link-item {
-  flex: 1;
+
+.gut-item {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  background: #fff;
+  padding: 10rpx 16rpx;
+  background-color: #F8F8F8;
   border-radius: 16rpx;
-  padding: 20rpx 18rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
-  gap: 12rpx;
+  font-size: 22rpx;
 }
-.link-item:active {
-  opacity: 0.7;
+
+.gut-item-name {
+  color: #333;
+  flex: 1;
+  max-width: 120rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.link-icon {
-  font-size: 36rpx;
+
+.gut-item-right {
   flex-shrink: 0;
+  margin-left: 8rpx;
 }
-.link-texts {
-  flex: 1;
+
+.gut-item-value {
+  font-size: 20rpx;
+  color: #333;
+  font-weight: 500;
 }
-.link-name {
-  font-size: 24rpx;
+
+.gut-item-status {
+  font-size: 18rpx;
   font-weight: 500;
-  color: #333;
-  display: block;
-  margin-bottom: 4rpx;
 }
-.link-desc {
-  font-size: 20rpx;
-  color: #999;
-  display: block;
+
+.gut-abnormal .gut-item-status {
+  color: #FF6B6B;
 }
-.link-arrow {
-  font-size: 32rpx;
-  color: #CCC;
-  flex-shrink: 0;
+
+.gut-empty-hint {
+  padding: 40rpx 24rpx;
+  text-align: center;
+  color: #999;
+  font-size: 24rpx;
 }
 
-/* ===== 推荐阅读 ===== */
-.article-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16rpx;
+.gut-upload-link {
+  color: #FF8C42;
+  margin-left: 8rpx;
+  font-weight: 500;
 }
-.article-card {
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 24rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+
+/* ─── 疾病风险 ─── */
+.risk-section {
+  background-color: #FFFFFF;
+  border-radius: 24rpx;
+  margin: 0 20rpx 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+  overflow: hidden;
 }
-.article-card:active {
-  opacity: 0.8;
+
+.risk-list {
+  padding: 0 24rpx 20rpx;
 }
-.article-category {
-  display: inline-block;
-  padding: 4rpx 14rpx;
-  border-radius: 8rpx;
-  margin-bottom: 10rpx;
+
+.risk-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 0;
+  border-bottom: 1rpx solid #f5f5f5;
 }
-.article-category-text {
-  font-size: 20rpx;
-  color: #fff;
+
+.risk-item:last-child {
+  border-bottom: none;
 }
-.article-title {
-  display: block;
-  font-size: 28rpx;
-  font-weight: bold;
+
+.risk-name {
+  font-size: 26rpx;
   color: #333;
-  margin-bottom: 8rpx;
-  line-height: 1.4;
 }
-.article-summary {
-  display: block;
-  font-size: 24rpx;
-  color: #888;
-  line-height: 1.5;
-  margin-bottom: 12rpx;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+
+.risk-right {
+  text-align: right;
+}
+
+.risk-value {
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #FF6B6B;
+}
+
+.risk-level {
+  font-size: 20rpx;
+  margin-top: 2rpx;
+  font-weight: 500;
 }
-.article-meta {
+
+.risk-severe .risk-level { color: #FF6B6B; }
+.risk-attention .risk-level { color: #FF8C42; }
+.risk-normal .risk-level { color: #999; }
+
+/* ─── 月引导语 ─── */
+.monthly-guidance {
   display: flex;
   align-items: center;
-  gap: 16rpx;
+  padding: 20rpx 24rpx;
+  margin: 0 20rpx 16rpx;
+  background: linear-gradient(135deg, #FFF8F0, #FFF3E8);
+  border-radius: 16rpx;
+  border: 1rpx solid #FFE4CC;
 }
-.meta-item {
+
+.guidance-icon {
+  font-size: 32rpx;
+  margin-right: 12rpx;
+}
+
+.guidance-text {
+  font-size: 24rpx;
+  color: #FF8C42;
+}
+
+/* ─── 游客区域 ─── */
+.visitor-body {
+  flex: 1;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 4rpx;
+  justify-content: center;
+  padding: 60rpx 32rpx;
 }
-.meta-icon {
-  font-size: 24rpx;
+
+.visitor-intro {
+  text-align: center;
+  margin-bottom: 48rpx;
 }
-.meta-text {
-  font-size: 22rpx;
-  color: #999;
+
+.visitor-icon {
+  font-size: 80rpx;
+  margin-bottom: 20rpx;
+  display: block;
 }
-.article-date {
-  font-size: 22rpx;
-  color: #bbb;
+
+.visitor-title {
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #FF8C42;
+  margin-bottom: 12rpx;
+  display: block;
 }
 
-/* 品牌定位语 */
-.brand-strap {
-  margin: 16rpx 30rpx 0;
-  padding: 20rpx 28rpx;
-  background: linear-gradient(135deg, #FFF7ED, rgba(255,140,66,0.12));
-  border-radius: 16rpx;
-  border-left: 4rpx solid #FF8C42;
+.visitor-desc {
+  font-size: 24rpx;
+  color: #888;
+  line-height: 1.6;
 }
-.brand-strap-text {
-  font-size: 26rpx;
-  color: #9A3412;
-  font-weight: 500;
+
+.visitor-actions {
+  display: flex;
+  gap: 20rpx;
+  width: 100%;
+  max-width: 560rpx;
 }
 
-/* 每月引导语 */
-.monthly-guidance {
-  margin: 16rpx 30rpx 0;
-  padding: 20rpx 28rpx;
-  background: linear-gradient(135deg, #FFF7ED, rgba(255,140,66,0.08));
-  border-radius: 16rpx;
-  border-left: 4rpx solid #FF8C42;
+.visitor-btn-primary {
+  flex: 1;
   display: flex;
   align-items: center;
-  gap: 12rpx;
+  justify-content: center;
+  background: linear-gradient(135deg, #FF8C42, #FF6B1A);
+  border-radius: 48rpx;
+  padding: 24rpx 0;
+  color: #FFFFFF;
+  font-size: 28rpx;
+  font-weight: 600;
+  box-shadow: 0 4rpx 16rpx rgba(255, 107, 26, 0.35);
 }
-.guidance-icon {
-  font-size: 32rpx;
+
+.visitor-btn-secondary {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #FFFFFF;
+  border-radius: 48rpx;
+  padding: 24rpx 0;
+  color: #FF8C42;
+  font-size: 28rpx;
+  font-weight: 600;
+  border: 2rpx solid #FF8C42;
 }
-.guidance-text {
-  font-size: 26rpx;
-  color: #9A3412;
-  font-weight: 500;
+
+.bottom-spacer {
+  flex: 1;
+  height: 120rpx;
 }
-</style>
+</style>