perf: 优化 NavigationBar CSS

pany-ang · pany-ang · commit ea34a957f095 · 2024-12-10T19:20:32.000+08:00
diff --git a/src/common/components/Notify/index.vue b/src/common/components/Notify/index.vue
@@ -86,10 +86,6 @@ function handleHistory() {
 </template>
 
 <style lang="scss" scoped>
-.notify {
-  margin-right: 10px;
-}
-
 .notify-history {
   text-align: center;
   padding-top: 12px;
diff --git a/src/layouts/components/NavigationBar/index.vue b/src/layouts/components/NavigationBar/index.vue
@@ -46,8 +46,8 @@ function logout() {
       <Screenfull v-if="showScreenfull" class="right-menu-item" />
       <ThemeSwitch v-if="showThemeSwitch" class="right-menu-item" />
       <Notify v-if="showNotify" class="right-menu-item" />
-      <el-dropdown class="right-menu-item">
-        <div class="right-menu-avatar">
+      <el-dropdown>
+        <div class="right-menu-item user">
           <el-avatar :icon="UserFilled" :size="30" />
           <span>{{ userStore.username }}</span>
         </div>
@@ -110,18 +110,21 @@ function logout() {
     height: 100%;
     display: flex;
     align-items: center;
-    .right-menu-item {
-      padding: 0 10px;
+    &-item {
+      margin: 0 10px;
       cursor: pointer;
-      .right-menu-avatar {
-        display: flex;
-        align-items: center;
-        .el-avatar {
-          margin-right: 10px;
-        }
-        span {
-          font-size: 16px;
-        }
+      &:last-child {
+        margin-left: 20px;
+      }
+    }
+    .user {
+      display: flex;
+      align-items: center;
+      .el-avatar {
+        margin-right: 10px;
+      }
+      span {
+        font-size: 16px;
       }
     }
   }
