修改hover效果

src/App.vue

@@ -21,15 +21,6 @@ export default {
       headerFixed: false,
     };
   },
-  mounted() {
-    this.$nextTick(() => {
-      let wow = this.$wow;
-      wow.init();
-    });
-
-  },
-
-
 };
 </script>
 <style lang="scss">

src/components/NavBar/index.vue

@@ -11,11 +11,15 @@
         <div class="tabs wow animate__animated animate__fadeInUp">
           <div
             class="tab-item"
+            :class="{
+              activeHome: currentTab.name == item.name && isHome,
+              active: currentTab.name == item.name && !isHome,
+            }"
             v-for="(item, index) in pages"
             :key="index"
             @click="handleClickTab(item)"
           >
-            <div :class="{ active: currentTab.name == item.name }"></div>
+            <!-- <div ></div> -->
             <router-link :to="item.path">{{ item.name }} </router-link>
           </div>
         </div>
@@ -268,35 +272,56 @@ export default {
           // padding: 15px 50px;
           height: 100%;
           text-align: center;
-          a{
+
+          a {
             font-size: 18px;
             white-space: nowrap;
-          }
-          &::before {
-            transition: all 0.5s cubic-bezier(0.7, -0.5, 0.2, 2);
-            content: "";
-            display: inline-block;
-            width: 0;
-            height: 4px;
-            background: #1d549d;
-            position: absolute;
-            bottom: 24px;
-            left: 0;
+            transition: all 0.5s ease;
           }
 
-          &:hover:before {
-            background: #1d549d;
-            width: 100%;
+          &:hover {
+            a {
+              color: #182f68;
+            }
           }
-
-          .active {
-            width: 100%;
-            height: 4px;
-            background: #1d549d;
-            position: absolute;
-            bottom: 24px;
-            left: 0;
+          .router-link-exact-active {
+            color: #182f68;
           }
+          // .activeHome {
+          //   a {
+          //     color: #2069c4 !important;
+          //   }
+          // }
+          // .active {
+          //   a {
+          //     color: #000 !important;
+          //   }
+          // }
+          // &::before {
+          //   transition: all 0.5s cubic-bezier(0.7, -0.5, 0.2, 2);
+          //   content: "";
+          //   display: inline-block;
+          //   width: 0;
+          //   height: 4px;
+          //   background: #1d549d;
+          //   position: absolute;
+          //   bottom: 24px;
+          //   left: 0;
+          // }
+
+          // &:hover:before {
+          //   background: #1d549d;
+          //   width: 38px;
+          // }
+
+          // .active {
+          //   width: 38px;
+          //   height: 4px;
+          //   background: #1d549d;
+          //   position: absolute;
+          //   bottom: 24px;
+          //   left: 0;
+          // }
         }
       }
     }