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

<template>
  <view class="container">
    <view v-if="!isLoggedIn">
      <PageBanner theme="body" tagline="科学管理全家健康" quote="身体健康是幸福的基础" />
      <!-- 品牌定位语 -->
      <view class="brand-strap"><text class="brand-strap-text">科学管理全家健康数据</text></view>
      <!-- 痛点卡 -->
      <view class="pain-card">
        <text class="pain-quote">指标正常 ≠ 健康</text>
        <text class="pain-desc">孩子反复生病，你扛了多少次了？</text>
      </view>
      <!-- 功能预览 -->
      <view class="guest-features">
        <view class="feat-card" @click="goPage('/pages/health/report-upload')">
          <text class="feat-icon">📋</text>
          <text class="feat-title">上传健康报告</text>
          <text class="feat-desc">体检/肠道/舌诊 · AI解读</text>
        </view>
        <view class="feat-card" @click="goPage('/pages/body/detail')">
          <text class="feat-icon">🧠</text>
          <text class="feat-title">认知能力测评</text>
          <text class="feat-desc">记忆力·注意力·逻辑推理</text>
        </view>
        <view class="feat-card" @click="goPage('/pages/mind/index')">
          <text class="feat-icon">💖</text>
          <text class="feat-title">心理健康测评</text>
          <text class="feat-desc">情绪稳定·抗压能力</text>
        </view>
        <view class="feat-card" @click="goPlanSummary">
          <text class="feat-icon">📝</text>
          <text class="feat-title">智能健康方案</text>
          <text class="feat-desc">选维度·选成员·定目标</text>
        </view>
      </view>
      <!-- 自测入口 -->
      <view class="self-test-card" @click="goSelfTest">
        <view class="self-test-head">
          <text class="self-test-icon">⚡</text>
          <view class="self-test-info">
            <text class="self-test-title">15题五维健康自检</text>
            <text class="self-test-sub">约20秒，了解家人健康概况</text>
          </view>
          <text class="self-test-arrow">›</text>
        </view>
      </view>
      <!-- 数据预览（示例） -->
      <view class="demo-section">
        <view class="demo-section-head">
          <text class="demo-section-title">登录后 · 看懂这些数据</text>
          <text class="demo-section-sub">示例数据 · 上传报告 / 完成测评后展示真实结果</text>
        </view>
        <view class="demo-chart-title-row">
          <text class="demo-chart-name">🟠 身体七维</text>
          <text class="demo-chart-tag">示例</text>
        </view>
        <RadarChart :dimensions="demoBodyDims" :scores="demoBodyScores" fillColor="#FF8C42" childName="示例" width="560" height="460" />
        <view class="demo-chart-title-row">
          <text class="demo-chart-name">🧠 认知雷达</text>
          <text class="demo-chart-tag">示例</text>
        </view>
        <RadarChart :dimensions="demoCogDims" :scores="demoCogScores" fillColor="#6366F1" childName="示例" width="560" height="460" />
      </view>
      <!-- 五维健康体系 -->
      <view class="wuxing-section">
        <view class="wuxing-title">身·心·智·行·富 · 看得见的健康闭环</view>
        <view class="wuxing-desc">五行相生相克，从报告和测评里，真正读懂家人的身体</view>
        <view class="wuxing-relations">
          <view class="rel-group">
            <text class="rel-title">相生 → 系统前进</text>
            <view class="rel-chain">
              <text class="rel-item">🌏 身</text>
              <text class="rel-arrow">→</text>
              <text class="rel-item">⚡ 智</text>
              <text class="rel-arrow">→</text>
              <text class="rel-item">💧 富</text>
              <text class="rel-arrow">→</text>
              <text class="rel-item">🌿 行</text>
              <text class="rel-arrow">→</text>
              <text class="rel-item">🔥 心</text>
              <text class="rel-arrow">→</text>
              <text class="rel-item">🌏 身</text>
            </view>
            <text class="rel-hint">健康孕育智慧，智慧创造价值，价值滋养关系，关系反哺心灵，心灵守护健康</text>
          </view>
          <view class="rel-group">
            <text class="rel-title">相克 → 系统平衡</text>
            <view class="rel-chain">
              <text class="rel-item">🌏 身</text>
              <text class="rel-op">克</text>
              <text class="rel-item">💧 富</text>
              <text class="rel-dot">·</text>
              <text class="rel-item">⚡ 智</text>
              <text class="rel-op">克</text>
              <text class="rel-item">🌿 行</text>
              <text class="rel-dot">·</text>
              <text class="rel-item">💧 富</text>
              <text class="rel-op">克</text>
              <text class="rel-item">🔥 心</text>
              <text class="rel-dot">·</text>
              <text class="rel-item">🌿 行</text>
              <text class="rel-op">克</text>
              <text class="rel-item">🌏 身</text>
              <text class="rel-dot">·</text>
              <text class="rel-item">🔥 心</text>
              <text class="rel-op">克</text>
              <text class="rel-item">⚡ 智</text>
            </view>
            <text class="rel-hint">莫以健康换金钱，真诚胜过算计，财富服务家庭，关爱有度、大爱留白</text>
          </view>
        </view>
        <view class="wuxing-cards">
          <view class="wc-card wc-body" @click="goPage('/pages/body-detail/index')">
            <text class="wc-icon">🌏</text>
            <view class="wc-info">
              <text class="wc-name">身 · 主动健康</text>
              <text class="wc-text">读懂每一份报告，看见全家体质的变化</text>
            </view>
          </view>
          <view class="wc-card wc-wisdom" @click="goPage('/pages/wisdom-detail/index')">
            <text class="wc-icon">⚡</text>
            <view class="wc-info">
              <text class="wc-name">智 · 赋能未来</text>
              <text class="wc-text">一次测评，看见孩子真实的专注与潜能</text>
            </view>
          </view>
          <view class="wc-card wc-wealth" @click="goPage('/pages/wealth/index')">
            <text class="wc-icon">💧</text>
            <view class="wc-info">
              <text class="wc-name">富 · 利他创富</text>
              <text class="wc-text">看懂健康与财富的关系，明白身体是最大的本钱</text>
            </view>
          </view>
          <view class="wc-card wc-action" @click="goPage('/pages/action-detail/member-action-detail')">
            <text class="wc-icon">🌿</text>
            <view class="wc-info">
              <text class="wc-name">行 · 人际和谐</text>
              <text class="wc-text">看懂关系里的情绪，看见家人真实的需求</text>
            </view>
          </view>
          <view class="wc-card wc-mind" @click="goPage('/pages/mind-detail/index')">
            <text class="wc-icon">🔥</text>
            <view class="wc-info">
              <text class="wc-name">心 · 大爱相随</text>
              <text class="wc-text">读懂情绪的信号，听懂家人没说出口的话</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 登录引导 -->
      <view class="login-guide-section">
        <LoginGuideCard
          title="解锁全家健康数据"
          :items="[
            '查看七维雷达图与健康报告AI解读',
            '完成测评获取个性化健康方案',
            '每日打卡追踪身体/情绪/认知趋势'
          ]" />
      </view>
    </view>
    <view v-else>
      <PageBanner theme="body" tagline="看见·主动健康闭环" quote="采集→看见→行动" />

      <view class="tab-bar">
        <view v-for="tab in tabs" :key="tab.code" class="tab-item" :class="{ active: currentTab === tab.code }" @click="switchTab(tab.code)">
          <text class="tab-icon">{{ tab.icon }}</text>
          <text class="tab-label">{{ tab.label }}</text>
          <view v-if="currentTab === tab.code" class="tab-underline" :style="{ background: tab.color }"></view>
        </view>
      </view>

      <view class="section section-chart">
        <RadarChart :dimensions="currentDimensions" :scores="currentScores" :fillColor="currentColor" :childName="selectedMemberName" width="640" height="520" />
        <view class="chart-empty" v-if="chartIsEmpty">
          <text class="empty-text">{{ currentTabLabel }}数据待采集</text>
          <text class="empty-sub">上传报告或完成测评后显示</text>
        </view>
      </view>

      <FamilyMemberStrip @select="onMemberSelect" />

      <view class="section section-dc-header">
        <view class="dc-title-row">
          <text class="dc-icon">🔍</text>
          <text class="dc-title">看见 · 健康数据中心</text>
        </view>
      </view>

      <view class="section section-data-collect">
        <view class="data-card" @click="goPage('/pages/health/report-upload')">
          <view class="data-card-icon" style="background:rgba(249,115,22,0.12)"><text>📋</text></view>
          <view class="data-card-info">
            <text class="data-card-title">上传健康报告</text>
            <text class="data-card-desc">体检/肠道/舌诊报告 · AI智能解读</text>
          </view>
          <text class="data-card-arrow">›</text>
        </view>

        <view class="data-card data-card-assessment">
          <view class="data-card-head">
            <text class="data-card-title">在线测评</text>
            <text class="data-card-subtitle">多维度自测评估</text>
          </view>
          <view v-for="quiz in quizzes" :key="quiz.code" class="quiz-item">
            <view class="quiz-info">
              <text class="quiz-icon">{{ quiz.icon }}</text>
              <text class="quiz-label">{{ quiz.label }}</text>
            </view>
            <view v-if="quiz.score" class="quiz-score">
              <text class="score-value">{{ quiz.score }}</text>
              <text class="score-unit">分</text>
            </view>
            <button v-else class="quiz-btn" @click.stop="goQuiz(quiz.code)">开始</button>
          </view>
        </view>
      </view>

      <view class="section section-data-view">
        <view class="section-header">
          <text class="section-title">最近记录</text>
          <text class="section-more" @click="goPage('/pages/health/report-list')">查看全部 ›</text>
        </view>
        <view v-if="reports.length > 0">
          <view class="report-card" v-for="(report, idx) in reports.slice(0, 3)" :key="idx" @click="goReportDetail(report)">
            <text class="report-icon">📄</text>
            <view class="report-info">
              <text class="report-name">{{ report.title || '健康报告' }}</text>
              <text class="report-status">{{ report.status === 'resolved' ? '已解析' : '待确认' }}</text>
            </view>
            <text class="report-arrow">›</text>
          </view>
        </view>
        <view v-else class="empty-hint">
          <text class="empty-text">暂无报告和测评结果</text>
          <text class="empty-sub">上传报告或完成测评开启健康之旅</text>
        </view>
      </view>

      <view class="section section-plan">
        <view class="plan-card">
          <view class="plan-head">
            <text class="plan-title">📋 健康方案</text>
            <button class="plan-btn" @click="goPlanSummary">{{ lastPlan ? '查看方案' : '生成新方案' }}</button>
          </view>
          <text v-if="lastPlan" class="plan-goal">{{ lastPlan }}</text>
          <text v-else class="plan-hint">选维度 + 选成员 + 设定目标 → 智能生成</text>
        </view>
      </view>

      <ArticleBookshelf :articles="healthArticles" :isLoggedIn="true" @articleClick="goArticleDetail" @moreArticles="goMoreArticles" />
    </view>
  </view>
