web_sh_audit/src/components/common/TopCard.vue

<template>
  <div class="CardBox">
    <div v-for="(items, index) in dataList" :key="index" class="Top_box">
      <div class="Top_box_name" v-if="dataSize > index">{{ items.name }}</div>
      <div class="Top_box_main" v-if="dataSize > index">
        <div class="Top_box_main_title">{{ items.title }}</div>
        <div><el-progress :percentage="items.value" :stroke-width="10" :show-text="false"></el-progress></div>
      </div>
      <div class="Top_box_value" v-if="dataSize > index">{{ items.value }}</div>
    </div>
  </div>
</template>

<script>
/**
 * TOP列表组件（首页历年频发问题TOP5等地方用到）
 * @author: LiuMengxiang
 * @Date: 2022年11月14-18日
 * 后期需要调整。根据用户传入数据自动渲染。
 */
export default {
  name: "TopCard",
  components: {},
  data() {
    return {
      dataList: [
        { name: "TOP1", title: "基本农田、耕地等被违规占用、改变用途或闲置抛荒", value: 99 },
        { name: "TOP2", title: "发现问题整改不到位，存在长期不整改不处理的现象", value: 88 },
        { name: "TOP3", title: "建设用地减量化复垦地块后续管养不到位", value: 77 },
        {
          name: "TOP4",
          title: "河道被截断或填埋，河道周边存在不规范养殖，河岸被违章搭建等",
          value: 66
        },
        { name: "TOP5", title: "已完成的美丽庭院、村庄改造项目长效管理不到位", value: 55 },
        { name: "TOP6", title: "基本农田、耕地等被违规占用、改变用途或闲置抛荒", value: 44 },
        { name: "TOP7", title: "发现问题整改不到位，存在长期不整改不处理的现象", value: 33 },
        { name: "TOP8", title: "建设用地减量化复垦地块后续管养不到位", value: 22 },
        {
          name: "TOP9",
          title: "河道被截断或填埋，河道周边存在不规范养殖，河岸被违章搭建等",
          value: 11
        },
        { name: "TOP10", title: "已完成的美丽庭院、村庄改造项目长效管理不到位", value: 1 }
      ]
    };
  },
  mounted() {},
  /**
   * data:top data
   */
  props: ["dataSize"],
  methods: {},
  watch: {}
};
</script>
<style lang="less" scoped>
@borderColor: #00aaff;
@borderColor32: #00aaff32;
@borderColor64: #00aaff64;
@topTitleBgLeft: #00244d;
@topTitleMinLeft: #002f56;
@lightColor: #74ffff;
@tagValueColor: #f19b56;
.CardBox {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  .Top_box {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    .Top_box_name {
      width: 50px;
      font-size: 14px;
      font-family: PingFang SC;
      padding-right: 10px;
      font-weight: bold;
      color: #ffffff;
    }
    .Top_box_main {
      border-left: 1px solid #666;
      width: 80%;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #b8c5cc;
      padding-bottom: 5px;
      &_title {
        width: calc(100% - 20px);
        padding: 0 10px;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      ::v-deep .el-progress-bar__outer {
        background-color: transparent;
        background-image: linear-gradient(90deg, #007dff32 0%, #00ffff32 100%) !important;
      }
      ::v-deep .el-progress-bar__inner {
        background-image: linear-gradient(90deg, #007dff 0%, #00ffff 100%) !important;
      }
    }
    .Top_box_value {
      width: calc(20% - 50px);
      padding-left: 5px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #f19b56;
    }
  }
}
</style>