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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<template>
<div class="mian-navbar">
<figure>
<h3>物联网综合云平台系统</h3>
</figure>
<div class="navbar">
<div class="navbar-line">
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper el-icon-caret-bottom">
<img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar">
<span>{{user.nickName}}</span>
</div>
<el-dropdown-menu slot="dropdown">
<span style="display:block;" @click="show = true">
<el-dropdown-item>
布局设置
</el-dropdown-item>
</span>
<router-link to="/user/center">
<el-dropdown-item>
个人中心
</el-dropdown-item>
</router-link>
<span style="display:block;" @click="open">
<el-dropdown-item divided>
退出登录
</el-dropdown-item>
</span>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Avatar from '@/assets/images/avatar.png'
export default {
components: {},
data() {
return {
Avatar: Avatar,
dialogVisible: false
}
},
computed: {
...mapGetters([
'user',
'baseApi'
]),
show: {
get() {
return this.$store.state.settings.showSettings
},
set(val) {
this.$store.dispatch('settings/changeSetting', {
key: 'showSettings',
value: val
})
}
}
},
created() {
},
methods: {
open() {
this.$confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.logout()
})
},
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload()
})
}
}
}
</script>
<style lang="scss" scoped>
.mian-navbar{
position:relative;height:6.018vh;width:100%;min-height:60px;
figure{position:absolute;top:0;left:1.562vw;right:9.01vw;height:100%;margin:0;padding:0;
//background:no-repeat top center url('~@/assets/images/layout/top_normal_min.png');background-size:100% 100%;
display:flex;align-items:center;
h3{flex:1;text-align:center;color:#fff;margin-left:6.6vw;font-size:2.0vw;letter-spacing:.4vw;}
}
.navbar{
position:absolute;top:0;right:1.666vw;height:100%;width:7.343vw;
display:flex;align-items:center;justify-content:flex-end;user-select:none;cursor:normal;
.avatar-wrapper{
&:before{position:absolute;right:0;height:auto;width:12px;}
position:relative;display:flex;align-items:center;padding-right:15px;color:#51dbff;font-size:13px;
img{height:26px;width:26px;border-radius:4px;margin-right:4px;border:0;}
span{display:block;max-width:55px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
}
&:focus {
outline: none;
}
}
.errLog-container {
display: inline-block;
vertical-align: top;
}
}
</style>