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

<template>
	<!-- 标题logo-->
	<div class="header">
		<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>
		<router-link to="/home/Map3d">
			<div :class="[ggTitle?'GgTitle':'GgXzTitle']" @click="slideTitle('GgTitle')"></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"

	export default {
		name: "ZhHeader",
		components: {
			DataTime,
			weather
		},
		data() {
			return {
				yztTitle: true,
				sqTitle: true,
				ggTitle: false,
				ywTitle: true
			}
		},
		methods: {
			slideTitle(val) {
				if (val == 'YztTitle') {
					this.yztTitle = false;
					this.sqTitle = true;
					this.ggTitle = true;
					this.ywTitle = true;
				}
				if (val == 'SqTitle') {
					this.sqTitle = false;
					this.yztTitle = true;
					this.ggTitle = true;
					this.ywTitle = true;
				}
				if (val == 'GgTitle') {
					this.ggTitle = false;
					this.yztTitle = true;
					this.sqTitle = true;
					this.ywTitle = true;
				}
				if (val == 'YwTitle') {
					this.ywTitle = false;
					this.yztTitle = true;
					this.sqTitle = true;
					this.ggTitle = true;
				}


			}

		},
	}
</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>