wzp/v3-admin-vite
Template
1
0
Fork 0
mirror of https://github.com/un-pany/v3-admin-vite.git synced 2025-04-21 11:29:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: 优化混合模式下左侧菜单的颜色

Browse Source
This commit is contained in:
pany 2023-07-07 12:21:28 +08:00
parent f9677d9a4a
commit 135cf8fc1e
3 changed files with 13 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/icons/svg/unocss.svg
View File

@ -1,11 +1,5 @@
<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M117.722 167.444C117.722 139.83 140.108 117.444 167.722 117.444V117.444C195.336 117.444 217.722 139.83 217.722 167.444V167.444C217.722 195.058 195.336 217.444 167.722 217.444V217.444C140.108 217.444 117.722 195.058 117.722 167.444V167.444Z"
fill="#fff" fill-opacity="0.6" />
<path
d="M117.722 52.5561C117.722 24.9419 140.108 2.55614 167.722 2.55614V2.55614C195.336 2.55614 217.722 24.9419 217.722 52.5561V97.5561C217.722 100.318 215.483 102.556 212.722 102.556H122.722C119.961 102.556 117.722 100.318 117.722 97.5561V52.5561Z"
fill="#fff" fill-opacity="0.3" />
<path
d="M102.278 167.444C102.278 195.058 79.8922 217.444 52.278 217.444V217.444C24.6637 217.444 2.27796 195.058 2.27796 167.444L2.27796 122.444C2.27796 119.682 4.51654 117.444 7.27796 117.444L97.278 117.444C100.039 117.444 102.278 119.682 102.278 122.444L102.278 167.444Z"
fill="#fff" />
<svg width="220" height="220" viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg">
<path d="M117.444 167.888C117.444 140.273 139.83 117.888 167.444 117.888V117.888C195.058 117.888 217.444 140.273 217.444 167.888V167.888C217.444 195.502 195.058 217.888 167.444 217.888V217.888C139.83 217.888 117.444 195.502 117.444 167.888V167.888Z"/>
<path d="M117.444 53C117.444 25.3858 139.83 3 167.444 3V3C195.058 3 217.444 25.3858 217.444 53V98C217.444 100.761 215.205 103 212.444 103H122.444C119.683 103 117.444 100.761 117.444 98V53Z"/>
<path d="M102 167.888C102 195.502 79.6142 217.888 52 217.888V217.888C24.3858 217.888 2 195.502 2 167.888L2.00001 122.888C2.00001 120.126 4.23859 117.888 7.00001 117.888L97 117.888C99.7614 117.888 102 120.126 102 122.888L102 167.888Z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 996 B

After

Width:  |  Height:  |  Size: 775 B

13
src/layouts/components/Sidebar/index.vue
View File

@ -29,7 +29,11 @@ const activeMenu = computed(() => {
})
const isCollapse = computed(() => !appStore.sidebar.opened)
const isLogo = computed(() => layoutMode.value === "left" && showLogo.value)
const isLeft = computed(() => layoutMode.value === "left")
const isLogo = computed(() => isLeft.value && showLogo.value)
const backgroundColor = computed(() => (isLeft.value ? v3SidebarMenuBgColor : undefined))
const textColor = computed(() => (isLeft.value ? v3SidebarMenuTextColor : undefined))
const activeTextColor = computed(() => (isLeft.value ? v3SidebarMenuActiveTextColor : undefined))
</script>
<template>
@ -39,9 +43,9 @@ const isLogo = computed(() => layoutMode.value === "left" && showLogo.value)
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="v3SidebarMenuBgColor"
:text-color="v3SidebarMenuTextColor"
:active-text-color="v3SidebarMenuActiveTextColor"
:background-color="backgroundColor"
:text-color="textColor"
:active-text-color="activeTextColor"
:unique-opened="true"
:collapse-transition="false"
mode="vertical"
@ -126,7 +130,6 @@ const isLogo = computed(() => layoutMode.value === "left" && showLogo.value)
:deep(.el-sub-menu) {
&.is-active {
.el-sub-menu__title {
color: var(--v3-sidebar-menu-active-text-color) !important;
@include tip-line;
}
}

2
src/styles/variables.css
View File

@ -13,7 +13,7 @@
--v3-sidebar-menu-item-height: 60px;
--v3-sidebar-menu-tip-line-bg-color: var(--el-color-primary);
--v3-sidebar-menu-bg-color: #001428;
--v3-sidebar-menu-hover-bg-color: #ffffff10;
--v3-sidebar-menu-hover-bg-color: #409eff10;
--v3-sidebar-menu-text-color: #c0c4cc;
--v3-sidebar-menu-active-text-color: #ffffff;
/** TagsView 组件 */