cfc/cfc-frontend/pages/wisdom-detail/cognitive-report.vue

<template>
  <view class="container">
    <PageBanner theme="wisdom"
      tagline="认知能力 · 全面评估"
      quote="知人者智，自知者明" />

    <!-- ===== 报告卡片 ===== -->
    <view class="report-card" v-if="report">
      <view class="report-header">
        <text class="report-title">认知测评报告</text>
        <text class="report-date">测评日期: {{ report.assessmentDate || '-' }}</text>
      </view>

      <!-- 综合认知评分 -->
      <view class="overall-score-wrap">
        <text class="overall-label">综合认知评分</text>
        <view class="overall-row">
          <text class="overall-value">{{ report.overallScore || 0 }}</text>
        </view>
      </view>

      <!-- 常模参考线说明 -->
      <view class="norm-legend" v-if="norms">
        <view class="norm-legend-item"><view class="norm-dot norm-dot-p50"></view>同龄中位</view>
        <view class="norm-legend-item"><view class="norm-dot norm-dot-child"></view>当前得分</view>
      </view>

      <!-- 六维条形图 -->
      <view class="dimension-list">
        <view class="dimension-item" v-for="dim in dimensions" :key="dim.key">
          <view class="dimension-header">
            <view class="dimension-label-row">
              <text class="dimension-icon">{{ dim.icon }}</text>
              <text class="dimension-name">{{ dim.label }}</text>
            </view>
            <view class="dimension-score-wrap">
              <text class="dimension-score">{{ report[dim.key] || 0 }}</text>
              <text class="norm-level-tag" v-if="normLevel(dim.key)" :class="dim.normClass">{{ normLevel(dim.key) }}</text>
            </view>
          </view>
          <view class="dimension-bar">
            <view class="dimension-bar-fill" :style="{ width: (report[dim.key] || 0) + '%' }"></view>
            <view class="norm-marker" :style="{ left: normP50(dim.key) + '%' }">
              <view class="norm-marker-line"></view>
            </view>
          </view>
          <text class="dimension-desc">{{ dim.desc }}</text>
        </view>
      </view>

      <!-- 分析报告 -->
      <view class="report-analysis" v-if="report.analysisReport">
        <view class="analysis-header-row">
          <text class="analysis-icon">&#x1F4DD;</text>
          <text class="analysis-title">分析报告</text>
        </view>
        <text class="analysis-content">{{ report.analysisReport }}</text>
      </view>

      <!-- 成长建议 -->
      <view class="report-suggestions" v-if="report.growthSuggestions">
        <view class="analysis-header-row">
          <text class="analysis-icon">&#x1F331;</text>
          <text class="analysis-title">成长建议</text>
        </view>
        <text class="suggestion-content">{{ report.growthSuggestions }}</text>
      </view>

      <!-- 底部操作 -->
      <view class="action-row">
        <view class="action-btn secondary" @click="goAssessment">
          <text class="action-btn-text">预约测评</text>
        </view>
        <view class="action-btn primary" @click="goTraining">
          <text class="action-btn-text">认知训练</text>
        </view>
      </view>
    </view>

    <!-- ===== 家庭行动建议 ===== -->
    <view class="action-plan-section" v-if="recommendations && recommendations.length > 0">
      <view class="action-plan-header">
        <text class="action-plan-icon">&#x1F4CB;</text>
        <text class="action-plan-title">家庭行动建议</text>
      </view>
      <text class="action-plan-desc">基于本次测评结果，为你推荐以下训练方向</text>

      <!-- 综合评分 -->
      <view class="overall-suggestion" v-if="overall">
        <text class="overall-suggestion-text">{{ overall.suggestion }}</text>
      </view>

      <!-- 各维度推荐 -->
      <view class="rec-item" v-for="rec in recommendations" :key="rec.dimensionKey"
        :class="'rec-level-' + (rec.priority || 'normal')">
        <view class="rec-header">
          <view class="rec-dim-row">
            <text class="rec-icon">{{ rec.icon }}</text>
            <text class="rec-label">{{ rec.label }}</text>
            <text class="rec-score">{{ rec.score }}分</text>
          </view>
          <text class="rec-level-tag" :class="'tag-' + (rec.priority || 'normal')">{{ rec.level }}</text>
        </view>
        <text class="rec-suggestion">{{ rec.suggestion }}</text>
        <view class="rec-actions" v-if="rec.tasks && rec.tasks.length > 0">
          <view class="rec-tag-btn add-task-btn" @click="addTask(rec)">
            <text class="rec-tag-btn-icon">&#x2795;</text>
            <text class="rec-tag-btn-text">添加到今日任务</text>
          </view>
          <view class="rec-tag-btn game-btn" v-if="rec.games && rec.games.length > 0"
            @click="goGame(rec.games[0].code)">
            <text class="rec-tag-btn-text">去训练</text>
          </view>
          <view class="rec-tag-btn article-btn" v-if="rec.articles && rec.articles.length > 0"
            @click="goArticle(rec.articles[0].id)">
            <text class="rec-tag-btn-text">读文章</text>
          </view>
        </view>
      </view>
    </view>

    <!-- ===== 历史趋势 ===== -->
    <view class="trend-section" v-if="trendData && trendData.length > 1">
      <view class="trend-header">
        <text class="trend-icon">&#x1F4C8;</text>
        <text class="trend-title">历史趋势</text>
      </view>

      <view class="trend-overview-row">
        <view class="trend-stat" v-for="stat in trendStats" :key="stat.key">
          <text class="trend-stat-label">{{ stat.label }}</text>
          <text class="trend-stat-value" :class="'ts-' + stat.direction">{{ stat.display }}</text>
          <text class="trend-stat-sub" v-if="stat.pct != 0">{{ stat.pct > 0 ? '↑' : '↓' }}{{ Math.abs(stat.pct) }}%</text>
        </view>
      </view>

      <!-- 最近两次对比 -->
      <view class="trend-compare" v-if="trendData.length >= 2">
        <view class="tc-header">
          <text class="tc-title">前后两次对比</text>
        </view>
        <view class="tc-dim-row tc-header-row">
          <text class="tc-dim-name">维度</text>
          <text class="tc-old">上次</text>
          <text class="tc-new">本次</text>
          <text class="tc-change">变化</text>
        </view>
        <view class="tc-dim-row" v-for="dim in dimensions" :key="dim.key">
          <text class="tc-dim-name">{{ dim.label }}</text>
          <text class="tc-old">{{ prevScore(dim.key) }}</text>
          <text class="tc-new" :class="scoreUp(dim.key) ? 'sc-up' : (scoreDown(dim.key) ? 'sc-down' : '')">{{ latestScore(dim.key) }}</text>
          <text class="tc-change">
            <text v-if="scoreUp(dim.key)" class="change-up">&#x25B2; +{{ scoreDiff(dim.key) }}</text>
            <text v-else-if="scoreDown(dim.key)" class="change-down">&#x25BC; {{ scoreDiff(dim.key) }}</text>
            <text v-else class="change-flat">—</text>
          </text>
        </view>
      </view>
    </view>

    <!-- 加载中 -->
    <view class="loading-state" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 无数据 -->
    <view class="empty-state" v-if="!report && !loading">
      <text class="empty-icon">&#x1F9E0;</text>
      <text class="empty-title">暂无认知测评数据</text>
      <text class="empty-desc">完成 DAN 认知评估后，可在此查看详细的六维认知分析报告和家庭训练建议</text>
      <view class="empty-btn" @click="goAssessment">预约测评</view>
    </view>
  </view>
