vpp/src/views/rqdd/rqdd.vue

<template>
  <div class="app-container">
    <div class="topBanner">
      <div class="topLogo1">
      </div>
      <div style="position: absolute;right: 19%;top: 8px">
        <img alt="" onclick="window.open('/path#/xndc','_self')" src="./img/返回首页.png">
      </div>
      <div class="topButton1">
        <div class="textStatus">
          <span>离 线 运 行</span>
        </div>
      </div>

      <div class="crumb left33">
        <div class="textCrumb1" onclick="window.open('/path#/fdjh','_self')">
          发电端计划监控
        </div>
      </div>
      <div class="partition" style="left: 43.2%"/>
      <div class="crumb left44">
        <div class="textCrumb1" onclick="window.open('/path#/fdjh','_self')">
          用电端计划监控
        </div>
      </div>
      <div class="partition" style="left: 54.2%"/>
      <div class="crumb left55">
        <div class="textCrumb" onclick="window.open('/path#/fdjh','_self')">
          约束条件监控
        </div>
      </div>
      <div class="partition" style="left: 65.2%"/>
      <div class="crumb left66">
        <div class="textCrumb" onclick="window.open('/path#/fdjh','_self')">
          数据采集监控
        </div>
      </div>

      <img class="userHead" src="../../assets/images/default-user.png">
      <div class="userName">
        <div style="font-size: 20px">韩翔宇</div>
        0000000000
      </div>
      <img class="split" src="../../assets/images/line-v-w.png">
      <div class="userDept">某某某部门</div>

    </div>
    <div class="zs1">
      <div class="littleHeadWord">
        <span>信息总览</span>
      </div>
      <LeftTop/>
    </div>
    <div class="zs2">
      <div class="littleHeadWord">
        <span>告警信息</span>
      </div>
      <CenterMiddle3/>
    </div>
    <div class="ys1">
      <div class="littleHeadWord">
        <span>联络线信息</span>
      </div>
      <CenterMiddle1/>
    </div>
    <div class="yx1">
      <div class="littleHeadWord">
        <span>断面信息</span>
      </div>
      <CenterMiddle/>
    </div>
    <div class="zx">
      <div class="littleHeadWord">
        <span>日前调度计划</span>
      </div>
      <CenterMiddle2/>
    </div>
  </div>
</template>

<script>
import CenterMiddle2 from "@/views/rqdd/rqddjh.vue";
import CenterMiddle from "@/views/rqdd/rqdddm.vue";
import CenterMiddle1 from "@/views/rqdd/rqddllx.vue";
import CenterMiddle3 from "@/views/rqdd/rqddgjxx.vue";
import LeftTop from "@/views/rqdd/rqddxxzl.vue";

export default {
  name: 'rqdd-name',
  components: {LeftTop, CenterMiddle, CenterMiddle1, CenterMiddle2, CenterMiddle3}
}
</script>

<style lang="css" scoped>
.userHead {
  position: absolute;
  right: 15.5%;
  margin-top: 0.2%;
}

.userName {
  text-align: left;
  position: absolute;
  right: 10%;
  margin-top: 0.2%;
}

.split {
  position: absolute;
  right: 9.2%;
  margin-top: 0.2%;
}

.userDept {
  text-align: left;
  position: absolute;
  right: 2%;
  margin-top: 0.5%;
  font-size: 22px;
}

.topLogo1 {
  position: absolute;
  width: 270px;
  height: 66px;
  left: 2%;
  top: 0;
  background: url(./img/标题.q.png) 8px 0 no-repeat;
  background-size: 95% 95%;
  z-index: auto;
}

.left33 {
  left: 33%;
}

.left44 {
  left: 44.2%;
}

.left55 {
  left: 55.2%;
}

.left66 {
  left: 66.2%;
}

.textCrumb {
  display: flex;
  /*align-items: center;*/
  margin-left: 20%;
  margin-top: 2.5%;
  font-size: 18px;
  font-weight: bold;
}

.textCrumb1 {
  display: flex;
  /*align-items: center;*/
  margin-left: 16%;
  margin-top: 2.5%;
  font-size: 18px;
  font-weight: bold;
}

.textStatus {
  display: flex;
  align-items: center;
  margin-left: 24%;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
}

.crumb {
  position: absolute;
  top: 5px;
  width: 182px;
  height: 42px;
  display: flex;
  background-size: 100% 100%;
  background-image: url('../../assets/images/crumb.png');
}

.partition {
  position: absolute;
  top: 7px;
  width: 17px;
  height: 35px;
  display: flex;
  background-size: 100% 100%;
  background-image: url('../../assets/images/partition.png');
}

.topButton1 {
  position: absolute;
  left: 19.5%;
  width: 179px;
  height: 42px;
  display: flex;
  background-size: 100% 100%;
  background-image: url('../../assets/images/b-disable.png')
}


.zs1 {
  width: 32%;
  height: calc(32vh);
  position: absolute;
  top: 9%;
  left: 0;
  background: url(./img/1.png) no-repeat;


}

.zs2 {
  width: 32%;
  height: calc(32vh);
  position: absolute;
  top: 9%;
  left: 32%;
  background: url(./img/1.png) no-repeat

}

.ys1 {
  width: 36%;
  height: calc(45vh);
  position: absolute;
  top: 9%;
  left: 64%;
  background: url(./img/1.j.png) no-repeat

}

.yx1 {
  width: 36%;
  height: calc(45vh);
  position: absolute;
  top: 50%;
  left: 64%;
  background: url(./img/1.j.png) no-repeat
}


.zx {
  width: 63.5%;
  height: calc(58vh);
  position: absolute;
  top: 41%;
  left: 0;
  background: url(./img/2.png) no-repeat
}

.littleHeadWord {
  text-align: left;
  position: absolute;
  left: 70px;
}

.littleHeadWord span {
  display: flex;
  align-items: center;
  margin-top: 5%;
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
  text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
}
</style>