更新代码

src/views/layout/pc/footer/components/logo.vue

@@ -6,8 +6,6 @@ onMounted(() => {})
 <template>
   <div class="logo flex column j-s">
     <img class="logo-img" src="/static/images/footer/logo.png" />
-    <div class="logo-CN">燃谷科技</div>
-    <div class="logo-EN">RANGUTECH</div>
   </div>
 </template>
 
@@ -19,22 +17,8 @@ onMounted(() => {})
   color: $white;
 
   .logo-img {
-    width: 204px;
-    height: 204px;
-  }
-  .logo-CN {
-    font-family: 'HYDaHeiJ';
-    font-weight: 400;
-    font-style: 'normal';
-    font-size: 38px;
-    letter-spacing: 0.1em;
-  }
-  .logo-EN {
-    font-family: 'HYZhongHeiJ';
-    font-weight: 400;
-    font-style: 'normal';
-    font-size: 24px;
-    letter-spacing: 0.23em;
+    width: 140px;
+    height: 209px;
   }
 }
 </style>

src/views/layout/pc/footer/components/navNode.vue

@@ -35,7 +35,7 @@ const onClick = (url) => emits('navClick', url)
   .item-label {
     font-family: 'PingFang SC';
     font-weight: 400;
-    font-size: 24px;
+    font-size: $nav_font_size;
     color: $white;
     user-select: auto;
     cursor: pointer;
@@ -55,7 +55,7 @@ const onClick = (url) => emits('navClick', url)
     .item-label {
       font-family: 'PingFang SC';
       font-weight: 400;
-      font-size: 20px;
+      font-size: 14px;
       color: #999999;
     }
   }

src/views/layout/pc/footer/index.vue

@@ -34,19 +34,21 @@ const toMIIF = () => {
 <style lang="scss" scoped>
 .page {
   background-color: $bg_color;
+  $top: 58px;
+
   position: relative;
   #logo {
     width: 220px;
     height: 300px;
     position: absolute;
-    top: 58px;
+    top: 43px;
     left: 190px;
   }
   #nav {
     width: calc(100% - 410px - 380px);
     position: absolute;
     left: 410px;
-    top: 87px;
+    top: $top;
     padding: 0 90px 0 55px;
     box-sizing: border-box;
   }
@@ -54,7 +56,7 @@ const toMIIF = () => {
     width: 150px;
     height: 150px;
     position: absolute;
-    top: 87px;
+    top: $top;
     right: 180px;
   }
   #MIIT-Filing {

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

@@ -18,15 +18,15 @@ onMounted(() => {})
     background-image: url('/static/images/header/logo.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    width: 173px;
-    height: 72px;
+    width: 164px;
+    height: 56px;
     position: absolute;
     left: 160px;
   }
 
   .nav {
     width: 1000px;
-    height: 100px;
+    height: $header_nav_height;
     position: absolute;
     right: 160px;
     overflow-y: hidden;

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>