vpp/src/views/rqdd/rqdd.vue

<template>
    <div class="app-container">
        <div class="topBanner">
            <div class="topLogo">
            </div>
            <div style="position: absolute;right: 18%;top: 8px">
                <img alt="" 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%"/>
            <div class="crumb left44">
                <div class="textCrumb1">
                    用电端计划监控
                </div>
            </div>
            <div class="partition" style="left: 54%"/>
            <div class="crumb left55">
                <div class="textCrumb">
                    约束条件监控
                </div>
            </div>
            <div class="partition" style="left: 65%"/>
            <div class="crumb left66">
                <div class="textCrumb">
                    数据采集监控
                </div>
            </div>
        </div>
        <div class="zs1">
            <div class="littleHeadWord">
                <span>信息总览</span>
            </div>
            <LeftTop/>
        </div>
        <div class="zs2">
            <div class="littleHeadWord">
                <span>告警信息</span>
            </div>
        </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>
            <iframe scrolling="no" src="/#/rqddjh" style="width: 100%;height: 100%;border: 0;">
            </iframe>
        </div>
    </div>
</template>

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

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

<style lang="css" scoped>
.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: 87px;
    left: 2px;
    background: url(./img/1.png) no-repeat;


}

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

}

.ys1 {
    width: 36%;
    height: calc(44vh);
    position: absolute;
    top: 87px;
    left: 1140px;
    background: url(./img/1.j.png) no-repeat

}

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


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

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

}

.littleHeadWord span {
    color: white;
    font-size: 19px;
    font-weight: 1000;
    font-family: AliMaMa;
}
</style>