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

<template>
  <view class="body-container">
    <!-- Tabbar 切换过渡页 -->
    <tab-transition v-if="showTabTransition" dimCode="body" ref="tabTransition" @close="showTabTransition = false" />

    <!-- 品牌头部 -->
    <PageBanner theme="body" tagline="科学管理全家健康" quote="身体健康是幸福的基础" />

    <!-- 身维度画像 - 总体说明 -->
    <view class="dimension-portrait-section" v-if="isLoggedIn && bodyPortrait">
      <view class="section-header">
        <text class="section-title">🧭 身维度画像</text>
        <text class="portrait-tier">{{ bodyPortrait.tierLabel }}</text>
      </view>
      <view class="portrait-summary">
        <text class="portrait-desc">{{ bodyPortrait.summary }}</text>
      </view>
      <view class="portrait-dimensions">
        <view class="portrait-dim-item" v-for="dim in bodyPortrait.dims" :key="dim.code">
          <view class="portrait-dim-header">
            <view class="portrait-dim-icon" :style="{ background: dim.color }">{{ dim.icon }}</view>
            <text class="portrait-dim-name">{{ dim.name }}</text>
            <text class="portrait-dim-score">{{ dim.score }}</text>
          </view>
          <view class="portrait-dim-bar-track">
            <view class="portrait-dim-bar-fill" :style="{ width: dim.score + '%', background: dim.color }"></view>
          </view>
          <text class="portrait-dim-desc">{{ dim.desc }}</text>
        </view>
      </view>
      <view class="portrait-tip" v-if="bodyPortrait.tip">
        <text class="portrait-tip-text">💡 {{ bodyPortrait.tip }}</text>
      </view>
    </view>

    <!-- 健康概览卡片：关键物理指标一眼看清 -->
    <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" v-if="isLoggedIn">
      <view class="section-header">
        <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"
        :scores="radarScores"
        :avg-scores="radarFamilyScores"
        :population-scores="radarPopulationScores"
        fillColor="#FF8C42"
        gridColor="#FED7AA"
        labelColor="#9A3412"
        :width="580"
        :height="580"
        @dimensionClick="goDimensionDetail" />
    </view>

    <!-- 游客引导语（每月更换） -->
    <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 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>
        </view>
      </view>
      <view class="gut-empty-hint" v-if="!hasGutReport">
        <text>上传菌群检测报告，查看肠道健康指标</text>
        <text class="gut-upload-link" @click="goToUploadReport">去上传 →</text>
      </view>

      <!-- 疾病风险卡片 -->
      <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>

      <!-- 家庭成员选择条 -->
      <FamilyMemberStrip
        v-if="currentView === 'self'"
        :members="familyMembersVisible"
        :selectedMemberId="selectedMemberId"
        @select="onFamilyMemberSelect"
        @removed="loadFamilyMembersVisible" />

      <!-- 五维能量条 -->
      <FamilyEnergyBar v-if="dualDimension" dimensionCode="body" :sandboxData="sandboxData" :dualDimension="dualDimension" />

      <!-- 身体维度介绍 -->
      <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>
        </view>
      </view>
    </view>

    <!-- 游客主区域 -->
    <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>
</template>

<script>
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,
  getLatestIndicators
} from '../../utils/api.js'

