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

<template>
  <view class="container">
    <!-- 通用登录浮层 -->
    <login-sheet ref="loginSheet" @success="onSheetLoginSuccess" />
    <!-- Tabbar 切换过渡页 -->
    <tab-transition v-if="showTabTransition" dimCode="mind" ref="tabTransition" @close="showTabTransition = false" />

    <!-- 品牌头部 -->
    <PageBanner theme="mind-wisdom"
      tagline="心智成长 · 智慧人生"
      quote="知己知彼，百战不殆" />

    <!-- 品牌定位语（登录前显示） -->
    <view class="brand-strap" v-if="!isLoggedIn">
      <text class="brand-strap-text">关注全家心理健康与情绪成长</text>
    </view>

    <!-- ===== 家庭天盘模块（今日运势 / 今日心情 / 吉位） ===== -->
    <FamilyTianpanCard
      v-if="isLoggedIn"
      :visible="isLoggedIn"
      :fortune="dailyFortuneSafe"
      :mood="todayMood"
      :dominantElement="dominantElementSafe"
      :weeklyTip="familyWeeklyInsight"
      :traditionalData="traditionalData" />

    <!-- 家庭成员选择条 -->
    <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>

    <!-- 游客价值卡（统一组件：维度色 CTA + 价值预览） -->
    <DimensionVisitorCard
      v-if="!isLoggedIn"
      dimCode="mind"
      card-title="心维度 · 心理成长"
      :benefits="[
        '心理测评 EQ 报告与情绪画像',
        '情绪与肠胃关联解读',
        '家庭关系质量分析'
      ]"
      cta-text="登录查看心理画像"
      secondary-text="了解心理维度"
      secondary-url="/pages/mind-detail/dimension-intro" />

        <!-- 登录后：五维能量条 -->
        <FamilyEnergyBar
          v-if="isLoggedIn"
          dimensionCode="mind"
          :sandboxData="sandboxData" />
        <!-- 心理指标卡片 -->
        <view class="indicator-cards-section" v-if="isLoggedIn && mindIndicators.length > 0">
          <view class="section-header">
            <text class="section-title">🔥 心理指标</text>
            <text class="section-more" @click="goMindDetail">更多 ›</text>
          </view>
          <view class="indicator-cards">
            <view
              v-for="(ind, i) in mindIndicators"
              :key="ind.code"
              class="indicator-card"
              :class="{ 'no-data': !ind.value }"
              @click="goMindDetail()"
            >
              <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="emi-card" v-if="isLoggedIn && emiData">
          <view class="emi-header">
            <text class="emi-title">心理测评报告</text>
            <view class="emi-overall-wrap">
              <text class="emi-overall-label">综合EQ分</text>
              <text class="emi-overall-value">{{ emiData.overallScore || 0 }}</text>
              <text :class="['emi-overall-level', 'level-' + getScoreLevel(emiData.overallScore || 0)]">
                {{ getScoreLevelText(emiData.overallScore || 0) }}
              </text>
            </view>
          </view>
          <view class="emi-dimensions">
            <view class="emi-dimension" v-for="dim in emiDimensions" :key="dim.key">
              <view class="emi-dim-header">
                <text class="emi-dim-label">{{ dim.label }}</text>
                <view class="emi-dim-values">
                  <text class="emi-dim-score">{{ emiData[dim.key] || 0 }}</text>
                  <text :class="['emi-dim-level', 'level-' + getScoreLevel(emiData[dim.key] || 0)]">
                    {{ getScoreLevelText(emiData[dim.key] || 0) }}
                  </text>
                </view>
              </view>
              <view class="emi-dim-bar">
                <view class="emi-dim-bar-fill" :style="{ width: (emiData[dim.key] || 0) + '%', background: dim.color }"></view>
              </view>
            </view>
          </view>
          <view class="emi-footer" @click="goEmotionReport">
            <text class="emi-footer-text">查看详情</text>
            <text class="emi-footer-icon">&#x2192;</text>
          </view>
        </view>

<!-- 心维度画像 - 总体说明 -->
        <view class="dimension-portrait-section" v-if="isLoggedIn && mindPortrait">
          <view class="section-header">
            <text class="section-title">🧭 心维度画像</text>
            <text class="portrait-tier">{{ mindPortrait.tierLabel }}</text>
          </view>
          <view class="portrait-summary">
            <text class="portrait-desc">{{ mindPortrait.summary }}</text>
          </view>
          <view class="portrait-dimensions">
            <view class="portrait-dim-item" v-for="dim in mindPortrait.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="mindPortrait.tip">
            <text class="portrait-tip-text">💡 {{ mindPortrait.tip }}</text>
          </view>
        </view>

        <!-- 肠脑轴情绪卡片 -->
        <view class="section" v-if="gutIndicators && gutIndicators.length > 0">
          <view class="section-header">
            <text class="section-title">🌱 情绪与肠胃</text>
          </view>
          <view class="gut-insight-text" v-if="gutInsight">
            <text>{{ gutInsight }}</text>
          </view>
          <view class="gut-indicator-list">
            <view class="gut-indicator-item" v-for="ind in gutIndicators" :key="ind.id">
              <view class="gut-indicator-left">
                <text class="gut-indicator-name">{{ ind.indicatorName || ind.name }}</text>
                <text class="gut-indicator-impact" v-if="emotionImpactLabel(ind.indicatorName || ind.name)">影响{{ emotionImpactLabel(ind.indicatorName || ind.name) }}</text>
              </view>
              <view class="gut-indicator-bar-track">
                <view class="gut-indicator-bar-fill" :style="{ width: indicatorBarWidth(ind), background: indicatorColor(ind.status) }"></view>
              </view>
              <text class="gut-indicator-value">{{ formatIndicatorValue(ind) }}{{ ind.unit || '%' }}</text>
              <text :class="['gut-indicator-status', 'status-' + (ind.status || 'normal')]">{{ statusLabel(ind.status) }}</text>
            </view>
          </view>
        </view>

    

    

    <!-- ===== Phase 1.2: 心理告警横幅 ===== -->
    <PsychCrisisBanner v-if="isLoggedIn" :memberId="currentChildId" source="screening" />

    <!-- ===== 底部：功能入口 Grid（通用，两行） ===== -->
    <view class="func-section" v-if="sectionVisible('func_entries')">
      <view class="func-grid">
        <view class="func-row">
          <view class="func-item" v-for="item in funcListRow1" :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 class="func-row">
          <view class="func-item" v-for="item in funcListRow2" :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>

    <!-- 心13维雷达图（分组展示，登录后且选中成员时） -->
    <view class="section" v-if="isLoggedIn && currentMemberEnergies">
      <view class="section-header">
        <text class="section-title">🧠 情绪与性格</text>
      </view>
      <view class="radar-group" v-for="(group, gIdx) in mindRadarGroups" :key="gIdx">
        <text class="radar-group-label">{{ group.label }}</text>
        <RadarChart
          :dimensions="group.dimensions"
          :scores="getMindGroupScores(group)"
          :avg-scores="getMindGroupFamilyScores(group)"
          :population-scores="getGroupPopulationScores(group)"
          fillColor="#FF6B9D"
          gridColor="#FCE7F3"
          labelColor="#9D174D"
          :width="540"
          :height="540" />
      </view>
    </view>

    <!-- 心维度介绍卡片（登录后显示） -->
    <DimensionIntroCard dimCode="mind" v-if="isLoggedIn" learn-more-url="/pages/mind-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 DimensionIntroCard from '../../components/DimensionIntroCard.vue'