</template>

<script>
import PageBanner from '../../components/PageBanner.vue'
import LoginGuideCard from '../../components/LoginGuideCard.vue'
import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
import RadarChart from '../../components/RadarChart.vue'
import ArticleBookshelf from '../../components/ArticleBookshelf.vue'

export default {
  components: { PageBanner, LoginGuideCard, FamilyMemberStrip, RadarChart, ArticleBookshelf },
  data() {
    return {
      isLoggedIn: false,
      currentTab: 'body',
      selectedMemberName: '',
      selectedMemberId: '',
      reports: [],
      lastPlan: '',
      healthArticles: [],
      tabs: [
        { code: 'body', label: '健康', icon: '🟠', color: '#FF8C42' },
        { code: 'cognitive', label: '认知', icon: '🧠', color: '#6366F1' },
        { code: 'mental', label: '心理', icon: '💖', color: '#FF6B9D' },
        { code: 'relationship', label: '社会性', icon: '🤝', color: '#10B981' }
      ],
      quizzes: [
        { code: 'cognitive', label: '认知能力测评', icon: '🧠', score: null },
        { code: 'mental', label: '心理健康测评', icon: '💖', score: null },
        { code: 'relationship', label: '关系质量测评', icon: '🤝', score: null }
      ],
      demoBodyDims: [
        { label: '生长发育', key: 'growth' },
        { label: '睡眠质量', key: 'sleep' },
        { label: '视力健康', key: 'vision' },
        { label: '免疫力', key: 'immunity' },
        { label: '营养均衡', key: 'nutrition' },
        { label: '肠胃健康', key: 'gut' },
        { label: '运动活力', key: 'exercise' }
      ],
      demoBodyScores: [72, 68, 75, 80, 70, 78, 82],
      demoCogDims: [
        { label: '记忆力', key: 'memory' },
        { label: '注意力', key: 'attention' },
        { label: '逻辑推理', key: 'logic' },
        { label: '空间想象', key: 'spatial' },
        { label: '语言表达', key: 'language' }
      ],
      demoCogScores: [78, 72, 85, 68, 80]
    }
  },
  computed: {
    currentTabLabel: function() {
      var tab = this.tabs.filter(function(t) { return t.code === this.currentTab }.bind(this))[0]
      return tab ? tab.label : ''
    },
    currentColor: function() {
      var tab = this.tabs.filter(function(t) { return t.code === this.currentTab }.bind(this))[0]
      return tab ? tab.color : '#FF8C42'
    },
    currentDimensions: function() {
      if (this.currentTab === 'cognitive') {
        return [{ label:'记忆力',key:'memory'},{ label:'注意力',key:'attention'},{ label:'逻辑推理',key:'logic'},{ label:'空间想象',key:'spatial'},{ label:'语言表达',key:'language' }]
      }
      if (this.currentTab === 'mental') {
        return [{ label:'情绪稳定',key:'emotion'},{ label:'抗压能力',key:'stress'},{ label:'自我认知',key:'self'},{ label:'社交意愿',key:'social'},{ label:'幸福感',key:'happiness' }]
      }
      if (this.currentTab === 'relationship') {
        return [{ label:'亲子关系',key:'parent'},{ label:'夫妻关系',key:'spouse'},{ label:'亲友关系',key:'friend'},{ label:'同事关系',key:'colleague'},{ label:'社区参与',key:'community' }]
      }
      return [{ label:'生长发育',key:'growth'},{ label:'睡眠质量',key:'sleep'},{ label:'视力健康',key:'vision'},{ label:'免疫力',key:'immunity'},{ label:'营养均衡',key:'nutrition'},{ label:'肠胃健康',key:'gut'},{ label:'运动活力',key:'exercise' }]
    },
    currentScores: function() {
      if (this.chartIsEmpty) {
        var dims = this.currentDimensions, scores = []
        for (var i = 0; i < dims.length; i++) scores.push(0)
        return scores
      }
      if (this.currentTab === 'body') return [72, 68, 75, 80, 70, 78, 82]
      var dims = this.currentDimensions, scores = []
      for (var i = 0; i < dims.length; i++) scores.push(0)
      return scores
    },
    chartIsEmpty: function() {
      if (this.currentTab === 'body') return this.reports.length === 0
      var quiz = this.quizzes.filter(function(q) { return q.code === this.currentTab }.bind(this))[0]
      return !(quiz && quiz.score)
    }
  },
  onShow() {
    this.isLoggedIn = !!uni.getStorageSync('token')
    if (this.isLoggedIn) {
      var stored = uni.getStorageSync('currentChildId') || ''
      if (stored) {
        this.selectedMemberId = stored
        this.selectedMemberName = uni.getStorageSync('currentChildName') || '成员'
      }
      this.loadHealthData()
      this.loadPlanList()
    }
  },
  methods: {
    onMemberSelect: function(member) {
      this.selectedMemberId = member && member.id ? member.id : ''
      this.selectedMemberName = member && member.name ? member.name : '成员'
    },
    switchTab: function(code) { this.currentTab = code },
    goPage: function(url) { uni.navigateTo({ url: url }) },
    goQuiz: function(code) {
      var url = '/pages/body-detail/dimension-questionnaire?dim=' + code
      if (this.selectedMemberId) url += '&memberId=' + this.selectedMemberId
      uni.navigateTo({ url: url })
    },
    goReportDetail: function(report) {
      uni.navigateTo({ url: '/pages/health/report-list' + (report && report.id ? '?reportId=' + report.id : '') })
    },
    goSelfTest: function() { uni.navigateTo({ url: '/pages/health/survey-questionnaire?dim=all' }) },
    goPlanSummary: function() {
      var url = '/pages/health/health-plan-summary'
      if (this.selectedMemberId) url += '?memberId=' + this.selectedMemberId
      uni.navigateTo({ url: url })
    },
    loadHealthData: function() {
      var self = this
      try {
        var api = require('../../utils/api.js')
        api.getReportList().then(function(res) {
          if (res.code === 200 && res.data) {
            var list = Array.isArray(res.data) ? res.data : (res.data.list || [])
            self.reports = list
          }
        }).catch(function() {})
        api.getFeaturedArticles({ size: 3, dimensionCode: 'body' }).then(function(res) {
          if (res.code === 200 && res.data) {
            var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
            self.healthArticles = list.slice(0, 3) || []
          }
        }).catch(function() {})
      } catch (e) { console.error('加载健康数据失败', e) }
    },
    loadPlanList: function() {
      var self = this
      var api = require('../../utils/api.js')
      api.getHealthPlanList({}).then(function(res) {
        if (res && res.code === 200 && res.data) {
          var list = res.data.list || res.data
          if (Array.isArray(list) && list.length > 0) self.lastPlan = list[0].goal || ''
        }
      }).catch(function() {})
    },
    goArticleDetail: function(article) {
      var id = article && article.id || article
      uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + id })
    },
    goMoreArticles: function() {
      uni.navigateTo({ url: '/pages/article-center/index?dimension=body' })
    }
  }
}
</script>

