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

<template>
	<!--标题logo-->
	<div class="header">
		<router-link to="/home/Map3d">
			<div :class="[yztTitle?'YztTitle':'YztXzTitle']" @click="slideTitle('YztTitle')"></div>
		</router-link>
		<router-link to="/home/table">
			<div :class="[sqTitle?'SqTitle':'SqXzTitle']" @click="slideTitle('SqTitle')"></div>
		</router-link>
		
		<div :class="[ggTitle?'GgTitle':'GgXzTitle']" @click="slideTitle('GgTitle')"></div>
		<div :class="[ywTitle?'YwTitle':'YwXzTitle']" @click="slideTitle('YwTitle')"></div>
	</div>
</template>

<script>
	export default {
		name: "ZhHeader",
		data() {
			return {
				yztTitle: true,
				sqTitle: true,
				ggTitle: true,
				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: 1920rem;
		height: 90rem;
		background: url(src/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(src/assets/images/yztTitie.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
	}

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

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

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

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

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

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

	.YwXzTitle {
		left: 80%;
		top: 40%;
		width: 246rem;
		height: 54rem;
		background: url(src/assets/images/ywXzTitle.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
	}
</style>