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.
121 lines
2.7 KiB
121 lines
2.7 KiB
<template> |
|
<div class="header"> |
|
<div v-if="this.$route.path=='/setting/person'" class="goBack" @click="back"><i class="el-icon-arrow-left"></i>返回</div> |
|
<template v-else> |
|
<img class="logo hh" v-if="isHh" src="@/assets/img/logo-hh.png" /> |
|
<img class="logo" v-else src="@/assets/img/logo.png"> |
|
</template> |
|
<div class="header-right"> |
|
<div class="header-user-con"> |
|
<div class="user" @click="toPersonal"> |
|
<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="logout">退出</el-button> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
<script> |
|
import { mapState, mapActions } from 'vuex' |
|
import util from '@/libs/util' |
|
import Setting from '@/setting' |
|
export default { |
|
data() { |
|
return { |
|
isHh: Setting.isHh, |
|
}; |
|
}, |
|
computed: { |
|
...mapState('user', [ |
|
'avatar','userName' |
|
]), |
|
}, |
|
mounted(){ |
|
|
|
}, |
|
methods: { |
|
...mapActions('user', [ |
|
'logout' |
|
]), |
|
toPersonal(){ |
|
this.$router.push('/setting/person') |
|
}, |
|
back(){ |
|
if(this.$route.path == '/addassessment'){ |
|
this.$router.push({ path: '/teacherhome', query: { active: true }}) |
|
}else{ |
|
this.$router.go(-1) |
|
} |
|
} |
|
}, |
|
}; |
|
</script> |
|
<style scoped lang="scss"> |
|
.goBack{ |
|
cursor: pointer; |
|
line-height: 60px; |
|
height: 60px; |
|
font-size: 16px; |
|
font-weight: bold; |
|
margin-left: 20px; |
|
} |
|
.goBack i{ |
|
color: #9278ff; |
|
font-size: 20px; |
|
} |
|
.header { |
|
position: relative; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
box-sizing: border-box; |
|
width: 100%; |
|
height: 60px; |
|
font-size: 16px; |
|
color: #333; |
|
} |
|
.header .logo { |
|
width: 150px; |
|
margin-left: 20px; |
|
&.hh{ |
|
width: 500px; |
|
} |
|
} |
|
.header-right { |
|
padding-right: 50px; |
|
} |
|
.header-user-con { |
|
display: flex; |
|
align-items: center; |
|
|
|
.user{ |
|
display: inline-flex; |
|
align-items: center; |
|
cursor: pointer; |
|
} |
|
} |
|
.user-avator { |
|
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>
|
|
|