style: 微调样式

resources/admin/layout/components/Menu/menus.vue

@@ -1,16 +1,16 @@
 <template>
   <el-menu
-      :default-active="appStore.getActiveMenu"
-      background-color="var(--sider-menu-bg-color)"
-      active-text-color="var(--sider-ment-active-text-color)"
-      text-color="var(--sider-menu-text-color)"
-      :collapse="!appStore.isExpand"
-      :collapse-transition="false"
-      :router="true"
-      @select="selectMenu"
-      :unique-opened="true"
+    :default-active="appStore.getActiveMenu"
+    background-color="var(--sider-menu-bg-color)"
+    active-text-color="var(--sider-ment-active-text-color)"
+    text-color="var(--sider-menu-text-color)"
+    :collapse="!appStore.isExpand"
+    :collapse-transition="false"
+    :router="true"
+    @select="selectMenu"
+    :unique-opened="true"
   >
-    <slot/>
+    <slot />
   </el-menu>
 </template>
 <script lang="ts" setup name="menus">
@@ -30,14 +30,6 @@ const selectMenu = (index: string) => {
   border-right: none;
 }
 
-:deep(.el-menu--inline) {
-  @apply pt-1 pb-2;
-}
-
-:deep(.ct-menu-item) {
-  @apply mt-1;
-}
-
 :deep(.is-active) {
   background-color: var(--side-active-menu-bg-color) !important;
 }
@@ -62,5 +54,16 @@ const selectMenu = (index: string) => {
 
 :deep(.el-menu-item:hover) {
   background-color: var(--sider-sub-menu-hover-bg-color) !important;
+  border-right: 3px solid;
+  border-right-color: var(--el-color-primary);
 }
-</style>
+
+:deep(.el-menu-item.is-active) {
+  border-right: 3px solid;
+  border-right-color: var(--el-color-primary);
+}
+
+:deep(.el-menu-item) {
+  height: 50px !important;
+}
+</style>