dromara/plus-ui
1
0
Fork 0
mirror of https://gitee.com/JavaLionLi/plus-ui.git synced 2025-10-13 21:30:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

!237 update: tag和菜单栏样式调整，增加圆角和缩进

Browse Source 
Merge pull request !237 from Lau/dev
This commit is contained in:
疯狂的狮子Li
2025-08-19 10:08:57 +00:00
committed by Gitee
parent ab99104240 d23bf73a2e
commit a29d03b231
3 changed files with 51 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/assets/styles/sidebar.scss
View File

@@ -65,7 +65,7 @@
}
.svg-icon {
margin-right: 16px;
margin-right: 10px;
}
.el-menu {
@@ -88,12 +88,16 @@
// menu hover
.theme-dark .sub-menu-title-noDropdown,
.theme-dark .el-sub-menu__title {
border-radius: 8px;
margin: 1px 5px 1px 5px;
&:hover {
background-color: $base-sub-menu-title-hover !important;
}
}
.sub-menu-title-noDropdown,
.el-sub-menu__title {
border-radius: 8px;
margin: 1px 5px 1px 5px;
&:hover {
background-color: rgba(0, 0, 0, 0.05) !important;
}
@@ -105,8 +109,11 @@
& .nest-menu .el-sub-menu > .el-sub-menu__title,
& .el-sub-menu .el-menu-item {
min-width: $base-sidebar-width !important;
&:hover {
min-width: calc($base-sidebar-width - 20px) !important;
border-radius: 8px;
height: 45px;
margin: 1px 8px 1px 8px;
&:not(.is-active):hover {
background-color: rgba(0, 0, 0, 0.1) !important;
}
}
@@ -114,22 +121,47 @@
& .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 !important;
border-radius: 8px;
height: 45px;
margin: 1px 8px 1px 8px;
&:hover {
&.is-active {
background-color: var(--el-menu-active-color) !important;
color: #fff;
}
&:not(.is-active):hover {
// you can use $sub-menuHover
background-color: $base-sub-menu-hover !important;
}
}
& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
& .theme-dark .el-menu-item {
&:hover {
border-radius: 8px;
height: 45px;
margin: 1px 8px 1px 8px;
&.is-active {
background-color: var(--el-menu-active-color) !important;
color: #fff;
}
&:not(.is-active):hover {
// you can use $sub-menuHover
background-color: $base-menu-hover !important;
}
}
& .nest-menu .el-sub-menu > .el-sub-menu__title,
& .el-menu-item {
&:hover {
border-radius: 8px;
height: 45px;
margin: 1px 8px 1px 8px;
&.is-active {
background-color: var(--el-menu-active-color) !important;
color: #fff;
}
&:not(.is-active):hover {
// you can use $sub-menuHover
background-color: rgba(0, 0, 0, 0.04) !important;
}

7
src/assets/styles/variables.module.scss
View File

@@ -1,6 +1,6 @@
// 全局SCSS变量
:root {
--menuBg: #304156;
--menuBg: #1f2d3d;
--menuColor: #bfcbd9;
--menuActiveText: #f4f4f5;
--menuHover: #263445;
@@ -10,6 +10,11 @@
--subMenuHover: #001528;
--subMenuTitleHover: #293444;
// 菜单栏缩进
--el-menu-base-level-padding: 12px;
--el-menu-level-padding: 8px;
--el-menu-item-height: 50px;
--fixedHeaderBg: #ffffff;
--tableHeaderBg: #f8f8f9;
--tableHeaderTextColor: #515a6e;

9
src/layout/components/TagsView/index.vue
View File

@@ -13,7 +13,7 @@
@contextmenu.prevent="openMenu(tag, $event)"
>
<svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon"/>
{{ tag.title }}
<span class="tags-view-item-title">{{ tag.title }}</span>
<span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
<close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
</span>
@@ -253,7 +253,7 @@ onMounted(() => {
position: relative;
cursor: pointer;
height: 26px;
line-height: 23px;
line-height: 25px;
background-color: var(--el-bg-color);
border: 1px solid var(--el-border-color-light);
color: #495060;
@@ -261,6 +261,7 @@ onMounted(() => {
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
border-radius: 4px;
&:hover {
color: var(--el-color-primary);
}
@@ -290,6 +291,10 @@ onMounted(() => {
.tags-view-item.active.has-icon::before {
content: none !important;
}
.tags-view-item-title {
margin-left: 4px;
margin-right: 3px;
}
.contextmenu {
margin: 0;
background: var(--el-bg-color);