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="brand-strap" v-if="!isLoggedIn">
      <text class="brand-strap-text">科学管理全家健康数据</text>
    </view>

    <!-- 雷达图（始终显示，无用户数据时仅显示人群平均值） -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">健康指标</text>
        <text class="section-sub">身体健康各项指标，分数越高代表越健康</text>
        <text class="avg-badge" v-if="!dimensionData">同龄同性平均值 · 上传健康报告后显示个人数据</text>
      </view>
      <RadarChart
        v-if="radarDimensions && radarDimensions.length >= 3"
        :dimensions="radarDimensions"
        :scores="radarScores"
        :avg-scores="radarAvgScores"
        fillColor="#FF8C42"
        gridColor="#FED7AA"
        labelColor="#9A3412"
        :width="580"
        :height="580"
        @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>
        </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>
            </view>
          </view>
        </view>
      </view>
      <view class="gut-empty-hint" v-if="!hasGutReport">
        <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>
        </view>
      </view>
    </view>

    <!-- 家庭成员选择条 -->
    <FamilyMemberStrip
      v-if="currentView === 'self' && isLoggedIn"
      :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="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>
          </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 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, getGutFloraIndicators, getBodyAbnormalIndicators } 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: '',
      userName: '',
      children: [],
      familyMembersVisible: [],
      // 接口数据是否已检查（避免"暂无数据"闪烁）
      childrenChecked: false,
      membersChecked: false,
            healthSubDims: [],
      bodyIndicators: [],
      gutFloraIndicators: [],
      hasGutReport: false,
      diseaseRisks: [],
      sandboxData: null,
      currentView: 'self', // 'self' | 'family'
      dualDimension: null,
      visibleSections: [],
      dimensionData: null,
      /** Mock 平均值（7维）：生长发育/睡眠质量/视力健康/免疫力/营养均衡/肠胃健康/运动活力 */
      radarAvgScores: [72, 68, 75, 70, 73, 69, 71],
      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) {
        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 = this.gutFloraIndicators.filter(function(i) { return i.status === 'high' || i.status === 'low' }).length
      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.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')) {
        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()
          keys.forEach(function(k) { if (merged.indexOf(k) === -1) merged.push(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()
          }
        }
        self.childrenChecked = true
      }).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 || (this.userInfo && this.userInfo.userId)
      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 || ''}; });
          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)
        }
      }).catch(function(e) {
        console.error('[body] loadHealthDimensions 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 || []
        }
      }).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 = (res.data && res.data.length > 0) }
      }).catch(function(e) { console.log('[body] loadGutFlora 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)
      })
    },
    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) {
        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(e) {
        console.log('获取能量概览失败', e)
      })
    },
    onFamilyMemberSelect: function(member) {
      this.selectedMemberId = member.id
    },
    onChildChanged: function(child) {
      this.activeChildId = child.memberId
      this.activeChildName = child.name || child.nickname || '孩子'
      this.loadDashboardData()
    },
    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
      })
    },
    scrollToSection: function(section) {
      uni.pageScrollTo({ selector: '#' + section, duration: 300 })
    },
    sectionVisible: function(key) {
      return this.visibleSections.length === 0 || this.visibleSections.indexOf(key) !== -1
    },
    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 })
    },
    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 })
    },
    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 })
    },
    loadDiseaseRisks: function(memberId) {
      var self = this
      getBodyAbnormalIndicators(memberId).then(function(res) {
        if (res.code === 200 && res.data && res.data.diseaseRisks) {
          self.diseaseRisks = res.data.diseaseRisks
        }
      }).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 })
    },
    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 })
    },
    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)
    },
    goToUploadReport: function() {
      var id = this.activeChildId || uni.getStorageSync('currentChildId') || ''
      uni.navigateTo({ url: '/pages/health/report-upload?memberId=' + id + '&from=body' })
    },
    _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()
        }
      })
    }
  }
}
</script>

