69 lines
1.4 KiB
Vue
69 lines
1.4 KiB
Vue
<template>
|
|
<div class="distributionBox">
|
|
<div class="top">
|
|
<div class="topLeft">
|
|
<TopLeft></TopLeft>
|
|
</div>
|
|
<div class="topCenter">
|
|
<TopCenter></TopCenter>
|
|
</div>
|
|
<div class="topRight">
|
|
<TopRight></TopRight>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="bottomLeft">
|
|
<BottomLeft></BottomLeft>
|
|
</div>
|
|
<div class="bottomRight">
|
|
<BottomRight></BottomRight>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TopLeft from "@/views/sevenLargeScreen/distributionMonitoring/topLeft.vue";
|
|
import TopCenter from "@/views/sevenLargeScreen/distributionMonitoring/topCenter.vue";
|
|
import TopRight from "@/views/sevenLargeScreen/distributionMonitoring/topRight.vue";
|
|
import BottomLeft from "@/views/sevenLargeScreen/distributionMonitoring/bottomLeft.vue";
|
|
import BottomRight from "@/views/sevenLargeScreen/distributionMonitoring/bottomRight.vue";
|
|
export default {
|
|
components: { TopLeft, TopCenter, TopRight, BottomLeft, BottomRight }
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.distributionBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
.top {
|
|
height: 60%;
|
|
display: flex;
|
|
margin-bottom: 1%;
|
|
.topLeft {
|
|
width: 30%;
|
|
// background-color: orchid;
|
|
}
|
|
.topCenter {
|
|
margin: 0% 1%;
|
|
width: 55%;
|
|
}
|
|
.topRight {
|
|
width: 30%;
|
|
}
|
|
}
|
|
.bottom {
|
|
height: 42%;
|
|
display: flex;
|
|
.bottomLeft {
|
|
width: 50%;
|
|
margin-right: 1%;
|
|
}
|
|
.bottomRight {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|