HKZD-EMS-UI/src/views/board/index.vue

<template>
  <div>
    <div class="bg">
      <div class="title">正道能源监控系统</div>
      <div class="subTitle" style="top: 13.5%;left: 6%;">设备总览</div>
      <div class="subTitle" style="top: 42.3%;left: 6%">本月用电排行</div>
      <div class="subTitle" style="top: 71.2%;left: 6%">本月用电分项统计</div>
      <div class="subTitle" style="top: 71.2%;left: 30.5%">能耗统计</div>
      <div class="subTitle" style="top: 71.2%;left: 78%">实时预警</div>
      <div class="subTitle" style="top: 13.5%;left: 78%">近7天尖峰平谷统计</div>
      <div class="sbzl">
        <div class="num" style="top: 22%;left: 7%;">200</div>
        <div class="num" style="top: 22%;left: 14.3%">200</div>
        <div class="num" style="top: 22%;left: 21.7%">200</div>
        <div class="num" style="top: 31%;left: 7%">200</div>
        <div class="num" style="top: 31%;left: 14.3%">200</div>
        <div class="num" style="top: 31%;left: 21.7%">200</div>
        <div class="text" style="top: 22.2%;left: 7%">网关总数</div>
        <div class="text" style="top: 22.2%;left: 14.3%">水表总数</div>
        <div class="text" style="top: 22.2%;left: 21.7%">电表总数</div>
        <div class="text" style="top: 31.2%;left: 7%">压缩空气表总数</div>
        <div class="text" style="top: 31.2%;left: 14.3%">蒸汽表总数</div>
        <div class="text" style="top: 31.2%;left: 21.7%">氮气表总数</div>
      </div>
      <div class="zxnr">
        <div class="text" style="top: 18.5%;left: 45%;">用电量(kwh)</div>
        <div class="text" style="top: 18.5%;left: 57%;">用水量(m³)</div>
        <div class="text" style="top: 30%;left: 38.5%;">用压缩空气量(m³)</div>
        <div class="text" style="top: 31.5%;left: 51.5%;">用蒸汽量(m³)</div>
        <div class="text" style="top: 30%;left: 65%;">用氮气量(m³)</div>
        <div class="num" style="top: 20.3%;left: 45%">6554</div>
        <div class="num" style="top: 20.3%;left: 57%;">6554</div>
        <div class="num" style="top: 31.8%;left: 38.5%">6554</div>
        <div class="num" style="top: 33.3%;left: 51.5%">6554</div>
        <div class="num" style="top: 31.8%;left: 65%">6554</div>
        <div class="qs" style="top: 23.3%;left: 45%">
          <span>{{ 1 === 1 ? '上升' : '下降' }}9.6%</span>
          <div class="img"></div>
        </div>
        <div class="qs" style="top: 23.3%;left: 57%;">
          <span>{{ 1 === 1 ? '上升' : '下降' }}9.6%</span>
          <div class="img"></div>
        </div>
        <div class="qs" style="top: 34.8%;left: 38.5%">
          <span>{{ 1 === 1 ? '上升' : '下降' }}9.6%</span>
          <div class="img"></div>
        </div>
        <div class="qs" style="top: 36.3%;left: 51.5%">
          <span>{{ 1 === 1 ? '上升' : '下降' }}9.6%</span>
          <div class="img"></div>
        </div>
        <div class="qs" style="top: 34.8%;left: 65%">
          <span>{{ 1 === 1 ? '上升' : '下降' }}9.6%</span>
          <div class="img"></div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: 'Board',
  components: {
    vueSeamlessScroll
  },
  mounted() {
    let num = 900719925474099522349866432465796241098
    console.log(num.toString())
  }
}
</script>
<style scoped lang="less">
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url('~@/assets/board/bg.jpg');
  overflow: hidden;
}

.title {
  position: absolute;
  top: 2%;
  left: 50.8%;
  color: #eee;
  font-size: 2vw;
  font-weight: 600;
  letter-spacing: 0.5vw;
  transform: translateX(-50%);
}

.subTitle {
  position: absolute;
  font-size: 1vw;
  color: #000000;
  font-weight: 600;
  transform: translateY(-50%);
}

.sbzl {
  .num {
    position: absolute;
    font-size: 1.2vw;
    color: #66D49E;
    transform: translateY(-100%);
  }

  .text {
    position: absolute;
    font-size: 0.6vw;
    color: #fff;
    width: 3vw;
    text-align: left;
  }
}

.zxnr {
  .text {
    position: absolute;
    font-size: 0.6vw;
    color: #fff;
    text-align: left;
  }

  .num {
    position: absolute;
    font-size: 1.2vw;
    color: #4EACF3;
    font-weight: 600;
    letter-spacing: 0.2vw;
  }

  .qs {
    position: absolute;
    font-size: 0.6vw;
    color: #fff;
    text-align: left;

    .img {
      display: inline-block;
      vertical-align: middle;
      width: 1vw;
      height: 1vw;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('~@/assets/board/向上箭头.png');
    }
  }
}
</style>