iview 循环 卡片 更好图标 背景色 标题

<template>

    <div class="header">

      <Card>

      <div class="tit">数据统计</div>

      <div class="list">

        <div class="item" v-for="(infor, index) in inforCardData" :key="index">

          <div class="left" :style="infor.allbg">

            <i :class="`iconfont ${infor.iconclas}`" :style="infor.iconbg"></i>

          </div>

          <div class="right">

            <p><span :style="infor.color">{{infor.count}}</span></p>

            <p :style="infor.color">{{infor.title}}</p>

          </div>

        </div>                            

      </div>

      </Card>

    </div>

</template>

<script>

export default {

  name: "top",

components: {  },

  data() {

    return {

     inforCardData:[

       { color:'color:#4798ec',title: "设备总数",allbg: "background-color:#dbe7ff",iconclas: "icon-shebeishu",iconbg: "color:#4798ec",count: 0,},

       { color:'color:#72F7A9',title: "设备上线",allbg: "background-color:#d5fde6",iconclas: "icon-shebeizaixian",iconbg: "color:#72F7A9",count: 0,},

       { color:'color:#eb6239',title: "设备故障",allbg: "background-color:#fce8e3",iconclas: "icon-shebeiguzhang",iconbg: "color:#eb6239",count: 0,},

       { color:'color:#33d0ca',title: "人流总数",allbg: "background-color:#d7f6f5",iconclas: "icon-shebeishu",iconbg: "color:#33d0ca",count: 0,},

       { color:'color:#45AB3C',title: "苏康码用户",allbg: "background-color:#d6fdd2",iconclas: "icon-saomajiankangma",iconbg: "color:#45AB3C",count: 0,},

       { color:'color:#2F4FDE',title: "身份证用户",allbg: "background-color:#d4dcfc",iconclas: "icon-shenfenzheng",iconbg: "color:#2F4FDE",count: 0,},      

     ]

    };

  },

  methods: {},

  computed: {}

};

</script>

<style lang="less" scoped>

  .header {

    .tit {

      display: block;

      font-size: 21px;

      color: #333;

      position: relative;

      margin-bottom: 20px;

      &::before {

        width: 2px;

        height: 21px;

        content: "";

        background: #2d8cf0;

        position: absolute;

        left: -10px;

        top: 5px;

      }

    }

    .list {

      display: flex;

      justify-content: space-around;

      .item {

        width: 16%;

        display: flex;

        position: relative;

        &::before{

        width: 1px;

        height: 100%;

        content: "";

        background: #ddd;

        position: absolute;

        right:10px;

        top: 0;          

        }

        .left{

          width: 32%;

          height: 100%;

          border-radius: 50%;

          text-align: center;

          i{

            font-size: 40px;

            line-height: 69px;

          }

        }

        .right{

          width: 75%;

          padding-left: 20px;

          box-sizing: border-box;

          p{

            font-size: 18px;

            color: #333;

            letter-spacing: 2px;

            span{

            color: #4798ec;

            font-size: 30px;            

            }

          }

        }

      }

    }

  }

</style>