</template>

<script>
import PageBanner from '../../components/PageBanner.vue'
import { getAssessmentLatestResult, getCognitiveRecommendations, createTaskFromRecommendation, getCognitiveNorms, getCognitiveTrend } from '../../utils/api.js'

export default {
  components: { PageBanner },
  data: function() {
    return {
      memberId: null,
      report: null,
      recommendations: null,
      overall: null,
      norms: null,
      trendData: null,
      loading: true,
      addingTask: false,
      dimensions: [
        { key: 'perceptionScore', label: '感知能力', icon: '\u{1F441}', desc: '感官信息处理能力', normClass: '' },
        { key: 'focusScore', label: '专注力', icon: '\u{1F3AF}', desc: '持续集中和抗干扰能力', normClass: '' },
        { key: 'memoryScore', label: '记忆力', icon: '\u{1F9E0}', desc: '信息编码和回忆能力', normClass: '' },
        { key: 'logicScore', label: '逻辑思维', icon: '\u{1F9E9}', desc: '推理和问题解决能力', normClass: '' },
        { key: 'spatialScore', label: '空间思维', icon: '\u{1F9CA}', desc: '空间想象和方位判断', normClass: '' },
        { key: 'processingSpeedScore', label: '加工速度', icon: '\u26A1', desc: '信息处理和反应速度', normClass: '' }
      ]
    }
  },
  computed: {
    trendStats: function() {
      if (!this.trendData || this.trendData.length < 2) return []
      var latest = this.trendData[0]
      var prev = this.trendData[this.trendData.length - 1]
      var diff = (latest.overallScore || 0) - (prev.overallScore || 0)
      var pct = prev.overallScore ? Math.round(diff / prev.overallScore * 100) : 0
      return [
        { key: 'count', label: '测评次数', display: this.trendData.length + '次', direction: 'neutral', pct: 0 },
        { key: 'trend', label: '综合趋势', display: diff > 0 ? '上升' : (diff < 0 ? '下降' : '持平'), direction: diff > 0 ? 'up' : (diff < 0 ? 'down' : 'flat'), pct: pct },
        { key: 'latest', label: '最新综合', display: latest.overallScore || 0 + '分', direction: 'neutral', pct: 0 }
      ]
    }
  },
  onLoad: function(options) {
    if (options && options.memberId) {
      this.memberId = options.memberId
    } else {
      this.memberId = uni.getStorageSync('currentChildId') || null
    }
    this.loadData()
  },
  methods: {
    loadData: function() {
      var self = this
      var memberId = self.memberId
      if (!memberId) {
        self.loading = false
        return
      }
      self.loading = true

      // 并行加载报告和建议
      getAssessmentLatestResult(memberId).then(function(res) {
        if (res.code === 200 && res.data) {
          self.report = res.data
        }
      }).catch(function() {})

      getCognitiveRecommendations(memberId).then(function(res) {
        if (res.code === 200 && res.data) {
          self.recommendations = res.data.recommendations || []
          self.overall = res.data.overall || null
        }
      }).catch(function() {})

      getCognitiveNorms(memberId).then(function(res) {
        if (res.code === 200 && res.data) {
          self.norms = res.data
        }
      }).catch(function() {})

      getCognitiveTrend(memberId, 5).then(function(res) {
        if (res.code === 200 && res.data && res.data.length > 0) {
          self.trendData = res.data
        }
      }).catch(function() {})

      // 都完成后关闭加载
      setTimeout(function() {
        self.loading = false
      }, 800)
    },
    addTask: function(rec) {
      if (this.addingTask) return
      this.addingTask = true
      var self = this
      createTaskFromRecommendation(self.memberId, rec.dimensionKey, 0).then(function(res) {
        self.addingTask = false
        if (res.code === 200 && res.data) {
          uni.showToast({ title: '已添加到今日任务', icon: 'success' })
        } else {
          uni.showToast({ title: res.message || '添加失败', icon: 'none' })
        }
      }).catch(function() {
        self.addingTask = false
        uni.showToast({ title: '网络异常，请重试', icon: 'none' })
      })
    },
    goGame: function(code) {
      var url = ''
      if (code === 'schulte') {
        url = '/pages/games/schulte'
      } else if (code === '1a2b') {
        url = '/pages/games/1a2b'
      } else if (code === 'sudoku') {
        url = '/pages/games/sudoku'
      }
      if (url) {
        uni.navigateTo({ url: url })
      }
    },
    goArticle: function(articleId) {
      uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + articleId })
    },
    goAssessment: function() {
      uni.navigateTo({ url: '/pages/assessment/apply' })
    },
    goTraining: function() {
      uni.navigateTo({ url: '/pages/wisdom-detail/training-hub?memberId=' + (this.memberId || '') })
    },
    normLevel: function(dimKey) {
      var dim = this.dimensions.find(function(d) { return d.key === dimKey })
      if (!this.norms || !dim) return ''
      var normKey = dimKey.replace('Score', '') + 'Norm'
      var info = this.norms[normKey]
      var level = info && info.level ? info.level : ''
      var map = {
        '较弱': 'nl-weak',
        '偏弱': 'nl-below-average',
        '中等': 'nl-average',
        '良好': 'nl-good',
        '优秀': 'nl-excellent'
      }
      dim.normClass = level ? (map[level] || '') : ''
      return level
    },
    normP50: function(dimKey) {
      if (!this.norms) return 50
      var normKey = dimKey.replace('Score', '') + 'Norm'
      var info = this.norms[normKey]
      return info && info.p50 ? info.p50 : 50
    },
    prevScore: function(dimKey) {
      return this.trendData && this.trendData.length > 1 ? this.trendData[1][dimKey] || 0 : 0
    },
    latestScore: function(dimKey) {
      return this.trendData && this.trendData.length > 0 ? this.trendData[0][dimKey] || 0 : 0
    },
    scoreDiff: function(dimKey) {
      return this.latestScore(dimKey) - this.prevScore(dimKey)
    },
    scoreUp: function(dimKey) {
      return this.scoreDiff(dimKey) > 0
    },
    scoreDown: function(dimKey) {
      return this.scoreDiff(dimKey) < 0
    }
  }
}
</script>

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