export default {
  components: { TabTransition, PageBanner, FamilyEnergyBar, RadarChart, FloatingAvatar, FamilyMemberStrip, DimensionIntroCard },
  data() {
    return {
      isLoggedIn: false,
      role: null,
      showTabTransition: true,
      activeChildId: null,
      selectedMemberId: null,
      activeChildName: '',
      children: [],
      familyMembersVisible: [],
      healthSubDims: [],
      bodyIndicators: [],
      gutFloraIndicators: [],
      hasGutReport: false,
      diseaseRisks: [],
      sandboxData: null,
      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/health/meditation-index' },
        { icon: '\u{1F957}', label: '饮食', needLogin: true, page: '/pages/diet/index' },
        { icon: '\u{1F634}', label: '作息', needLogin: true, page: '/pages/health/meditation-index' },
        { 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{1F9EC}', label: '健康维度', needLogin: true, page: 'health-dimensions' }
      ]
    }
  },
  computed: {
    radarDimensions: function() {
      var dims = this.dimensionData && this.dimensionData.dimensions
      if (dims && dims.length > 0) {
        var result = []
        for (var i = 0; i < dims.length; i++) {
          var d = dims[i]
          if (!d) continue
          result.push({ label: d.label || '', key: d.dimension || '' })
        }
        return result
      }
      return [
        { label: '生长发育', key: 'growth' },
        { label: '睡眠质量', key: 'sleep' },
        { label: '视力健康', key: 'vision' },
        { label: '免疫力', key: 'immunity' },
        { label: '营养均衡', key: 'nutrition' },
        { label: '肠胃健康', key: 'gut' },
        { label: '运动活力', key: 'exercise' }
      ]
    },
    radarScores: function() {
      var dims = this.dimensionData && this.dimensionData.dimensions
      if (!dims) return []
      var result = []
      for (var i = 0; i < dims.length; i++) {
        var d = dims[i]
        if (!d) { result.push(0); continue }
        var s = d.score
        if (typeof s !== 'number' || isNaN(s) || s === null) s = 0
        result.push(s)
      }
      return result
    },
    gutGrouped: function() {
      var groups = {}
      var order = ['core', 'probiotic', 'harmful', 'other']
      var titles = { core: '核心菌属', probiotic: '益生菌', harmful: '有害菌', other: '其他重要菌属' }
      for (var i = 0; i < this.gutFloraIndicators.length; i++) {
        var ind = this.gutFloraIndicators[i]
        var cat = ind.category || 'other'
        if (!groups[cat]) groups[cat] = { category: cat, title: titles[cat] || cat, items: [] }
        groups[cat].items.push(ind)
      }
      var result = []
      for (var j = 0; j < order.length; j++) {
        if (groups[order[j]]) result.push(groups[order[j]])
      }
      return result
    },
    gutSummary: function() {
      if (!this.gutFloraIndicators.length) return ''
      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 = [
        '一月：新年新健康，从一次体检开始',
        '二月：春暖花开，适合调整作息',
        '三月：植树节到，守护呼吸健康',
        '四月：踏青正当时，关注视力保护',
        '五月：劳动节后，重视营养均衡',
        '六月：夏日来临，关注肠胃健康',
        '七月：暑期到来，规律运动不可少',
        '八月：秋前调养，提升免疫力',
        '九月：开学季，关注家庭成员生长发育',
        '十月：国庆长假，注意饮食控制',
        '十一月：秋冬交替，保暖防寒',
        '十二月：年终总结，规划来年健康'
      ]
      return messages[month] || messages[0]
    }
  },
  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.loadSectionConfig()
    if (this.isLoggedIn) {
      this.loadChildren()
      this.loadFamilyMembersVisible()
    }
  },
  methods: {
    loadSectionConfig: function() {
      var baseSections = ['func_entries']
      if (!this.isLoggedIn) {
        this.visibleSections = baseSections
        return
      }
      var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      var self = this
      getVisibleSections({ pageKey: 'body', role: role }).then(function(res) {
        if (res.code === 200 && res.data) {
          var keys = res.data.map(function(s) { return s.sectionKey })
          var merged = baseSections.slice()
          for (var k = 0; k < keys.length; k++) {
            if (merged.indexOf(keys[k]) === -1) merged.push(keys[k])
          }
          self.visibleSections = merged
        }
      }).catch(function(e) {
        self.visibleSections = ['func_entries']
      })
    },
    loadChildren: function() {
      var self = this
      getChildren().then(function(res) {
        if (res.code === 200 && res.data) {
          self.children = res.data
          var savedChildId = uni.getStorageSync('currentChildId')
          var found = false
          for (var i = 0; i < self.children.length; i++) {
            if (self.children[i].memberId === savedChildId) {
              self.activeChildId = savedChildId
              self.activeChildName = self.children[i].name || self.children[i].nickname || '成员'
              found = true
              break
            }
          }
          if (!found && self.children.length > 0) {
            self.activeChildId = self.children[0].memberId
            self.activeChildName = self.children[0].name || self.children[0].nickname || '成员'
            uni.setStorageSync('currentChildId', self.activeChildId)
          }
          if (self.activeChildId) {
            self.loadDashboardData()
          }
        }
      }).catch(function(e) {
        console.log('获取成员列表失败', e)
        self.childrenChecked = true
      })
    },
    loadDashboardData: function() {
      if (!this.activeChildId) return
      this.loadEnergyData()
      this.loadSandboxData()
      this.loadHealthDimensions()
    },
    loadHealthDimensions: function() {
      var memberId = this.activeChildId
      if (!memberId) {
        console.log('[body] loadHealthDimensions skipped: no memberId')
        return
      }
      var self = this
      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 || ''} })
        }
      }).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 || []
          self.radarPopulationScores = res.data.populationScores || []
        }
      }).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) {
          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)
      })
    },
    loadGutFlora: function(memberId) {
      var self = this
      getGutFloraIndicators({ memberId: memberId }).then(function(res) {
        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) {
        if (res && res.data) {
          self.sandboxData = res.data
        }
      }).catch(function(e) {
        console.log('获取沙盘数据失败', e)
      })
    },
    loadEnergyData: function() {
      var self = this
      getEnergyOverview(this.activeChildId).then(function(res) {
        if (res && res.data) {
          var dims = res.data.dimensions
          if (dims && dims.length > 0) {
            for (var i = 0; i < dims.length; i++) {
              if (dims[i].code === 'body') {
                self.dualDimension = dims[i]
                break
              }
            }
          }
        }
      }).catch(function() {})
    },
    goIndicatorDetail: function(ind) {
      var url = '/pages/health/report-list'
      uni.navigateTo({ url: url })
    },
    goToReportList: function() {
      uni.navigateTo({ url: '/pages/health/report-list' })
    },
    goToUploadReport: function() {
      uni.navigateTo({ url: '/pages/health/report-upload' })
    },
    goToLogin: function() {
      uni.navigateTo({ url: '/pages/login/login' })
    },
    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' })
          }
        })
        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 })
    },
    onChildChanged: function(child) {
      this.activeChildId = child.memberId
      this.activeChildName = child.name || child.nickname || '成员'
      this.loadDashboardData()
    },
    onFamilyMemberSelect: function(memberId) {
      this.selectedMemberId = memberId
      this.loadDashboardData()
    },
    loadFamilyMembersVisible: function() {
      var self = this
      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('获取家庭成员失败', e) })
    },
    sectionVisible: function(key) {
      return this.visibleSections.indexOf(key) >= 0
    },
    formatNumeric: function(val) {
      if (val === null || val === undefined) return ''
      var n = parseFloat(val)
      if (isNaN(n)) return String(val)
      return n.toFixed(1)
    },
    goLogin: function() {
      uni.navigateTo({ url: '/pages/login/login' })
    },
    goReportList: function() {
      uni.navigateTo({ url: '/pages/health/report-list' })
    }
  }
}
</script>

