<template>
	<div class="towerCranrBox">
		<div class="left">
			<div class="leftTop"><LeftTop /></div>
			<div class="leftCenter"><LeftCenter /></div>
			<div class="leftBottom"><LeftBottom /></div>
		</div>
		<div class="right">
			<div class="rightBox">
				<Right></Right>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import LeftTop from "@/views/sevenLargeScreen/elevatorMonitoring/leftTop.vue";
import LeftCenter from "@/views/sevenLargeScreen/elevatorMonitoring/leftCenter.vue";
import LeftBottom from "@/views/sevenLargeScreen/elevatorMonitoring/leftBottom.vue";
import Right from "@/views/sevenLargeScreen/elevatorMonitoring/right.vue";
</script>

<style lang="scss" scoped>
.towerCranrBox {
	width: 100%;
	height: 100%;
	display: flex;
	.left {
		width: 30%;
		height: 100%;
		.leftTop {
			height: 29%;
		}
		.leftCenter {
			margin-top: 6%;
			height: 32%;
		}
		.leftBottom {
			margin-top: 6%;
			height: 32%;
		}
	}
	.right {
		margin-left: 1%;
		width: 83%;
		height: 100%;
		.rightBox {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