/* ===== 报告卡 ===== */
.report-card {
  margin: 20rpx 30rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}

.report-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.report-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.report-date {
  font-size: 24rpx;
  color: #999;
}

/* ===== 综合评分 ===== */
.overall-score-wrap {
  text-align: center;
  padding: 40rpx 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  margin-bottom: 40rpx;
  color: #fff;
}

.overall-label {
  font-size: 28rpx;
  opacity: 0.9;
  display: block;
  margin-bottom: 16rpx;
}

.overall-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.overall-value {
  font-size: 80rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

/* ===== 六维条形图 ===== */
.dimension-list {
  margin-bottom: 30rpx;
}

.dimension-item {
  margin-bottom: 28rpx;
}

.dimension-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.dimension-label-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.dimension-icon {
  font-size: 28rpx;
  margin-right: 10rpx;
}

.dimension-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.dimension-score {
  font-size: 32rpx;
  font-weight: bold;
  color: #667eea;
}

.dimension-desc {
  font-size: 22rpx;
  color: #999;
  line-height: 1.4;
}

/* ===== 常模参考线 ===== */
.norm-legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 20rpx;
  padding: 12rpx 16rpx;
  background: #f8f9ff;
  border-radius: 12rpx;
}

.norm-legend-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 22rpx;
  color: #888;
}

