iot-front-ui/src/components/life/common/coreData.vue

<script>
export default {
  data() {
    return {
      itemWidth: 150,
    }
  },
  props: {
    dataList: Array
  },
  mounted() {
    let clientWidth = document.getElementsByClassName("coreData")[0].clientWidth;
    clientWidth = clientWidth;
    this.itemWidth = Math.floor(clientWidth/this.dataList.length)-55
  }
}
</script>

<template>
  <div class="coreData">
    <template v-for="(ele, index) in dataList" >
      <div class="coreData-item" :key="index" :style="{width: itemWidth+'px', backgroundColor: ele.isHighLight?'#e7f5fc':''}">
        <div class="coreData-item-title">{{ ele.title }}</div>
        <div class="coreData-item-num">{{ ele.num }}</div>
        <div class="coreData-item-unit">{{ ele.unit }}</div>
        <div class="coreData-item-history">
          <div class="coreData-item-historyDesc">
            {{ ele.historyDesc }}
            <span v-if="ele.trend===0">持平</span>
            <span v-else-if="ele.trend>0">上升</span>
            <span v-else-if="ele.trend<0">下降</span>
            <span v-else></span>
          </div>
          <div class="coreData-item-historyNum">{{ ele.historyNum }}</div>
        </div>
      </div>
      <a-divider type="vertical" class="iot-core-divider" v-if="index!==dataList.length-1"/>
    </template>
  </div>
</template>

<style lang="less" scoped>
.coreData {
  width: 100%;
  height: 150px;
  background-color: #f7fbfe;
  .coreData-item {
    display: inline-block;
    vertical-align: top;
    height: 120px;
    margin: 15px 20px;
    padding: 8px;
    .coreData-item-title {
      line-height: 30px;
    }
    .coreData-item-num {
      display: inline-block;
      font-size: 30px;
      font-weight: bolder;
      height: 50%;
      padding-top: 3%;
    }
    .coreData-item-unit {
      display: inline-block;
      margin-left: 3px;
      color: #9a9a9a;
    }
    .coreData-item-historyDesc {
      display: inline-block;
    }
    .coreData-item-historyNum {
      margin-left: 5px;
      display: inline-block;
      color: red;
    }
  }
  .iot-core-divider {
    margin-top: 10px;
    height: 100px;
    display: inline-block;
    vertical-align: top
  }
}
</style>