<template>
|
<div>
|
<el-col :span="24" class="header">
|
<el-col :span="8" class="logo" :class="'logo-width'" >
|
<img src="/static/images/lxzn.png" width="65" height="50" alt="">
|
<div class="">{{collapsed ? '' : sysName}}</div>
|
<div class="alarm">密级：内部<br/>
|
警告：本系统禁止存储、处理、传输涉密信息</div>
|
</el-col>
|
<el-col :span="11">
|
<el-menu class="el-menu-demo"
|
:default-active="activeIndex"
|
router
|
mode="horizontal"
|
@select="handleSelect"
|
background-color="#104AB7"
|
text-color="#fff"
|
active-text-color="#ffd04b">
|
<el-menu-item v-for="item in $router.options.routes" :key="item.path" :index="item.path" v-if="!item.hidden">
|
{{item.name}}</el-menu-item>
|
</el-menu>
|
</el-col>
|
<el-col :span="5" class="userinfo" v-if="this.logined">
|
<el-dropdown trigger="hover">
|
<span class="el-dropdown-link userinfo-inner"><img :src="this.user.sysUserImg!=null?this.user.sysUserImg:'/static/images/small.jpg'"/> {{user.nickname}}</span>
|
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item divided @click.native="password">修改密码</el-dropdown-item>
|
<!-- <el-dropdown-item>设置</el-dropdown-item>-->
|
<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
|
<!--<div class="nav">
|
|
<div class="usermenu" >
|
<span class="el-dropdown-link userinfo-inner"><img :src="this.user.sysUserImg!=null?this.user.sysUserImg:'/static/images/small.jpg'"/></span>
|
欢迎您：{{user.username}}
|
<!–<a href="http://www.xuecheng.com" target="_blank"><i class="el-icon-star-on"></i>首页</a>–>
|
<a href="javascript:;" @click="logout" :loading="editLoading"><i class="el-icon-circle-close"></i>退出</a>
|
</div>
|
</div>-->
|
</el-col>
|
</el-col>
|
</div>
|
</template>
|
<script type="text/javascript">
|
import jwtDecode from 'jwt-decode'
|
import utilApi from '../../common/utils'
|
import * as loginApi from '../../module/home/api/home'
|
export default {
|
data() {
|
return {
|
editLoading:false,
|
sysName: 'DNC系统',
|
user:{
|
userid:'',
|
username: '',
|
userimg: ''
|
},
|
logined:false,
|
collapsed: false,
|
activeIndex:''
|
}
|
},
|
methods: {
|
//退出登录
|
logout () {
|
this.$confirm('确认退出吗?', '提示', {
|
}).then(() => {
|
//跳转到统一登陆
|
this.$router.push({ path: '/logout'})
|
}).catch(() => {});
|
},
|
password (){
|
this.$router.push({ path: '/password'})
|
},
|
refresh_user (){
|
let activeUser= utilApi.getActiveUser();
|
if(activeUser){
|
this.logined = true;
|
this.user = activeUser;
|
}
|
},
|
addClass (index){
|
this.current=index;
|
},
|
handleSelect (index) {
|
this.activeIndex = index;
|
}
|
},
|
mounted() {
|
|
this.refresh_user();
|
}
|
}
|
</script>
|
<style scoped lang="scss">
|
@import '~scss_vars';
|
.nav {
|
-webkit-box-flex: 1;
|
-webkit-flex: 1;
|
-ms-flex: 1;
|
flex: 1;
|
}
|
.el-menu-demo{
|
border: none;
|
}
|
.usermenu {
|
float: right;
|
padding: 0 2em;
|
color:#fff;
|
}
|
.usermenu a {
|
text-decoration: none;
|
margin: 0 0.2em 0 1em;
|
color:inherit;
|
}
|
.container {
|
position: absolute;
|
top: 0px;
|
bottom: 0px;
|
width: 100%;
|
.header {
|
height: 60px;
|
line-height: 60px;
|
background: $color-primary;
|
color: #fff;
|
.userinfo {
|
text-align: right;
|
padding-right: 15px;
|
float: right;
|
.userinfo-inner {
|
cursor: pointer;
|
color: #fff;
|
img {
|
width: 40px;
|
height: 40px;
|
border-radius: 20px;
|
margin: 10px 8px 10px 10px;
|
float: left;
|
}
|
}
|
}
|
.logo {
|
//width:230px;
|
height: 60px;
|
font-size: 20px;
|
padding-left: 0px;
|
padding-right: 20px;
|
border-color: rgba(238, 241, 146, 0.3);
|
border-right-width: 1px;
|
|
img {
|
float: left;
|
margin: 5px;
|
}
|
.alarm{
|
position: absolute;
|
top: 10px;
|
left: 160px;
|
line-height: 20px;
|
font-size: 0.7vw;
|
color: red;
|
}
|
.txt {
|
color: #fff;
|
}
|
}
|
.logo-width {
|
width:450px;
|
}
|
.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;
|
.el-menu {
|
height: 100%;
|
}
|
.collapsed {
|
width: 60px;
|
.item {
|
position: relative;
|
}
|
.submenu {
|
position: absolute;
|
top: 0px;
|
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: #fff;
|
flex: 1;
|
// position: absolute;
|
// right: 0px;
|
// top: 0px;
|
// bottom: 0px;
|
// left: 230px;
|
overflow-y: scroll;
|
padding: 20px;
|
.breadcrumb-container {
|
//margin-bottom: 15px;
|
.title {
|
width: 200px;
|
float: left;
|
color: #475669;
|
}
|
.breadcrumb-inner {
|
float: right;
|
}
|
}
|
.content-wrapper {
|
background-color: #fff;
|
box-sizing: border-box;
|
}
|
}
|
}
|
}
|
</style>
|