import DimensionVisitorCard from '../../components/DimensionVisitorCard.vue'
import RadarChart from '../../components/RadarChart.vue'
import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
import PsychCrisisBanner from '@/pages/mind-detail/components/PsychCrisisBanner.vue'
import FloatingAvatar from '../../components/AIFloatingAvatar.vue'
import FamilyTianpanCard from '@/pages/mind-detail/components/FamilyTianpanCard.vue'
import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
import { getVisibleSections, getEmiReport, getFamilyEnergySandbox, getEnergySandbox, getChildren, getFamilyMemberList, getEnergyOverview, getContactList, getHealthAlerts, getMilestones, getDanReportByChild, getFamilyFortune, getLatestIndicators, getRadarData } from '../../utils/api.js'
import nav from '../../utils/nav.js'
import config from '../../config.js'
import { parseDate } from '../../utils/format.js'

export default {
components: { TabTransition, PageBanner, RadarChart, FamilyEnergyBar, PsychCrisisBanner, FloatingAvatar, FamilyTianpanCard, FamilyMemberStrip, DimensionIntroCard, DimensionVisitorCard },
  data() {
    return {
      isLoggedIn: false,
      role: null,
      showTabTransition: true,
      currentChildId: null,
      selectedMemberId: null,
      visibleSections: [],
      familyMembersVisible: [],

      // 心理 Tab 数据
      emiData: null,
      emiLoading: true,
      emiDimensions: [
        { key: 'emotionStability', label: '情绪稳定性', color: '#FF6B35' }
      ],
      // 大五维度（用于雷达图）
      personalityDimensions: [
        { key: 'opennessScore', label: '开放性' },
        { key: 'conscientiousnessScore', label: '尽责性' },
        { key: 'extraversionScore', label: '外向性' },
        { key: 'agreeablenessScore', label: '宜人性' },
        { key: 'neuroticismScore', label: '神经质' }
      ],

      // 功能入口
      funcList: [
        { icon: '\u{1F4D6}', label: '阅读', needLogin: false, page: '/pages/article-center/index?dimension=mind' },
        { icon: '\u{1F4CA}', label: '测评报告', needLogin: true, page: '/pages/mind-detail/emotion-report' },
        { icon: '\u{1F4DD}', label: '成长记录', needLogin: true, page: '/pages/growth-main/index' },
        { icon: '\u{2728}', label: '情绪打卡', needLogin: true, page: '/pages/mind-detail/emotion-checkin' },
        { icon: '\u{1F4C8}', label: '情绪趋势', needLogin: true, page: '/pages/mind-detail/emotion-trend' },
        { icon: '\u{1F9E9}', label: '心理自评', needLogin: true, page: '/pages/mind-detail/screening' },
        { icon: '\u{1F3E0}', label: '家庭天盘', needLogin: true, page: '/pages/mind-detail/family-dashboard' },
        { icon: '\u{1F9D8}', label: '疏导工具', needLogin: true, page: '/pages/mind-detail/soothe-toolbox' },
        { icon: '\u{1F31F}', label: '先天画像', needLogin: true, page: '/pages/mind-detail/innate-portrait' }
      ],
      articles: [],

      // 肠脑轴数据
      gutIndicators: null,
      gutInsight: '',

      // 传统文化数据
      traditionalData: null,
      traditionalLoading: true,
      compatibilityData: null,
      wuxingConfig: {
        wood: { label: '木', color: '#10B981' },
        fire: { label: '火', color: '#FF6B9D' },
        earth: { label: '土', color: '#FF8C42' },
        metal: { label: '金', color: '#6366F1' },
        water: { label: '水', color: '#3B82F6' }
      },
      pillarLabels: { year: '年柱', month: '月柱', day: '日柱', hour: '时柱' },
      familyScore: 0,

      // 五维组件数据
      userName: '',
      children: [],
            mindSubDims: [],
            mindIndicators: [],
      sandboxData: null,
      currentView: 'self', // 'self' | 'family'
      contactList: [],
      healthAlerts: [],
      milestones: [],
      danReports: [],

      // 心13维雷达图分组配置
      mindRadarGroups: [
        {
          label: '大五人格',
          dimensions: [
            { key: 'bigFiveOpenness', label: '开放性' },
            { key: 'bigFiveConscientiousness', label: '尽责性' },
            { key: 'bigFiveExtraversion', label: '外向性' },
            { key: 'bigFiveAgreeableness', label: '宜人性' },
            { key: 'bigFiveNeuroticism', label: '神经质' }
          ]
        },
        {
          label: '情绪稳定性',
          dimensions: [
            { key: 'emotionStability', label: '情绪稳定性' }
          ]
        },
        {
          label: '自驱力',
          dimensions: [
            { key: 'driveAutonomy', label: '自主性' },
            { key: 'driveCompetence', label: '胜任感' },
            { key: 'driveRelatedness', label: '归属感' }
          ]
        },
        {
          label: '自我概念',
          dimensions: [
            { key: 'selfConceptOverall', label: '综合自我概念' }
          ]
        }
      ],

    // 家庭天盘 - 今日心情（占位数据）
    todayMood: {
        emoji: '\u{1F60A}',
        text: '平静',
        score: 65
    },
    
// 家庭天盘 - 每日运势数据
        dailyFortuneData: null,
        // 心维度雷达图人群位置分数 (dimensionKey -> score)
        mindPopulationScores: {}
    }
  },
  computed: {
    /** 每月引导语 */
    monthlyGuidance: function() {
      var month = new Date().getMonth()
      var messages = [
        '一月：新年新起点，从情绪觉察开始',
        '二月：春节团聚，关注家人心理联结',
        '三月：春意盎然，适合情绪释放',
        '四月：清明时节，整理内心情绪',
        '五月：劳动之余，关注心理健康',
        '六月：中考高考季，减压情绪管理',
        '七月：暑期到来，培养情绪调节能力',
        '八月：夏末秋初，回顾情绪成长',
        '九月：开学季，关注家庭成员心理适应',
        '十月：国庆假期，增进亲子沟通',
        '十一月：秋冬交替，预防情绪低落',
        '十二月：年终总结，规划心理成长'
      ]
      return messages[month] || messages[0]
    },
    personalityScores: function() {
      if (!this.emiData) return []
      return [
        this.emiData.opennessScore || 0,
        this.emiData.conscientiousnessScore || 0,
        this.emiData.extraversionScore || 0,
        this.emiData.agreeablenessScore || 0,
        this.emiData.neuroticismScore || 0
      ]
    },
    emotionArticles: function() {
      if (!this.articles || this.articles.length === 0) return []
      var result = []
      for (var i = 0; i < this.articles.length; i++) {
        var a = this.articles[i]
        if (a.relatedDimensions && a.relatedDimensions.indexOf('mind') !== -1) {
          result.push(a)
        }
      }
      if (result.length === 0) return this.articles.slice(0, 5)
      return result.slice(0, 5)
    },
    wuxingData: function() {
      if (!this.traditionalData || !this.traditionalData.wuxingElements) return []
      var elements = this.traditionalData.wuxingElements
      var keys = ['wood', 'fire', 'earth', 'metal', 'water']
      var result = []
      for (var i = 0; i < keys.length; i++) {
        var k = keys[i]
        if (elements[k] !== undefined) {
          result.push({
            key: k,
            label: this.wuxingConfig[k].label,
            color: this.wuxingConfig[k].color,
            value: elements[k]
          })
        }
      }
      return result.sort(function(a, b) { return b.value - a.value })
    },
    currentDimensionCode: function() {
      return 'mind'
    },
    funcListRow1: function() {
      return this.funcList.slice(0, 4)
    },
    funcListRow2: function() {
      return this.funcList.slice(4)
    },
    // ===== 关键信息 - 家庭 =====
    familyWuxingLabel: function() {
      if (!this.compatibilityData || !this.compatibilityData.familyWuxing || !this.compatibilityData.familyWuxing.aggregatePercentages) return null
      var pcts = this.compatibilityData.familyWuxing.aggregatePercentages
      var keys = ['wood', 'fire', 'earth', 'metal', 'water']
      var maxKey = null
      var maxVal = -1
      for (var i = 0; i < keys.length; i++) {
        if (pcts[keys[i]] !== undefined && pcts[keys[i]] > maxVal) {
          maxVal = pcts[keys[i]]
          maxKey = keys[i]
        }
      }
      if (!maxKey) return null
      return { key: maxKey, label: this.wuxingConfig[maxKey].label, color: this.wuxingConfig[maxKey].color, value: maxVal }
    },
    familyMemberCount: function() {
      if (!this.compatibilityData || !this.compatibilityData.members) return 0
      return this.compatibilityData.members.length
    },
    familyWeeklyInsight: function() {
      if (!this.compatibilityData || !this.compatibilityData.weeklyInsight) return ''
      return this.compatibilityData.weeklyInsight
    },
    // ===== 关键信息 - 个人 =====
    dominantElement: function() {
      if (!this.traditionalData || !this.traditionalData.wuxingElements) return null
      var elements = this.traditionalData.wuxingElements
      var keys = ['wood', 'fire', 'earth', 'metal', 'water']
      var maxKey = null
      var maxVal = -1
      for (var i = 0; i < keys.length; i++) {
        if (elements[keys[i]] !== undefined && elements[keys[i]] > maxVal) {
          maxVal = elements[keys[i]]
          maxKey = keys[i]
        }
      }
      return maxKey
    },
    luckyColorInfo: function() {
      var colorMap = {
        wood: { name: '绿', hex: '#10B981' },
        fire: { name: '红', hex: '#FF6B9D' },
        earth: { name: '黄', hex: '#FF8C42' },
        metal: { name: '白', hex: '#6366F1' },
        water: { name: '蓝', hex: '#3B82F6' }
      }
      var elem = this.dominantElement
      if (!elem) return null
      return colorMap[elem] || null
    },
    luckyNumber: function() {
      if (this.traditionalData && this.traditionalData.lifeNumber) {
        return this.traditionalData.lifeNumber
      }
      var numMap = { wood: 3, fire: 9, earth: 5, metal: 7, water: 1 }
      var elem = this.dominantElement
      return elem ? numMap[elem] : null
    },
    fortuneSeed: function() {
      if (this.traditionalData && this.traditionalData.lifeNumber) {
        return String(this.traditionalData.lifeNumber)
      }
      return '0'
    },
    // WXML 不支持模板内 || {} 字面量，需在 computed 中预先做 fallback
    dailyFortuneSafe: function() {
      return this.dailyFortune || {}
    },
    // WXML 不支持模板内 || '' 字面量，需在 computed 中预先做 fallback
    dominantElementSafe: function() {
      return this.dominantElement || ''
    },
    dailyFortune: function() {
        // 优先使用后端接口数据
        if (this.dailyFortuneData) {
            var levels = ['大吉', '吉', '平', '凶', '大凶']
            return {
                level: this.dailyFortuneData.level,
                text: levels[this.dailyFortuneData.level],
                description: this.dailyFortuneData.description
            }
        }
        // 兼容模式：没有接口数据时使用原算法
        if (!this.dominantElement) return null
        var today = new Date()
        var dateStr = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate()
        var seedStr = dateStr + (this.fortuneSeed || '')
        var hash = 0
        for (var i = 0; i < seedStr.length; i++) {
            hash = ((hash << 5) - hash) + seedStr.charCodeAt(i)
            hash = hash & hash
        }
        var level = Math.abs(hash) % 5
        var levels = ['大吉', '吉', '平', '凶', '大凶']
        var descMap = {
            wood: ['大吉：木气旺盛，宜规划', '吉：行动力强', '平：静心养性', '凶：谨言慎行', '大凶：忌冲动'],
            fire: ['大吉：热情高涨', '吉：精力充沛', '平：适当休息', '凶：注意情绪', '大凶：静心冥想'],
            earth: ['大吉：稳重踏实', '吉：贵人运佳', '平：按部就班', '凶：注意肠胃', '大凶：不宜投资'],
            metal: ['大吉：决策力强', '吉：思维清晰', '平：保持专注', '凶：注意言辞', '大凶：不宜强求'],
            water: ['大吉：灵感丰富', '吉：人际和谐', '平：安静内省', '凶：情绪波动', '大凶：宜藏不宜放']
        }
var descList = descMap[this.dominantElement] || descMap.wood
        return { level: level, text: levels[level], description: descList[level] }
    },

    /** 当前选中成员的能量数据（从 sandboxData.members 中按 selectedMemberId 查找） */
    currentMemberEnergies: function() {
      if (!this.sandboxData || !this.sandboxData.members) return null
      var members = this.sandboxData.members
      var targetId = this.selectedMemberId || this.currentChildId
      for (var i = 0; i < members.length; i++) {
        var m = members[i]
        if (m && (m.memberId === targetId)) return m
      }
      return members[0] || null
    },
    mindPortrait: function() {
      var self = this
      if (!this.isLoggedIn || !this.emiData) return null
      var e = this.emiData
      var dims = [
        { key: 'emotionStability', label: '情绪稳定性', color: '#FF6B9D', desc: '情绪识别与调控能力' },
        { key: 'opennessScore', label: '开放性', color: '#6366F1', desc: '对新事物的接受程度' },
        { key: 'conscientiousnessScore', label: '尽责性', color: '#F59E0B', desc: '做事有条理、自律程度' },
        { key: 'extraversionScore', label: '外向性', color: '#10B981', desc: '社交活跃与外向程度' },
        { key: 'agreeablenessScore', label: '宜人性', color: '#FF8C42', desc: '与人相处的和谐程度' },
        { key: 'neuroticismScore', label: '神经质', color: '#F97316', desc: '情绪波动程度（反向）' }
      ]
      var result = { overall: 0, tierLabel: '', summary: '', dims: [], tip: '' }
      var total = 0
      var count = 0
      var dimList = []
      for (var i = 0; i < dims.length; i++) {
        var key = dims[i].key
        var score = e[key] || 0
        if (isNaN(score)) score = 0
        score = Math.max(0, Math.min(100, Number(score)))
        total += score
        count++
        var matched = dims.find(function(d) { return d.key === key })
        dimList.push({
          code: key,
          name: matched ? matched.label : key,
          score: Math.round(score),
          color: matched ? matched.color : '#FF6B9D',
          desc: matched ? matched.desc : ''
        })
      }
      if (count === 0) return null
      result.overall = Math.round(total / count)
      result.dims = dimList
      var o = result.overall
      if (o >= 80) {
        result.tierLabel = '心灵智者'
        result.summary = '您的心理状态非常健康，情绪稳定、人格成熟且内心强大。'
        result.tip = '保持内心平衡，可分享经验帮助家人共同成长'
      } else if (o >= 60) {
        result.tierLabel = '心灵进取者'
        result.summary = '您的心理状态良好，具备较强的情绪调节能力和自我认知。'
        result.tip = '关注情绪波动，练习正念冥想，持续提升心理韧性'
      } else if (o >= 40) {
        result.tierLabel = '心灵探索者'
        result.summary = '您的心理状态正在建立基础，情绪管理有待加强。'
        result.tip = '从每日情绪打卡开始，逐步建立情绪觉察习惯'
      } else {
        result.tierLabel = '心灵关怀者'
        result.summary = '您可能正处于情绪波动期，需要更多关注与支持。'
        result.tip = '建议寻求专业心理帮助，或向家人朋友倾诉'
      }
      return result
    }
  },
  onShow() {
    this.showTabTransition = true

    var token = uni.getStorageSync('token')
    this.isLoggedIn = !!token
    if (this.isLoggedIn) {
      this.role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      // FIX: 从 Vuex store 读取 currentChildId，而非仅从 localStorage
      this.currentChildId = (this.$store.state && this.$store.state.currentChildId) || uni.getStorageSync('currentChildId') || null
      this.userName = uni.getStorageSync('nickname') || uni.getStorageSync('userName') || '家长'
    }
    this.loadSectionConfig()
    if (this.isLoggedIn) {
      this.loadChildren()
      this.loadFamilyMembersVisible()
      this.loadSandboxData()
      this.loadMindRadarPopulationData()
      this.loadEmiData()
      this.loadGutData()
      this.loadEnergyData()
      this.loadTraditionalCultureData()
      this.loadContacts()
      this.loadHealthAlerts()
      this.loadMilestones()
      this.loadDanReports()
    }
    // 游客也能浏览活动和商品
    this.loadFamilyFortune()
    this._watchPageReady()
  },
  methods: {
    /** 获取心维度分组雷达图的分值数组 */
    getMindGroupScores: function(group) {
      var member = this.currentMemberEnergies
      if (!member) return []
      var scores = []
      var dims = group.dimensions
      for (var i = 0; i < dims.length; i++) {
        scores.push(member[dims[i].key] || 0)
      }
      return scores
    },
    /** 获取心维度分组雷达图的家庭平均分（sandboxData.members 各维度均值） */
    getMindGroupFamilyScores: function(group) {
      if (!this.sandboxData || !this.sandboxData.members) return []
      var members = this.sandboxData.members
      var dims = group.dimensions
      var scores = []
      for (var i = 0; i < dims.length; i++) {
        var key = dims[i].key
        var sum = 0, count = 0
        for (var j = 0; j < members.length; j++) {
          var val = members[j][key]
          if (val !== undefined && val !== null && val > 0) { sum += val; count++ }
        }
        scores.push(count > 0 ? Math.round(sum / count) : 0)
      }
      return scores
    },
    /** 获取分组对应的人群位置分数 */
    getGroupPopulationScores: function(group) {
      if (!this.mindPopulationScores) return []
      var scores = []
      var dims = group.dimensions
      for (var i = 0; i < dims.length; i++) {
        scores.push(this.mindPopulationScores[dims[i].key] || 0)
      }
      return scores
    },
    // ===== 区块可见性 =====
    loadSectionConfig: function() {
      var self = this
      var baseSections = ['func_entries', 'daily_tip', 'recommended_reading']
      if (!uni.getStorageSync('token')) {
        self.visibleSections = baseSections
        return
      }
      var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      getVisibleSections({ pageKey: 'mind', 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() {
        self.visibleSections = ['func_entries', 'daily_tip', 'recommended_reading', 'mind_tasks', 'related_activities', 'purchased_courses']
        })
    },

    // 加载家庭天盘数据
    loadFamilyFortune: function() {
        var self = this
        if (!self.isLoggedIn) return
        
        getFamilyFortune().then(function(res) {
            if (res.code === 200 && res.data) {
                // 更新 todayMood 占位数据为真实接口数据
                self.todayMood = {
                    emoji: res.data.moodEmoji || '\u{1F60A}',
                    text: res.data.moodText || '平静',
                    score: res.data.moodScore || 65
                }
                // 更新 dailyFortune computed 函数依赖的数据
                self.dailyFortuneData = {
                    level: res.data.fortuneLevel,
                    text: res.data.fortuneLevelText,
                    description: res.data.fortuneDescription
                }
                // 更新主导五行
                self.traditionalData = self.traditionalData || {}
                self.traditionalData.wuxingElements = {}
                if (res.data.dominantElement) {
                    self.traditionalData.wuxingElements[res.data.dominantElement] = 100
                }
                // 更新周报提示
                self.compatibilityData = self.compatibilityData || {}
                self.compatibilityData.weeklyInsight = res.data.weeklyTip || self.compatibilityData.weeklyInsight
            }
        }).catch(function(err) {
            console.error('Failed to load family fortune:', err)
        })
    },

    viewReport: function(report) {
      if (report && report.fileUrl) {
        uni.downloadFile({
          url: report.fileUrl,
          success: function(res) {
            if (res.statusCode === 200) {
              uni.openDocument({
                filePath: res.tempFilePath,
                success: function() {
                  console.log('打开报告成功')
                }
              })
            }
          }
        })
      }
    },

    formatDate: function(dateStr) {
      if (!dateStr) return ''
      var d = parseDate(dateStr)
      if (!d) return ''
      var month = d.getMonth() + 1
      var day = d.getDate()
      return month + '月' + day + '日'
    },

    sectionVisible: function(key) {
      return this.visibleSections.length === 0 || this.visibleSections.indexOf(key) !== -1
    },

    // ===== 心理 Tab：EMI 数据 =====
    loadEmiData: function() {
      var self = this
      var memberId = self.currentChildId
      if (!memberId) {
        self.emiLoading = false
        return
      }
      self.emiLoading = true
      getEmiReport(memberId).then(function(res) {
        if (res.code === 200 && res.data) {
          self.emiData = res.data
        self.mindSubDims = (function() { var e = self.emiData || {}; return [{label:'情绪稳定性', score:e.emotionStability||0, desc:'识别、理解和管理情绪的综合能力'}, {label:'开放性', score:e.opennessScore||0, desc:'对新事物的接受程度'}, {label:'尽责性', score:e.conscientiousnessScore||0, desc:'做事有条理的程度'}, {label:'外向性', score:e.extraversionScore||0, desc:'社交活跃度'}, {label:'宜人性', score:e.agreeablenessScore||0, desc:'与人相处的和谐度'}, {label:'神经质', score:e.neuroticismScore||0, desc:'情绪波动程度（反向）'}, {label:'自主性', score:e.driveAutonomy||0, desc:'内在驱动力'}, {label:'胜任感', score:e.driveCompetence||0, desc:'对自己能力的信心'}, {label:'归属感', score:e.driveRelatedness||0, desc:'感受被接纳'}]; })();
        self.loadMindIndicators(memberId)
        }
        self.emiLoading = false
      }).catch(function() {
        self.emiLoading = false
      })
    },

    // ===== 肠脑轴情绪指标 =====
    loadGutData: function() {
      var self = this
      var memberId = self.currentChildId
      if (!memberId) return
      var token = uni.getStorageSync('token')
      // 获取神经递质指标
      uni.request({
        url: config.API_BASE_URL + '/api/mind/neurotransmitters',
        method: 'POST',
        header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        data: { memberId: memberId },
        success: function(r) {
          if (r.statusCode === 200 && r.data && r.data.code === 200) {
            var list = r.data.data
            if (Array.isArray(list) && list.length > 0) {
              self.gutIndicators = list.slice(0, 4)
            }
          }
        }
      })
      // 获取情绪洞察摘要
      uni.request({
        url: config.API_BASE_URL + '/api/mind/gut-emotion-insight',
        method: 'POST',
        header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        data: { memberId: memberId },
        success: function(r) {
          if (r.statusCode === 200 && r.data && r.data.code === 200 && r.data.data) {
            self.gutInsight = r.data.data.summary || ''
          }
        }
      })
    },
    indicatorColor: function(status) {
      if (status === 'abnormal' || status === '偏高' || status === '偏低') return '#EF4444'
      if (status === 'warning' || status === '偏高' || status === '偏低') return '#F59E0B'
      return '#10B981'
    },
    statusLabel: function(status) {
      if (status === 'normal') return '正常'
      if (status === 'abnormal') return '异常'
      if (status === 'warning') return '警讯'
      return status || '正常'
    },
    // 情绪影响映射：指标名 → 影响的情绪功能
    emotionImpactLabel: function(name) {
      if (!name) return ''
      if (name.indexOf('血清素') !== -1 || name.indexOf('5-HT') !== -1) return '情绪稳定'
      if (name.indexOf('多巴胺') !== -1 || name.indexOf('Dopamine') !== -1) return '愉悦·动力'
      if (name.indexOf('GABA') !== -1 || name.indexOf('氨基丁酸') !== -1) return '放松·减压'
      if (name.indexOf('色氨酸') !== -1 || name.indexOf('Tryptophan') !== -1) return '睡眠·情绪'
      if (name.indexOf('褪黑素') !== -1 || name.indexOf('Melatonin') !== -1) return '睡眠调节'
      if (name.indexOf('皮质醇') !== -1 || name.indexOf('Cortisol') !== -1) return '压力水平'
      return ''
    },
    // 指标值展示：后端字段为 indicatorValue，兼容数值型
    formatIndicatorValue: function(ind) {
      if (!ind) return ''
      var v = ind.value !== undefined && ind.value !== null ? ind.value : ind.indicatorValue
      if (v === undefined || v === null || v === '') return ''
      return String(v)
    },
    // 指标条宽度：将指标值归一化为 0-100% 百分比
    indicatorBarWidth: function(ind) {
      var raw = ind.value !== undefined && ind.value !== null ? ind.value : ind.indicatorValue
      var n = parseFloat(raw)
      if (!isNaN(n) && n >= 0 && n <= 100) return n + '%'
      if (!isNaN(n) && n > 100) return '100%'
      var st = ind.status || ''
      if (st === '偏低' || st === '缺乏' || st === 'abnormal') return '30%'
      if (st === '偏高' || st === '过高') return '75%'
      return '55%'
    },

    // ===== EMI 分数评级 =====
    getScoreLevel: function(score) {
      if (score >= 85) return 'excellent'
      if (score >= 70) return 'good'
      if (score >= 55) return 'average'
      return 'low'
    },
    getScoreLevelText: function(score) {
      if (score >= 85) return '优秀'
      if (score >= 70) return '良好'
      if (score >= 55) return '一般'
      return '需提升'
    },

    // ===== 导航 =====
    goEmotionReport: function() {
      var memberId = this.currentChildId || ''
      uni.navigateTo({ url: '/pages/mind-detail/emotion-report?memberId=' + memberId })
    },
    goArticles: function() {
      uni.navigateTo({ url: '/pages/article-center/index?dimension=mind' })
    },
    onFuncClick: function(item) {
      if (item.needLogin && !this.isLoggedIn) {
        uni.showModal({
          title: '提示',
          content: '请先登录后使用此功能',
          success: (res) => { if (res.confirm) this.openLoginSheet() }
        })
        return
      }
      if (item.page) {
        var url = item.page
        if (item.page.indexOf('innate-portrait') !== -1 || item.page.indexOf('innate-trajectory') !== -1) {
          var memberId = this.currentChildId
          if (!memberId) {
            uni.showToast({ title: '请先选择家庭成员', icon: 'none' })
            return
          }
          var familyId = (this.$store.state && this.$store.state.familyId) || uni.getStorageSync('familyId') || ''
          url += '?memberId=' + memberId + '&memberType=child&familyId=' + familyId
        }
        nav.goPage(url)
      }
    },
    // ===== 孩子列表与维度数据 =====
    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.currentChildId = savedChildId
              found = true
              break
            }
          }
          // FIX: 不再自动选择第一个孩子。仅在用户通过 UserQuickEntry 切换时设置 currentChildId
          if (found) {
            self.loadDimensionData()
            self.loadEmiData()
          }
        }
      }).catch(function(e) {
        console.log('获取成员列表失败', e)
      })
    },
    loadDimensionData: function() {
      if (this.familyMembersVisible.length > 0) {
        this.loadCompatibilityData()
      }
    },
    loadSandboxData: function() {
      var self = this
      getFamilyEnergySandbox().then(function(res) {
        if (res && res.data) {
          self.sandboxData = res.data
        }
      }).catch(function() {})
    },
    loadMindRadarPopulationData: function() {
      var self = this
      if (!this.currentChildId && !this.selectedMemberId) return
      var memberId = this.selectedMemberId || this.currentChildId
      if (!memberId) return
      getRadarData({
        memberId: memberId,
        dimensions: ['bigFiveOpenness','bigFiveConscientiousness','bigFiveExtraversion','bigFiveAgreeableness','bigFiveNeuroticism','emotionStability','driveAutonomy','driveCompetence','driveRelatedness','selfConceptOverall']
      }).then(function(res) {
        if (res && res.data && res.data.populationScores) {
          var dims = res.data.dimensions || []
          var scores = res.data.populationScores
          var map = {}
          for (var i = 0; i < dims.length && i < scores.length; i++) {
            map[dims[i]] = scores[i]
          }
          self.mindPopulationScores = map
        }
      }).catch(function(e) { console.warn('[mind] radar-data failed', 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
      if (!this.currentChildId) return
      getEnergyOverview(this.currentChildId).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] && dims[i].code === 'mind' && res.data.energyScores) {
                self.familyScore = res.data.energyScores.mindScore || 0
              }
            }
          }
        }
      }).catch(function(e) {
        console.log('获取能量概览失败', e)
      })
    },
    onFamilyMemberSelect: function(member) {
      this.selectedMemberId = member.id
    },
    onChildChanged: function(child) {
      this.currentChildId = child.memberId
      // FIX: 同步提交到 Vuex store
      this.$store.commit('switchToChild', child.memberId)
      this.loadDimensionData()
      this.loadEmiData()
      this.loadTraditionalCultureData()
    },
    loadMindIndicators: function(memberId) {
      var self = this
      getLatestIndicators({ memberId: memberId, domain: 'mind' }).then(function(res) {
        if (res.code === 200) self.mindIndicators = res.data || []
      }).catch(function(e) { console.log('[mind] loadMindIndicators failed', e) })
    },
    goMindDetail: function() {
      var id = this.activeChildId || uni.getStorageSync('currentChildId')
      if (!id) return
      uni.navigateTo({ url: '/pages/mind-detail/member-mind-detail?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)
    },
    loadFamilyMembersVisible: function() {
      var self = this
      getFamilyMemberList({ visibleOnly: true }).then(function(res) {
        self.familyMembersVisible = res.data || []
      }).catch(function(e) {
        console.log('获取可见家庭成员失败', e)
        self.familyMembersVisible = []
      })
    },
    loadCompatibilityData: function() {
      var self = this
      var token = uni.getStorageSync('token')
      uni.request({
        url: config.API_BASE_URL + '/api/mind/traditional/family-dashboard',
        method: 'POST',
        header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        data: {},
        success: function(res) {
          if (res.data && res.data.code === 200 && res.data.data) {
            self.compatibilityData = res.data.data
          }
        },
        fail: function() {}
      })
    },
    scrollToSection: function(section) {
      uni.pageScrollTo({ selector: '#' + section, duration: 300 })
    },
    goAssessment: function() { uni.navigateTo({ url: '/pages/assessment/apply' }) },
    goLogin: function() { this.openLoginSheet() },
    // 登录成功：刷新登录态数据（镜像 onShow 已登录分支）
    onLoginSuccess: function() {
      this.isLoggedIn = true
      this.role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      this.currentChildId = (this.$store.state && this.$store.state.currentChildId) || uni.getStorageSync('currentChildId') || null
      this.userName = uni.getStorageSync('nickname') || uni.getStorageSync('userName') || '家长'
      this.loadSectionConfig()
      this.loadChildren()
      this.loadFamilyMembersVisible()
      this.loadSandboxData()
      this.loadMindRadarPopulationData()
      this.loadEmiData()
      this.loadGutData()
      this.loadEnergyData()
      this.loadTraditionalCultureData()
      this.loadContacts()
      this.loadHealthAlerts()
      this.loadMilestones()
      this.loadDanReports()
      this._watchPageReady()
    },

    // ===== 传统文化数据 =====
    // ===== 联系人 / 关系健康 =====
    loadContacts: function() {
      var self = this
      getContactList({}).then(function(res) {
        if (res.code === 200) {
          self.contactList = Array.isArray(res.data) ? res.data : []
        } else {
          self.contactList = []
        }
      }).catch(function() {
        self.contactList = []
      })
    },
    loadHealthAlerts: function() {
      var self = this
      getHealthAlerts().then(function(res) {
        if (res.code === 200) {
          self.healthAlerts = Array.isArray(res.data) ? res.data : []
        } else {
          self.healthAlerts = []
        }
      }).catch(function() {
        self.healthAlerts = []
      })
    },
    loadMilestones: function() {
      var self = this
      getMilestones(30).then(function(res) {
        if (res.code === 200) {
          self.milestones = Array.isArray(res.data) ? res.data : []
        } else {
          self.milestones = []
        }
      }).catch(function() {
        self.milestones = []
      })
    },
    loadTraditionalCultureData: function() {
      var self = this
      var memberId = this.currentChildId
      if (!memberId) {
        self.traditionalLoading = false
        return
      }
      self.traditionalLoading = true
      uni.request({
        url: config.API_BASE_URL + '/api/mind/traditional/mirror',
        method: 'POST',
        data: { memberId: memberId, memberType: 'child' },
        success: function(res) {
          self.traditionalLoading = false
          if (res.data && res.data.code === 200 && res.data.data) {
            var d = res.data.data
            if (d.eightCharacters || d.wuxingElements || d.zodiac || d.numSoul) {
              self.traditionalData = d
            } else {
              self.traditionalData = null
            }
          } else {
            self.traditionalData = null
          }
        },
        fail: function() {
          self.traditionalLoading = false
          self.traditionalData = null
        }
      })
    },
    _watchPageReady() {
      var self = this
      var unwatch = this.$watch(function() {
        if (self.isLoggedIn) {
          return !!(self.emiData || self.energyOverview)
        }      }, function(val) {
        if (val) {
          if (unwatch) unwatch()
          if (self.$refs.tabTransition) self.$refs.tabTransition.markReady()
        }
      })
    },

    // ===== DAN 报告 =====
    loadDanReports: function() {
      var self = this
      var memberId = self.currentChildId
      if (!memberId) return
      getDanReportByChild(memberId, 'mind').then(function(res) {
        if (res.code === 200 && res.data) {
          self.danReports = res.data
        }
      }).catch(function() {})
    },
    goDanUpload: function(dimension) {
      var memberId = this.selectedMemberId || this.currentChildId
      var url = '/pages/health/report-upload?type=a2'
      if (memberId) {
        url += '&memberId=' + memberId
      }
      uni.navigateTo({ url: url })
    },
    viewDanReport: function(report) {
      var reportId = report.sourceReportId || report.id
      uni.navigateTo({ url: '/pages/health/report-detail?reportType=dan&reportId=' + reportId })
    },
    formatDate: function(dateStr) {
      if (!dateStr) return ''
      var d = parseDate(dateStr)
      if (!d) return ''
      return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
    }
  }
</script>

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

/* ===== 心·心理 标题栏 ===== */
.section-title-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20rpx 30rpx 10rpx;
  padding: 16rpx 24rpx;
  background: linear-gradient(135deg, #F97316, #FB923C);
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(139,92,246,0.25);
}
.section-title-icon {
  font-size: 32rpx;
  color: #fff;
  margin-right: 12rpx;
}
.section-title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}

