wisdomisitezwfront-web/src/views/goverment/huizhou/largeScreen/largeScreenOne/index.vue

<template>
	<div class="orderBgc">
		<!-- <Map3D class="mapStyle"></Map3D> -->
		<Map2D class="mapStyle"></Map2D>
		<!-- <headerScreen class="topHeader"></headerScreen> -->
		<div class="bottomContent">
			<leftScreen class="leftScreen"></leftScreen>
			<centerScreen class="centerScreen"></centerScreen>
			<rightScreen class="rightScreen"></rightScreen>
		</div>
		<!-- <div class="borderBottom"></div> -->
	</div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import headerScreen from "./components/header.vue";
import centerScreen from "./components/center.vue";
import leftScreen from "./components/left.vue";
import rightScreen from "./components/right.vue";
import Map3D from "./components/map3D.vue";
import Map2D from "./components/map2D.vue";
</script>

<style lang="scss" scoped>
.orderBgc {
	width: 100%;
	height: 100%;
	position: relative;
	.mapStyle {
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.topHeader {
		width: 100%;
		height: 15%;

		// background: linear-gradient(to right, rgb(17 20 25 / 60%), rgb(17 20 25 / 20%), rgb(17 20 25 / 60%));
	}
	.bottomContent {
		display: flex;
		width: 100%;
		height: 100%;
		position: relative;
		.leftScreen {
			flex: 2.5;
			height: 100%;
		}
		.centerScreen {
			flex: 5;
			height: 100px;
		}
		.rightScreen {
			flex: 2.5;
			height: 100%;
		}
	}
	.borderBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 6%;
		background: url("@/assets/images/screenImg/bottomBorder.png") no-repeat center bottom;
		background-size: 100%;
	}
}
</style>