|
|
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
|
<breadcrumb class="breadcrumb-container" />
<div class="right-menu">
|
|
|
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<el-dropdown class="avatar-container" trigger="click" style="margin: 0 5px;">
<div class="avatar-wrapper">
<!-- <span style="margin-right: 10px;">选择语言</span> -->
<span class="lang">
<svg-icon icon-class="language" />
</span>
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link to="/">
<el-dropdown-item>
中文
</el-dropdown-item>
<el-dropdown-item>
日文
</el-dropdown-item>
</router-link>
</el-dropdown-menu>
</el-dropdown>
|
|
|
33
34
|
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
|
|
|
35
|
<span style="margin-right: 10px">{{ name }}</span>
|
|
|
36
37
|
<!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> -->
<!-- <div icon="el-icon-user-solid" class="user-avatar"></div> -->
|
|
|
38
|
<i class="el-icon-user-solid user-avatar" />
|
|
|
39
|
<i class="el-icon-caret-bottom" />
|
|
|
40
41
|
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
|
|
|
42
|
<router-link to="/">
|
|
|
43
|
<el-dropdown-item>
|
|
|
44
|
<span>版本</span>
|
|
|
45
|
</el-dropdown-item>
|
|
|
46
|
</router-link>
|
|
|
47
|
<el-dropdown-item divided @click.native="logout">
|
|
|
48
|
<span style="display: block">{{ $gl("logOut") }}</span>
|
|
|
49
50
51
52
53
54
55
56
|
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
|
|
|
57
58
59
60
|
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import { mapGetters } from 'vuex'
|
|
|
61
62
63
64
|
export default {
components: {
Breadcrumb,
|
|
|
65
|
Hamburger,
|
|
|
66
67
68
69
|
Screenfull
},
data() {
return {}
|
|
|
70
71
|
},
computed: {
|
|
|
72
|
...mapGetters(['sidebar', 'avatar', 'name'])
|
|
|
73
74
75
|
},
methods: {
toggleSideBar() {
|
|
|
76
|
this.$store.dispatch('app/toggleSideBar')
|
|
|
77
78
|
},
async logout() {
|
|
|
79
80
81
82
83
84
|
window.$currentLang = 'zh'
await this.$store.dispatch('user/logout')
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
}
}
}
|
|
|
85
86
87
88
89
90
91
92
|
</script>
<style lang="scss" scoped>
.navbar {
height: 50px;
overflow: hidden;
position: relative;
background: #fff;
|
|
|
93
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
|
|
94
95
96
97
98
99
|
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
|
|
|
100
101
|
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
|
|
|
102
103
|
&:hover {
|
|
|
104
|
background: rgba(0, 0, 0, 0.025);
|
|
|
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
}
}
.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;
|
|
|
127
|
// vertical-align: text-bottom;
|
|
|
128
129
130
|
&.hover-effect {
cursor: pointer;
|
|
|
131
|
transition: background 0.3s;
|
|
|
132
133
|
&:hover {
|
|
|
134
|
background: rgba(0, 0, 0, 0.025);
|
|
|
135
136
137
138
139
140
141
142
|
}
}
}
.avatar-container {
margin-right: 30px;
.avatar-wrapper {
|
|
|
143
|
// margin-top: 5px;
|
|
|
144
|
position: relative;
|
|
|
145
146
147
148
|
display: flex;
align-items: center;
font-size: 14pt;
font-weight: bold;
|
|
|
149
150
151
152
153
154
155
156
157
|
span.lang{
display: block;
height: 100%;
padding: 0 10px;
}
span.lang:hover{
cursor: pointer;
background: #f9f9f9;
}
|
|
|
158
159
|
.user-avatar {
cursor: pointer;
|
|
|
160
161
|
// width: 40px;
// height: 40px;
|
|
|
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
|
border-radius: 10px;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
}
}
}
}
}
</style>
|
