hwmom-ui/src/views/board/index.vue

<template>
  <div class="board">
    <div class="title">
      微电网能源管理系统
    </div>
    <div class="rightTop">
      <span>今日告警:</span>
      <span style="color: #ff0000">2234</span>
      <br>
      <span>累计告警:</span>
      <span style="color: #4F98B8">3392</span>
    </div>
    <div class="card" style="left: 0.3%;background-color: #DD8F78">
      <div class="cardTitle">上网电量</div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          日上网电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          103.2
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          累计上网电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          36371
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
    </div>
    <div class="card" style="left: 16.9%;background-color: #DD8F78">
      <div class="cardTitle">上网电量</div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          日上网电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          103.2
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          累计上网电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          36371
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
    </div>
    <div class="card" style="left: 33.5%;background-color: #DD8F78">
      <div class="cardTitle">上网电量</div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          日上网电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          103.2
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          累计上网电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          36371
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
    </div>
    <div class="card" style="left: 50.1%;background-color: #DD8F78">
      <div class="cardTitle">上网电量</div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          日上网电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          103.2
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          累计上网电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          36371
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
    </div>
    <div class="card" style="left: 66.7%;background-color: #DD8F78">
      <div class="cardTitle">上网电量</div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          日上网电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          103.2
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          累计上网电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          36371
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
    </div>
    <div class="card" style="left: 83.3%;background-color: #DD8F78">
      <div class="cardTitle">上网电量</div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          日上网电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          103.2
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
      <div class="cardInfo">
        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
          累计上网电量
        </div>
        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
          36371
        </div>
        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
          kwh
        </div>
      </div>
    </div>
    <div class="bottomLeftTop">
      <div class="card1" style="margin-top: 1%;margin-bottom: 2%">
        <div class="title1">系统收益</div>
        <div class="icon1"></div>
        <div class="num1">1.11</div>
        <div class="span1">万元</div>
      </div>
      <div class="card1" style="margin-top: 1%;margin-bottom: 2%">
        <div class="title1">系统收益</div>
        <div class="icon1"></div>
        <div class="num1">1.11</div>
        <div class="span1">万元</div>
      </div>
      <div class="card1">
        <div class="title1">系统收益</div>
        <div class="icon1"></div>
        <div class="num1">1.11</div>
        <div class="span1">万元</div>
      </div>
      <div class="card1">
        <div class="title1">系统收益</div>
        <div class="icon1"></div>
        <div class="num1">1.11</div>
        <div class="span1">万元</div>
      </div>
    </div>
    <div class="bottomLeftMid">
      <div class="title2">光伏/市电日电量占比</div>
      <div class="num2">100</div>
      <div class="span2">%</div>
      <div class="num3">100</div>
      <div class="span3">%</div>
    </div>
    <div class="bottomLeftBottom">
      <div class="title3">气象信息</div>
      <div class="card2">
        <div class="icon2"></div>
        <div class="card2Title">光照</div>
        <div class="card2Span">
          <span>
            0.00
          </span>
          <span style="position:absolute;right: 0">
            lx
          </span></div>
      </div>
      <div class="card2">
        <div class="icon2"></div>
        <div class="card2Title">光照</div>
        <div class="card2Span">
          <span>
            0.00
          </span>
          <span style="position:absolute;right: 0">
            lx
          </span></div>
      </div>
      <div class="card2">
        <div class="icon2"></div>
        <div class="card2Title">光照</div>
        <div class="card2Span">
          <span>
            0.00
          </span>
          <span style="position:absolute;right: 0">
            lx
          </span></div>
      </div>
      <div class="card2">
        <div class="icon2"></div>
        <div class="card2Title">光照</div>
        <div class="card2Span">
          <span>
            0.00
          </span>
          <span style="position:absolute;right: 0">
            lx
          </span></div>
      </div>
    </div>
    <div class="bottomMid">
    </div>
    <div class="bottomRightTop">
      <div class="card1" style="margin-top: 1%;margin-bottom: 2%">
        <div class="title1">系统收益</div>
        <div class="icon1"></div>
        <div class="num1">1.11</div>
        <div class="span1">万元</div>
      </div>
      <div class="card1" style="margin-top: 1%;margin-bottom: 2%">
        <div class="title1">系统收益</div>
        <div class="icon1"></div>
        <div class="num1">1.11</div>
        <div class="span1">万元</div>
      </div>
      <div class="card1">
        <div class="title1">系统收益</div>
        <div class="icon1"></div>
        <div class="num1">1.11</div>
        <div class="span1">万元</div>
      </div>
      <div class="card1">
        <div class="title1">系统收益</div>
        <div class="icon1"></div>
        <div class="num1">1.11</div>
        <div class="span1">万元</div>
      </div>

    </div>
    <div class="bottomRightMid">

    </div>
    <div class="bottomRightBottom">

    </div>
  </div>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="less">
