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

<script setup>
	import {
		Store
	} from '@/store/index'
	store = Store()
</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/test">
			<div :class="[sqTitle?'SqTitle':'SqXzTitle']" @click="slideTitle('SqTitle')"></div>
		</router-link>
		
		<div :class="[ywTitle?'YwTitle':'YwXzTitle']" @click="slideTitle('YwTitle')"></div>
	</div>
	<div class="dataTime">
		<DataTime></DataTime>
	</div>
	<div class="weather">
		<weather></weather>
	</div>
</template>

<script>
	import DataTime from "../../Map3d/components/DataTime.vue";
	import weather from "../../Map3d/components/weather.vue"
	let store = undefined;
	
	export default {
		name: "ZhHeader",
		components: {
			DataTime,
			weather
		},
		data() {
			return {
				yztTitle: false,
				sqTitle: true,
				ggTitle: true,
				ywTitle: true
			}
		},
		methods: {
			slideTitle(val) {
				if (val == 'YztTitle') {
					this.yztTitle = false;
					this.sqTitle = true;
					this.ggTitle = true;
					this.ywTitle = true;
					
					setTimeout(res=>{
						store.tabID = 'YztTitle'
					})
					console.log('IDDDD',store.tabID)
				}
				if (val == 'SqTitle') {
					this.sqTitle = false;
					this.yztTitle = true;
					this.ggTitle = true;
					this.ywTitle = true;
					setTimeout(res=>{
						store.tabID = 'SqTitle'
					})
					
					console.log('IDDDD',store.tabID)
				}
				if (val == 'GgTitle') {
					this.ggTitle = false;
					this.yztTitle = true;
					this.sqTitle = true;
					this.ywTitle = true;
					
					setTimeout(res=>{
						store.tabID = 'GgTitle'
					})
					console.log('IDDDD',store.tabID)
				}
				if (val == 'YwTitle') {
					this.ywTitle = false;
					this.yztTitle = true;
					this.sqTitle = true;
					this.ggTitle = true;
					store.tabID = 'YwTitle'
					console.log('IDDDD',store.tabID)
				}
			}

		},
		created(){
			console.log('IDDDD',store.tabID)
			let val = store.tabID
			this.slideTitle(val)
		}
	}
</script>

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

	.header {
		width: 100%;
		height: 90rem;
		background: url('@/assets/images/logo2.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>