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

<template>
	<div class="change-btn">
		<el-button type="primary" @click="changeScreen">切换大屏</el-button>
	</div>
	<div class="orderBgc" v-if="screenValue == 0">
		<Map2D class="mapStyle" v-if="mapValue == 0"></Map2D>
		<Map3DStyle class="mapStyle" v-if="mapValue == 1"></Map3DStyle>
		<!-- <headerScreen class="topHeader"></headerScreen> -->
		<div class="bottomContent">
			<leftScreen class="leftScreen"></leftScreen>
			<centerScreen class="centerScreen"></centerScreen>
			<rightScreen class="rightScreen"></rightScreen>
		</div>
		<div class="mapChange">
			<div @click="changeMap(0)">地图1</div>
			<div @click="changeMap(1)">地图2</div>
		</div>
		<!-- <div class="borderBottom"></div> -->
	</div>
	<div class="screenTwo" v-if="screenValue == 1">
		<largeScreenTwo></largeScreenTwo>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref } 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";
import Map3DStyle from "./components/Map3DStyle.vue";
import largeScreenTwo from "../largeScreenTwo/index.vue";
const screenValue = ref(0);
const mapValue = ref(0);
const changeMap = (val: any) => {
	mapValue.value = val;
};
const changeScreen = () => {
	screenValue.value = screenValue.value == 0 ? 1 : 0;
};
</script>

<style lang="scss" scoped>
.change-btn {
	margin-bottom: 20px;
}
.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%));
	}
	.mapChange {
		position: absolute;
		left: calc(50% - 132px);
		bottom: 20px;
		display: flex;
		align-items: center;
		div {
			width: 106px;
			height: 36px;
			color: white;
			font-size: 16px;
			line-height: 36px;
			text-align: center;
			cursor: pointer;
		}
		div:first-child {
			background: url("@/assets/images/screenImg/mapImg/mapIcon1.png") no-repeat 0 0;
			background-size: 100% 100%;
			margin-right: 20px;
		}
		div:last-child {
			background: url("@/assets/images/screenImg/mapImg/mapIcon2.png") no-repeat 0 0;
			background-size: 100% 100%;
		}
	}
	.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>