修改导航

digital-park-web/digital-park/src/components/Header.vue

@@ -1,10 +1,10 @@
 <!-- 导航 -->
 <template>
-    <div class="header">
+    <div class="header" :class="{'isIndex':isIndex}">
         <div class="wrap">
             <section class="wrap_left">
                 <!-- <img src="@assets/image/index/logo.png" alt="logo" />
-                小昆山数据可视化平台 -->
+                小昆山数据可视化平台-->
                 <!-- <img src="@assets/image/index/logo-n.png" alt="logo" /> -->
                 {{ areaName }}
             </section>
@@ -45,9 +45,19 @@ export default {
             currentAccount: "currentAccount",
         }),
     },
+    watch: {
+        $route: {
+            // $route可以用引号，也可以不用引号  监听的对象
+            handler(to, from) {
+                this.isIndex = to.name == "Index" ? true : false;
+            },
+            immediate: true, // 第一次初始化渲染就可以监听到
+        },
+    },
     data() {
         //这里存放数据
         return {
+            isIndex: false,
             nav: [
                 {
                     name: "园区首页",
@@ -68,8 +78,6 @@ export default {
             ],
         };
     },
-    //监控data中的数据变化
-    watch: {},
     //方法集合
     methods: {
         clickRouter(path) {
@@ -79,10 +87,10 @@ export default {
         },
         // 前往我的企业
         goMyCompany() {
-            let path = '/my-business';
-            console.log(this.currentAccount,'this.currentAccount')
-            if(!this.currentAccount){
-                path = '/login'
+            let path = "/my-business";
+            console.log(this.currentAccount, "this.currentAccount");
+            if (!this.currentAccount) {
+                path = "/login";
             }
             this.$router.push(path);
         },
@@ -90,8 +98,7 @@ export default {
     //生命周期 - 创建完成（可以访问当前this实例）
     created() {},
     //生命周期 - 挂载完成（可以访问DOM元素）
-    mounted() {
-    },
+    mounted() {},
 };
 </script>
 <style lang="scss" scoped>
@@ -103,7 +110,10 @@ export default {
     background: transparent;
     @include flex(row, center, center, wrap);
     @include border-box;
-    background: rgba($color: #000000, $alpha: .3)
+    &.isIndex{
+        background: rgba($color: #000000, $alpha: 0.3);
+    }
+    
 }
 .wrap {
     @include size($wrapWidth, 100%);