.norm-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: 8rpx;
}

.norm-dot-p50 {
  background: #FF9500;
}

.norm-dot-child {
  background: #667eea;
}

.dimension-score-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10rpx;
}

.norm-level-tag {
  font-size: 20rpx;
  padding: 2rpx 12rpx;
  border-radius: 16rpx;
  font-weight: 500;
}

.nl-weak, .nl-below-average {
  background: #FEF2F2;
  color: #EF4444;
}

.nl-average {
  background: #FFFBEB;
  color: #F59E0B;
}

.nl-good, .nl-excellent {
  background: #F0FDF4;
  color: #22C55E;
}

.dimension-bar {
  height: 16rpx;
  background: #f0f0f0;
  border-radius: 8rpx;
  margin-bottom: 8rpx;
  position: relative;
}

.dimension-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 8rpx;
  transition: width 0.5s;
}

.norm-marker {
  position: absolute;
  top: -4rpx;
  width: 2rpx;
  height: 24rpx;
  z-index: 2;
  transform: translateX(-50%);
}

.norm-marker-line {
  width: 4rpx;
  height: 24rpx;
  background: #FF9500;
  border-radius: 2rpx;
}

/* ===== 分析/建议 ===== */
.report-analysis, .report-suggestions {
  margin-top: 30rpx;
  padding: 28rpx;
  border-radius: 16rpx;
}

.report-analysis {
  background: #f9f9ff;
}

.report-suggestions {
  background: #f0fdf4;
}

.analysis-header-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 16rpx;
}

.analysis-icon {
  font-size: 30rpx;
  margin-right: 10rpx;
}

.analysis-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.analysis-content, .suggestion-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.7;
  display: block;
}

/* ===== 底部操作 ===== */
.action-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 40rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  border-radius: 40rpx;
}

.action-btn.primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  margin-left: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(102,126,234,0.3);
}

.action-btn.secondary {
  background: #fff;
  border: 2rpx solid #ddd;
  margin-right: 16rpx;
}

.action-btn-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #fff;
}

.action-btn.secondary .action-btn-text {
  color: #666;
}

/* ===== 家庭行动建议 ===== */
.action-plan-section {
  margin: 30rpx 30rpx 40rpx;
}

.action-plan-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10rpx;
}

