You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
2.8 KiB
133 lines
2.8 KiB
<template> |
|
<div class="navbar"> |
|
<hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> |
|
|
|
<breadcrumb class="breadcrumb-container" /> |
|
|
|
<div class="right-menu"> |
|
<el-dropdown class="avatar-container" trigger="click"> |
|
<div class="avatar-wrapper"> |
|
<img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> |
|
<i class="el-icon-caret-bottom" /> |
|
</div> |
|
<el-dropdown-menu slot="dropdown" class="user-dropdown"> |
|
<el-dropdown-item @click.native="logout"> |
|
<span style="display: block">注销登录</span> |
|
</el-dropdown-item> |
|
</el-dropdown-menu> |
|
</el-dropdown> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { mapGetters } from 'vuex' |
|
import Breadcrumb from '@/components/Breadcrumb' |
|
import Hamburger from '@/components/Hamburger' |
|
import store from '@/store' |
|
|
|
import serve from 'api/login.js' |
|
|
|
export default { |
|
components: { |
|
Breadcrumb, |
|
Hamburger |
|
}, |
|
computed: { |
|
...mapGetters(['sidebar', 'avatar']) |
|
}, |
|
methods: { |
|
toggleSideBar() { |
|
this.$store.dispatch('app/toggleSideBar') |
|
}, |
|
logout() { |
|
serve.loginOut().then(res => { |
|
if (res.code === 20000) { |
|
localStorage.removeItem('businessToken') |
|
store.dispatch('user/removeInfo') |
|
this.$router.push('/login') |
|
} |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.navbar { |
|
height: 50px; |
|
overflow: hidden; |
|
position: relative; |
|
background: #fff; |
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); |
|
|
|
.hamburger-container { |
|
line-height: 46px; |
|
height: 100%; |
|
float: left; |
|
cursor: pointer; |
|
transition: background 0.3s; |
|
-webkit-tap-highlight-color: transparent; |
|
|
|
&:hover { |
|
background: rgba(0, 0, 0, 0.025); |
|
} |
|
} |
|
|
|
.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; |
|
transition: background 0.3s; |
|
|
|
&:hover { |
|
background: rgba(0, 0, 0, 0.025); |
|
} |
|
} |
|
} |
|
|
|
.avatar-container { |
|
margin-right: 30px; |
|
|
|
.avatar-wrapper { |
|
margin-top: 5px; |
|
position: relative; |
|
|
|
.user-avatar { |
|
cursor: pointer; |
|
width: 40px; |
|
height: 40px; |
|
border-radius: 10px; |
|
} |
|
|
|
.el-icon-caret-bottom { |
|
cursor: pointer; |
|
position: absolute; |
|
right: -20px; |
|
top: 25px; |
|
font-size: 12px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|