|
|
@ -1,8 +1,13 @@ |
|
|
|
<template> |
|
|
|
<el-row class="container"> |
|
|
|
<el-col :span="24" class="header"> |
|
|
|
<el-col :span="20" class="logo"> |
|
|
|
VUEADMIN |
|
|
|
<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'"> |
|
|
|
{{collapsed?'':sysName}} |
|
|
|
</el-col> |
|
|
|
<el-col :span="10"> |
|
|
|
<div class="tools" @click.prevent="collapse"> |
|
|
|
<i class="fa fa-align-justify"></i> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4" class="userinfo"> |
|
|
|
<el-dropdown trigger="click"> |
|
|
@ -16,9 +21,10 @@ |
|
|
|
</el-col> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" class="main"> |
|
|
|
<aside> |
|
|
|
<aside :class="collapsed?'menu-collapsed':'menu-expanded'"> |
|
|
|
<!--导航菜单--> |
|
|
|
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" |
|
|
|
unique-opened router> |
|
|
|
unique-opened router v-show="!collapsed"> |
|
|
|
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden"> |
|
|
|
<el-submenu :index="index+''" v-if="!item.leaf"> |
|
|
|
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template> |
|
|
@ -27,6 +33,22 @@ |
|
|
|
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item> |
|
|
|
</template> |
|
|
|
</el-menu> |
|
|
|
<!--导航菜单-折叠后--> |
|
|
|
<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed"> |
|
|
|
<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item"> |
|
|
|
<template v-if="!item.leaf"> |
|
|
|
<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div> |
|
|
|
<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"> |
|
|
|
<li v-for="child in item.children" v-if="!child.hidden" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li> |
|
|
|
</ul> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<li class="el-submenu"> |
|
|
|
<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div> |
|
|
|
</li> |
|
|
|
</template> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</aside> |
|
|
|
<section class="content-container"> |
|
|
|
<div class="grid-content bg-purple-light"> |
|
|
@ -53,6 +75,8 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
sysName:'VUEADMIN', |
|
|
|
collapsed:false, |
|
|
|
sysUserName: '', |
|
|
|
sysUserAvatar: '', |
|
|
|
form: { |
|
|
@ -92,6 +116,13 @@ |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
//折叠导航栏 |
|
|
|
collapse:function(){ |
|
|
|
this.collapsed=!this.collapsed; |
|
|
|
}, |
|
|
|
showMenu(i,status){ |
|
|
|
this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none'; |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
@ -101,6 +132,7 @@ |
|
|
|
this.sysUserName = user.name || ''; |
|
|
|
this.sysUserAvatar = user.avatar || ''; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
@ -115,11 +147,12 @@ |
|
|
|
.header { |
|
|
|
height: 60px; |
|
|
|
line-height: 60px; |
|
|
|
background: #18c79c;//#20a0ff |
|
|
|
background: #20a0ff;//#20a0ff |
|
|
|
color:#fff; |
|
|
|
.userinfo { |
|
|
|
text-align: right; |
|
|
|
padding-right: 35px; |
|
|
|
float: right; |
|
|
|
.userinfo-inner { |
|
|
|
cursor: pointer; |
|
|
|
color:#fff; |
|
|
@ -133,8 +166,14 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
.logo { |
|
|
|
//width:230px; |
|
|
|
height:60px; |
|
|
|
font-size: 22px; |
|
|
|
padding-left:20px; |
|
|
|
padding-right:20px; |
|
|
|
border-color: rgba(238,241,146,0.3); |
|
|
|
border-right-width: 1px; |
|
|
|
border-right-style: solid; |
|
|
|
img { |
|
|
|
width: 40px; |
|
|
|
float: left; |
|
|
@ -144,29 +183,68 @@ |
|
|
|
color:#fff; |
|
|
|
} |
|
|
|
} |
|
|
|
.logo-width{ |
|
|
|
width:230px; |
|
|
|
} |
|
|
|
.logo-collapse-width{ |
|
|
|
width:60px |
|
|
|
} |
|
|
|
.tools{ |
|
|
|
padding: 0px 23px; |
|
|
|
width:14px; |
|
|
|
height: 60px; |
|
|
|
line-height: 60px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
.main { |
|
|
|
display: flex; |
|
|
|
// background: #324057; |
|
|
|
position: absolute; |
|
|
|
top: 60px; |
|
|
|
bottom: 0px; |
|
|
|
overflow: hidden; |
|
|
|
aside { |
|
|
|
flex:0 0 230px; |
|
|
|
width: 230px; |
|
|
|
position: absolute; |
|
|
|
top: 0px; |
|
|
|
bottom: 0px; |
|
|
|
// position: absolute; |
|
|
|
// top: 0px; |
|
|
|
// bottom: 0px; |
|
|
|
.el-menu{ |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
.collapsed{ |
|
|
|
width:60px; |
|
|
|
.item{ |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.content-container { |
|
|
|
// background: #f1f2f7; |
|
|
|
.submenu{ |
|
|
|
position:absolute; |
|
|
|
right: 0px; |
|
|
|
top:0px; |
|
|
|
bottom: 0px; |
|
|
|
left: 230px; |
|
|
|
left:60px; |
|
|
|
z-index:99999; |
|
|
|
height:auto; |
|
|
|
display:none; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.menu-collapsed{ |
|
|
|
flex:0 0 60px; |
|
|
|
width: 60px; |
|
|
|
} |
|
|
|
.menu-expanded{ |
|
|
|
flex:0 0 230px; |
|
|
|
width: 230px; |
|
|
|
} |
|
|
|
.content-container { |
|
|
|
// background: #f1f2f7; |
|
|
|
flex:1; |
|
|
|
// position: absolute; |
|
|
|
// right: 0px; |
|
|
|
// top: 0px; |
|
|
|
// bottom: 0px; |
|
|
|
// left: 230px; |
|
|
|
overflow-y: scroll; |
|
|
|
padding: 20px; |
|
|
|
.breadcrumb-container { |
|
|
|