feat: 修改样式

frontend/src/components/app-layout/menu/components/Collapse.vue

@@ -14,8 +14,6 @@ const isCollapse = computed((): boolean => menuStore.isCollapse);
 </script>
 
 <style scoped lang="scss">
-@import '../index.scss';
-
 .collapse {
     height: 47px;
     border-top: 1px solid #e4e7ed;
@@ -24,10 +22,9 @@ const isCollapse = computed((): boolean => menuStore.isCollapse);
 .collapse-icon {
     margin-top: 10px;
     margin-left: 25px;
-}
+    &:hover {
-
-.collapse-icon:hover {
         color: $primary-color;
         cursor: pointer;
     }
+}
 </style>

frontend/src/components/app-layout/menu/components/Logo.vue

@@ -10,5 +10,17 @@ defineProps<{ isCollapse: boolean }>();
 </script>
 
 <style scoped lang="scss">
-@import '../index.scss';
+.logo {
+    box-sizing: border-box;
+    height: 55px;
+    margin: 5px 0;
+    img:first-child {
+        width: 130px;
+        object-fit: contain;
+    }
+    img:nth-child(2) {
+        height: 45px;
+        object-fit: contain;
+    }
+}
 </style>

frontend/src/components/app-layout/menu/index.scss

@@ -1,79 +1,50 @@
-.menu {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background-color: $menu-backgroup-color;
-
-    transition: all 0.3s ease;
-    .logo {
-        box-sizing: border-box;
-        height: 55px;
-        img:first-child {
-            width: 120px;
-            object-fit: contain;
-            margin-right: 8px;
-            margin-top: 10px;
-        }
-        img:nth-child(2) {
-            width: 50px;
-            object-fit: contain;
-            margin-top: 10px;
-            margin-left: 5px;
-        }
-    }
-    .el-scrollbar {
-        height: calc(100% - 55px);
 .el-menu {
-            flex: 1;
-            overflow: auto;
-            overflow-x: hidden;
-            border-right: none;
-        }
-    }
-    .menu-footer {
-        height: 30px;
-        background-color: #c0c0c0;
-        text-align: center;
-    }
-}
-
-.el-menu,
-.el-menu--popup {
-    padding: 4px;
     background: none !important;
-
+    width: 100%;
+    padding: 0 7px;
     .el-menu-item {
         border-radius: 4px !important;
         background-color: $menu-item-backgroup-color;
-        margin: 10px;
+        margin: 6px 0;
-        height: 44px !important;
+        height: 46px !important;
+        box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
+        box-sizing: border-box;
+        min-width: auto;
+        padding-left: 22px;
+
+        // span {
+        //     color: rgba(31, 35, 41, 1);
+        // }
+
+        // .el-icon {
+        //     color: rgba(31, 35, 41, 1);
+        // }
+        &:hover {
+            .el-icon {
+                color: $primary-color;
+            }
 
             span {
-            color: rgba(31, 35, 41, 1);
+                color: $primary-color;
             }
-
-        .el-icon {
-            color: rgba(31, 35, 41, 1);
         }
-
         &.is-active {
             background-color: #ffffff;
 
             border: 2px solid $primary-color;
 
-            span {
+            // span {
-                color: $primary-color;
+            //     color: $primary-color;
-            }
+            // }
 
-            .el-icon {
+            // .el-icon {
-                color: $primary-color;
+            //     color: $primary-color;
-            }
+            // }
 
             &::before {
                 position: absolute;
                 border-radius: 4px;
-                top: 13px;
+                top: 14px;
                 bottom: 15px;
                 left: 12px;
                 width: 4px;
@@ -83,24 +54,7 @@
             }
         }
     }
-
+    .el-sub-menu {
-    :deep(.el-sub-menu) {
-        margin: 10px;
-
-        span {
-            color: rgba(31, 35, 41, 1);
-        }
-        .el-icon {
-            color: rgba(31, 35, 41, 1);
-        }
-
-        .el-sub-menu__title {
-            background-color: $menu-item-backgroup-color !important;
-            height: 44px;
-            border-radius: 4px !important;
-        }
-
-        &.is-opened,
         &.is-active {
             .el-sub-menu__title {
                 span {
@@ -112,19 +66,12 @@
                 }
             }
         }
-
+        .el-sub-menu__title {
-        .el-menu {
             background-color: $menu-item-backgroup-color;
-        }
+            box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
-        .el-menu-item {
-            border-radius: 4px !important;
-            margin-left: 0px !important;
-            min-width: 100% !important;
             height: 44px;
-        }
+            border-radius: 4px !important;
-    }
+            &:hover {
-
-    .el-menu-item:hover {
                 .el-icon {
                     color: $primary-color;
                 }
@@ -133,18 +80,89 @@
                     color: $primary-color;
                 }
             }
-
-    .el-sub-menu:hover {
-        .sub-icon {
-            color: $primary-color;
         }
-
+        .el-menu {
-        .sub-span {
+            padding: 0;
-            color: $primary-color;
+            .el-menu-item {
+                box-shadow: none;
+                padding-left: 35px !important;
+            }
         }
     }
 }
 
-.el-menu--collapse {
+.menu-popper {
-    width: 85px;
+    .el-menu {
+        background-color: $menu-backgroup-color !important;
+        padding: 4px 8px;
     }
+}
+
+// .el-menu--popup {
+// padding: 4px;
+// background: none !important;
+
+// :deep(.el-sub-menu) {
+//     margin: 10px;
+
+//     span {
+//         color: rgba(31, 35, 41, 1);
+//     }
+//     .el-icon {
+//         color: rgba(31, 35, 41, 1);
+//     }
+
+//     .el-sub-menu__title {
+//         background-color: $menu-item-backgroup-color !important;
+//         height: 44px;
+//         border-radius: 4px !important;
+//     }
+
+//     &.is-opened,
+//     &.is-active {
+//         .el-sub-menu__title {
+//             span {
+//                 color: $primary-color;
+//             }
+
+//             .el-icon {
+//                 color: $primary-color;
+//             }
+//         }
+//     }
+
+//     .el-menu {
+//         background-color: $menu-item-backgroup-color;
+//     }
+//     .el-menu-item {
+//         border-radius: 4px !important;
+//         margin-left: 0px !important;
+//         min-width: 100% !important;
+//         height: 44px;
+//     }
+// }
+
+// .el-menu-item:hover {
+//     .el-icon {
+//         color: $primary-color;
+//     }
+
+//     span {
+//         color: $primary-color;
+//     }
+// }
+
+// .el-sub-menu:hover {
+//     .sub-icon {
+//         color: $primary-color;
+//     }
+
+//     .sub-span {
+//         color: $primary-color;
+//     }
+// }
+// }
+
+// .el-menu--collapse {
+//     width: 85px;
+// }

frontend/src/components/app-layout/menu/index.vue

@@ -15,9 +15,7 @@
                 :collapse="isCollapse"
                 :collapse-transition="false"
                 :unique-opened="true"
-                background-color="#191a20"
+                popper-class="menu-popper"
-                text-color="#bdbdc0"
-                active-text-color="#fff"
             >
                 <SubItem :menuList="routerMenus"></SubItem>
                 <el-menu-item>
@@ -97,6 +95,29 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @import './index.scss';
+.menu {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: $menu-backgroup-color;
+    transition: all 0.3s ease;
+
+    .el-scrollbar {
+        height: calc(100% - 55px);
+        .el-menu {
+            flex: 1;
+            overflow: auto;
+            overflow-x: hidden;
+            border-right: none;
+        }
+    }
+    .menu-footer {
+        height: 30px;
+        background-color: #c0c0c0;
+        text-align: center;
+    }
+}
 </style>