|
|
|
@ -1,82 +1,22 @@ |
|
|
|
<template> |
|
|
|
<div class="navbar"> |
|
|
|
<hamburger |
|
|
|
id="hamburger-container" |
|
|
|
:is-active="sidebar.opened" |
|
|
|
class="hamburger-container" |
|
|
|
@toggleClick="toggleSideBar" |
|
|
|
/> |
|
|
|
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> |
|
|
|
|
|
|
|
<!-- 顶部菜单 start--> |
|
|
|
<div class="navmenu"> |
|
|
|
<template> |
|
|
|
<el-menu |
|
|
|
:default-active="activeIndex" |
|
|
|
class="el-menu-demo" |
|
|
|
mode="horizontal" |
|
|
|
active-text-color="#409EFF" |
|
|
|
@select="handleSelect" |
|
|
|
> |
|
|
|
<!-- <el-menu-item index="1">系统管理</el-menu-item> --> |
|
|
|
<!-- <el-submenu index="2"> |
|
|
|
<template slot="title">瀑布墙管理</template> |
|
|
|
<el-menu-item index="2-1">子菜单</el-menu-item> |
|
|
|
<el-submenu index="2-4"> |
|
|
|
<template slot="title">选项4</template> |
|
|
|
<el-menu-item index="2-4-1">选项1</el-menu-item> |
|
|
|
<el-menu-item index="2-4-2">选项2</el-menu-item> |
|
|
|
<el-menu-item index="2-4-3">选项3</el-menu-item> |
|
|
|
</el-submenu> |
|
|
|
</el-submenu> |
|
|
|
<el-menu-item index="3">竖屏管理</el-menu-item> |
|
|
|
<el-menu-item index="4" disabled>AI阅行管理</el-menu-item> --> |
|
|
|
</el-menu> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
<div class="navmenu">武汉图书馆</div> |
|
|
|
<!-- 顶部菜单 end--> |
|
|
|
<div class="right-menu"> |
|
|
|
<template v-if="device !== 'mobile'"> |
|
|
|
<search id="header-search" class="right-menu-item" /> |
|
|
|
<el-tooltip content="项目文档" effect="dark" placement="bottom"> |
|
|
|
<Doc class="right-menu-item hover-effect" /> |
|
|
|
</el-tooltip> |
|
|
|
<el-tooltip content="全屏缩放" effect="dark" placement="bottom"> |
|
|
|
<screenfull id="screenfull" class="right-menu-item hover-effect" /> |
|
|
|
</el-tooltip> |
|
|
|
<el-tooltip content="布局设置" effect="dark" placement="bottom"> |
|
|
|
<size-select id="size-select" class="right-menu-item hover-effect" /> |
|
|
|
</el-tooltip> |
|
|
|
</template> |
|
|
|
|
|
|
|
<el-dropdown |
|
|
|
class="avatar-container right-menu-item hover-effect" |
|
|
|
trigger="click" |
|
|
|
> |
|
|
|
<div class="current_date">2022-02-25 星期五</div> |
|
|
|
<el-dropdown class="avatar-container right-menu-item" trigger="click"> |
|
|
|
<div class="avatar-wrapper"> |
|
|
|
<img |
|
|
|
:src=" |
|
|
|
user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar |
|
|
|
" |
|
|
|
class="user-avatar" |
|
|
|
/> |
|
|
|
<!-- <p>{{user.phone}}</p> --> |
|
|
|
<p class="user_phone">13476289682</p> |
|
|
|
<i class="el-icon-caret-bottom" /> |
|
|
|
</div> |
|
|
|
<el-dropdown-menu slot="dropdown"> |
|
|
|
<span style="display:block;" @click="show = true"> |
|
|
|
<el-dropdown-item> |
|
|
|
布局设置 |
|
|
|
</el-dropdown-item> |
|
|
|
</span> |
|
|
|
<router-link to="/user/center"> |
|
|
|
<el-dropdown-item> |
|
|
|
个人中心 |
|
|
|
</el-dropdown-item> |
|
|
|
<el-dropdown-item>个人中心</el-dropdown-item> |
|
|
|
</router-link> |
|
|
|
<span style="display:block;" @click="open"> |
|
|
|
<el-dropdown-item divided> |
|
|
|
退出登录 |
|
|
|
</el-dropdown-item> |
|
|
|
<el-dropdown-item divided>退出登录</el-dropdown-item> |
|
|
|
</span> |
|
|
|
</el-dropdown-menu> |
|
|
|
</el-dropdown> |
|
|
|
@ -86,49 +26,19 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import Breadcrumb from '@/components/Breadcrumb' |
|
|
|
import Hamburger from '@/components/Hamburger' |
|
|
|
import Doc from '@/components/Doc' |
|
|
|
import Screenfull from '@/components/Screenfull' |
|
|
|
import SizeSelect from '@/components/SizeSelect' |
|
|
|
import Search from '@/components/HeaderSearch' |
|
|
|
import Avatar from '@/assets/images/avatar.png' |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
Breadcrumb, |
|
|
|
Hamburger, |
|
|
|
Screenfull, |
|
|
|
SizeSelect, |
|
|
|
Search, |
|
|
|
Doc |
|
|
|
}, |
|
|
|
components: {}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
Avatar: Avatar, |
|
|
|
dialogVisible: false, |
|
|
|
activeIndex: '1', |
|
|
|
activeIndex2: '1' |
|
|
|
Avatar: Avatar |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters(['sidebar', 'device', 'user', 'baseApi']), |
|
|
|
show: { |
|
|
|
get() { |
|
|
|
return this.$store.state.settings.showSettings |
|
|
|
}, |
|
|
|
set(val) { |
|
|
|
this.$store.dispatch('settings/changeSetting', { |
|
|
|
key: 'showSettings', |
|
|
|
value: val |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
...mapGetters(['user']) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
toggleSideBar() { |
|
|
|
this.$store.dispatch('app/toggleSideBar') |
|
|
|
}, |
|
|
|
open() { |
|
|
|
this.$confirm('确定注销并退出系统吗？', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
@ -138,9 +48,6 @@ export default { |
|
|
|
this.logout() |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleSelect(key, keyPath) { |
|
|
|
console.log(key, keyPath) |
|
|
|
}, |
|
|
|
logout() { |
|
|
|
this.$store.dispatch('LogOut').then(() => { |
|
|
|
location.reload() |
|
|
|
@ -152,79 +59,51 @@ export default { |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.navbar { |
|
|
|
height: 60px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
height: 64px; |
|
|
|
line-height: 64px; |
|
|
|
overflow: hidden; |
|
|
|
position: relative; |
|
|
|
background: #fff; |
|
|
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); |
|
|
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05); |
|
|
|
|
|
|
|
.navmenu { |
|
|
|
float: left; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
|
|
|
|
.errLog-container { |
|
|
|
display: inline-block; |
|
|
|
vertical-align: top; |
|
|
|
flex: 1; |
|
|
|
font-size: 18px; |
|
|
|
font-weight: bold; |
|
|
|
padding-left: 32px; |
|
|
|
} |
|
|
|
|
|
|
|
.right-menu { |
|
|
|
float: right; |
|
|
|
display: flex; |
|
|
|
height: 100%; |
|
|
|
line-height: 50px; |
|
|
|
|
|
|
|
line-height: 64px; |
|
|
|
font-size: 14px; |
|
|
|
color: #333333; |
|
|
|
&:focus { |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
|
|
|
|
.current_date { |
|
|
|
display: block; |
|
|
|
margin-right: 72px; |
|
|
|
} |
|
|
|
.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; |
|
|
|
margin-right: 68px; |
|
|
|
|
|
|
|
.avatar-wrapper { |
|
|
|
margin-top: 5px; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.user-avatar { |
|
|
|
.user_phone { |
|
|
|
margin: 0; |
|
|
|
cursor: pointer; |
|
|
|
width: 40px; |
|
|
|
height: 40px; |
|
|
|
border-radius: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.el-icon-caret-bottom { |
|
|
|
cursor: pointer; |
|
|
|
position: absolute; |
|
|
|
|
