style:refine sidebar css
This commit is contained in:
Pan
parent
71aa416d71
commit
7451ed6299
|
|
@ -4,17 +4,7 @@
|
|||
min-height: 100%;
|
||||
transition: margin-left 0.28s;
|
||||
margin-left: 180px;
|
||||
}
|
||||
// 侧边栏
|
||||
.hideSidebar {
|
||||
.sidebar-container {
|
||||
width: 36px!important;
|
||||
overflow: inherit;
|
||||
}
|
||||
.main-container {
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
} // 侧边栏
|
||||
.sidebar-container {
|
||||
transition: width 0.28s;
|
||||
width: 180px!important;
|
||||
|
|
@ -28,53 +18,38 @@
|
|||
&::-webkit-scrollbar {
|
||||
display: none
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.sidebar-container>.el-menu {
|
||||
width: 100%!important;
|
||||
min-height: 100%;
|
||||
}
|
||||
.sidebar-container .svg-icon {
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.hideSidebar .el-submenu>.el-submenu__title,
|
||||
.hideSidebar .submenu-title-noDropdown {
|
||||
padding-left: 10px!important;
|
||||
.el-menu {
|
||||
border: none;
|
||||
}
|
||||
.hideSidebar .submenu-title-noDropdown span,
|
||||
.hideSidebar .el-submenu>.el-submenu__title>span {
|
||||
}
|
||||
.hideSidebar {
|
||||
.sidebar-container {
|
||||
width: 36px!important;
|
||||
overflow: inherit;
|
||||
}
|
||||
.main-container {
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
.hideSidebar {
|
||||
.submenu-title-noDropdown {
|
||||
padding-left: 10px!important;
|
||||
position: relative;
|
||||
span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
.hideSidebar .nest-menu .el-submenu__title {
|
||||
text-align: initial!important;
|
||||
padding-left: 20px!important;
|
||||
span {
|
||||
height: auto;
|
||||
width: auto;
|
||||
visibility: visible;
|
||||
display: inline;
|
||||
}
|
||||
.el-submenu__icon-arrow {
|
||||
display: block!important;
|
||||
}
|
||||
}
|
||||
.hideSidebar .menu-wrapper>.el-menu-item,
|
||||
.hideSidebar .submenu-title-noDropdown,
|
||||
.hideSidebar .menu-wrapper>.el-submenu .el-submenu__title {
|
||||
text-align: center;
|
||||
}
|
||||
.hideSidebar .el-menu-item .el-submenu__icon-arrow,
|
||||
.hideSidebar .el-submenu .el-submenu__title .el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
.hideSidebar .submenu-title-noDropdown {
|
||||
position: relative;
|
||||
span {
|
||||
transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
|
||||
opacity: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
&:hover {
|
||||
span {
|
||||
|
|
@ -94,6 +69,27 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.el-submenu {
|
||||
&>.el-submenu__title {
|
||||
padding-left: 10px!important;
|
||||
&>span {
|
||||
display: none;
|
||||
}
|
||||
.el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.nest-menu {
|
||||
.el-submenu__icon-arrow {
|
||||
display: block!important;
|
||||
}
|
||||
span {
|
||||
display: inline-block!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nest-menu .el-submenu>.el-submenu__title,
|
||||
.el-submenu .el-menu-item {
|
||||
min-width: 180px!important;
|
||||
background-color: #2B2C2D!important;
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@
|
|||
</el-menu>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import SidebarItem from './SidebarItem'
|
||||
|
|
|
|||
|
|
@ -5,26 +5,25 @@
|
|||
<router-link v-if="!item.hidden&&item.children&&item.children.length===1" :to="item.path+'/'+item.children[0].path" :key='item.children[0].name'>
|
||||
<el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown'>
|
||||
<svg-icon v-if='item.children[0].meta&&item.children[0].meta.icon' :icon-class="item.children[0].meta.icon"></svg-icon>
|
||||
<span>{{item.children[0].meta?generateTitle(item.children[0].meta.title):'no title'}}</span>
|
||||
<span v-if='item.children[0].meta&&item.children[0].meta.title'>{{generateTitle(item.children[0].meta.title)}}</span>
|
||||
</el-menu-item>
|
||||
</router-link>
|
||||
|
||||
<el-submenu :index="item.name" v-if="item.children&&item.children.length>1&&!item.hidden" :key='item.name'>
|
||||
<el-submenu v-if="!item.hidden&&item.children&&item.children.length>1" :index="item.name" :key='item.name'>
|
||||
<template slot="title">
|
||||
<svg-icon v-if='item.meta&&item.meta.icon' :icon-class="item.meta.icon"></svg-icon>
|
||||
<span>{{item.meta?generateTitle(item.meta.title):'no title'}}</span>
|
||||
<span v-if='item.meta&&item.meta.title'>{{generateTitle(item.meta.title)}}</span>
|
||||
</template>
|
||||
<template v-for="child in item.children" v-if='!child.hidden'>
|
||||
|
||||
<sidebar-item class='nest-menu' v-if='child.children&&child.children.length>0' :routes='[child]' :key='child.path'> </sidebar-item>
|
||||
<template v-if='!child.hidden' v-for="child in item.children">
|
||||
<sidebar-item class='nest-menu' v-if='child.children&&child.children.length>0' :routes='[child]' :key='child.path'></sidebar-item>
|
||||
|
||||
<router-link v-else :to="item.path+'/'+child.path" :key='child.name'>
|
||||
<el-menu-item :index="item.path+'/'+child.path">
|
||||
<svg-icon v-if='child.meta&&child.meta.icon' :icon-class="child.meta.icon"></svg-icon>
|
||||
<span v-if='child.meta' >{{generateTitle(child.meta.title)}}</span>
|
||||
<span v-if='child.meta&&child.meta.title'>{{generateTitle(child.meta.title)}}</span>
|
||||
</el-menu-item>
|
||||
</router-link>
|
||||
|
||||
</template>
|
||||
</el-submenu>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue