perf(projects): perf css of base-menu

soybeanjs · Nov 16, 2023 · 4046a8b · 4046a8b
1 parent 76edab3
commit 4046a8b
Showing 1 changed file with 40 additions and 28 deletions.
diff --git a/src/layouts/modules/global-menu/base-menu.vue b/src/layouts/modules/global-menu/base-menu.vue
@@ -90,36 +90,48 @@ function handleClickMenu(menuInfo: MenuInfo) {
   </SimpleScrollbar>
 </template>
 
-<style scoped>
-.menu-wrapper :deep(.ant-menu-inline .ant-menu-item) {
-  width: calc(100% - 16px);
-  margin-inline: 8px;
+<style lang="scss" scoped>
+.menu-wrapper {
+  :deep(.ant-menu-inline) {
+    .ant-menu-item {
+      width: calc(100% - 16px);
+      margin-inline: 8px;
+    }
+  }
+
+  :deep(.ant-menu-inline-collapsed) {
+    > .ant-menu-item {
+      padding-inline: calc(50% - 14px);
+    }
+
+    .ant-menu-item-icon {
+      vertical-align: -0.25em;
+    }
+
+    .ant-menu-submenu-title {
+      padding-inline: calc(50% - 14px);
+    }
+  }
+
+  :deep(.ant-menu-horizontal) {
+    .ant-menu-item {
+      display: flex;
+      align-items: center;
+    }
+
+    .ant-menu-submenu-title {
+      display: flex;
+      align-items: center;
+    }
+  }
 }
 
-.menu-wrapper :deep(.ant-menu-inline-collapsed > .ant-menu-item) {
-  padding-inline: calc(50% - 14px);
-}
-
-.menu-wrapper :deep(.ant-menu-inline-collapsed .ant-menu-item-icon) {
-  vertical-align: -0.25em;
-}
-
-.menu-wrapper :deep(.ant-menu-inline-collapsed .ant-menu-submenu-title) {
-  padding-inline: calc(50% - 14px);
-}
-
-.menu-wrapper :deep(.ant-menu-horizontal .ant-menu-item) {
-  display: flex;
-  align-items: center;
-}
-
-.menu-wrapper :deep(.ant-menu-horizontal .ant-menu-submenu-title) {
-  display: flex;
-  align-items: center;
-}
-
-.select-menu :deep(.ant-menu-inline .ant-menu-item-selected) {
-  background-color: v-bind(selectedBgColor);
+.select-menu {
+  :deep(.ant-menu-inline) {
+    .ant-menu-item-selected {
+      background-color: v-bind(selectedBgColor);
+    }
+  }
 }
 
 .horizontal-menu {