vpp/src/views/ssddjk/ssdd.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="partition" style="left: 43.2%"/>
            <div class="crumb left33">
                <div class="textCrumb1" onclick="window.open('/path#/ssdd?id=fd','_self')">
                    发电端计划监控
                </div>
            </div>
            <div class="partition" style="left: 54.2%"/>
            <div class="crumb left55">
                <div class="textCrumb" onclick="window.open('/path#/ssdd?id=ys','_self')">
                    约束条件监控
                </div>
            </div>
            <div class="crumb left66">
                <div class="textCrumb" onclick="window.open('/path#/ssdd?id=sj','_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/标题.w.png) 8px 0 no-repeat;
    background-size: 95% 95%;
    z-index: auto;
}

.left33 {
    left: 33%;
}

.left55 {
    left: 44.2%;
}

.left66 {
    left: 55.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>