|
@@ -1,25 +1,18 @@
|
|
|
<template>
|
|
|
<div class="navbar">
|
|
|
- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
|
|
+ <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
|
|
|
+ @toggleClick="toggleSideBar"/>
|
|
|
|
|
|
- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
|
|
+ <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
|
|
|
|
|
|
<div class="right-menu">
|
|
|
<template v-if="device!=='mobile'">
|
|
|
- <search id="header-search" class="right-menu-item" />
|
|
|
-
|
|
|
- <el-tooltip content="源码地址" effect="dark" placement="bottom">
|
|
|
- <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
|
|
|
- </el-tooltip>
|
|
|
-
|
|
|
- <el-tooltip content="文档地址" effect="dark" placement="bottom">
|
|
|
- <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
|
|
|
- </el-tooltip>
|
|
|
+ <search id="header-search" class="right-menu-item"/>
|
|
|
|
|
|
- <screenfull id="screenfull" class="right-menu-item hover-effect" />
|
|
|
+ <screenfull id="screenfull" class="right-menu-item hover-effect"/>
|
|
|
|
|
|
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
|
|
- <size-select id="size-select" class="right-menu-item hover-effect" />
|
|
|
+ <size-select id="size-select" class="right-menu-item hover-effect"/>
|
|
|
</el-tooltip>
|
|
|
|
|
|
</template>
|
|
@@ -27,7 +20,7 @@
|
|
|
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
|
|
<div class="avatar-wrapper">
|
|
|
<img :src="avatar" class="user-avatar">
|
|
|
- <i class="el-icon-caret-bottom" />
|
|
|
+ <i class="el-icon-caret-bottom"/>
|
|
|
</div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<router-link to="/user/profile">
|
|
@@ -46,142 +39,140 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-import Breadcrumb from '@/components/Breadcrumb'
|
|
|
-import Hamburger from '@/components/Hamburger'
|
|
|
-import Screenfull from '@/components/Screenfull'
|
|
|
-import SizeSelect from '@/components/SizeSelect'
|
|
|
-import Search from '@/components/HeaderSearch'
|
|
|
-import RuoYiGit from '@/components/RuoYi/Git'
|
|
|
-import RuoYiDoc from '@/components/RuoYi/Doc'
|
|
|
-
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- Breadcrumb,
|
|
|
- Hamburger,
|
|
|
- Screenfull,
|
|
|
- SizeSelect,
|
|
|
- Search,
|
|
|
- RuoYiGit,
|
|
|
- RuoYiDoc
|
|
|
- },
|
|
|
- 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 Breadcrumb from '@/components/Breadcrumb'
|
|
|
+ import Hamburger from '@/components/Hamburger'
|
|
|
+ import Screenfull from '@/components/Screenfull'
|
|
|
+ import SizeSelect from '@/components/SizeSelect'
|
|
|
+ import Search from '@/components/HeaderSearch'
|
|
|
+ import RuoYiGit from '@/components/RuoYi/Git'
|
|
|
+ import RuoYiDoc from '@/components/RuoYi/Doc'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ Breadcrumb,
|
|
|
+ Hamburger,
|
|
|
+ Screenfull,
|
|
|
+ SizeSelect,
|
|
|
+ Search
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters([
|
|
|
+ 'sidebar',
|
|
|
+ 'avatar',
|
|
|
+ 'device'
|
|
|
+ ]),
|
|
|
+ setting: {
|
|
|
+ get() {
|
|
|
+ return this.$store.state.settings.showSettings
|
|
|
+ },
|
|
|
+ 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.reload()
|
|
|
+ methods: {
|
|
|
+ toggleSideBar() {
|
|
|
+ this.$store.dispatch('app/toggleSideBar')
|
|
|
+ },
|
|
|
+ async logout() {
|
|
|
+ this.$confirm('确定注销并退出系统吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.$store.dispatch('LogOut').then(() => {
|
|
|
+ location.reload()
|
|
|
+ })
|
|
|
})
|
|
|
- })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.navbar {
|
|
|
- height: 50px;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
|
|
-
|
|
|
- .hamburger-container {
|
|
|
- line-height: 46px;
|
|
|
- height: 100%;
|
|
|
- float: left;
|
|
|
- cursor: pointer;
|
|
|
- transition: background .3s;
|
|
|
- -webkit-tap-highlight-color:transparent;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: rgba(0, 0, 0, .025)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .breadcrumb-container {
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
- .errLog-container {
|
|
|
- display: inline-block;
|
|
|
- vertical-align: top;
|
|
|
- }
|
|
|
+ .navbar {
|
|
|
+ height: 50px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
|
|
+
|
|
|
+ .hamburger-container {
|
|
|
+ line-height: 46px;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background .3s;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
|
|
|
- .right-menu {
|
|
|
- float: right;
|
|
|
- height: 100%;
|
|
|
- line-height: 50px;
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 0, 0, .025)
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &:focus {
|
|
|
- outline: none;
|
|
|
+ .breadcrumb-container {
|
|
|
+ float: left;
|
|
|
}
|
|
|
|
|
|
- .right-menu-item {
|
|
|
+ .errLog-container {
|
|
|
display: inline-block;
|
|
|
- padding: 0 8px;
|
|
|
- height: 100%;
|
|
|
- font-size: 18px;
|
|
|
- color: #5a5e66;
|
|
|
- vertical-align: text-bottom;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
|
|
|
- &.hover-effect {
|
|
|
- cursor: pointer;
|
|
|
- transition: background .3s;
|
|
|
+ .right-menu {
|
|
|
+ float: right;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 50px;
|
|
|
|
|
|
- &:hover {
|
|
|
- background: rgba(0, 0, 0, .025)
|
|
|
- }
|
|
|
+ &:focus {
|
|
|
+ outline: none;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .avatar-container {
|
|
|
- margin-right: 30px;
|
|
|
|
|
|
- .avatar-wrapper {
|
|
|
- margin-top: 5px;
|
|
|
- position: relative;
|
|
|
+ .right-menu-item {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 8px;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #5a5e66;
|
|
|
+ vertical-align: text-bottom;
|
|
|
|
|
|
- .user-avatar {
|
|
|
+ &.hover-effect {
|
|
|
cursor: pointer;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border-radius: 10px;
|
|
|
+ transition: background .3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 0, 0, .025)
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .el-icon-caret-bottom {
|
|
|
- cursor: pointer;
|
|
|
- position: absolute;
|
|
|
- right: -20px;
|
|
|
- top: 25px;
|
|
|
- font-size: 12px;
|
|
|
+ .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>
|