vpp/src/views/rqdd/rqdd.vue

<template>
    <div class="app-container">
        <div class="head">
            <div class="slice">
                <img alt="" src="./img/Slice 311.png">
            </div>
            <div style="position: absolute;right: 377px;top: 18px">
                <img alt="" src="./img/返回首页.png">
            </div>
            <div class="topButton1">
                <div class="buttonWord">
                    <span>离线运行</span>
                </div>
            </div>
            <div class="topButton2">
                <div class="buttonWord">
                    <span>发电端计划监控</span>
                </div>
            </div>
        </div>
        <div class="zs1">
            <div class="littleHeadWord">
                <span>信息总览</span>
            </div>
        </div>
        <div class="zs2">
            <div class="littleHeadWord">
                <span>告警信息</span>
            </div>
        </div>
        <div class="ys1">
            <div class="littleHeadWord">
                <span>联络线信息</span>
            </div>
        </div>
        <div class="yx1">
            <div class="littleHeadWord">
                <span>断面信息</span>
            </div>
        </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>
export default {
    name: 'rqdd-name'
}
</script>

<style lang="css" scoped>
.slice {
    width: 300px;
    position: absolute;
    left: 30px;
}

.head {
    width: 100%;
    height: calc(8vh);
    background: url(./img/装饰.png) no-repeat;
    background-size: 100% 100%;
}

.zs1 {
    width: 50%;
    height: calc(70vh);
    position: absolute;
    top: 87px;
    left: 2px;
    background: url(./img/1.png) no-repeat;


}

.topButton1 {
    background: url(./img/4灰大素材.png);
    height: 42px;
    width: 179px;
    position: absolute;
    top: 16px;
    left: 379px
}

.topButton2 {
    background: url(./img/色相饱和度4.png);
    height: 42px;
    width: 182px;
    position: absolute;
    top: 16px;
    left: 608px
}

.topButton1 .buttonWord {
    position: absolute;
    top: 9px;
    left: 45px;
    color: white;
    font-size: 19px;
    font-weight: 1000;
    font-family: AliMaMa;
}


.topButton2 .buttonWord {
    position: absolute;
    top: 9px;
    left: 25px;
    color: white;
    font-size: 19px;
    font-weight: 1000;
    font-family: AliMaMa;
}

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

}

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

}

.yx1 {
    width: 29%;
    height: calc(38vh);
    position: absolute;
    top: 561px;
    left: 1260px;
    background: url(./img/1.j.png) no-repeat
}

.zx {
    width: 69.5%;
    height: calc(55vh);
    position: absolute;
    top: 399px;
    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>