cfc/cfc-frontend/components/WealthSubScores.vue

<template>
  <view class="wealth-sub-scores">
    <view class="section-title">
      <text class="title">{{ isParent ? '财富维度构成' : '富能量构成' }}</text>
    </view>
    
    <!-- 家长三子维度 -->
    <view class="sub-grid" v-if="isParent">
      <view class="sub-item">
        <view class="sub-label">金钱收入</view>
        <view class="sub-value" :class="incomeClass">{{ income }}</view>
        <view class="sub-weight">权重 50%</view>
      </view>
      <view class="sub-item">
        <view class="sub-label">社会成就</view>
        <view class="sub-value" :class="achievementClass">{{ achievement }}</view>
        <view class="sub-weight">权重 30%</view>
      </view>
      <view class="sub-item">
        <view class="sub-label">资源网络</view>
        <view class="sub-value" :class="networkClass">{{ network }}</view>
        <view class="sub-weight">权重 20%</view>
      </view>
    </view>
    
    <!-- 孩子三子维度 -->
    <view class="sub-grid" v-else>
      <view class="sub-item">
        <view class="sub-label">学业成绩</view>
        <view class="sub-value" :class="educationClass">{{ education }}</view>
        <view class="sub-weight">权重 30%</view>
      </view>
      <view class="sub-item">
        <view class="sub-label">社交筹码</view>
        <view class="sub-value" :class="socialClass">{{ social }}</view>
        <view class="sub-weight">权重 20%</view>
      </view>
      <view class="sub-item">
        <view class="sub-label">规则博弈</view>
        <view class="sub-value" :class="pointsClass">{{ points }}</view>
        <view class="sub-weight">权重 50%</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'WealthSubScores',
  props: {
    role: {
      type: String,
      default: 'parent'
    },
    income: {
      type: Number,
      default: 0
    },
    achievement: {
      type: Number,
      default: 0
    },
    network: {
      type: Number,
      default: 0
    },
    education: {
      type: Number,
      default: 0
    },
    social: {
      type: Number,
      default: 0
    },
    points: {
      type: Number,
      default: 0
    }
  },
  computed: {
    isParent() {
      return this.role === 'parent'
    },
    incomeClass() {
      return this.getScoreClass(this.income)
    },
    achievementClass() {
      return this.getScoreClass(this.achievement)
    },
    networkClass() {
      return this.getScoreClass(this.network)
    },
    educationClass() {
      return this.getScoreClass(this.education)
    },
    socialClass() {
      return this.getScoreClass(this.social)
    },
    pointsClass() {
      return this.getScoreClass(this.points)
    }
  },
  methods: {
    getScoreClass(score) {
      if (score >= 80) return 'score-excellent'
      if (score >= 60) return 'score-good'
      if (score >= 40) return 'score-average'
      return 'score-poor'
    }
  }
}
</script>

<style scoped>
.wealth-sub-scores {
  margin: 20rpx;
  padding: 24rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}
.section-title {
  margin-bottom: 20rpx;
}
.section-title .title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.sub-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.sub-item {
  flex: 1;
  text-align: center;
  padding: 20rpx;
  background: #f9f9f9;
  border-radius: 8rpx;
  margin: 0 8rpx;
}
.sub-item:first-child {
  margin-left: 0;
}
.sub-item:last-child {
  margin-right: 0;
}
.sub-label {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 12rpx;
}
.sub-value {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.score-excellent {
  color: #52c41a;
}
.score-good {
  color: #1890ff;
}
.score-average {
  color: #faad14;
}
.score-poor {
  color: #ff4d4f;
}
.sub-weight {
  font-size: 20rpx;
  color: #999;
}
</style>