<template>
|
<div class="page">
|
<div class="screen-container">
|
<div class="header">
|
<Header></Header>
|
</div>
|
<div class="screen-body">
|
<section class="screen_left">
|
<div class="left_top">
|
<SchoolInfor></SchoolInfor>
|
</div>
|
<div class="left_middle">
|
<PipeNetCont></PipeNetCont>
|
</div>
|
<div class="left_bottom">
|
<BuildingCost></BuildingCost>
|
</div>
|
</section>
|
<section class="screen_middle">
|
<div class="middle_top">
|
<Map></Map>
|
</div>
|
<div class="middle_bottom">
|
<AlertInfo></AlertInfo>
|
</div>
|
</section>
|
<section class="screen_right">
|
<div class="right_top">
|
<SchoolCostCompare></SchoolCostCompare>
|
</div>
|
<div class="right_middle">
|
<PipeWellPercent></PipeWellPercent>
|
</div>
|
<div class="right_bottom">
|
<Devices></Devices>
|
</div>
|
</section>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Header from './Header'
|
import SchoolInfor from './SchoolInfo'
|
import PipeNetCont from './PipeNetCount'
|
import BuildingCost from './BuildingCost'
|
import Map from './Map'
|
import SchoolCostCompare from './SchoolCostCompare'
|
import PipeWellPercent from './PipeWellPercent'
|
import Devices from './Devices'
|
import AlertInfo from './AlertInfo'
|
export default {
|
components: {
|
Header,
|
SchoolInfor,
|
PipeNetCont,
|
BuildingCost,
|
Map,
|
SchoolCostCompare,
|
PipeWellPercent,
|
Devices,
|
AlertInfo
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.page {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
background: url(/zhjg/img/login/background.png);
|
background-size: 100% auto;
|
}
|
.screen-container {
|
width: 100%;
|
height: 100%;
|
|
padding: 0 30px;
|
box-sizing: border-box;
|
|
.header {
|
height: 100px;
|
}
|
|
.screen-body {
|
width: 100%;
|
height: calc(100% - 140px);
|
display: flex;
|
margin-top: 20px;
|
.screen_left {
|
height: 100%;
|
width: 21.5%;
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
.left_top {
|
width: 100%;
|
height: 28%;
|
}
|
.left_middle {
|
width: 100%;
|
height: 32%;
|
margin-top: 20px;
|
}
|
.left_bottom {
|
flex: 1;
|
width: 100%;
|
margin-top: 20px;
|
}
|
}
|
.screen_middle {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
width: 54.8%;
|
margin-left: 1.2%;
|
margin-right: 1.2%;
|
.middle_top {
|
width: 100%;
|
height: 62.5%;
|
position: relative;
|
}
|
.middle_bottom {
|
flex: 1;
|
width: 100%;
|
margin-top: 20px;
|
}
|
}
|
.screen_right {
|
height: 100%;
|
width: 21.5%;
|
display: flex;
|
flex-direction: column;
|
.right_top {
|
width: 100%;
|
height: 28%;
|
}
|
.right_middle {
|
width: 100%;
|
height: 32%;
|
margin-top: 20px;
|
}
|
.right_bottom {
|
flex: 1;
|
width: 100%;
|
margin-top: 20px;
|
}
|
}
|
}
|
}
|
</style>
|
