data_governance/src/components/StatisticsList.vue

<template>
  <div class="tabs-list-wrap">
    <Row :gutter="16">
      <Col :span="spanNum" v-for="(item, index) in tabsData" :key="index">
        <div class="tabs-list">
          <img :src="tabsIcon[index].imgSrc" >
          <div>
            <p class="">{{ item.text }}</p>
            <p :style="'color:'+tabsTitleColor[index]" class="tabs-list-value">{{ item.value }}<span class="tabs-list-company">{{ item.company }}</span></p>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  name: "StatisticsList",
  props: {
    tabsInitData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tabsIcon: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tabsTitleColor: {
      type: Array,
      default: () => {
        return [];
      },
    },
    spanNum: {
      type: Number,
      default: 6
    }
  },
  components:{
  },
  data() {
    return {
      tabsData: []
    };
  },
  mounted() {
    // this.$nextTick(()=> {
    //   this.tabsData = this.tabsInitData
    // })
    this.tabsData = this.tabsInitData
    console.log(this.tabsData)
  },
  methods: {
   
  }
};
</script>
<style scoped lang="stylus">
.tabs-list-wrap {
  display: flex;
  justify-content: space-between;
}
.tabs-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: #0B2856;
  border: 1px solid #204384;
  height: 120px;
  font-size: 14px;
  color: #0185EA;
  img {
    margin-right: 30px;
  }
  .tabs-list-value {

    font-size: 30px;
  }
  .tabs-list-company {
    font-size: 14px;
    margin-left: 6px;
  }
}
>>> .ivu-row {
  width: 100%;
  margin: 0 !important;
}
>>> .ivu-row .ivu-col:first-child {
  padding-left: 0px !important;
}
>>> .ivu-row .ivu-col:last-child {
  padding-right: 0px !important;
}
</style>