feat: 菜单样式再修改

src/components/common/CommonHeader.vue

@@ -14,7 +14,7 @@
             <img
               class="hover-icon h-3 w-3"
               src="@/assets/images/icon-triangle_white.png"
-              :style="{transform: showCityView ? 'rotate(180deg)': 'rotate(0deg)'}"
+              :style="{ transform: showCityView ? 'rotate(180deg)' : 'rotate(0deg)' }"
               alt=""
             />
           </div>
@@ -62,11 +62,25 @@
               popper-class="user-menu"
               :disabled="route.name === 'home'"
               :teleported="false"
-              @visible-change="(e: boolean) => { !(route.name === 'home' )&& (showUserCenter = e)}"
+              @visible-change="
+                (e: boolean) => {
+                  !(route.name === 'home') && (showUserCenter = e);
+                }
+              "
             >
-              <div class="flex w-[167px] items-center pl-2" @click="()=>{route.name === 'home' && toUserCenter()}">
+              <div
+                class="flex w-[167px] items-center pl-2"
+                @click="
+                  () => {
+                    route.name === 'home' && toUserCenter();
+                  }
+                "
+              >
                 <img src="@/assets/images/icon-avatar.png" class="mr-3 h-[26px] w-[26px]" />
-                <span class="mr-2 cursor-pointer text-base text-[#333333]" :class="route.name !== 'home'?'text-[#333333]':'text-white'">
+                <span
+                  class="mr-2 cursor-pointer text-base text-[#333333]"
+                  :class="route.name !== 'home' ? 'text-[#333333]' : 'text-white'"
+                >
                   {{ userInfo.phone }}
                 </span>
                 <img
@@ -362,28 +376,31 @@ const handleMenuChange = (menu: HeaderMenuItem) => {
       color: white !important;
     }
   }
-}
-.city-space {
-  position: relative;
-  padding-right: 20px;
-  .city {
-    color: #ffffff;
-    line-height: 60px;
-    cursor: pointer;
+  .city-space {
+    position: relative;
+    padding-right: 20px;
+    .city {
+      color: #ffffff;
+      line-height: 60px;
+      cursor: pointer;
+    }
   }
-}
-.city-view {
-  position: absolute;
-  left: calc(600px - 50vw);
-  right: 0;
-  top: 60px;
-  background: rgba(255,255,255,0.9);
-  z-index: 99;
-  width: 100vw;
-  .city-item:hover {
+  .city-view {
+    position: absolute;
+    left: calc(600px - 50vw);
+    right: 0;
+    top: 60px;
+    background: rgba(255, 255, 255, 0.9);
+    z-index: 99;
+    width: 100vw;
+    .city-item:hover {
+      color: #c0322b;
+    }
+  }
+  .city-active {
     color: #c0322b;
   }
-  ::v-deep .el-dropdown__popper.el-popper.user-menu {
+  .el-dropdown__popper.el-popper.user-menu {
     top: 43px !important;
     border: none;
     border-radius: 0;