<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>
