You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.5 KiB
108 lines
2.5 KiB
<template> |
|
<div class="header flex-between"> |
|
<div class="logo"> |
|
<img class="cursor" @click="goHome" src="../assets/img/logo.png"> |
|
</div> |
|
<div class="header-right"> |
|
<div class="header-user-con"> |
|
<div class="user" @click="toPerson"> |
|
<el-avatar :size="40" :src="avatar"></el-avatar> |
|
<span class="user-avator">{{userName}}</span> |
|
</div> |
|
<el-divider class="ml20" direction="vertical"></el-divider> |
|
<el-button type="text" class="ml20" @click="loginout">退出</el-button> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png', |
|
userName: '' |
|
}; |
|
}, |
|
mounted(){ |
|
this.userName || this.getUserInfo() |
|
}, |
|
methods: { |
|
getUserInfo(){ |
|
this.$get(this.api.queryUserInfoDetails).then(res => { |
|
let userInfo = res.result.hrUserInfo |
|
if(userInfo.userAvatars) this.avatar = userInfo.userAvatars |
|
this.userName = userInfo.userName |
|
}).catch(err => {}) |
|
}, |
|
toPerson(){ |
|
this.$router.push('/person') |
|
}, |
|
loginout() { |
|
localStorage.removeItem('ms_username'); |
|
this.$router.push('/login'); |
|
sessionStorage.clear() |
|
|
|
}, |
|
goHome(){ |
|
this.$router.push('/customer') |
|
} |
|
}, |
|
}; |
|
</script> |
|
<style scoped> |
|
.header { |
|
position: relative; |
|
box-sizing: border-box; |
|
width: 100%; |
|
height: 60px; |
|
font-size: 16px; |
|
color: #333; |
|
} |
|
.header .logo { |
|
float: left; |
|
width: 170px; |
|
height: 40px; |
|
margin-left: 20px; |
|
} |
|
.header .logo img{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.header-right { |
|
float: right; |
|
padding-right: 50px; |
|
} |
|
.header-user-con { |
|
display: flex; |
|
height: 70px; |
|
align-items: center; |
|
} |
|
.header-user-con .user{ |
|
display: inline-flex; |
|
align-items: center; |
|
cursor: pointer; |
|
} |
|
.user-avator { |
|
cursor: pointer; |
|
margin-left: 10px; |
|
} |
|
.ml20{ |
|
margin-left: 20px; |
|
} |
|
.user-avator img { |
|
display: block; |
|
width: 40px; |
|
height: 40px; |
|
border-radius: 50%; |
|
} |
|
.header-right .el-button--text{ |
|
color: #333; |
|
} |
|
.header-right .el-divider--vertical{ |
|
width: 2px; |
|
height: 15px; |
|
} |
|
.header-right .el-divider{ |
|
background-color: #333; |
|
} |
|
</style>
|
|
|