wxjt-asset-web/src/views/dataShow/right1.vue

<template>
  <div>
    <div class="ranking bg-color-black">
      <div class="title">
         <span>
          <icon name="chart-pie" class="text-icon"></icon>
        </span>
        <span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
      </div>

      <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ranking: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '新乡2',
            value: 80
          },
          {
            name: '新乡3',
            value: 80
          },
          {
            name: '新乡4',
            value: 80
          },
          {
            name: '新乡5',
            value: 80
          },
          {
            name: '新乡6',
            value: 80
          }
        ],
        carousel: 'single',
        unit: '人'
      }
    }
  },
  methods: {},
  computed: {}
}
</script>

<style scoped lang="scss">
.ranking {
  padding: 20px 10px;
  width: 100%;
  .dv-scr-rank-board {
    height: 225px;
    padding: 20px;
  }
  .title {
    color: #fff;
    padding: 0 20px;
  }
}
</style>