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

<script>
export default {
  data() {
    return {
      itemWidth: 150,
    };
  },
  props: {
    dataList: Array,
  },
  mounted() {
    let clientWidth = Math.floor(100/this.dataList.length)-2+'%'
    this.itemWidth = clientWidth;
  },
};
</script>

<template>
  <div class="coreData">
    <template v-for="(ele, index) in dataList">
      <div
        class="coreData-item"
        :key="index"
        :style="{
          width: itemWidth,
          backgroundColor: ele.isHighLight ? '#e7f5fc' : '',
        }"
      >
        <div class="coreData-item-title">{{ ele.title }}</div>
        <template v-if="ele.type === 1"> </template>
        <template v-else>
          <div class="coreData-item-num">{{ ele.num }}</div>
          <div class="coreData-item-unit" v-html="ele.unit"></div>
          <div class="coreData-item-history">
            <div class="coreData-item-historyDesc">
              <span v-if="ele.historyNum === 0">{{ ele.historyDesc }}持平</span>
              <span v-else-if="ele.historyNum > 0"
                >{{ ele.historyDesc }}上升</span
              >
              <span v-else-if="ele.historyNum < 0"
                >{{ ele.historyDesc }}下降</span
              >
              <span v-else></span>
            </div>
            <div class="coreData-item-historyNum" v-if="!isNaN(ele.historyNum)">
              {{ Math.abs(ele.historyNum) }}%
            </div>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<style lang="less" scoped>
.coreData {
  width: 100%;
  height: 140px;
  .coreData-item {
    display: inline-block;
    vertical-align: top;
    height: 120px;
    margin: 10px;
    background-color: #f7fbff;
    padding: 8px 8px 8px 1.5%;
    border-radius: 5px;
    .coreData-item-title {
      line-height: 30px;
    }
    .coreData-item-num {
      display: inline-block;
      font-size: 30px;
      font-weight: bolder;
      height: 50%;
    }
    .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;
    }
  }
}
</style>