<template>
|
<div class="page-header">
|
<div class="page-header-container">
|
<flex-layout direction="row" >
|
<div class="page-header-left" slot="header">
|
<img src="../assets/images/yuanchang_logo.png">
|
<span>蓄电池监控平台</span>
|
</div>
|
<div class="page-header-right" slot="footer">
|
<div class="hdw-avatar">
|
<span class="hdw-avatar-icon">
|
<i class="iconfont el-icon-Userselect"></i>
|
</span>
|
<el-dropdown @command="commandClick">
|
<span class="hdw-avatar-text">
|
{{username}}<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item>密码修改</el-dropdown-item>
|
<el-dropdown-item command="outSystem">安全退出</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
</flex-layout>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
username: sessionStorage.getItem('username'),
|
}
|
},
|
methods: {
|
outSystem() {
|
this.$router.push('/login');
|
},
|
commandClick(name) {
|
switch(name) {
|
case 'outSystem':
|
this.outSystem();
|
break;
|
default:
|
this.$layer.msg('该功能暂未开放！');
|
break;
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.page-header-container {
|
height: 60px;
|
}
|
.page-header-left {
|
line-height: 60px;
|
}
|
.page-header-left img {
|
width: 100px;
|
vertical-align: middle;
|
}
|
.page-header-left span {
|
font-size: 20px;
|
color: #FFFFFF;
|
}
|
.info-banner {
|
display: inline-block;
|
color: #FFFFFF;
|
background-color: blue;
|
}
|
.info-banner-text {
|
display: inline-block;
|
padding-top: 8px;
|
padding-bottom: 8px;
|
}
|
.hdw-avatar {
|
margin-top: 10px;
|
margin-right: 16px;
|
cursor: pointer;
|
color: #e4e3e3;
|
}
|
.hdw-avatar:hover {
|
color: #FFFFFF;
|
}
|
.hdw-avatar:hover .el-icon-arrow-down {
|
transform: rotate(180deg);
|
}
|
.hdw-avatar-icon {
|
display: inline-block;
|
padding: 8px;
|
border-radius: 16px;
|
background-color: #87d068;
|
}
|
.hdw-avatar-icon .iconfont {
|
font-size: 16px;
|
}
|
.hdw-avatar-text {
|
color: #FFFFFF;
|
margin-left: 8px;
|
}
|
.hdw-avatar-text .el-icon-arrow-down {
|
margin-left: 4px;
|
}
|
</style>
|
