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.
56 lines
1.1 KiB
56 lines
1.1 KiB
<template> |
|
<a-dropdown> |
|
<div class="header-avatar" style="cursor: pointer"> |
|
<a-avatar class="avatar" :size="30" shape="circle" :src="user.avatar"/> |
|
<span class="name">{{user.name}}</span> |
|
</div> |
|
<a-menu :class="['avatar-menu']" slot="overlay"> |
|
<a-menu-item> |
|
<a-icon type="user" /> |
|
<span>个人中心</span> |
|
</a-menu-item> |
|
<a-menu-item> |
|
<a-icon type="setting" /> |
|
<span>设置</span> |
|
</a-menu-item> |
|
<a-menu-divider /> |
|
<a-menu-item> |
|
<router-link to="/login"> |
|
<a-icon type="poweroff" /> |
|
<span>退出登录</span> |
|
</router-link> |
|
</a-menu-item> |
|
</a-menu> |
|
</a-dropdown> |
|
</template> |
|
|
|
<script> |
|
import {mapState} from 'vuex' |
|
|
|
export default { |
|
name: 'HeaderAvatar', |
|
computed: { |
|
...mapState('setting', ['weekMode']), |
|
...mapState('account', ['user']), |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less"> |
|
.header-avatar{ |
|
display: inline-flex; |
|
.avatar, .name{ |
|
align-self: center; |
|
} |
|
.avatar{ |
|
margin-right: 8px; |
|
} |
|
.name{ |
|
font-weight: 500; |
|
} |
|
} |
|
.avatar-menu{ |
|
width: 150px; |
|
} |
|
|
|
</style>
|
|
|