1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<template>
<div class="header">
<div class="logo">商保管理系统</div>
<div class="user-info">
<p class="name"><Icon :name="'ssicb'" :size="24" />{{ userInfo.name }}</p>
<a-dropdown
class="avator"
:getPopupContainer="getPopupContainer"
placement="bottomRight"
>
<div @click="(e) => e.preventDefault()">
<img v-if="userInfo.avator" :src="userInfo.avator" alt="avator" />
<Icon v-else :name="'ssiuser'" :size="36" />
</div>
<a-menu slot="overlay">
<a-menu-item key="1" @click="loginOut"> 退出登录 </a-menu-item>
</a-menu>
</a-dropdown>
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
return {};
},
computed: {
...mapState({
userInfo: (state) => state.common.userInfo,
}),
},
methods: {
getPopupContainer() {
return document.querySelector(".avator");
},
loginOut() {
this.$apis.LOGINOUT().then((res) => {
if (res.returnCode) {
this.$router.push("/login");
} else {
this.$message.error(res.returnMsg || "退出失败");
}
});
},
},
};
</script>
<style lang="less" scoped>
.header {
position: fixed;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
color: #252631;
background-color: #fff;
border-bottom: 1px solid #eef1f3;
z-index: 1;
.logo {
.w(242);
.fs(18);
.pa(20, 44, 20, 44);
.lh(25);
font-weight: bold;
border-right: 2px solid #eef1f3;
}
.user-info {
.fs(14);
.lh(20);
display: flex;
align-items: center;
color: #778ca2;
.name .icon-class {
.mg-r(12);
}
.avator {
.w-n(32);
.h-n(32);
.mg-f(0, 24, 0, 24);
border-radius: 50%;
img {
width: 100%;
}
}
}
}
</style>