yos_web/src/components/dataBoard/index.vue

<template>
  <div>
    <div class="div-box-new-margin">
      <div class="div-box-new" :style="{height:heightNew}">
        <div style="font-size: 16px;color: #333333;margin-bottom: 20px">
<!--          <div class="div-line div-line-right"></div>-->
          {{$t(title)}}
        </div>
        <div class="div-border-new" :style="{height:heightNew}">
          <div class="item div-click" v-for="item in mainData" @click="detailClick(item.label)">
            <p class="title">{{item.value}}</p>
            <span class="content-font-new">{{$t(item.label)}}</span>
            <el-tooltip placement="top" v-if="item.isTooltip">
              <div slot="content">{{$t(item.tooltip)}}</div>
              <img style="vertical-align: middle" width="14px" height="14px" src="../../assets/icons/prompt_icon.svg" >
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props:['title','mainData','heightNew'],
  methods:{
    detailClick(title){
      this.$emit('goDetail',title)
    }
  }
}
</script>

<style scoped>
.div-box-new{
  margin-top: 16px;
  width: 100%;
  /* height: 210px;*/
  border-radius: 2px;
  border: 1px solid #e9e9e9;
  background-color: #ffffff;
  box-sizing: border-box;
  box-shadow: -1px -1px 5px 0px rgba(0, 0, 0, 0.2);
  padding: 16px
}
.div-border-new{
  /*margin:0 30px 0 30px;*/
  height: 150px
}
.div-border-new .item{
  height: 33%;
  width: 16.6%;
  float: left;
}
.div-border-new .item .title{
  font-size: 26px
}
.div-border-new .item .content-font-new{
  font-size: 14px;
  margin-right: 10px;
  color: #000000A6;
}
.div-click:hover{
  color: #3874f6 !important;
}
</style>