<style scoped>
  .container { background: #F8F8F8; min-height: 100vh; padding-bottom: calc(160rpx + env(safe-area-inset-bottom)); }
.section { margin: 16rpx 24rpx; }
.tab-bar { display: flex; background: #fff; margin: 0 24rpx 16rpx; border-radius: 16rpx; padding: 8rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12rpx 0; position: relative; border-radius: 12rpx; }
.tab-item.active { background: #FFF7ED; }
.tab-icon { font-size: 32rpx; margin-bottom: 4rpx; }
.tab-label { font-size: 26rpx; color: #666; font-weight: 500; }
.tab-item.active .tab-label { color: #333; font-weight: bold; }
.tab-underline { width: 40rpx; height: 4rpx; border-radius: 2rpx; margin-top: 6rpx; }
.section-chart { position: relative; margin: 0 24rpx 16rpx; }
.chart-empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 3; background: rgba(255,255,255,0.85); border-radius: 12rpx; padding: 20rpx 30rpx; }
.chart-empty .empty-text { font-size: 28rpx; color: #333; font-weight: 500; display: block; }
.chart-empty .empty-sub { font-size: 22rpx; color: #999; display: block; margin-top: 4rpx; }
.section-dc-header { margin: 20rpx 24rpx 8rpx; }
.dc-title-row { display: flex; align-items: center; }
.dc-icon { font-size: 32rpx; margin-right: 8rpx; }
.dc-title { font-size: 32rpx; font-weight: bold; color: #333; }
.section-data-collect { margin: 8rpx 24rpx; }
.data-card { display: flex; align-items: center; background: #fff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 12rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.data-card-icon { width: 88rpx; height: 88rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; font-size: 40rpx; }
.data-card-info { flex: 1; }
.data-card-title { font-size: 28rpx; font-weight: bold; color: #333; display: block; margin-bottom: 6rpx; }
.data-card-desc { font-size: 22rpx; color: #999; }
.data-card-arrow { font-size: 36rpx; color: #ccc; }
.data-card-assessment { flex-direction: column; align-items: stretch; padding: 24rpx; }
.data-card-head { display: flex; align-items: center; margin-bottom: 16rpx; }
.data-card-subtitle { font-size: 22rpx; color: #999; margin-left: 12rpx; }
.quiz-item { display: flex; align-items: center; padding: 16rpx 0; border-top: 1rpx solid #f0f0f0; }
.quiz-item:first-of-type { border-top: none; }
.quiz-info { display: flex; align-items: center; flex: 1; }
.quiz-icon { font-size: 36rpx; margin-right: 16rpx; }
.quiz-label { font-size: 28rpx; color: #333; }
.quiz-score { display: flex; align-items: baseline; margin-right: 16rpx; }
.score-value { font-size: 36rpx; font-weight: bold; color: #F97316; }
.score-unit { font-size: 22rpx; color: #999; margin-left: 4rpx; }
.quiz-btn { background: #F97316; color: #fff; font-size: 24rpx; border: none; border-radius: 20rpx; padding: 10rpx 30rpx; height: 56rpx; line-height: 36rpx; margin: 0; }
.section-data-view { margin: 16rpx 24rpx; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; }
.section-title { font-size: 28rpx; font-weight: bold; color: #333; }
.section-more { font-size: 24rpx; color: #F97316; }
.report-card { display: flex; align-items: center; background: #fff; border-radius: 16rpx; padding: 16rpx 20rpx; margin-bottom: 10rpx; }
.report-icon { font-size: 32rpx; margin-right: 16rpx; }
.report-info { flex: 1; }
.report-name { font-size: 24rpx; color: #333; display: block; margin-bottom: 4rpx; }
.report-status { font-size: 20rpx; color: #999; }
.report-arrow { font-size: 28rpx; color: #ccc; }
.empty-hint { text-align: center; padding: 30rpx 0; background: #fff; border-radius: 16rpx; }
.empty-hint .empty-text { font-size: 26rpx; color: #999; display: block; }
.empty-hint .empty-sub { font-size: 22rpx; color: #ccc; display: block; margin-top: 6rpx; }
.section-plan { margin: 8rpx 24rpx 16rpx; }
.plan-card { background: #fff; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.plan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12rpx; }
.plan-title { font-size: 28rpx; font-weight: bold; color: #333; }
.plan-btn { background: linear-gradient(135deg, #F97316, #FB923C); color: #fff; font-size: 24rpx; border: none; border-radius: 20rpx; padding: 10rpx 28rpx; height: 56rpx; line-height: 36rpx; margin: 0; }
.plan-goal { font-size: 24rpx; color: #666; line-height: 1.5; display: block; }
.plan-hint { font-size: 22rpx; color: #999; display: block; }
/* ===== 游客态样式 ===== */
.brand-strap { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, #FFF7ED, rgba(249,115,22,0.08)); border-radius: 16rpx; padding: 20rpx 24rpx; }
.brand-strap-text { font-size: 26rpx; color: #F97316; font-weight: 600; }
.pain-card { margin: 0 24rpx 16rpx; background: #fff; border-radius: 20rpx; padding: 28rpx; border-left: 6rpx solid #F97316; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.pain-quote { font-size: 32rpx; font-weight: bold; color: #333; display: block; margin-bottom: 8rpx; }
.pain-desc { font-size: 26rpx; color: #888; display: block; }
.guest-features { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 24rpx 16rpx; }
.feat-card { width: 48.5%; box-sizing: border-box; background: #fff; border-radius: 20rpx; padding: 24rpx 20rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.feat-icon { font-size: 44rpx; display: block; margin-bottom: 10rpx; }
.feat-title { font-size: 26rpx; font-weight: 600; color: #333; display: block; margin-bottom: 4rpx; }
.feat-desc { font-size: 22rpx; color: #999; display: block; }
.self-test-card { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 20rpx; padding: 24rpx 28rpx; }
.self-test-head { display: flex; align-items: center; }
.self-test-icon { font-size: 40rpx; margin-right: 16rpx; }
.self-test-info { flex: 1; }
.self-test-title { font-size: 28rpx; font-weight: bold; color: #fff; display: block; }
.self-test-sub { font-size: 22rpx; color: rgba(255,255,255,0.8); display: block; margin-top: 4rpx; }
.self-test-arrow { font-size: 36rpx; color: rgba(255,255,255,0.7); }
.demo-section { margin: 0 24rpx 16rpx; }
.demo-section-head { margin-bottom: 8rpx; }
.demo-section-title { font-size: 30rpx; font-weight: bold; color: #333; display: block; }
.demo-section-sub { font-size: 22rpx; color: #999; display: block; margin-top: 4rpx; }
.demo-chart-title-row { display: flex; align-items: center; justify-content: space-between; margin: 8rpx 8rpx 0; padding: 0 8rpx; }
.demo-chart-name { font-size: 26rpx; font-weight: 600; color: #333; }
.demo-chart-tag { font-size: 20rpx; color: #F97316; background: rgba(249,115,22,0.1); border-radius: 8rpx; padding: 4rpx 12rpx; }
.login-guide-section { margin: 0 24rpx 24rpx; }

/* ===== 五维闭环体系样式 ===== */
.wuxing-section { margin: 0 24rpx 16rpx; background: #fff; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.wuxing-title { font-size: 30rpx; font-weight: bold; color: #333; text-align: center; margin-bottom: 6rpx; }
.wuxing-desc { font-size: 22rpx; color: #999; text-align: center; margin-bottom: 20rpx; }
.wuxing-diagram { position: relative; height: 320rpx; margin: 0 auto 20rpx; }
.wuxing-relations { margin-top: 8rpx; }
.rel-group { margin-bottom: 16rpx; }
.rel-title { font-size: 24rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; display: block; }
.rel-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4rpx; margin-bottom: 6rpx; }
.rel-item { font-size: 22rpx; padding: 4rpx 10rpx; border-radius: 8rpx; background: #f7f7f7; color: #555; }
.rel-arrow { font-size: 20rpx; color: #F97316; font-weight: bold; }
.rel-dot { font-size: 20rpx; color: #ccc; }
.rel-hint { font-size: 20rpx; color: #999; line-height: 1.5; display: block; }
.wuxing-cards { display: flex; flex-direction: column; gap: 10rpx; margin-top: 16rpx; }
.wc-card { display: flex; align-items: center; padding: 16rpx 20rpx; border-radius: 16rpx; border: 2rpx solid #f0f0f0; }
.wc-card:active { opacity: 0.85; }
.wc-icon { font-size: 36rpx; margin-right: 16rpx; flex-shrink: 0; }
.wc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wc-name { font-size: 24rpx; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-text { font-size: 20rpx; color: #999; display: block; margin-top: 4rpx; white-space: normal; }
.wc-body { border-color: rgba(255,140,66,0.3); background: rgba(255,140,66,0.04); border-left: 8rpx solid #FF8C42; }
.wc-body .wc-name { color: #FF8C42; }
.wc-wisdom { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.04); border-left: 8rpx solid #6366F1; }
.wc-wisdom .wc-name { color: #6366F1; }
.wc-wealth { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.04); border-left: 8rpx solid #F59E0B; }
.wc-wealth .wc-name { color: #F59E0B; }
.wc-action { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.04); border-left: 8rpx solid #10B981; }
.wc-action .wc-name { color: #10B981; }
.wc-mind { border-color: rgba(255,107,157,0.3); background: rgba(255,107,157,0.04); border-left: 8rpx solid #FF6B9D; }
.wc-mind .wc-name { color: #FF6B9D; }
</style>