jiangxiGaizao/src/views/home/ProblemPieChart.vue

<template>
  <div>
    <div class="simple_header">
      <div class="simple_header_icon" />
      <div class="simple_header_text">问题分布</div>
    </div>
    <div class="body">
      <div class="level-item">
        <span class="dot l1" />
        <span class="label">一般</span>
        <span class="count">{{ levelone }}</span>
      </div>
      <div class="level-item">
        <span class="dot l2" />
        <span class="label">较重</span>
        <span class="count">{{ leveltwo }}</span>
      </div>
      <div class="level-item">
        <span class="dot l3" />
        <span class="label">严重</span>
        <span class="count">{{ levelthree }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProblemPieChart',
  props: { levelone: { type: Number, default: 0 }, leveltwo: { type: Number, default: 0 }, levelthree: { type: Number, default: 0 }, levelfour: { type: Number, default: 0 } },
}
</script>

<style scoped>
.simple_header {
  height: 3.7vh; display: flex; align-items: center; padding: 0 10px;
}
.simple_header_icon {
  background: rgba(46, 101, 253, 1); width: 4px; height: 2vh;
  border-radius: 4px; margin-right: 8px;
}
.simple_header_text {
  color: rgba(49, 63, 102, 1); font-size: 14px; font-weight: bold;
}
.body { padding: 10px; }
.level-item { display: flex; align-items: center; margin-bottom: 12px; }
.dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; display: inline-block; }
.l1 { background: #5bb7e7; }
.l2 { background: #d9cd1a; }
.l3 { background: #ff9599; }
.label { font-size: 14px; color: rgba(86,108,146,1); flex: 1; }
.count { font-size: 18px; font-weight: bold; color: rgba(49,63,102,1); }
</style>