|
|
|
@ -1,14 +1,12 @@ |
|
|
|
<template> |
|
|
|
<el-row class="panel"> |
|
|
|
<el-col :span="24" class="panel-top"> |
|
|
|
<el-col :span="20" style="font-size:22px;"> |
|
|
|
<img src="../assets/logo4.png" class="logo"> <span>VUE<i style="color:#20a0ff">ADMIN</i> |
|
|
|
</span> |
|
|
|
<el-row class="container"> |
|
|
|
<el-col :span="24" class="header"> |
|
|
|
<el-col :span="20" class="logo"> |
|
|
|
<img src="../assets/logo4.png" /> <span>VUE<i class="txt">ADMIN</i></span> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4" class="rightbar"> |
|
|
|
<el-col :span="4" class="userinfo"> |
|
|
|
<el-dropdown trigger="click"> |
|
|
|
<span class="el-dropdown-link" style="color:#c0ccda;cursor: pointer;"><img :src="this.sysUserAvatar" class="head"> {{sysUserName}} |
|
|
|
</span> |
|
|
|
<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span> |
|
|
|
<el-dropdown-menu slot="dropdown"> |
|
|
|
<el-dropdown-item>我的消息</el-dropdown-item> |
|
|
|
<el-dropdown-item>设置</el-dropdown-item> |
|
|
|
@ -17,9 +15,8 @@ |
|
|
|
</el-dropdown> |
|
|
|
</el-col> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" class="panel-center"> |
|
|
|
<!--<el-col :span="4">--> |
|
|
|
<aside style="width:230px;"> |
|
|
|
<el-col :span="24" class="main"> |
|
|
|
<aside> |
|
|
|
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" |
|
|
|
theme="dark" unique-opened router> |
|
|
|
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden"> |
|
|
|
@ -31,26 +28,23 @@ |
|
|
|
</template> |
|
|
|
</el-menu> |
|
|
|
</aside> |
|
|
|
<!--</el-col>--> |
|
|
|
<!--<el-col :span="20" class="panel-c-c">--> |
|
|
|
<section class="panel-c-c"> |
|
|
|
<section class="content-container"> |
|
|
|
<div class="grid-content bg-purple-light"> |
|
|
|
<el-col :span="24" style="margin-bottom:15px;"> |
|
|
|
<strong style="width:200px;float:left;color: #475669;">{{$route.name}}</strong> |
|
|
|
<el-breadcrumb separator="/" style="float:right;"> |
|
|
|
<el-col :span="24" class="breadcrumb-container"> |
|
|
|
<strong class="title">{{$route.name}}</strong> |
|
|
|
<el-breadcrumb separator="/" class="breadcrumb-inner"> |
|
|
|
<el-breadcrumb-item v-for="item in $route.matched"> |
|
|
|
{{ item.name }} |
|
|
|
</el-breadcrumb-item> |
|
|
|
</el-breadcrumb> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" style="background-color:#fff;box-sizing: border-box;"> |
|
|
|
<el-col :span="24" class="content-wrapper"> |
|
|
|
<transition> |
|
|
|
<router-view></router-view> |
|
|
|
</transition> |
|
|
|
</el-col> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
<!--</el-col>--> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</template> |
|
|
|
@ -112,43 +106,54 @@ |
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.panel { |
|
|
|
<style scoped lang="scss"> |
|
|
|
.container { |
|
|
|
position: absolute; |
|
|
|
top: 0px; |
|
|
|
bottom: 0px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-top { |
|
|
|
.header { |
|
|
|
height: 60px; |
|
|
|
line-height: 60px; |
|
|
|
background: #1F2D3D; |
|
|
|
color: #c0ccda; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-top .rightbar { |
|
|
|
.userinfo { |
|
|
|
text-align: right; |
|
|
|
padding-right: 35px; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-top .rightbar .head { |
|
|
|
.userinfo-inner { |
|
|
|
color: #c0ccda; |
|
|
|
cursor: pointer; |
|
|
|
img { |
|
|
|
width: 40px; |
|
|
|
height: 40px; |
|
|
|
border-radius: 20px; |
|
|
|
margin: 10px 0px 10px 10px; |
|
|
|
float: right; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-center { |
|
|
|
} |
|
|
|
} |
|
|
|
.logo { |
|
|
|
font-size: 22px; |
|
|
|
img { |
|
|
|
width: 40px; |
|
|
|
float: left; |
|
|
|
margin: 10px 10px 10px 18px; |
|
|
|
} |
|
|
|
.txt { |
|
|
|
color: #20a0ff |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.main { |
|
|
|
background: #324057; |
|
|
|
position: absolute; |
|
|
|
top: 60px; |
|
|
|
bottom: 0px; |
|
|
|
overflow: hidden; |
|
|
|
aside { |
|
|
|
width: 230px; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-c-c { |
|
|
|
.content-container { |
|
|
|
background: #f1f2f7; |
|
|
|
position: absolute; |
|
|
|
right: 0px; |
|
|
|
@ -157,34 +162,22 @@ |
|
|
|
left: 230px; |
|
|
|
overflow-y: scroll; |
|
|
|
padding: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.logout { |
|
|
|
background: url(../assets/logout_36.png); |
|
|
|
background-size: contain; |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
float: left; |
|
|
|
} |
|
|
|
|
|
|
|
.logo { |
|
|
|
width: 40px; |
|
|
|
.breadcrumb-container { |
|
|
|
margin-bottom: 15px; |
|
|
|
.title { |
|
|
|
width: 200px; |
|
|
|
float: left; |
|
|
|
margin: 10px 10px 10px 18px; |
|
|
|
color: #475669; |
|
|
|
} |
|
|
|
|
|
|
|
.tip-logout { |
|
|
|
.breadcrumb-inner { |
|
|
|
float: right; |
|
|
|
margin-right: 20px; |
|
|
|
padding-top: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
.tip-logout i { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.admin { |
|
|
|
color: #c0ccda; |
|
|
|
text-align: center; |
|
|
|
.content-wrapper { |
|
|
|
background-color: #fff; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
taylor
8 years ago
