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