|
|
1
2
|
<template>
<div class="navbar">
|
|
|
3
4
5
6
7
|
<hamburger
:is-active="sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar"
/>
|
|
|
8
9
10
11
12
13
|
<breadcrumb class="breadcrumb-container" />
<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
|
|
|
14
|
<span style="margin-right: 10px">{{ name }}</span>
|
|
|
15
16
|
<!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> -->
<!-- <div icon="el-icon-user-solid" class="user-avatar"></div> -->
|
|
|
17
|
<i class="el-icon-user-solid user-avatar" />
|
|
|
18
|
<i class="el-icon-caret-bottom" />
|
|
|
19
20
|
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
|
|
|
21
|
<!-- <router-link to="/">
|
|
|
22
23
24
|
<el-dropdown-item>
Home
</el-dropdown-item>
|
|
|
25
|
</router-link> -->
|
|
|
26
|
<el-dropdown-item divided @click.native="logout">
|
|
|
27
|
<span style="display: block">{{ $gl("logOut") }}</span>
|
|
|
28
29
30
31
32
33
34
35
|
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
|
|
|
36
37
38
|
import Breadcrumb from "@/components/Breadcrumb";
import Hamburger from "@/components/Hamburger";
import { mapGetters } from "vuex";
|
|
|
39
40
|
export default {
|
|
|
41
|
data() {
|
|
|
42
|
return {};
|
|
|
43
|
},
|
|
|
44
45
|
components: {
Breadcrumb,
|
|
|
46
|
Hamburger,
|
|
|
47
48
|
},
computed: {
|
|
|
49
|
...mapGetters(["sidebar", "avatar", "name"]),
|
|
|
50
51
52
|
},
methods: {
toggleSideBar() {
|
|
|
53
|
this.$store.dispatch("app/toggleSideBar");
|
|
|
54
55
|
},
async logout() {
|
|
|
56
57
58
59
60
61
|
window.$currentLang = "zh";
await this.$store.dispatch("user/logout");
this.$router.push(`/login?redirect=${this.$route.fullPath}`);
},
},
};
|
|
|
62
63
64
65
66
67
68
69
|
</script>
<style lang="scss" scoped>
.navbar {
height: 50px;
overflow: hidden;
position: relative;
background: #fff;
|
|
|
70
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
|
|
71
72
73
74
75
76
|
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
|
|
|
77
78
|
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
|
|
|
79
80
|
&:hover {
|
|
|
81
|
background: rgba(0, 0, 0, 0.025);
|
|
|
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
|
}
}
.breadcrumb-container {
float: left;
}
.right-menu {
float: right;
height: 100%;
line-height: 50px;
&:focus {
outline: none;
}
.right-menu-item {
display: inline-block;
padding: 0 8px;
height: 100%;
font-size: 18px;
color: #5a5e66;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
|
|
|
108
|
transition: background 0.3s;
|
|
|
109
110
|
&:hover {
|
|
|
111
|
background: rgba(0, 0, 0, 0.025);
|
|
|
112
113
114
115
116
117
118
119
|
}
}
}
.avatar-container {
margin-right: 30px;
.avatar-wrapper {
|
|
|
120
|
// margin-top: 5px;
|
|
|
121
|
position: relative;
|
|
|
122
123
124
125
|
display: flex;
align-items: center;
font-size: 14pt;
font-weight: bold;
|
|
|
126
127
128
|
.user-avatar {
cursor: pointer;
|
|
|
129
130
|
// width: 40px;
// height: 40px;
|
|
|
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
border-radius: 10px;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
}
}
}
}
}
</style>
|