<style scoped>
.body-container {
  min-height: 100vh;
  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;
}

.overview-sub {
  font-size: 22rpx;
  color: #999;
}

.overview-grid {
  display: flex;
  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;
  box-shadow: 0 2rpx 8rpx rgba(255, 140, 66, 0.08);
}

.overview-card-item:nth-child(4n) {
  margin-right: 0;
}

.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: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(255, 140, 66, 0.3);
}

.overview-icon {
  font-size: 28rpx;
}

.overview-details {
  width: 100%;
}

.overview-name {
  font-size: 22rpx;
  color: #999;
  display: block;
  margin-bottom: 4rpx;
}

.overview-value {
  font-size: 40rpx;
  font-weight: 700;
  color: #FF8C42;
}

.overview-placeholder {
  font-size: 22rpx;
  color: #ccc;
}

.overview-trend {
  display: flex;
  align-items: center;
  margin-top: 6rpx;
  gap: 4rpx;
}

.trend-icon {
  font-size: 20rpx;
  flex-shrink: 0;
}

.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;
  padding: 20rpx 24rpx 24rpx;
  gap: 16rpx;
}

.overview-nav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  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);
}

.overview-nav-btn-text {
  color: #FFFFFF;
  font-size: 26rpx;
  font-weight: 600;
}

.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;
}

.overview-nav-btn-secondary-text {
  color: #FF8C42;
  font-size: 26rpx;
  font-weight: 600;
}

/* ─── 通用区块 ─── */
.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;
}

.section-header {
  display: flex;
  align-items: center;
  padding: 24rpx 24rpx 16rpx;
  border-bottom: 1rpx solid #F5F5F5;
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

.section-more {
  font-size: 24rpx;
  color: #FF8C42;
  font-weight: 500;
  margin-left: auto;
  padding-left: 16rpx;
}

.avg-badge {
  display: block;
  font-size: 22rpx;
  color: #999;
  padding: 0 24rpx 16rpx;
}

/* ─── 身体指标卡片 ─── */
.indicator-cards {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 20rpx 24rpx;
}

.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: space-between;
  margin-bottom: 8rpx;
}

.indicator-name {
  font-size: 24rpx;
  color: #666;
}

.indicator-unit {
  font-size: 20rpx;
  color: #999;
}

.indicator-body {
  margin-bottom: 6rpx;
}