.board {
  background-color: #020A3A;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.title {
  position: absolute;
  top: 2%;
  left: 2%;
  font-size: 1vw;
  color: white;
}

.rightTop {
  position: absolute;
  top: 2%;
  right: 2%;
  font-size: 0.8vw;
  color: white;
}

.card {
  position: absolute;
  top: 10%;
  width: 16%;
  height: 15%;
  color: white;
  font-size: 0.8vw;
  border-radius: 10px;
  line-height: 5vh;
}

.cardTitle {
  margin-left: 0.5vw;
}

.cardItem {
  vertical-align: top;
  display: inline-block;
}

.bottomLeftTop {
  position: absolute;
  top: 26%;
  left: 0.3%;
  width: 25%;
  height: 24%;
  background-color: #141B4C;
}

.bottomLeftMid {
  position: absolute;
  top: 50.6%;
  left: 0.3%;
  width: 25%;
  height: 24%;
  background-color: #141B4C;
}

.bottomLeftBottom {
  position: absolute;
  top: 75.2%;
  left: 0.3%;
  width: 25%;
  height: 24%;
  background-color: #141B4C;
}

.bottomMid {
  position: absolute;
  top: 26%;
  left: 25.5%;
  width: 49%;
  height: 73.4%;
  background-color: #141B4C;
}

.bottomRightTop {
  position: absolute;
  top: 26%;
  right: 0.3%;
  width: 25%;
  height: 24%;
  background-color: #141B4C;
}

.bottomRightMid {
  position: absolute;
  top: 50.6%;
  right: 0.3%;
  width: 25%;
  height: 24%;
  background-color: #141B4C;
}

.bottomRightBottom {
  position: absolute;
  top: 75.2%;
  right: 0.3%;
  width: 25%;
  height: 24%;
  background-color: #141B4C;
}

.card1 {
  width: 48%;
  height: 45%;
  display: inline-block;
  margin: 0 1%;
  vertical-align: top;
  border: 0.5px solid #fff2;
  color: #fff;
  position: relative;
  font-size: 0.8vw;
}

.title1 {
  position: absolute;
  top: 10%;
  left: 10%;
}

.icon1 {
  position: absolute;
  width: 10%;
  top: 10%;
  right: 10%;
}

.num1 {
  position: absolute;
  bottom: 10%;
  left: 10%;
}

.span1 {
  position: absolute;
  bottom: 10%;
  right: 10%;
}

.title2 {
  position: absolute;
  top: 10%;
  left: 5%;
  font-size: 0.8vw;
  color: white;
}

.num2 {
  position: absolute;
  top: 60%;
  left: 30%;
  font-size: 1.2vw;
  color: white;
}

.span2 {
  position: absolute;
  top: 60%;
  left: 45%;
  font-size: 1.2vw;
  color: white;
}


.num3 {
  position: absolute;
  top: 60%;
  left: 75%;
  font-size: 1.2vw;
  color: white;
}

.span3 {
  position: absolute;
  top: 60%;
  left: 90%;
  font-size: 1.2vw;
  color: white;
}

.title3 {
  width: 100%;
  height: 10%;
  line-height: 2.4vh;
  font-size: 0.8vw;
  text-align: center;
  color: white;
}

.card2 {
  width: 46%;
  height: 45%;
  margin: 0 2%;
  display: inline-block;
  position: relative;
}

.icon2 {
  background-color: #00afff;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 10%;
  width: 3vw;
  height: 3vw;
}

.card2Title {
  position: absolute;
  width: calc(100% - 10% - 3vw);
  height: 1.5vw;
  line-height: 1.5vw;
  top: 50%;
  left: calc(10% + 3vw);
  transform: translateY(-100%);
  text-align: center;
  color: white;
  font-size: 0.8vw;
}

.card2Span {
  position: absolute;
  width: calc(100% - 10% - 3vw - 20px);
  height: 1.5vw;
  top: 50%;
  left: calc(10% + 3vw + 10px);
  line-height: 1.5vw;
  color: white;
  font-size: 0.8vw;
}
</style>