feat: nav部分样式修改

src/components/layout/header/HeaderDropdown.vue

@@ -85,7 +85,7 @@ export default {
             <span vOn:click={() => {
               this.$emit('itemClick', {...item, root: {...this.nav}})
             }}
-                  class="pointer gs-hover"
+                  class="pointer link-item gs-hover"
             >{item.name}
             </span>
           </div>)
@@ -114,7 +114,7 @@ export default {
 // 导航item下拉
 .dropdown-menu.gs-nav-dropdown {
   border: none;
-  background: #FFFFFF;
+  background: #ffffff;
   box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
   border-radius: 0px 0px 6px 6px;
   padding: 20px 40px;
@@ -122,7 +122,7 @@ export default {
   .title {
     font-size: 18px;
     font-weight: bold;
-    color: #04408D;
+    color: #04408d;
     line-height: 25px;
     padding-bottom: 10px;
     margin-bottom: 29px;
@@ -143,7 +143,7 @@ export default {
 
   .rect-title {
     font-weight: 500;
-    color: #04408D;
+    color: #04408d;
     line-height: 22px;
     font-size: 16px;
     padding-bottom: 13px;

src/components/layout/header/index.vue

@@ -5,9 +5,9 @@
         <!-- Default Logo -->
         <a class="navbar-brand" href="/Home" aria-label="Front">
           <img
-              class="navbar-brand-logo"
-              src="../../../assets/image/head/logo.png"
-              alt="Logo"
+            class="navbar-brand-logo"
+            src="../../../assets/image/head/logo.png"
+            alt="Logo"
           />
         </a>
         <!-- End Default Logo -->
@@ -19,37 +19,37 @@
               <!-- Nav items-->
               <template v-for="nav in navList">
                 <li
-                    v-if="nav.children && nav.children.length > 0"
-                    class="gs-nav-item nav-item"
-                    :key="nav.id"
-                    :class="{ active: currentNav === nav.id }"
-                    @click="handleNavClick(nav,$event)"
+                  v-if="nav.children && nav.children.length > 0"
+                  class="gs-nav-item nav-item"
+                  :key="nav.id"
+                  :class="{ active: currentNav === nav.id }"
+                  @click="handleNavClick(nav,$event)"
                 >
                   <a
-                      :id="`gs-nav-item-${nav.id}`"
-                      class="nav-link"
-                      aria-current="page"
-                      href="javascript:void(0)"
-                      role="button"
-                      data-bs-toggle="dropdown"
-                      aria-expanded="false"
-                  >{{ nav.name }}</a
+                    :id="`gs-nav-item-${nav.id}`"
+                    class="nav-link"
+                    aria-current="page"
+                    href="javascript:void(0)"
+                    role="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+                    >{{ nav.name }}</a
                   >
 
                   <!-- Dropdown Menu -->
-                  <HeaderDropdown :nav="nav" @itemClick="handleItemClick"/>
+                  <HeaderDropdown :nav="nav" @itemClick="handleItemClick" />
                   <!-- End Dropdown Menu -->
                 </li>
                 <li
-                    v-else
-                    :key="nav.id"
-                    @click="handleNavClick(nav,$event)"
-                    class="gs-nav-item nav-item"
-                    :class="{ active: currentNav === nav.id }"
+                  v-else
+                  :key="nav.id"
+                  @click="handleNavClick(nav,$event)"
+                  class="gs-nav-item nav-item"
+                  :class="{ active: currentNav === nav.id }"
                 >
                   <a class="nav-link" href="javascript:void(0)">{{
                       nav.name
-                    }}</a>
+                  }}</a>
                 </li>
               </template>
 
@@ -60,7 +60,7 @@
         <!-- End Collapse -->
 
         <!-- Button -->
-        <HeaderBtn/>
+        <HeaderBtn />
         <!-- End Button -->
       </nav>
     </div>
@@ -205,6 +205,7 @@ export default {
   .header-btn {
     display: flex;
     align-items: center;
+    margin-left: 15px;
   }
 
   // 导航item样式
@@ -230,8 +231,13 @@ export default {
       font-size: 14px;
       font-weight: bold;
       color: #002c6c;
-      padding: 10px 8px;
-      margin: 0 16px;
+      padding: 10px 15px;
+      // margin: 0 16px;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: #e5f0fc;
+      }
     }
   }
 
@@ -267,22 +273,26 @@ export default {
     margin-left: 0;
     font-size: 0.875rem;
   }
+
+  .link-item {
+    color: #00799e;
+  }
 }
 
 @media (max-width: 1400px) {
   //导航item边距
-  .gs-header-nav .gs-nav-item.nav-item {
-    > a {
-      margin: 0 8px;
-    }
-  }
+  // .gs-header-nav .gs-nav-item.nav-item {
+  //   > a {
+  //     margin: 0 8px;
+  //   }
+  // }
 }
 
 @media (max-width: 1200px) {
   //导航item边距
   .gs-header-nav .gs-nav-item.nav-item {
     > a {
-      margin: 0 2px;
+      padding: 10px 10px;
     }
   }
 }
@@ -300,5 +310,10 @@ export default {
   .navbar-expand-lg.navbar-end .navbar-sticky-top-scroller {
     margin-left: auto;
   }
+
+  // .gs-header-nav .gs-nav-item.nav-item {
+  //   > a {
+  //   }
+  // }
 }
 </style>

src/components/layout/header/mock.js

@@ -544,7 +544,7 @@ export const nav = [
         id: "5",
         name: "资讯中心",
         index: 5,
-        link: "",
+        link: "/News/index",
         children: [
             {
                 id: uuid("gs_nav"),