|
|
@@ -6,23 +6,23 @@
|
|
|
<div class="right-menu">
|
|
|
<template v-if="device !== 'mobile'">
|
|
|
<search id="header-search" class="right-menu-item" />
|
|
|
- <el-tooltip content="布局大小" effect="dark" placement="bottom">
|
|
|
+ <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
|
|
|
<size-select id="size-select" class="right-menu-item hover-effect" />
|
|
|
- </el-tooltip>
|
|
|
+ </el-tooltip> -->
|
|
|
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
|
|
</template>
|
|
|
|
|
|
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
|
|
<div class="avatar-wrapper">
|
|
|
- <img :src="avatar" class="user-avatar" />
|
|
|
+ <img :src="$store.state.oss.ossBaseUrl + avatar" class="user-avatar" />
|
|
|
</div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<router-link to="/employeenInfo/profile">
|
|
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
|
|
</router-link>
|
|
|
- <el-dropdown-item @click.native="setting = true">
|
|
|
+ <!-- <el-dropdown-item @click.native="setting = true">
|
|
|
<span>布局设置</span>
|
|
|
- </el-dropdown-item>
|
|
|
+ </el-dropdown-item> -->
|
|
|
<el-dropdown-item divided @click.native="logout">
|
|
|
<span>退出登录</span>
|
|
|
</el-dropdown-item>
|
|
|
@@ -33,149 +33,149 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { mapGetters } from 'vuex'
|
|
|
- import Hamburger from '@/components/Hamburger'
|
|
|
- import Screenfull from '@/components/Screenfull'
|
|
|
- import Search from '@/components/HeaderSearch'
|
|
|
- import SizeSelect from '@/components/SizeSelect'
|
|
|
- import ShortcutMenu from '@/components/shortcutMenu'
|
|
|
-
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- Hamburger,
|
|
|
- Screenfull,
|
|
|
- Search,
|
|
|
- ShortcutMenu,
|
|
|
- SizeSelect
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(['sidebar', 'avatar', 'device']),
|
|
|
- setting: {
|
|
|
- get() {
|
|
|
- return this.$store.state.settings.showSettings
|
|
|
- },
|
|
|
- set(val) {
|
|
|
- this.$store.dispatch('settings/changeSetting', {
|
|
|
- key: 'showSettings',
|
|
|
- value: val
|
|
|
- })
|
|
|
- }
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import Hamburger from '@/components/Hamburger'
|
|
|
+import Screenfull from '@/components/Screenfull'
|
|
|
+import Search from '@/components/HeaderSearch'
|
|
|
+import SizeSelect from '@/components/SizeSelect'
|
|
|
+import ShortcutMenu from '@/components/shortcutMenu'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Hamburger,
|
|
|
+ Screenfull,
|
|
|
+ Search,
|
|
|
+ ShortcutMenu,
|
|
|
+ SizeSelect
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['sidebar', 'avatar', 'device']),
|
|
|
+ setting: {
|
|
|
+ get() {
|
|
|
+ return this.$store.state.settings.showSettings
|
|
|
},
|
|
|
- topNav: {
|
|
|
- get() {
|
|
|
- return this.$store.state.settings.topNav
|
|
|
- }
|
|
|
+ set(val) {
|
|
|
+ this.$store.dispatch('settings/changeSetting', {
|
|
|
+ key: 'showSettings',
|
|
|
+ value: val
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
- methods: {
|
|
|
- toggleSideBar() {
|
|
|
- this.$store.dispatch('app/toggleSideBar')
|
|
|
- },
|
|
|
- async logout() {
|
|
|
- this.$confirm('确定注销并退出系统吗？', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- this.$store.dispatch('LogOut').then(() => {
|
|
|
- location.href = '/index'
|
|
|
- })
|
|
|
- })
|
|
|
- .catch(() => {})
|
|
|
+ topNav: {
|
|
|
+ get() {
|
|
|
+ return this.$store.state.settings.topNav
|
|
|
}
|
|
|
}
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toggleSideBar() {
|
|
|
+ this.$store.dispatch('app/toggleSideBar')
|
|
|
+ },
|
|
|
+ async logout() {
|
|
|
+ this.$confirm('确定注销并退出系统吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$store.dispatch('LogOut').then(() => {
|
|
|
+ location.href = '/index'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(() => {})
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .navbar {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- min-height: 50px;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- background: rgb(10, 10, 10);
|
|
|
- box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
|
|
- .shortcut-menu {
|
|
|
- flex: 1;
|
|
|
+.navbar {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ min-height: 50px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ background: rgb(10, 10, 10);
|
|
|
+ box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
|
|
+ .shortcut-menu {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .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);
|
|
|
}
|
|
|
- .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;
|
|
|
+ }
|
|
|
|
|
|
- .breadcrumb-container {
|
|
|
- float: left;
|
|
|
- }
|
|
|
+ .topmenu-container {
|
|
|
+ position: absolute;
|
|
|
+ left: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .errLog-container {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-menu {
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
|
|
|
- .topmenu-container {
|
|
|
- position: absolute;
|
|
|
- left: 50px;
|
|
|
+ &:focus {
|
|
|
+ outline: none;
|
|
|
}
|
|
|
|
|
|
- .errLog-container {
|
|
|
+ .right-menu-item {
|
|
|
display: inline-block;
|
|
|
- vertical-align: top;
|
|
|
- }
|
|
|
+ padding: 0 8px;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ vertical-align: text-bottom;
|
|
|
|
|
|
- .right-menu {
|
|
|
- height: 50px;
|
|
|
- line-height: 50px;
|
|
|
+ &.hover-effect {
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background 0.3s;
|
|
|
|
|
|
- &:focus {
|
|
|
- outline: none;
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 0, 0, 0.025);
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .right-menu-item {
|
|
|
- display: inline-block;
|
|
|
- padding: 0 8px;
|
|
|
- height: 100%;
|
|
|
- font-size: 18px;
|
|
|
- color: #fff;
|
|
|
- vertical-align: text-bottom;
|
|
|
+ .avatar-container {
|
|
|
+ margin-right: 30px;
|
|
|
|
|
|
- &.hover-effect {
|
|
|
- cursor: pointer;
|
|
|
- transition: background 0.3s;
|
|
|
+ .avatar-wrapper {
|
|
|
+ margin-top: 5px;
|
|
|
+ position: relative;
|
|
|
|
|
|
- &:hover {
|
|
|
- background: rgba(0, 0, 0, 0.025);
|
|
|
- }
|
|
|
+ .user-avatar {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 100%;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .avatar-container {
|
|
|
- margin-right: 30px;
|
|
|
-
|
|
|
- .avatar-wrapper {
|
|
|
- margin-top: 5px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .user-avatar {
|
|
|
- cursor: pointer;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border-radius: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .el-icon-caret-bottom {
|
|
|
- cursor: pointer;
|
|
|
- position: absolute;
|
|
|
- right: -20px;
|
|
|
- top: 25px;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
+ .el-icon-caret-bottom {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: -20px;
|
|
|
+ top: 25px;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
lz