cfc/cfc-frontend/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="getScoreClass(d.score)"
            >{{ d.score }}</text>
            <text
              class="dim-item-level"
              :class="'level-' + getScoreLevel(d.score)"
            >{{ 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>
export default {
  name: 'DimensionSubDims',
  props: {
    title: { type: String, default: '维度评分' },
    subtitle: { type: String, default: '' },
    accentColor: { type: String, default: '#6366F1' },
    dims: { type: Array, default: () => [] }
  },
  methods: {
    getScoreLevel(score) {
      if (score >= 80) return 'good'
      if (score >= 60) return 'ok'
      return 'low'
    },
    getScoreLevelText(score) {
      if (score >= 80) return '优秀'
      if (score >= 60) return '良好'
      if (score > 0) return '待提升'
      return '-'
    },
    getScoreClass(score) {
      if (score >= 80) return 'score-good'
      if (score >= 60) return 'score-ok'
      return 'score-low'
    }
  }
}
</script>

<style scoped>
.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: #1a1a2e;
  display: block;
}
.dim-subtitle {
  font-size: 24rpx;
  color: #94a3b8;
  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: #1e293b;
  display: block;
  line-height: 1.4;
}
.dim-item-desc {
  font-size: 22rpx;
  color: #94a3b8;
  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: #16a34a; }
.score-ok { color: #d97706; }
.score-low { color: #dc2626; }
.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: #16a34a;
  background: #f0fdf4;
}
.level-ok {
  color: #d97706;
  background: #fffbeb;
}
.level-low {
  color: #dc2626;
  background: #fef2f2;
}
.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>