<style scoped>
.body-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 120rpx;
}

/* ===== 功能入口 ===== */
.func-section {
  margin: 20rpx 30rpx;
}
.func-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.func-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.func-icon-wrap {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, #D6EAF8, #EBF2FA);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}
.func-icon {
  font-size: 40rpx;
}
.func-label {
  font-size: 22rpx;
  color: #666;
  font-weight: 500;
}

/* ===== 通用区块 ===== */
.section {
  margin: 20rpx 30rpx;
}
.section-header {
  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;
}
.avg-badge {
  font-size: 20rpx;
  color: #F97316;
  background: #FFF7ED;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  margin-left: 12rpx;
}
/* ===== 快捷操作 ===== */
.quick-actions {
  display: flex;
  flex-direction: row;
  margin-top: 30rpx;
}
.action-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);
}
.action-btn:last-child {
  margin-right: 0;
}
.action-icon {
  font-size: 48rpx;
  margin-bottom: 8rpx;
}
.action-text {
  font-size: 26rpx;
  color: #666;
}

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

.bottom-spacer {
  height: 120rpx;
}

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

.func-item:active, .action-btn:active {
  opacity: 0.7;
}

/* ===== 精准营养 ===== */
.nutrition-section {
  margin-top: 20rpx;
}
.nutrition-report-card {
  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);
}
.nutrition-report-left {
  width: 100rpx;
  height: 100rpx;
  background: rgba(255,255,255,0.7);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.nutrition-icon-large {
  font-size: 52rpx;
}
.nutrition-report-right {
  flex: 1;
}
.nutrition-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #2E7D32;
  display: block;
  margin-bottom: 6rpx;
}
.nutrition-desc {
  font-size: 22rpx;
  color: #558B2F;
  line-height: 1.5;
  display: block;
  margin-bottom: 10rpx;
}
.nutrition-report-tags {
  display: flex;
  flex-direction: row;
  gap: 10rpx;
}
.nutrition-report-tags .tag {
  font-size: 20rpx;
  color: #33691E;
  background: rgba(255,255,255,0.6);
  padding: 4rpx 14rpx;
  border-radius: 20rpx;
}
.nutrition-arrow {
  font-size: 40rpx;
  color: #A5D6A7;
  margin-left: 12rpx;
}

.nutrition-links {
  margin-bottom: 20rpx;
}
.links-label {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}
.links-row {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
}
.link-item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx 18rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  gap: 12rpx;
}
.link-item:active {
  opacity: 0.7;
}
.link-icon {
  font-size: 36rpx;
  flex-shrink: 0;
}
.link-texts {
  flex: 1;
}
.link-name {
  font-size: 24rpx;
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}
.link-desc {
  font-size: 20rpx;
  color: #999;
  display: block;
}
.link-arrow {
  font-size: 32rpx;
  color: #CCC;
  flex-shrink: 0;
}

/* ===== 推荐阅读 ===== */
.article-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.article-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.article-card:active {
  opacity: 0.8;
}
.article-category {
  display: inline-block;
  padding: 4rpx 14rpx;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
}
.article-category-text {
  font-size: 20rpx;
  color: #fff;
}
.article-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  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;
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 16rpx;
}
.meta-item {
  display: flex;
  align-items: center;
  gap: 4rpx;
}
.meta-icon {
  font-size: 24rpx;
}
.meta-text {
  font-size: 22rpx;
  color: #999;
}
.article-date {
  font-size: 22rpx;
  color: #bbb;
}

/* 品牌定位语 */
.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;
}
.brand-strap-text {
  font-size: 26rpx;
  color: #9A3412;
  font-weight: 500;
}

/* 每月引导语 */
.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;
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.guidance-icon {
  font-size: 32rpx;
}
.guidance-text {
  font-size: 26rpx;
  color: #9A3412;
  font-weight: 500;
}
</style>