no message

src/views/Main/components/ZhHeader.vue

@@ -1,101 +1,153 @@
 <template>
-  <!--标题logo-->
-  <div class="header">
-    <div :class="[yztTitle?'YztTitle':'YztWxzTitle']" @click="slideTitle(YztTitle)"></div>
-	<div :class="[sqTitle?'SqTitle':'SqWxzTitle']" @click="slideTitle(sqTitle)"></div>
-	<div :class="[ggTitie?'GgTitle':'GgWxzTitle']" @click="slideTitle(ggTitie)"></div>
-	<div class="YwTitle"></div>
-  </div>
+	<!--标题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,
-		ggTitie:true,
-		ywTitle:true
+	export default {
+		name: "ZhHeader",
+		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;
+				}
+				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;
+				}
+
+
+			}
+
+		},
 	}
-  },
- methods: {
-	 slideTitle(val){
-		 console.log(val)
-		 if(val==yztTitle){
-			this.yztTitle=!this.yztTitle	 
-		 }
-		
-	 }
-	
- },
- }
-	 
 </script>
 
 <style lang="scss" scoped>
-$fullsize: calc(100% - 0px);
-.header {
-  width: $fullsize;
-  height: $fullsize;
-  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:4%;
-  width: 246rem;
-  height: 54rem;
-  background: url(src/assets/images/yztTitie.png) no-repeat;
-  background-size: 100% 100%;
-  position: absolute;
-}
-.YztWxzTitle{
-	left:10%;
-	top:4%;
-	width: 246rem;
-	height: 54rem;
-	background: url(src/assets/images/yztWxzTitie.png) no-repeat;
-	background-size: 100% 100%;
-	position: absolute;
-}
-.SqTitle{
-	left:23%;
-	top:4%;
-	width: 246rem;
-	height: 54rem;
-	background: url(src/assets/images/sqTitle.png) no-repeat;
-	background-size: 100% 100%;
-	position: absolute;
-}
-.SqWxzTitle{
-	left:23%;
-	top:4%;
-	width: 246rem;
-	height: 54rem;
-	background: url(src/assets/images/sqWxzTitle.png) no-repeat;
-	background-size: 100% 100%;
-	position: absolute;
-}
-.GgTitle{
-	left:67%;
-	top:4%;
-	width: 246rem;
-	height: 54rem;
-	background: url(src/assets/images/ggTitle.png) no-repeat;
-	background-size: 100% 100%;
-	position: absolute;
-}
-.YwTitle{
-	left:80%;
-	top:4%;
-	width: 246rem;
-	height: 54rem;
-	background: url(src/assets/images/ywTitle.png) no-repeat;
-	background-size: 100% 100%;
-	position: absolute;
-}
-</style>
+	$fullsize: calc(100% - 0px);
+
+	.header {
+		width: $fullsize;
+		height: $fullsize;
+		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: 4%;
+		width: 246rem;
+		height: 54rem;
+		background: url(src/assets/images/yztTitie.png) no-repeat;
+		background-size: 100% 100%;
+		position: absolute;
+	}
+
+	.YztXzTitle {
+		left: 10%;
+		top: 4%;
+		width: 246rem;
+		height: 54rem;
+		background: url(src/assets/images/yztXzTitie.png) no-repeat;
+		background-size: 100% 100%;
+		position: absolute;
+	}
+
+	.SqTitle {
+		left: 23%;
+		top: 4%;
+		width: 246rem;
+		height: 54rem;
+		background: url(src/assets/images/sqTitle.png) no-repeat;
+		background-size: 100% 100%;
+		position: absolute;
+	}
+
+	.SqXzTitle {
+		left: 23%;
+		top: 4%;
+		width: 246rem;
+		height: 54rem;
+		background: url(src/assets/images/sqXzTitle.png) no-repeat;
+		background-size: 100% 100%;
+		position: absolute;
+	}
+
+	.GgTitle {
+		left: 67%;
+		top: 4%;
+		width: 246rem;
+		height: 54rem;
+		background: url(src/assets/images/ggTitle.png) no-repeat;
+		background-size: 100% 100%;
+		position: absolute;
+	}
+
+	.GgXzTitle {
+		left: 67%;
+		top: 4%;
+		width: 246rem;
+		height: 54rem;
+		background: url(src/assets/images/ggXzTitle.png) no-repeat;
+		background-size: 100% 100%;
+		position: absolute;
+	}
+
+	.YwTitle {
+		left: 80%;
+		top: 4%;
+		width: 246rem;
+		height: 54rem;
+		background: url(src/assets/images/ywTitle.png) no-repeat;
+		background-size: 100% 100%;
+		position: absolute;
+	}
+
+	.YwXzTitle {
+		left: 80%;
+		top: 4%;
+		width: 246rem;
+		height: 54rem;
+		background: url(src/assets/images/ywXzTitle.png) no-repeat;
+		background-size: 100% 100%;
+		position: absolute;
+	}
+</style>