mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-03-17 03:04:46 +08:00
feat: 修改菜单样式
This commit is contained in:
parent
453ce11464
commit
69f71b653d
@ -25,4 +25,9 @@ const isCollapse = computed((): boolean => menuStore.isCollapse);
|
|||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-left: 25px;
|
margin-left: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.collapse-icon:hover {
|
||||||
|
color: $primary-color;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,11 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<template v-for="subItem in menuList" :key="subItem.path">
|
<template v-for="subItem in menuList" :key="subItem.path">
|
||||||
<el-sub-menu v-if="subItem.children && subItem.children.length > 1" :index="subItem.path">
|
<el-sub-menu
|
||||||
|
v-if="subItem.children && subItem.children.length > 1"
|
||||||
|
:index="subItem.path"
|
||||||
|
popper-class="menu-popper"
|
||||||
|
>
|
||||||
<template #title>
|
<template #title>
|
||||||
<el-icon>
|
<el-icon class="sub-icon">
|
||||||
<SvgIcon :iconName="(subItem.meta?.icon as string)" :className="'svg-icon'"></SvgIcon>
|
<SvgIcon :iconName="(subItem.meta?.icon as string)" :className="'svg-icon'"></SvgIcon>
|
||||||
</el-icon>
|
</el-icon>
|
||||||
<span>{{ $t(subItem.meta?.title as string) }}</span>
|
<span class="sub-span">{{ $t(subItem.meta?.title as string) }}</span>
|
||||||
</template>
|
</template>
|
||||||
<SubItem :menuList="subItem.children" />
|
<SubItem :menuList="subItem.children" />
|
||||||
</el-sub-menu>
|
</el-sub-menu>
|
||||||
|
@ -51,6 +51,7 @@
|
|||||||
span {
|
span {
|
||||||
color: rgba(31, 35, 41, 1);
|
color: rgba(31, 35, 41, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-icon {
|
.el-icon {
|
||||||
color: rgba(31, 35, 41, 1);
|
color: rgba(31, 35, 41, 1);
|
||||||
}
|
}
|
||||||
@ -121,10 +122,28 @@
|
|||||||
height: 44px;
|
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 {
|
.el-menu--collapse {
|
||||||
width: 85px;
|
width: 85px;
|
||||||
|
|
||||||
// margin-right: 10px;
|
|
||||||
}
|
}
|
||||||
|
@ -221,3 +221,9 @@
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.menu-popper {
|
||||||
|
.el-menu--popup-right-start {
|
||||||
|
background-color: rgba(0, 94, 235, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -1,2 +1 @@
|
|||||||
@use './theme.scss';
|
|
||||||
@use 'fit2cloud-ui-plus/src/styles/index.scss';
|
@use 'fit2cloud-ui-plus/src/styles/index.scss';
|
||||||
|
@ -1,10 +0,0 @@
|
|||||||
// $primary-color: #005eeb;
|
|
||||||
// @forward 'element-plus/theme-chalk/src/common/var.scss' with (
|
|
||||||
// $colors: (
|
|
||||||
// 'primary': (
|
|
||||||
// 'base': $primary-color,
|
|
||||||
// ),
|
|
||||||
// )
|
|
||||||
// );
|
|
||||||
|
|
||||||
// @use 'element-plus/theme-chalk/src/common/var.scss' as *;
|
|
Loading…
x
Reference in New Issue
Block a user