twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-03 13:44:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: 优化导航样式

Browse Source
This commit is contained in:
xiaoxian521 2021-10-23 20:40:32 +08:00
parent 089dea8441
commit 7dcf98a178
3 changed files with 57 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/layout/components/sidebar/sidebarItem.vue
View File

@ -55,19 +55,23 @@ function resolvePath(routePath) {
<el-menu-item <el-menu-item
:index="resolvePath(onlyOneChild.path)" :index="resolvePath(onlyOneChild.path)"
:class="{ 'submenu-title-noDropdown': !isNest }" :class="{ 'submenu-title-noDropdown': !isNest }"
style="display: flex; align-items: center"
> >
<i <i
v-show="props.item.meta.icon"
:class=" :class="
onlyOneChild.meta.icon || (props.item.meta && props.item.meta.icon) onlyOneChild.meta.icon || (props.item.meta && props.item.meta.icon)
" "
/> />
<template #title> <template #title>
<span>{{ $t(onlyOneChild.meta.title) }}</span> <div style="display: flex; align-items: center">
<Icon <span>{{ $t(onlyOneChild.meta.title) }}</span>
v-if="onlyOneChild.meta.extraIcon" <Icon
:svg="onlyOneChild.meta.extraIcon.svg ? true : false" v-if="onlyOneChild.meta.extraIcon"
:content="`${onlyOneChild.meta.extraIcon.name}`" :svg="onlyOneChild.meta.extraIcon.svg ? true : false"
/> :content="`${onlyOneChild.meta.extraIcon.name}`"
/>
</div>
</template> </template>
</el-menu-item> </el-menu-item>
</template> </template>
@ -79,7 +83,7 @@ function resolvePath(routePath) {
popper-append-to-body popper-append-to-body
> >
<template #title> <template #title>
<i :class="props.item.meta.icon"></i> <i v-show="props.item.meta.icon" :class="props.item.meta.icon"></i>
<span>{{ $t(props.item.meta.title) }}</span> <span>{{ $t(props.item.meta.title) }}</span>
<Icon <Icon
v-if="props.item.meta.extraIcon" v-if="props.item.meta.extraIcon"

2
src/layout/components/sidebar/vertical.vue
View File

@ -68,12 +68,14 @@ onBeforeMount(() => {
router router
:collapse-transition="false" :collapse-transition="false"
mode="vertical" mode="vertical"
class="outer-most"
@select="menuSelect" @select="menuSelect"
> >
<sidebar-item <sidebar-item
v-for="route in routeStore.wholeRoutes" v-for="route in routeStore.wholeRoutes"
:key="route.path" :key="route.path"
:item="route" :item="route"
class="outer-most"
:base-path="route.path" :base-path="route.path"
/> />
</el-menu> </el-menu>

44
src/style/sidebar.scss
View File

@ -299,6 +299,11 @@
color: $menuText; color: $menuText;
background-color: $subMenuBg; background-color: $subMenuBg;
span {
font-size: 12px;
margin-left: 10px;
}
&:hover { &:hover {
background-color: $subMenuHover; background-color: $subMenuHover;
} }
@ -306,6 +311,10 @@
.el-sub-menu__title { .el-sub-menu__title {
color: $menuText; color: $menuText;
span {
margin-left: 10px;
}
} }
} }
@ -371,6 +380,11 @@
color: $menuText; color: $menuText;
background-color: $subMenuBg; background-color: $subMenuBg;
span {
font-size: 12px;
margin-left: 10px;
}
&:hover { &:hover {
background-color: $subMenuHover; background-color: $subMenuHover;
} }
@ -378,6 +392,10 @@
.el-sub-menu__title { .el-sub-menu__title {
color: $menuText; color: $menuText;
span {
margin-left: 10px;
}
} }
} }
@ -435,6 +453,32 @@
min-width: $sideBarWidth !important; min-width: $sideBarWidth !important;
} }
// 有子菜单
.el-menu--collapse
.is-active.outer-most.el-sub-menu
> .el-sub-menu__title::before {
position: absolute;
top: 0;
left: 5px;
width: 3px;
height: 100%;
background-color: #1890ff !important;
content: "";
clear: both;
}
// 无子菜单
.el-menu--collapse .is-active.submenu-title-noDropdown.outer-most::before {
position: absolute;
top: 0;
left: 5px;
width: 3px;
height: 100%;
background-color: #1890ff !important;
content: "";
clear: both;
}
// 手机端 // 手机端
.mobile { .mobile {
.fixed-header { .fixed-header {