.indicator-value {
  font-size: 40rpx;
  font-weight: 700;
  color: #FF8C42;
}

.indicator-placeholder {
  font-size: 24rpx;
  color: #ccc;
}

.indicator-footer {
  font-size: 20rpx;
  color: #999;
  text-align: right;
}

/* ─── 肠道菌群 ─── */
.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;
}

.gut-summary {
  padding: 20rpx 24rpx;
  background-color: #FFF8F0;
  border-bottom: 1rpx solid #FFF0E4;
  text-align: center;
}

.gut-summary-text {
  font-size: 26rpx;
  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;
}

.gut-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.gut-item {
  display: flex;
  align-items: center;
  padding: 10rpx 16rpx;
  background-color: #F8F8F8;
  border-radius: 16rpx;
  font-size: 22rpx;
}

.gut-item-name {
  color: #333;
  flex: 1;
  max-width: 120rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gut-item-right {
  flex-shrink: 0;
  margin-left: 8rpx;
}

.gut-item-value {
  font-size: 20rpx;
  color: #333;
  font-weight: 500;
}

.gut-item-status {
  font-size: 18rpx;
  font-weight: 500;
}

.gut-abnormal .gut-item-status {
  color: #FF6B6B;
}

.gut-empty-hint {
  padding: 40rpx 24rpx;
  text-align: center;
  color: #999;
  font-size: 24rpx;
}

.gut-upload-link {
  color: #FF8C42;
  margin-left: 8rpx;
  font-weight: 500;
}

/* ─── 疾病风险 ─── */
.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;
}

.risk-list {
  padding: 0 24rpx 20rpx;
}

.risk-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.risk-item:last-child {
  border-bottom: none;
}

.risk-name {
  font-size: 26rpx;
  color: #333;
}

.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;
}

.risk-severe .risk-level { color: #FF6B6B; }
.risk-attention .risk-level { color: #FF8C42; }
.risk-normal .risk-level { color: #999; }

/* ─── 月引导语 ─── */
.dimension-portrait-section {
  margin: 20rpx 30rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(255, 140, 66, 0.12);
  border: 2rpx solid rgba(255, 140, 66, 0.1);
}
.portrait-tier {
  font-size: 26rpx;
  color: #FF8C42;
  font-weight: bold;
  margin-left: 16rpx;
}
.portrait-summary {
  margin-bottom: 20rpx;
}
.portrait-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}
.portrait-dimensions {
  margin-bottom: 16rpx;
}
.portrait-dim-item {
  margin-bottom: 16rpx;
}
.portrait-dim-header {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}
.portrait-dim-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
  font-size: 22rpx;
}
.portrait-dim-name {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}
.portrait-dim-score {
  font-size: 28rpx;
  font-weight: bold;
  color: #FF8C42;
  margin-right: 16rpx;
}
.portrait-dim-bar-track {
  height: 12rpx;
  background: #FFF0E4;
  border-radius: 6rpx;
  overflow: hidden;
  margin-bottom: 6rpx;
}
.portrait-dim-bar-fill {
  height: 100%;
  border-radius: 6rpx;
  transition: width 0.3s ease;
}
.portrait-dim-desc {
  font-size: 22rpx;
  color: #999;
  display: block;
}
.portrait-tip {
  padding: 16rpx 20rpx;
  background: linear-gradient(135deg, #FFF7ED, #FFF0E4);
  border-radius: 12rpx;
  border-left: 4rpx solid #FF8C42;
}
.portrait-tip-text {
  font-size: 24rpx;
  color: #C2410C;
  line-height: 1.5;
}
.monthly-guidance {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  margin: 0 20rpx 16rpx;
  background: linear-gradient(135deg, #FFF8F0, #FFF3E8);
  border-radius: 16rpx;
  border: 1rpx solid #FFE4CC;
}

.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;
  justify-content: center;
  padding: 60rpx 32rpx;
}

.visitor-intro {
  text-align: center;
  margin-bottom: 48rpx;
}

.visitor-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
  display: block;
}

.visitor-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #FF8C42;
  margin-bottom: 12rpx;
  display: block;
}

.visitor-desc {
  font-size: 24rpx;
  color: #888;
  line-height: 1.6;
}

.visitor-actions {
  display: flex;
  gap: 20rpx;
  width: 100%;
  max-width: 560rpx;
}

.visitor-btn-primary {
  flex: 1;
  display: flex;
  align-items: center;
  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);
}

.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;
}

.bottom-spacer {
  flex: 1;
  height: 120rpx;
}
</style>