From d98d62b4149bd7efd7898299925c14058a93fda1 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 29 五月 2025 17:06:27 +0800
Subject: [PATCH] 左侧菜单栏样式修改
---
src/assets/styles/sidebar.scss | 46 ++++++++++++++++++-----
src/layout/components/Sidebar/index.vue | 2
src/assets/styles/variables.module.scss | 6 +-
src/layout/components/Sidebar/SidebarItem.vue | 32 +++++++++++++--
4 files changed, 67 insertions(+), 19 deletions(-)
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index c2f4c4b..3135b4e 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -26,6 +26,7 @@
overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: none;
+ margin: 0 auto;
// reset element-ui css
.horizontal-collapse-transition {
@@ -53,24 +54,29 @@
.is-horizontal {
display: none;
}
-
a {
display: inline-block;
- width: 100%;
+ width: 80px;
+ height: 80px;
overflow: hidden;
+ margin-top: 20px;
}
+
.svg-icon {
- margin-right: 16px;
+ //margin-right: 16px;
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
+ padding: 0 20px !important;
}
.el-menu-item, .menu-title {
+ line-height: 20px;
+ font-size: 14px;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
@@ -83,30 +89,47 @@
// menu hover
.sub-menu-title-noDropdown,
.el-sub-menu__title {
+ border-radius: 10px 10px 10px 10px;
&:hover {
background-color: #ffffff !important;
+ border-radius: 10px 10px 10px 10px;
+ color: $base-menu-color-active !important;
}
}
& .theme-dark .is-active > .el-sub-menu__title {
color: $base-menu-color-active !important;
}
-
+ & .nest-menu > a {
+ right: 20px;
+ position: relative;
+ }
+ & .nest-menu> .el-sub-menu > .el-sub-menu__title {
+ right: 20px;
+ position: relative;
+ }
& .nest-menu .el-sub-menu>.el-sub-menu__title,
& .el-sub-menu .el-menu-item {
- min-width: $base-sidebar-width !important;
+
+ height: 80px;
+ min-width: 80px !important;
+ border-radius: 10px 10px 10px 10px;
&:hover {
background-color: #ffffff !important;
+ border-radius: 10px 10px 10px 10px;
+ color: $base-menu-color-active !important;
}
}
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
& .theme-dark .el-sub-menu .el-menu-item {
background-color: $base-sub-menu-background;
-
+ border-radius: 10px 10px 10px 10px;
&:hover {
background-color: #ffffff !important;
+ border-radius: 10px 10px 10px 10px;
+ color: $base-menu-color-active !important;
}
}
}
@@ -121,14 +144,14 @@
}
.sub-menu-title-noDropdown {
- padding: 0 !important;
+ padding: 0 0 0 20px !important;
position: relative;
.el-tooltip {
padding: 0 !important;
.svg-icon {
- margin-left: 20px;
+ //margin-left: 20px;
}
}
}
@@ -140,7 +163,7 @@
padding: 0 !important;
.svg-icon {
- margin-left: 20px;
+ //margin-left: 20px;
}
}
@@ -205,15 +228,18 @@
.el-menu--vertical {
&>.el-menu {
.svg-icon {
- margin-right: 16px;
+ //margin-right: 16px;
}
}
.nest-menu .el-sub-menu>.el-sub-menu__title,
.el-menu-item {
+ border-radius: 10px 10px 10px 10px;
&:hover {
// you can use $sub-menuHover
background-color: #ffffff !important;
+ border-radius: 10px 10px 10px 10px;
+ color: $base-menu-color-active !important;
}
}
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 13ffa62..678fe0d 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -21,12 +21,12 @@
$menuLightActiveText: #165DFF;
// 鍩虹鍙橀噺
-$base-sidebar-width: 200px;
-$sideBarWidth: 200px;
+$base-sidebar-width: 120px;
+$sideBarWidth: 120px;
// 鑿滃崟鏆楄壊鍙橀噺
$base-menu-color: #bfcbd9;
-$base-menu-color-active: #f4f4f5;
+$base-menu-color-active: #165DFF;
$base-menu-background: #165DFF;
$base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover: #001528;
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 27f987c..4884381 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -2,8 +2,8 @@
<div v-if="!item.hidden">
<template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
- <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
- <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
+ <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }" style="display: flex;flex-direction: column;justify-content: center;height: 80px;padding: 0;width: 80px">
+ <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" style="width: 30px;height: 30px;margin-bottom: 6px"/>
<template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
</el-menu-item>
</app-link>
@@ -11,8 +11,8 @@
<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
<template v-if="item.meta" #title>
- <svg-icon :icon-class="item.meta && item.meta.icon" />
- <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>
+ <svg-icon :icon-class="item.meta && item.meta.icon" style="width: 30px;height: 30px;margin-bottom: 6px"/>
+ <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title}}</span>
</template>
<sidebar-item
@@ -99,5 +99,27 @@
}
</script>
<style scoped>
-
+:deep(.el-sub-menu__title) {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 0 !important;
+ height: 80px;
+ margin-top: 20px;
+}
+:deep(.submenu-title-noDropdown) {
+ padding: 0 !important;
+}
+:deep(.router-link-exact-active) {
+ width: 80px;
+ height: 80px;
+ background: #FFFFFF;
+ border-radius: 10px 10px 10px 10px;
+}
+:deep(.el-sub-menu__icon-arrow) {
+ right: -12px !important;
+ &:hover {
+ color: #ffffff !important;
+ }
+}
</style>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index c472bf3..db83af1 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -4,7 +4,7 @@
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
- :collapse="true"
+ :collapse="false"
:background-color="getMenuBackground"
:text-color="getMenuTextColor"
:unique-opened="true"
--
Gitblit v1.9.3