emsfront/src/components/Ems/ZdBaseInfo/index.vue

<!--首页、地图站点页面顶部信息方块-->
<template>
  <el-row type="flex" >
    <el-card shadow="hover" class="card common-card-container-body-no-padding" v-for="(item,index) in data" :key="index+'zdInfo'" :style="{borderBottomColor:item.color}">
      <div class="info">{{ item.title }}</div>
      <div class="num">{{item.num}}</div>
    </el-card>
  </el-row>
</template>

<script>
//todo 动态获取数据
export default {
  data() {
    return {
      data:[{
        title:'站点总数（座）',
        num:6,
        color:'#FFBD00'
      },{
        title:'装机功率（MW）',
        num:6,
        color:'#3C81FF'
      },{
        title:'装机容量（MW）',
        num:6,
        color:'#5AC7C0'
      },{
        title:'总充电量（MWh）',
        num:6,
        color:'#A696FF'
      },{
        title:'总放电量（MWh）',
        num:6,
        color:'#A696FF'
      }]
    }
  }
}
</script>
<style scoped lang="scss">
.card{
  width: 150px;
  height: 96px;
  margin-right: 27px;
  border-bottom: 4px solid transparent;
  text-align: center;
  .info{
    color: #666666;
    line-height: 14px;
    padding-top: 18px;
  }
  .num{
    color: rgba(51,51,51,1);
    font-size: 26px;
    line-height: 26px;
    font-weight: 500;
    margin-top: 14px;
  }
}

</style>