/* ===== 心理报告上传卡片 ===== */
.mind-report-section {
  margin: 20rpx 30rpx;
}
.mind-report-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: linear-gradient(135deg, #F3E8FF, #FCE4EC);
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.mind-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;
}
.mind-report-icon {
  font-size: 52rpx;
}
.mind-report-right {
  flex: 1;
}
.mind-report-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #7C3AED;
  display: block;
  margin-bottom: 6rpx;
}
.mind-report-desc {
  font-size: 22rpx;
  color: #A855F7;
  line-height: 1.5;
  display: block;
  margin-bottom: 10rpx;
}
.mind-report-tags {
  display: flex;
  flex-direction: row;
  gap: 10rpx;
}
.mind-tag {
  font-size: 20rpx;
  color: #7C3AED;
  background: rgba(255,255,255,0.6);
  padding: 4rpx 14rpx;
  border-radius: 20rpx;
}
.mind-report-arrow {
  font-size: 36rpx;
  color: #FB923C;
  margin-left: 10rpx;
  flex-shrink: 0;
}
.mind-report-card:active {
  opacity: 0.7;
}
.mind-report-list {
  margin-top: 12rpx;
}
.mind-report-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  border-radius: 14rpx;
  padding: 20rpx 20rpx;
  margin-bottom: 8rpx;
  box-shadow: 0 1rpx 6rpx rgba(0,0,0,0.05);
}
.mind-report-item:active {
  opacity: 0.7;
}
.mind-report-item-icon {
  font-size: 28rpx;
  margin-right: 14rpx;
}
.mind-report-item-name {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}
.mind-report-item-date {
  font-size: 22rpx;
  color: #999;
  margin-right: 14rpx;
}
.mind-report-item-status {
  font-size: 22rpx;
  padding: 2rpx 12rpx;
  border-radius: 20rpx;
}
.mind-report-item-status.parsed {
  color: #7C3AED;
  background: #F3E8FF;
}
.mind-report-item-status.pending {
  color: #999;
  background: #F5F5F5;
}
.mind-report-empty {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 24rpx;
  margin-top: 8rpx;
}
.mind-report-empty-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
}
.mind-report-empty-text {
  font-size: 24rpx;
  color: #bbb;
}

