封装提示语组件

效果图：

父组件调用：

页面：
 <CountListIndex  :count-list="countList"/>

data数据：
countList: [
        {
          label: '测试1',
          count:20,
        },
        {
          label: '测试2',
          count:20,
        },
        {
          label: '测试3',
          count:20,
        },
      ],

（CountListIndex ）子组件：

<template>
  <div class="count-list-wrapper">
    <el-row :gutter="48">
      <el-col
        v-for="(item, i) in countList"
        :key="i"
        :md="item.md || 8"
        :sm="item.sm || 24"
      >
        <div :class="['count-item', 'count-item' + i]">
          <span class="count-item-label">
            <i class="el-icon-info anticon" />
            {{ item.label }}
          </span>
          <span class="count-item-count">{{ item.count }}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'CountListIndex',
  props: {
    countList: {
      type: Array,
      default() {
        return [
          {
            label: '未填写案件总数',
            count: 987,
          },
          {
            label: '119案件总数',
            count: 987,
          },
          {
            label: '未填写报告总数',
            count: 987,
          },
        ]
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.count-list-wrapper {
  margin-bottom: 20px;

  .count-item {
    padding: 8px 15px 8px;
    display: flex;
    justify-content: space-between;

    span {
      font-size: 14px;
      color: #fff;

      &.count-item-count {
        font-weight: 600;
      }

      .anticon {
        margin-right: 5px;
      }
    }

    &.count-item0 {
      background-color: rgba(82, 115, 246, 0.1);
      border: 1px solid rgba(82, 115, 246, 0.3);

      .count-item-count {
        color: rgb(82, 115, 246);
      }
      .anticon {
        color: rgb(82, 115, 246);
      }
    }

    &.count-item1 {
      background-color: rgba(82, 196, 26, 0.1);
      border: 1px solid rgba(82, 196, 26, 0.3);

      .count-item-count {
        color: rgb(82, 196, 26);
      }

      .anticon {
        color: rgb(82, 196, 26);
      }
    }

    &.count-item2 {
      background-color: rgba(19, 194, 194, 0.1);
      border: 1px solid rgba(19, 194, 194, 0.3);

      .count-item-count {
        color: rgb(19, 194, 194);
      }

      .anticon {
        color: rgb(19, 194, 194);
      }
    }
  }
}
</style>