|
|
|
@ -1,29 +1,22 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="navbar"> |
|
|
|
|
<hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> |
|
|
|
|
<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"> |
|
|
|
|
<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"> |
|
|
|
|
<router-link to="/"> |
|
|
|
|
<el-dropdown-item> |
|
|
|
|
Home |
|
|
|
|
</el-dropdown-item> |
|
|
|
|
</router-link> |
|
|
|
|
<a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/"> |
|
|
|
|
<el-dropdown-item>Github</el-dropdown-item> |
|
|
|
|
</a> |
|
|
|
|
<a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/"> |
|
|
|
|
<el-dropdown-item>Docs</el-dropdown-item> |
|
|
|
|
</a> |
|
|
|
|
<el-dropdown-item divided @click.native="logout"> |
|
|
|
|
<span style="display:block;">Log Out</span> |
|
|
|
|
<el-dropdown-item @click.native="logout"> |
|
|
|
|
<span style="display: block">注销登录</span> |
|
|
|
|
</el-dropdown-item> |
|
|
|
|
</el-dropdown-menu> |
|
|
|
|
</el-dropdown> |
|
|
|
@ -32,31 +25,34 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
|
import Breadcrumb from '@/components/Breadcrumb' |
|
|
|
|
import Hamburger from '@/components/Hamburger' |
|
|
|
|
import { mapGetters } from "vuex"; |
|
|
|
|
import Breadcrumb from "@/components/Breadcrumb"; |
|
|
|
|
import Hamburger from "@/components/Hamburger"; |
|
|
|
|
|
|
|
|
|
import serve from "api/login.js"; |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
Breadcrumb, |
|
|
|
|
Hamburger |
|
|
|
|
Hamburger, |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
...mapGetters([ |
|
|
|
|
'sidebar', |
|
|
|
|
'avatar' |
|
|
|
|
]) |
|
|
|
|
...mapGetters(["sidebar", "avatar"]), |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
toggleSideBar() { |
|
|
|
|
this.$store.dispatch('app/toggleSideBar') |
|
|
|
|
this.$store.dispatch("app/toggleSideBar"); |
|
|
|
|
}, |
|
|
|
|
async logout() { |
|
|
|
|
await this.$store.dispatch('user/logout') |
|
|
|
|
this.$router.push(`/login?redirect=${this.$route.fullPath}`) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
logout() { |
|
|
|
|
serve.loginOut().then((res) => { |
|
|
|
|
if (res.code === 20000) { |
|
|
|
|
localStorage.removeItem("token"); |
|
|
|
|
this.$router.push("/login"); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
@ -65,18 +61,18 @@ export default { |
|
|
|
|
overflow: hidden; |
|
|
|
|
position: relative; |
|
|
|
|
background: #fff; |
|
|
|
|
box-shadow: 0 1px 4px rgba(0,21,41,.08); |
|
|
|
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); |
|
|
|
|
|
|
|
|
|
.hamburger-container { |
|
|
|
|
line-height: 46px; |
|
|
|
|
height: 100%; |
|
|
|
|
float: left; |
|
|
|
|
cursor: pointer; |
|
|
|
|
transition: background .3s; |
|
|
|
|
-webkit-tap-highlight-color:transparent; |
|
|
|
|
transition: background 0.3s; |
|
|
|
|
-webkit-tap-highlight-color: transparent; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
background: rgba(0, 0, 0, .025) |
|
|
|
|
background: rgba(0, 0, 0, 0.025); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -103,10 +99,10 @@ export default { |
|
|
|
|
|
|
|
|
|
&.hover-effect { |
|
|
|
|
cursor: pointer; |
|
|
|
|
transition: background .3s; |
|
|
|
|
transition: background 0.3s; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
background: rgba(0, 0, 0, .025) |
|
|
|
|
background: rgba(0, 0, 0, 0.025); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|