/* ===== 心理能量概况 ===== */
.energy-overview {
  display: flex;
  flex-direction: row;
  margin: 20rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  justify-content: space-around;
}
.energy-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.badge-icon {
  font-size: 36rpx;
  margin-bottom: 8rpx;
}
.badge-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}
.badge-label {
  font-size: 20rpx;
  color: #999;
  margin-top: 4rpx;
}

/* ===== EMI 四维条形图 ===== */
.emi-section {
  margin: 20rpx 30rpx;
}
.emi-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.emi-card-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
}
.personality-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}
.test-btn {
  background: #F97316;
  padding: 8rpx 28rpx;
  border-radius: 30rpx;
}
.test-btn-text {
  font-size: 24rpx;
  color: #fff;
  font-weight: 500;
}
.emi-bar-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20rpx;
}
.emi-bar-label {
  font-size: 24rpx;
  color: #666;
  width: 120rpx;
  flex-shrink: 0;
}
.emi-bar-track {
  flex: 1;
  height: 20rpx;
  background: #f0f0f0;
  border-radius: 10rpx;
  overflow: hidden;
  margin: 0 16rpx;
}
.emi-bar-fill {
  height: 100%;
  border-radius: 10rpx;
  transition: width 0.5s;
}
.emi-bar-score {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  width: 60rpx;
  text-align: right;
  flex-shrink: 0;
}
.emi-bar-level {
  font-size: 20rpx;
  width: 80rpx;
  text-align: right;
  flex-shrink: 0;
}
.level-excellent { color: #10B981; }
.level-good { color: #3B82F6; }
.level-average { color: #F97316; }
.level-low { color: #EF4444; }
.emi-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}
.emi-overall {
  font-size: 28rpx;
  font-weight: bold;
  color: #FF6B35;
}
.emi-link {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.emi-link-text {
  font-size: 26rpx;
  color: #FF6B35;
  font-weight: 500;
}
.emi-link-arrow {
  font-size: 26rpx;
  color: #FF6B35;
  margin-left: 8rpx;
}

/* ===== EMI 心理报告卡片 ===== */
.emi-card {
  margin: 30rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.emi-header {
  margin-bottom: 24rpx;
}
.emi-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
}
.emi-overall-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32rpx 0;
  background: linear-gradient(135deg, #FF6B35, #FFD700);
  border-radius: 16rpx;
  margin: 20rpx 0;
  color: #fff;
}
.emi-overall-label {
  font-size: 26rpx;
  margin-bottom: 6rpx;
}
.emi-overall-value {
  font-size: 64rpx;
  font-weight: bold;
  margin-bottom: 6rpx;
}
.emi-overall-level {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 12rpx;
  background: rgba(255,255,255,0.2);
}
.emi-dimensions {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.emi-dimension {
  display: flex;
  flex-direction: column;
}
.emi-dim-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}
.emi-dim-label {
  font-size: 26rpx;
  color: #666;
}
.emi-dim-values {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.emi-dim-score {
  font-size: 28rpx;
  font-weight: bold;
  color: #FF6B35;
  margin-right: 12rpx;
}
.emi-dim-level {
  font-size: 20rpx;
  padding: 2rpx 12rpx;
  border-radius: 8rpx;
}
.emi-dim-bar {
  height: 14rpx;
  background: #f0f0f0;
  border-radius: 7rpx;
  overflow: hidden;
}
.emi-dim-bar-fill {
  height: 100%;
  border-radius: 7rpx;
  transition: width 0.5s;
}
.emi-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  margin-top: 20rpx;
}
.emi-footer-text {
  font-size: 24rpx;
  color: #F97316;
  font-weight: 500;
}
.emi-footer-icon {
  font-size: 24rpx;
  margin-left: 8rpx;
}
.level-excellent { color: #10B981; background: #ECFDF5; }
.level-good { color: #3B82F6; background: #EFF6FF; }
.level-average { color: #F97316; background: #FFF7ED; }
.level-low { color: #EF4444; background: #FEF2F2; }

/* 雷达图内的空状态 */
.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 20rpx;
}

/* ===== 占位卡 ===== */
.placeholder-card {
  margin: 30rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.placeholder-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}
.placeholder-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}
.placeholder-desc {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 30rpx;
}
.placeholder-btn {
  background: linear-gradient(135deg, #FF6B35, #FFD700);
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 16rpx 64rpx;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(255,107,53,0.3);
}

/* ===== 传统文化卡片 ===== */
.culture-section {
  margin: 20rpx 30rpx;
}
.culture-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
  margin-bottom: 16rpx;
}
.culture-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.culture-card-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
}
.culture-card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}
.culture-card-body {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
}
/* 八字四柱 */
.bazi-grid {
  display: flex;
  justify-content: space-around;
  padding: 8rpx 0;
}
.bazi-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bazi-pillar-label {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 6rpx;
}
.bazi-pillar-value {
  font-size: 32rpx;
  font-weight: 700;
  color: #F97316;
  background: #F5F0FF;
  padding: 10rpx 14rpx;
  border-radius: 10rpx;
}
/* 五行能量 */
.wuxing-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}
.wuxing-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.wuxing-label {
  font-size: 26rpx;
  font-weight: 600;
  width: 44rpx;
  text-align: center;
}
.wuxing-bar-track {
  flex: 1;
  height: 20rpx;
  background: #F0F0F0;
  border-radius: 10rpx;
  overflow: hidden;
}
.wuxing-bar-fill {
  height: 100%;
  border-radius: 10rpx;
}
.wuxing-value {
  font-size: 22rpx;
  color: #666;
  width: 56rpx;
  text-align: right;
}
.energy-card {
  margin-top: 20rpx;
  padding: 24rpx 20rpx;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 20rpx;
  position: relative;
  overflow: hidden;
}

.energy-card::before {
  content: '';
  position: absolute;
  top: -60rpx;
  right: -60rpx;
  width: 200rpx;
  height: 200rpx;
  background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 70%);
  border-radius: 50%;
}

.energy-card::after {
  content: '';
  position: absolute;
  bottom: -40rpx;
  left: -40rpx;
  width: 160rpx;
  height: 160rpx;
  background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
  border-radius: 50%;
}

.energy-header {
  display: flex;
  align-items: center;
  margin-bottom: 14rpx;
  position: relative;
  z-index: 1;
}

.energy-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
}

.energy-label {
  font-size: 28rpx;
  font-weight: 700;
  background: linear-gradient(135deg, #F59E0B, #FF6B9D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.energy-divider {
  height: 2rpx;
  background: linear-gradient(90deg, rgba(255,215,0,0.5), rgba(255,107,157,0.3), transparent);
  margin-bottom: 18rpx;
  position: relative;
  z-index: 1;
}

.energy-quote {
  font-size: 26rpx;
  color: #E2E8F0;
  line-height: 1.8;
  display: block;
  margin-bottom: 14rpx;
  position: relative;
  z-index: 1;
  padding-left: 20rpx;
  letter-spacing: 1rpx;
}

.energy-quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4rpx;
  bottom: 4rpx;
  width: 4rpx;
  background: linear-gradient(180deg, #F59E0B, #FF6B9D);
  border-radius: 2rpx;
}

.energy-advice {
  font-size: 24rpx;
  color: #94A3B8;
  line-height: 1.7;
  display: block;
  position: relative;
  z-index: 1;
  padding: 14rpx 18rpx;
  background: rgba(255,255,255,0.05);
  border-radius: 12rpx;
  border: 1rpx solid rgba(255,255,255,0.08);
}

.energy-footer {
  display: flex;
  justify-content: center;
  gap: 12rpx;
  margin-top: 18rpx;
  position: relative;
  z-index: 1;
}

.energy-footer-dot {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}

.energy-footer-dot:nth-child(2) {
  background: rgba(255,215,0,0.6);
  width: 10rpx;
  height: 10rpx;
}
/* 星座+灵数双栏 */
.culture-dual {
  display: flex;
  gap: 16rpx;
}
.culture-dual-item {
  flex: 1;
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.culture-dual-icon {
  font-size: 36rpx;
  margin-bottom: 8rpx;
}
.culture-dual-label {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 6rpx;
}
.culture-dual-value {
  font-size: 28rpx;
  font-weight: 700;
  color: #F97316;
}
.culture-empty {
  text-align: center;
  padding: 30rpx 0;
  color: #bbb;
  font-size: 24rpx;
}

/* ===== 每日心理 ===== */
.tip-card {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.tip-left-bar {
  width: 6rpx;
  background: linear-gradient(180deg, #5B9BD5, #8FC5E8);
  flex-shrink: 0;
}
.tip-body {
  flex: 1;
  padding: 28rpx 24rpx;
}
.tip-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #5B9BD5;
  display: block;
  margin-bottom: 12rpx;
}
.tip-content {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  display: block;
  margin-bottom: 16rpx;
}
.tip-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.tip-source {
  font-size: 22rpx;
  color: #bbb;
}

/* ===== 通用区块 ===== */
.section {
  margin: 20rpx 30rpx;
}
.section-header {
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

/* ===== 推荐阅读 ===== */
.article-list {
  display: flex;
  flex-direction: column;
}
.article-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  margin-bottom: 20rpx;
}
.article-category {
  display: inline-block;
  padding: 4rpx 18rpx;
  border-radius: 20rpx;
  margin-bottom: 14rpx;
}
.article-category-text {
  font-size: 20rpx;
  color: #fff;
  font-weight: 500;
}
.article-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}
.article-summary {
  font-size: 24rpx;
  color: #888;
  line-height: 1.5;
  display: block;
  margin-bottom: 20rpx;
}
.article-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.meta-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 20rpx;
}
.meta-icon {
  font-size: 22rpx;
  margin-right: 4rpx;
}
.meta-text {
  font-size: 22rpx;
  color: #bbb;
}
.article-date {
  font-size: 22rpx;
  color: #bbb;
  margin-left: auto;
}

/* ===== 功能区入口 ===== */
.func-section {
  margin: 20rpx 30rpx;
}
.func-grid {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.func-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.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;
}
.func-item:active {
  opacity: 0.7;
}

/* ===== 底部 ===== */
.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: #FF6B9D; }
.indicator-placeholder { font-size: 26rpx; color: #ccc; }
.indicator-range { font-size: 20rpx; color: #bbb; }
.bottom-spacer { height: 120rpx; }

/* ===== 肠脑轴 ===== */
.gut-insight-text {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 16rpx;
  padding: 12rpx 16rpx;
  background: #F0FFF4;
  border-radius: 12rpx;
  line-height: 1.6;
}
.gut-indicator-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}
.gut-indicator-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.gut-indicator-left {
  width: 110rpx;
  flex-shrink: 0;
}
.gut-indicator-name {
  font-size: 22rpx;
  color: #666;
  font-weight: 500;
  display: block;
}
.gut-indicator-impact {
  font-size: 18rpx;
  color: #FF6B9D;
  display: block;
  margin-top: 2rpx;
}
.gut-indicator-bar-track {
  flex: 1;
  height: 16rpx;
  background: #F0F0F0;
  border-radius: 8rpx;
  overflow: hidden;
}
.gut-indicator-bar-fill {
  height: 100%;
  border-radius: 8rpx;
  transition: width 0.3s;
}
.gut-indicator-value {
  font-size: 22rpx;
  color: #666;
  width: 60rpx;
  text-align: right;
}
.gut-indicator-status {
  font-size: 20rpx;
  padding: 2rpx 12rpx;
  border-radius: 10rpx;
  width: 60rpx;
  text-align: center;
}
.status-normal {
  background: #D1FAE5;
  color: #059669;
}
.status-abnormal {
  background: #FEE2E2;
  color: #DC2626;
}
.status-warning {
  background: #FEF3C7;
  color: #D97706;
}

/* ===== 关键信息（家庭+个人） ===== */
.key-info-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-top: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.key-info-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.key-info-icon {
  font-size: 28rpx;
  margin-right: 8rpx;
}
.key-info-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}
.key-info-body {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
}
.key-info-col {
  flex: 1;
  background: #F8F9FA;
  border-radius: 14rpx;
  padding: 16rpx;
  min-width: 0;
}
.ki-subtitle {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 12rpx;
  font-weight: 500;
}
.ki-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  flex-wrap: nowrap;
}
.ki-row:last-child {
  margin-bottom: 0;
}
.ki-label {
  font-size: 22rpx;
  color: #888;
  margin-right: 8rpx;
  white-space: nowrap;
}
.ki-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: 6rpx;
  flex-shrink: 0;
}
.ki-valuel {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
}
.ki-valued {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}
.ki-swatch {
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  margin-right: 6rpx;
  border: 2rpx solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.ki-num {
  font-size: 30rpx;
  font-weight: 700;
  color: #FF6B9D;
}
.ki-fortune {
  font-size: 24rpx;
  font-weight: 700;
  padding: 2rpx 12rpx;
  border-radius: 10rpx;
}
.ki-fortune-0 {
  color: #D32F2F;
  background: #FFEBEE;
}
.ki-fortune-1 {
  color: #E65100;
  background: #FFF3E0;
}
.ki-fortune-2 {
  color: #F9A825;
  background: #FFFDE7;
}
.ki-fortune-3 {
  color: #7B1FA2;
  background: #F3E5F5;
}
.ki-fortune-4 {
  color: #B71C1C;
  background: #FFCDD2;
}
.ki-insight {
  display: flex;
  align-items: flex-start;
  margin-top: 16rpx;
  padding: 16rpx;
  background: #FFF8F0;
  border-radius: 12rpx;
}
.ki-insight-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
  flex-shrink: 0;
}
.ki-insight-text {
  font-size: 22rpx;
  color: #8B6914;
  line-height: 1.5;
}
.ki-footer {
  margin-top: 16rpx;
  text-align: center;
  padding: 12rpx;
  font-size: 24rpx;
  color: #F97316;
  font-weight: 500;
  background: #F5F3FF;
  border-radius: 12rpx;
}
.ki-footer:active {
  opacity: 0.7;
}

