JT-CIM-ZHNY/src/views/Main/components/ZhHeader.vue

<script setup>
</script>
<template >
	<!-- 标题logo-->

	<div class="header">

		<router-link to="/home/Map3d">
			<div :class="[ggTitle?'GgTitle':'GgXzTitle']" @click="slideTitle('GgTitle')"></div>
		</router-link>

		<router-link to="/home/table">
			<div :class="[yztTitle?'YztTitle':'YztXzTitle']" @click="slideTitle('YztTitle')"></div>
		</router-link>

		<router-link to="/home/siqing">
			<div :class="[sqTitle?'SqTitle':'SqXzTitle']" @click="slideTitle('SqTitle')"></div>
		</router-link>
		
		<router-link to="/home/yunwei">
			<div :class="[ywTitle?'YwTitle':'YwXzTitle']" @click="slideTitle('YwTitle')"></div>
		</router-link>

	</div>
	<div class="dataTime">
		<DataTime></DataTime>
	</div>
	<div class="weather">
		<weather></weather>
	</div>
</template>

<script>
	import DataTime from "./DataTime.vue";

	import weather from "./weather.vue"

	export default {
		name: "ZhHeader",
		components: {
			DataTime,
			weather
		},
		data() {
			return {
				yztTitle: false,
				sqTitle: true,
				ggTitle: true,
				ywTitle: true,
				isyunwei:true

			}
		},
		methods: {
			slideTitle(val) {
				if (val == 'YztTitle') {
					this.yztTitle = false;
					this.sqTitle = true;
					this.ggTitle = true;
					this.ywTitle = true;

					localStorage.setItem("currenttab", "YztTitle");

				}
				if (val == 'SqTitle') {
					this.sqTitle = false;
					this.yztTitle = true;
					this.ggTitle = true;
					this.ywTitle = true;

					localStorage.setItem("currenttab", "SqTitle");
				}
				if (val == 'GgTitle') {
					this.ggTitle = false;
					this.yztTitle = true;
					this.sqTitle = true;
					this.ywTitle = true;
					localStorage.setItem("currenttab", "GgTitle");
				}
				if (val == 'YwTitle') {
					this.ywTitle = false;
					this.yztTitle = true;
					this.sqTitle = true;
					this.ggTitle = true;
					localStorage.setItem("currenttab", "YwTitle");
				}
			}

		},


		created() {
			let val = localStorage.currenttab
			this.slideTitle(val)
		},
		
	}
</script>

<style lang="scss" scoped>
	$fullsize: calc(100% - 0px);

	.header {
		width: 100%;
		height: 90rem;
		background: url('@/assets/images/ZHNYhome.png') no-repeat;
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		z-index: 999;
	}

	.YztTitle {
		left: 10%;
		top: 40%;
		width: 246rem;
		height: 54rem;
		background: url('@/assets/images/yztTitie.png') no-repeat;
		background-size: 100% 100%;
		position: absolute;
	}

	.YztXzTitle {
		left: 10%;
		top: 40%;
		width: 246rem;
		height: 54rem;
		background: url('@/assets/images/yztXzTitie.png') no-repeat;
		background-size: 100% 100%;
		position: absolute;
	}

	.SqTitle {
		left: 23%;
		top: 40%;
		width: 246rem;
		height: 54rem;
		background: url('@/assets/images/sqTitle.png') no-repeat;
		background-size: 100% 100%;
		position: absolute;
	}

	.SqXzTitle {
		left: 23%;
		top: 40%;
		width: 246rem;
		height: 54rem;
		background: url('@/assets/images/sqXzTitle.png') no-repeat;
		background-size: 100% 100%;
		position: absolute;
	}

	.GgTitle {
		left: 65%;
		top: 40%;
		width: 246rem;
		height: 54rem;
		background: url('@/assets/images/ggTitle.png') no-repeat;
		background-size: 100% 100%;
		position: absolute;
	}

	.GgXzTitle {
		left: 65%;
		top: 40%;
		width: 246rem;
		height: 54rem;
		background: url('@/assets/images/ggXzTitle.png') no-repeat;
		background-size: 100% 100%;
		position: absolute;
	}

	.YwTitle {
		left: 78%;
		top: 40%;
		width: 246rem;
		height: 54rem;
		background: url('@/assets/images/ywTitle.png') no-repeat;
		background-size: 100% 100%;
		position: absolute;
	}

	.YwXzTitle {
		left: 78%;
		top: 40%;
		width: 246rem;
		height: 54rem;
		background: url('@/assets/images/ywXzTitle.png') no-repeat;
		background-size: 100% 100%;
		position: absolute;
	}

	.dataTime {
		left: 92%;
		z-index: 9999;
		width: 150rem;
		height: 120rem;
		position: absolute;
	}

	.weather {
		left: 2%;
		top: 2.5%;
		z-index: 9999;
		width: 150rem;
		height: 120rem;
		position: absolute;
	}
</style>