79 lines
1.6 KiB
Vue
79 lines
1.6 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/digitalConstruction/aIEarlyWarning/topLeft.vue";
|
|
import TopCenter from "@/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/topCenter.vue";
|
|
import TopRight from "@/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/topRight.vue";
|
|
import BottomLeft from "@/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomLeft.vue";
|
|
import BottomRight from "@/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue";
|
|
export default {
|
|
components: { TopLeft, TopCenter, TopRight, BottomLeft, BottomRight }
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.distributionBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
.top {
|
|
height: 52%;
|
|
display: flex;
|
|
margin-bottom: 1%;
|
|
.topLeft {
|
|
width: 33%;
|
|
// background-color: orchid;
|
|
}
|
|
.topCenter {
|
|
margin: 0% 1%;
|
|
width: 33%;
|
|
}
|
|
.topRight {
|
|
width: 33%;
|
|
}
|
|
}
|
|
.bottom {
|
|
height: 50%;
|
|
display: flex;
|
|
.bottomLeft {
|
|
width: 50%;
|
|
margin-right: 1%;
|
|
:deep(.h-card) {
|
|
.content {
|
|
margin-top: 2% !important;
|
|
}
|
|
}
|
|
}
|
|
.bottomRight {
|
|
width: 50%;
|
|
:deep(.h-card) {
|
|
.content {
|
|
margin-top: 2% !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|