feat: 首页菜单样式修改

src/components/common/CommonHeader.vue

@@ -4,7 +4,7 @@
       <!-- <div>logo</div> -->
       <div class="flex flex-1 justify-start">
         <div v-if="route.name === 'home'" class="mr-7 flex w-[224px] items-center">
-          <img class="w-[123px] h-[33px]" src="@/assets/images/nav-logo.png" alt="" />
+          <img class="h-[33px] w-[123px]" src="@/assets/images/nav-logo.png" alt="" />
           <div
             class="city-space ml-4 flex items-center"
             @mouseenter="changeCityStatus(1)"
@@ -21,6 +21,7 @@
         </div>
         <ElMenu
           class="!border-none"
+          :class="{ 'no-select': route.name === 'home' }"
           mode="horizontal"
           :default-active="currentPath"
           :ellipsis="false"
@@ -49,7 +50,10 @@
           </template>
         </ElMenu>
       </div>
-      <div class="flex items-center pr-[56px] text-base text-[#333333]" :style="{color: route.name === 'home'? 'white': '#333' }">
+      <div
+        class="flex items-center pr-[56px] text-base text-[#333333]"
+        :style="{ color: route.name === 'home' ? 'white' : '#333' }"
+      >
         <div>
           <div v-if="userInfo" class="flex items-center">
             <ElDropdown
@@ -95,8 +99,15 @@
             <span @click="handleLogin('register')">注册</span>
           </div>
         </div>
-        <div class="ml-4 flex items-center text-base font-medium text-[#C0322B]" :style="{color: route.name === 'home'? 'white': '#C0322B' }">
-          <img v-if="route.name === 'home'" class="mr-2 h-4 w-4" src="@/assets/images/icon-phone_white.png" />
+        <div
+          class="ml-4 flex items-center text-base font-medium text-[#C0322B]"
+          :style="{ color: route.name === 'home' ? 'white' : '#C0322B' }"
+        >
+          <img
+            v-if="route.name === 'home'"
+            class="mr-2 h-4 w-4"
+            src="@/assets/images/icon-phone_white.png"
+          />
           <img v-else class="mr-2 h-4 w-4" src="@/assets/images/icon-phone_call.png" />
           <span>400-833-0813</span>
         </div>
@@ -112,7 +123,7 @@
           <div
             v-for="cities in cityList"
             :key="cities.label"
-            class="text-[#1a1a1a] mr-[41px] shrink-0 text-base"
+            class="mr-[41px] shrink-0 text-base text-[#1a1a1a]"
           >
             <span class="font-medium">{{ cities.label }}</span>
             <p
@@ -301,6 +312,10 @@ const handleMenuChange = (menu: HeaderMenuItem) => {
     cityInFilter.value && menuRoute.name !== RouteName.home
       ? JSON.stringify({ provinceName: cityInFilter.value.name })
       : undefined;
+  const isNewPage = menuRoute.name === RouteName.industryCategory;
+  if (isNewPage) {
+    console.log(isNewPage);
+  }
   openPage(
     {
       path: menu.path,
@@ -308,38 +323,43 @@ const handleMenuChange = (menu: HeaderMenuItem) => {
         searchParams,
       },
     },
-    menuRoute.name === RouteName.industryCategory,
+    isNewPage,
   );
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .header-view {
   box-shadow: 0 2px 8px 0 rgba(90, 0, 0, 0.1);
   position: relative;
   min-width: 1200px;
   z-index: 100;
-  ::v-deep {
-    .el-menu-item {
-      padding: 0 16px;
+  .el-menu-item {
+    padding: 0 16px;
+  }
+  .el-menu--horizontal > .el-menu-item {
+    color: #333333;
+    // font-weight: 600;
+    font-size: 16px;
+    border: none;
+    &:hover {
+      background-color: #fff;
+      color: #c0322b;
     }
-    .el-menu--horizontal > .el-menu-item {
-      color: #333333;
-      // font-weight: 600;
-      font-size: 16px;
+    &.is-active {
+      border-bottom-color: #fff;
+      color: #c0322b !important;
       &:hover {
-        background-color: #fff;
         color: #c0322b;
       }
     }
-    .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
-      background: #fff;
-    }
-    .el-menu--horizontal > .el-menu-item.is-active {
-      border-bottom-color: #fff;
-      color: #c0322b !important;
+  }
+  .no-select.el-menu--horizontal {
+    .el-menu-item.is-active {
+      color: white !important;
+      background: transparent !important;
     }
-    .el-menu--horizontal > .el-menu-item.is-active:hover {
-      color: #c0322b !important;
+    & > .el-menu-item:hover {
+      color: white !important;
     }
   }
 }
@@ -363,26 +383,23 @@ const handleMenuChange = (menu: HeaderMenuItem) => {
   .city-item:hover {
     color: #c0322b;
   }
-}
-.city-active {
-  color: #c0322b;
-}
-::v-deep .el-dropdown__popper.el-popper.user-menu {
-  top: 43px !important;
-  border: none;
-  border-radius: 0;
-  box-shadow: 0 2px 8px 0 rgba(90, 0, 0, 0.1);
-  &::before {
-    content: '';
-    position: absolute;
-    background-color: #fff;
-    height: 9px;
-    left: -7px;
-    top: -9px;
-    width: 187px;
-  }
-  .el-popper__arrow {
-    display: none;
+  ::v-deep .el-dropdown__popper.el-popper.user-menu {
+    top: 43px !important;
+    border: none;
+    border-radius: 0;
+    box-shadow: 0 2px 8px 0 rgba(90, 0, 0, 0.1);
+    &::before {
+      content: '';
+      position: absolute;
+      background-color: #fff;
+      height: 9px;
+      left: -7px;
+      top: -9px;
+      width: 187px;
+    }
+    .el-popper__arrow {
+      display: none;
+    }
   }
 }
 .home-page_header {