更新代码

src/views/layout/pc/header/nav.vue

@@ -49,14 +49,34 @@ onUnmounted(() => {
       background-color="$bg_color"
       router
     >
-      <el-menu-item
-        v-for="item in navList"
-        :key="item.id"
-        :index="item.url"
-        :class="{'is-active': activeIndex === item.url}"
-      >
-        {{ item.label }}
-      </el-menu-item>
+      <template v-for="nav in navList" :key="nav.id">
+        <!-- 有子菜单的情况 -->
+        <el-sub-menu
+          v-if="nav.hasChildren || nav?.children?.length > 0"
+          :index="nav.url"
+          popper-class="pepper"
+        >
+          <template #title>
+            <span>{{ nav.label }}</span>
+          </template>
+          <el-menu-item
+            v-for="child in nav.children"
+            :key="child.id"
+            :index="child.url"
+          >
+            {{ child.label }}
+          </el-menu-item>
+        </el-sub-menu>
+
+        <!-- 无子菜单的情况 -->
+        <el-menu-item
+          v-else
+          :index="nav.url"
+          :class="{'is-active': activeIndex === nav.url}"
+        >
+          {{ nav.label }}
+        </el-menu-item>
+      </template>
     </el-menu>
   </div>
 </template>
@@ -64,15 +84,28 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 /* 菜单容器样式 */
 .el-menu--horizontal {
-  --el-menu-horizontal-height: 101px;
+  --el-menu-horizontal-height: 81px;
+}
+
+::v-deep(.el-sub-menu__title) {
+  font-size: $nav_font_size !important;
+  font-family: 'PingFang SC' !important;
+  font-weight: 400 !important;
+  padding: 0px 25px !important;
+  box-sizing: border-box !important;
+  text-align: center !important;
+
+  i {
+    display: none !important;
+  }
 }
 
 /* 菜单项基础样式 */
 .el-menu-item {
-  font-family: 'PingFang SC';
   padding: 0 25px;
+  font-family: 'PingFang SC';
   font-weight: 400;
-  font-size: 24px;
+  font-size: $nav_font_size !important;
   line-height: 100%;
   letter-spacing: 0.06em;
   border-bottom: none !important;
@@ -80,7 +113,7 @@ onUnmounted(() => {
 
   /* 激活状态样式 */
   &.is-active {
-    border-bottom: 6px solid #ffffff !important;
+    border-bottom: 2px solid #ffffff !important;
   }
 
   /* 悬停效果 */
@@ -88,4 +121,21 @@ onUnmounted(() => {
     background-color: rgba(255, 255, 255, 0.1) !important;
   }
 }
+
+.pepper {
+  background-color: #ffffff;
+  .el-menu-item {
+    width: 246px !important;
+    height: 50px !important;
+    line-height: 50px !important;
+    box-sizing: border-box !important;
+    font-size: 14px !important;
+    color: $black !important;
+    padding: 5px 0 !important;
+    padding-left: 20px !important;
+    &:hover {
+      background-color: #f4f4f4 !important;
+    }
+  }
+}
 </style>