cfc/cfc-frontend/pages/wealth/components/DimensionSubDims.vue

<template>
  <view class="dim-subdims" :style="{ '--accent': accentColor }">
    <view class="dim-header">
      <text class="dim-title">{{ title }}</text>
      <text class="dim-subtitle">{{ subtitle }}</text>
    </view>
    <view class="dim-list">
      <view
        class="dim-item"
        v-for="(d, i) in dims"
        :key="d.label"
        :style="{ '--dim-color': d.color || accentColor }"
      >
        <view class="dim-item-top">
          <view class="dim-item-info">
            <text class="dim-item-label">{{ d.label }}</text>
            <text class="dim-item-desc">{{ d.desc }}</text>
          </view>
          <view class="dim-item-score-wrap">
            <text
              class="dim-item-score"
              :class="d.score >= 80 ? 'score-good' : (d.score >= 60 ? 'score-ok' : 'score-low')"
            >{{ d.score }}</text>
            <text
              class="dim-item-level"
              :class="'level-' + (d.score >= 80 ? 'good' : (d.score >= 60 ? 'ok' : 'low'))"
            >{{ getScoreLevelText(d.score) }}</text>
          </view>
        </view>
        <view class="dim-bar-track">
          <view
            class="dim-bar-fill"
            :style="{ width: d.score + '%', background: d.color || accentColor }"
          ></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { BrandColors } from '../../../utils/brand-colors.js'
export default {
  name: 'DimensionSubDims',
  props: {
    title: { type: String, default: '维度评分' },
    subtitle: { type: String, default: '' },
    accentColor: { type: String, default: BrandColors.wisdom },
    dims: { type: Array, default: () => [] }
  },
  methods: {
    getScoreLevelText(score) {
      if (score >= 80) return '优秀'
      if (score >= 60) return '良好'
      if (score > 0) return '待提升'
      return '-'
    }
  }
}
</script>

<style scoped lang="scss">
.dim-subdims {
  margin: 20rpx 30rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid rgba(255, 255, 255, 0.8);
}
.dim-header {
  margin-bottom: 24rpx;
}
.dim-title {
  font-size: 32rpx;
  font-weight: 700;
  color: $app-ink-night;
  display: block;
}
.dim-subtitle {
  font-size: 24rpx;
  color: $app-text-subtle;
  margin-top: 6rpx;
  display: block;
}
.dim-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dim-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}
.dim-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.dim-item:first-child {
  padding-top: 0;
}
.dim-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12rpx;
}
.dim-item-info {
  flex: 1;
  min-width: 0;
}
.dim-item-label {
  font-size: 28rpx;
  font-weight: 600;
  color: $uni-text-color;
  display: block;
  line-height: 1.4;
}
.dim-item-desc {
  font-size: 22rpx;
  color: $app-text-subtle;
  margin-top: 4rpx;
  display: block;
  line-height: 1.4;
}
.dim-item-score-wrap {
  text-align: right;
  flex-shrink: 0;
  margin-left: 16rpx;
}
.dim-item-score {
  font-size: 36rpx;
  font-weight: 700;
  line-height: 1;
}
.score-good { color: $status-success-strong-2; }
.score-ok { color: $status-warning-deep; }
.score-low { color: $status-danger-deep; }
.dim-item-level {
  font-size: 20rpx;
  font-weight: 500;
  display: block;
  margin-top: 4rpx;
  padding: 2rpx 12rpx;
  border-radius: 8rpx;
  width: fit-content;
  margin-left: auto;
}
.level-good {
  color: $status-success-strong-2;
  background: $status-success-tint-2;
}
.level-ok {
  color: $status-warning-deep;
  background: $status-warning-tint;
}
.level-low {
  color: $status-danger-deep;
  background: $status-danger-tint-2;
}
.dim-bar-track {
  height: 8rpx;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4rpx;
  overflow: hidden;
}
.dim-bar-fill {
  height: 100%;
  border-radius: 4rpx;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>