/* DAN 报告卡片 */
.dan-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
}
.dan-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}
.dan-report-date {
  font-size: 26rpx;
  color: #666;
}
.dan-status {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
}
.dan-status.confirmed {
  background: #D1FAE5;
  color: #065F46;
}
.dan-status.pending {
  background: #FEF3C7;
  color: #92400E;
}
.dan-report-desc {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 12rpx;
  display: block;
}
.dan-card-footer {
  text-align: right;
}
.dan-view-link {
  font-size: 26rpx;
  color: #6366F1;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
}
.section-more {
  font-size: 26rpx;
  color: #6366F1;
  padding: 8rpx 16rpx;
}

/* 品牌定位语 */
.brand-strap {
  margin: 16rpx 30rpx 0;
  padding: 20rpx 28rpx;
  background: linear-gradient(135deg, #FFF0F5, rgba(255,107,157,0.12));
  border-radius: 16rpx;
  border-left: 8rpx solid #FF6B9D;
}
.brand-strap-text {
  font-size: 26rpx;
  color: #9D174D;
  font-weight: 500;
}

/* 每月引导语 */
.monthly-guidance {
  margin: 16rpx 30rpx 0;
  padding: 20rpx 28rpx;
  background: linear-gradient(135deg, #FFF0F5, rgba(255,107,157,0.08));
  border-radius: 16rpx;
  border-left: 8rpx solid #FF6B9D;
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.guidance-icon { font-size: 32rpx; }
.guidance-text {
  font-size: 26rpx;
  color: #9D174D;
  font-weight: 500;
}

/* 雷达图分组 */
.radar-group { margin-bottom: 30rpx; }
.radar-group-label {
  font-size: 28rpx;
  font-weight: bold;
  color: #9D174D;
  margin-bottom: 16rpx;
  padding-left: 10rpx;
}

/* 维度画像样式 */
.dimension-portrait-section {
  margin: 24rpx 30rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 32rpx 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(255, 107, 157, 0.12);
  border: 2rpx solid rgba(255, 107, 157, 0.1);
}
.portrait-tier {
  font-size: 26rpx;
  color: #FF6B9D;
  font-weight: bold;
  margin-left: 16rpx;
}
.portrait-summary {
  margin-bottom: 24rpx;
}
.portrait-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}
.portrait-dimensions {
  margin-bottom: 20rpx;
}
.portrait-dim-item {
  margin-bottom: 18rpx;
}
.portrait-dim-header {
  display: flex;
  align-items: center;
  margin-bottom: 6rpx;
}
.portrait-dim-icon {
  width: 36rpx;
  height: 36rpx;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
  font-size: 20rpx;
}
.portrait-dim-name {
  font-size: 24rpx;
  color: #333;
  flex: 1;
}
.portrait-dim-score {
  font-size: 26rpx;
  font-weight: bold;
  color: #FF6B9D;
  margin-right: 12rpx;
}
.portrait-dim-bar-track {
  height: 10rpx;
  background: #F0F6F7;
  border-radius: 5rpx;
  overflow: hidden;
  margin-bottom: 4rpx;
  flex: 1;
}
.portrait-dim-bar-fill {
  height: 100%;
  border-radius: 5rpx;
  transition: width 0.3s ease;
}
.portrait-dim-desc {
  font-size: 20rpx;
  color: #999;
  display: block;
}
.portrait-tip {
  padding: 16rpx 20rpx;
  background: linear-gradient(135deg, #FFF0F5, #FDF2F7);
  border-radius: 12rpx;
  border-left: 8rpx solid #FF6B9D;
  margin-top: 16rpx;
}
.portrait-tip-text {
  font-size: 22rpx;
  color: #C2410C;
  line-height: 1.5;
}
</style>