|
|
@ -2,20 +2,30 @@ |
|
|
|
<el-row class="panel"> |
|
|
|
<el-col :span="24" class="panel-top"> |
|
|
|
<el-col :span="20" style="font-size:26px;"> |
|
|
|
<img src="../assets/logo4.png" class="logo"> <span>AD<i style="color:#20a0ff">MIN</i></span> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-tooltip class="item tip-logout" effect="dark" content="退出" placement="bottom" style="padding:0px;"> |
|
|
|
<!--<i class="logout" v-on:click="logout"></i>--> |
|
|
|
<i class="fa fa-sign-out" aria-hidden="true" v-on:click="logout"></i> |
|
|
|
</el-tooltip> |
|
|
|
</el-col> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" class="panel-center"> |
|
|
|
<img src="../assets/logo4.png" class="logo"> <span>AD<i style="color:#20a0ff">MIN</i> |
|
|
|
</span> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4" class="rightbar"> |
|
|
|
<el-dropdown trigger="click"> |
|
|
|
<span class="el-dropdown-link" style="color:#c0ccda;cursor: pointer;"><img src="../assets/user.png" class="head"> 张某某 |
|
|
|
</span> |
|
|
|
<el-dropdown-menu slot="dropdown"> |
|
|
|
<el-dropdown-item>我的消息</el-dropdown-item> |
|
|
|
<el-dropdown-item>设置</el-dropdown-item> |
|
|
|
<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item> |
|
|
|
</el-dropdown-menu> |
|
|
|
</el-dropdown> |
|
|
|
<!--<el-tooltip class="item tip-logout" effect="dark" content="退出" placement="bottom" style="padding:0px;"> |
|
|
|
<i class="fa fa-sign-out" aria-hidden="true" v-on:click="logout"></i> |
|
|
|
</el-tooltip>--> |
|
|
|
</el-col> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" class="panel-center"> |
|
|
|
<!--<el-col :span="4">--> |
|
|
|
<aside style="width:230px;"> |
|
|
|
<h5 class="admin"><i class="fa fa-user" aria-hidden="true" style="margin-right:5px;"></i>欢迎系统管理员:测试</h5> |
|
|
|
<!--<el-menu style="border-top: 1px solid #475669;" default-active="/table" class="el-menu-vertical-demo" @open="handleopen" |
|
|
|
<!--<h5 class="admin"> |
|
|
|
<i class="fa fa-user" aria-hidden="true" style="margin-right:5px;"></i>欢迎系统管理员:测试</h5>--> |
|
|
|
<!--<el-menu style="border-top: 1px solid #475669;" default-active="/table" class="el-menu-vertical-demo" @open="handleopen" |
|
|
|
@close="handleclose" @select="handleselect" theme="dark" unique-opened router> |
|
|
|
<el-submenu index="1"> |
|
|
|
<template slot="title"><i class="el-icon-message"></i>导航一</template> |
|
|
@ -30,8 +40,8 @@ |
|
|
|
</el-submenu> |
|
|
|
<el-menu-item index="/page6"><i class="fa fa-line-chart"></i>导航三</el-menu-item> |
|
|
|
</el-menu>--> |
|
|
|
<el-menu style="border-top: 1px solid #475669;" :default-active="currentPath" class="el-menu-vertical-demo" @open="handleopen" |
|
|
|
@close="handleclose" @select="handleselect" theme="dark" unique-opened router> |
|
|
|
<el-menu :default-active="currentPath" 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"> |
|
|
|
<el-submenu :index="index+''" v-if="!item.leaf"> |
|
|
|
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template> |
|
|
@ -39,30 +49,30 @@ |
|
|
|
</el-submenu> |
|
|
|
<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> |
|
|
|
</aside> |
|
|
|
<!--</el-col>--> |
|
|
|
<!--<el-col :span="20" class="panel-c-c">--> |
|
|
|
<section class="panel-c-c"> |
|
|
|
</el-menu> |
|
|
|
</aside> |
|
|
|
<!--</el-col>--> |
|
|
|
<!--<el-col :span="20" class="panel-c-c">--> |
|
|
|
<section class="panel-c-c"> |
|
|
|
<div class="grid-content bg-purple-light"> |
|
|
|
<el-col :span="24" style="margin-bottom:15px;"> |
|
|
|
<strong style="width:200px;float:left;color: #475669;">{{currentPathName}}</strong> |
|
|
|
<el-breadcrumb separator="/" style="float:right;"> |
|
|
|
<el-breadcrumb-item :to="{ path: '/table' }">首页</el-breadcrumb-item> |
|
|
|
<el-breadcrumb-item v-if="currentPathNameParent!=''">{{currentPathNameParent}}</el-breadcrumb-item> |
|
|
|
<el-breadcrumb-item v-if="currentPathName!=''">{{currentPathName}}</el-breadcrumb-item> |
|
|
|
</el-breadcrumb> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" style="background-color:#fff;box-sizing: border-box;"> |
|
|
|
<!--<transition name="fade">--> |
|
|
|
<router-view></router-view> |
|
|
|
<!--</transition>--> |
|
|
|
</el-col> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
<!--</el-col>--> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<strong style="width:200px;float:left;color: #475669;">{{currentPathName}}</strong> |
|
|
|
<el-breadcrumb separator="/" style="float:right;"> |
|
|
|
<el-breadcrumb-item :to="{ path: '/table' }">首页</el-breadcrumb-item> |
|
|
|
<el-breadcrumb-item v-if="currentPathNameParent!=''">{{currentPathNameParent}}</el-breadcrumb-item> |
|
|
|
<el-breadcrumb-item v-if="currentPathName!=''">{{currentPathName}}</el-breadcrumb-item> |
|
|
|
</el-breadcrumb> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" style="background-color:#fff;box-sizing: border-box;"> |
|
|
|
<!--<transition name="fade">--> |
|
|
|
<router-view></router-view> |
|
|
|
<!--</transition>--> |
|
|
|
</el-col> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
<!--</el-col>--> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
@ -70,8 +80,8 @@ |
|
|
|
data() { |
|
|
|
return { |
|
|
|
currentPath: '/table', |
|
|
|
currentPathName:'Table', |
|
|
|
currentPathNameParent:'导航一', |
|
|
|
currentPathName: 'Table', |
|
|
|
currentPathNameParent: '导航一', |
|
|
|
form: { |
|
|
|
name: '', |
|
|
|
region: '', |
|
|
@ -85,27 +95,27 @@ |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
'$route' (to, from) {//监听路由改变 |
|
|
|
this.currentPath=to.path; |
|
|
|
this.currentPathName=to.name; |
|
|
|
this.currentPathNameParent=to.matched[0].name; |
|
|
|
'$route'(to, from) {//监听路由改变 |
|
|
|
this.currentPath = to.path; |
|
|
|
this.currentPathName = to.name; |
|
|
|
this.currentPathNameParent = to.matched[0].name; |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
onSubmit() { |
|
|
|
console.log('submit!'); |
|
|
|
}, |
|
|
|
handleopen(){ |
|
|
|
handleopen() { |
|
|
|
//console.log('handleopen'); |
|
|
|
}, |
|
|
|
handleclose(){ |
|
|
|
handleclose() { |
|
|
|
//console.log('handleclose'); |
|
|
|
}, |
|
|
|
handleselect:function(a,b){ |
|
|
|
handleselect: function (a, b) { |
|
|
|
}, |
|
|
|
//退出登录 |
|
|
|
logout:function(){ |
|
|
|
var _this=this; |
|
|
|
logout: function () { |
|
|
|
var _this = this; |
|
|
|
this.$confirm('确认退出吗?', '提示', { |
|
|
|
//type: 'warning' |
|
|
|
}).then(() => { |
|
|
@ -145,6 +155,19 @@ |
|
|
|
color: #c0ccda; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-top .rightbar{ |
|
|
|
text-align: right; |
|
|
|
padding-right: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-top .rightbar .head{ |
|
|
|
width: 40px; |
|
|
|
height: 40px; |
|
|
|
border-radius: 20px; |
|
|
|
margin: 10px 15px; |
|
|
|
float: right; |
|
|
|
} |
|
|
|
|
|
|
|
.panel-center { |
|
|
|
background: #324057; |
|
|
|
position: absolute; |
|
|
|