|
1 | 1 | <template> |
2 | 2 | <div class="navbar"> |
3 | | - <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> |
| 3 | + <hamburger |
| 4 | + id="hamburger-container" |
| 5 | + :is-active="sidebar.opened" |
| 6 | + class="hamburger-container" |
| 7 | + @toggleClick="toggleSideBar" |
| 8 | + /> |
4 | 9 |
|
5 | 10 | <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> |
6 | 11 |
|
|
18 | 23 |
|
19 | 24 | <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> |
20 | 25 | <div class="avatar-wrapper"> |
21 | | - <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar"> |
| 26 | + <img :src="user.avatarPath ? baseApi + '/api/file/download/' + user.avatarPath : Avatar" class="user-avatar"> |
22 | 27 | <i class="el-icon-caret-bottom" /> |
23 | 28 | </div> |
24 | 29 | <el-dropdown-menu slot="dropdown"> |
@@ -106,85 +111,85 @@ export default { |
106 | 111 | </script> |
107 | 112 |
|
108 | 113 | <style lang="scss" scoped> |
109 | | -.navbar { |
110 | | - height: 50px; |
111 | | - overflow: hidden; |
112 | | - position: relative; |
113 | | - background: #fff; |
114 | | - box-shadow: 0 1px 4px rgba(0,21,41,.08); |
115 | | -
|
116 | | - .hamburger-container { |
117 | | - line-height: 46px; |
118 | | - height: 100%; |
119 | | - float: left; |
120 | | - cursor: pointer; |
121 | | - transition: background .3s; |
122 | | - -webkit-tap-highlight-color:transparent; |
123 | | -
|
124 | | - &:hover { |
125 | | - background: rgba(0, 0, 0, .025) |
126 | | - } |
127 | | - } |
128 | | -
|
129 | | - .breadcrumb-container { |
130 | | - float: left; |
131 | | - } |
132 | | -
|
133 | | - .errLog-container { |
134 | | - display: inline-block; |
135 | | - vertical-align: top; |
136 | | - } |
| 114 | + .navbar { |
| 115 | + height: 50px; |
| 116 | + overflow: hidden; |
| 117 | + position: relative; |
| 118 | + background: #fff; |
| 119 | + box-shadow: 0 1px 4px rgba(0, 21, 41, .08); |
| 120 | +
|
| 121 | + .hamburger-container { |
| 122 | + line-height: 46px; |
| 123 | + height: 100%; |
| 124 | + float: left; |
| 125 | + cursor: pointer; |
| 126 | + transition: background .3s; |
| 127 | + -webkit-tap-highlight-color: transparent; |
137 | 128 |
|
138 | | - .right-menu { |
139 | | - float: right; |
140 | | - height: 100%; |
141 | | - line-height: 50px; |
| 129 | + &:hover { |
| 130 | + background: rgba(0, 0, 0, .025) |
| 131 | + } |
| 132 | + } |
142 | 133 |
|
143 | | - &:focus { |
144 | | - outline: none; |
| 134 | + .breadcrumb-container { |
| 135 | + float: left; |
145 | 136 | } |
146 | 137 |
|
147 | | - .right-menu-item { |
| 138 | + .errLog-container { |
148 | 139 | display: inline-block; |
149 | | - padding: 0 8px; |
150 | | - height: 100%; |
151 | | - font-size: 18px; |
152 | | - color: #5a5e66; |
153 | | - vertical-align: text-bottom; |
| 140 | + vertical-align: top; |
| 141 | + } |
154 | 142 |
|
155 | | - &.hover-effect { |
156 | | - cursor: pointer; |
157 | | - transition: background .3s; |
| 143 | + .right-menu { |
| 144 | + float: right; |
| 145 | + height: 100%; |
| 146 | + line-height: 50px; |
158 | 147 |
|
159 | | - &:hover { |
160 | | - background: rgba(0, 0, 0, .025) |
161 | | - } |
| 148 | + &:focus { |
| 149 | + outline: none; |
162 | 150 | } |
163 | | - } |
164 | | -
|
165 | | - .avatar-container { |
166 | | - margin-right: 30px; |
167 | 151 |
|
168 | | - .avatar-wrapper { |
169 | | - margin-top: 5px; |
170 | | - position: relative; |
| 152 | + .right-menu-item { |
| 153 | + display: inline-block; |
| 154 | + padding: 0 8px; |
| 155 | + height: 100%; |
| 156 | + font-size: 18px; |
| 157 | + color: #5a5e66; |
| 158 | + vertical-align: text-bottom; |
171 | 159 |
|
172 | | - .user-avatar { |
| 160 | + &.hover-effect { |
173 | 161 | cursor: pointer; |
174 | | - width: 40px; |
175 | | - height: 40px; |
176 | | - border-radius: 10px; |
| 162 | + transition: background .3s; |
| 163 | +
|
| 164 | + &:hover { |
| 165 | + background: rgba(0, 0, 0, .025) |
| 166 | + } |
177 | 167 | } |
| 168 | + } |
178 | 169 |
|
179 | | - .el-icon-caret-bottom { |
180 | | - cursor: pointer; |
181 | | - position: absolute; |
182 | | - right: -20px; |
183 | | - top: 25px; |
184 | | - font-size: 12px; |
| 170 | + .avatar-container { |
| 171 | + margin-right: 30px; |
| 172 | +
|
| 173 | + .avatar-wrapper { |
| 174 | + margin-top: 5px; |
| 175 | + position: relative; |
| 176 | +
|
| 177 | + .user-avatar { |
| 178 | + cursor: pointer; |
| 179 | + width: 40px; |
| 180 | + height: 40px; |
| 181 | + border-radius: 10px; |
| 182 | + } |
| 183 | +
|
| 184 | + .el-icon-caret-bottom { |
| 185 | + cursor: pointer; |
| 186 | + position: absolute; |
| 187 | + right: -20px; |
| 188 | + top: 25px; |
| 189 | + font-size: 12px; |
| 190 | + } |
185 | 191 | } |
186 | 192 | } |
187 | 193 | } |
188 | 194 | } |
189 | | -} |
190 | 195 | </style> |
0 commit comments