.action-plan-icon {
  font-size: 36rpx;
  margin-right: 10rpx;
}

.action-plan-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.action-plan-desc {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 20rpx;
  display: block;
}

.overall-suggestion {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16rpx;
  padding: 24rpx 28rpx;
  margin-bottom: 24rpx;
}

.overall-suggestion-text {
  font-size: 26rpx;
  color: #fff;
  line-height: 1.6;
  display: block;
}

/* 各维度推荐卡片 */
.rec-item {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
  border-left: 8rpx solid #667eea;
}

.rec-item.rec-level-high {
  border-left-color: #EF4444;
}

.rec-item.rec-level-normal {
  border-left-color: #F59E0B;
}

.rec-item.rec-level-low {
  border-left-color: #22C55E;
}

.rec-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.rec-dim-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.rec-icon {
  font-size: 28rpx;
  margin-right: 8rpx;
}

.rec-label {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-right: 12rpx;
}

.rec-score {
  font-size: 24rpx;
  color: #888;
}

.rec-level-tag {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  font-weight: 500;
}

.tag-high {
  background: #FEF2F2;
  color: #EF4444;
}

.tag-normal {
  background: #FFFBEB;
  color: #F59E0B;
}

.tag-low {
  background: #F0FDF4;
  color: #22C55E;
}

.rec-suggestion {
  font-size: 26rpx;
  color: #555;
  line-height: 1.6;
  display: block;
  margin-bottom: 16rpx;
}

.rec-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12rpx;
}

.rec-tag-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12rpx 24rpx;
  border-radius: 32rpx;
  font-size: 24rpx;
}

.rec-tag-btn:active {
  opacity: 0.7;
}

.add-task-btn {
  background: #EEF2FF;
  color: #667eea;
}

.game-btn {
  background: #FEF3C7;
  color: #D97706;
}

.article-btn {
  background: #F0FDF4;
  color: #16A34A;
}

.rec-tag-btn-icon {
  font-size: 22rpx;
  margin-right: 6rpx;
}

.rec-tag-btn-text {
  font-size: 24rpx;
  font-weight: 500;
}

/* ===== 加载中 ===== */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

/* ===== 空状态 ===== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 40rpx 80rpx;
}

.empty-icon {
  font-size: 100rpx;
  margin-bottom: 20rpx;
}

.empty-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 40rpx;
}

.empty-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 16rpx 64rpx;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(102,126,234,0.3);
}

/* ===== 历史趋势 ===== */
.trend-section {
  margin: 30rpx 30rpx 40rpx;
}

.trend-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 16rpx;
}

.trend-icon {
  font-size: 36rpx;
  margin-right: 10rpx;
}

.trend-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.trend-overview-row {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.trend-stat {
  flex: 1;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  text-align: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}

.trend-stat-label {
  font-size: 24rpx;
  color: #888;
  display: block;
  margin-bottom: 8rpx;
}

.trend-stat-value {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
}

.ts-up {
  color: #22C55E;
}

.ts-down {
  color: #EF4444;
}

.ts-flat {
  color: #F59E0B;
}

.ts-neutral {
  color: #333;
}

.trend-stat-sub {
  font-size: 22rpx;
  margin-top: 4rpx;
  display: block;
}

.ts-up + .trend-stat-sub {
  color: #22C55E;
}

.ts-down + .trend-stat-sub {
  color: #EF4444;
}

.trend-compare {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}

.tc-header {
  margin-bottom: 16rpx;
  padding-bottom: 12rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.tc-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.tc-dim-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.tc-header-row {
  padding-bottom: 10rpx;
  border-bottom: 2rpx solid #e8e8e8;
}

.tc-dim-row:last-child {
  border-bottom: none;
}

.tc-dim-name {
  flex: 2;
  font-size: 26rpx;
  color: #333;
}

.tc-old {
  flex: 1;
  font-size: 24rpx;
  color: #999;
  text-align: center;
}

.tc-new {
  flex: 1;
  font-size: 26rpx;
  font-weight: bold;
  text-align: center;
  color: #333;
}

.sc-up {
  color: #22C55E;
}

.sc-down {
  color: #EF4444;
}

.tc-change {
  flex: 1.5;
  text-align: right;
  font-size: 24rpx;
}

.change-up {
  color: #22C55E;
}

.change-down {
  color: #EF4444;
}

.change-flat {
  color: #999;
}
</style>