|
|
|
@ -1,9 +1,22 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="navbar" :class="'nav' + navType"> |
|
|
|
<div class="navbar" :class="'nav' + navType"> |
|
|
|
<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 v-if="navType == 1" id="breadcrumb-container" class="breadcrumb-container" /> |
|
|
|
<breadcrumb |
|
|
|
<top-nav v-if="navType == 2" id="topmenu-container" class="topmenu-container" /> |
|
|
|
v-if="navType == 1" |
|
|
|
|
|
|
|
id="breadcrumb-container" |
|
|
|
|
|
|
|
class="breadcrumb-container" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<top-nav |
|
|
|
|
|
|
|
v-if="navType == 2" |
|
|
|
|
|
|
|
id="topmenu-container" |
|
|
|
|
|
|
|
class="topmenu-container" |
|
|
|
|
|
|
|
/> |
|
|
|
<template v-if="navType == 3"> |
|
|
|
<template v-if="navType == 3"> |
|
|
|
<logo v-show="showLogo" :collapse="false"></logo> |
|
|
|
<logo v-show="showLogo" :collapse="false"></logo> |
|
|
|
<top-bar id="topbar-container" class="topbar-container" /> |
|
|
|
<top-bar id="topbar-container" class="topbar-container" /> |
|
|
|
@ -32,21 +45,24 @@ |
|
|
|
|
|
|
|
|
|
|
|
</template> --> |
|
|
|
</template> --> |
|
|
|
|
|
|
|
|
|
|
|
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover"> |
|
|
|
<el-dropdown |
|
|
|
|
|
|
|
class="avatar-container right-menu-item hover-effect" |
|
|
|
|
|
|
|
trigger="hover" |
|
|
|
|
|
|
|
> |
|
|
|
<div class="avatar-wrapper"> |
|
|
|
<div class="avatar-wrapper"> |
|
|
|
<img :src="avatar" class="user-avatar"> |
|
|
|
<img :src="avatar" class="user-avatar" /> |
|
|
|
<span class="user-nickname"> {{ nickName }} </span> |
|
|
|
<span class="user-nickname"> {{ nickName }} </span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-dropdown-menu slot="dropdown"> |
|
|
|
<el-dropdown-menu slot="dropdown"> |
|
|
|
<router-link to="/user/profile"> |
|
|
|
<router-link to="/user/profile"> |
|
|
|
<el-dropdown-item>个人中心</el-dropdown-item> |
|
|
|
<el-dropdown-item>个人中心</el-dropdown-item> |
|
|
|
</router-link> |
|
|
|
</router-link> |
|
|
|
<!-- <el-dropdown-item @click.native="setLayout" v-if="setting"> |
|
|
|
<el-dropdown-item @click.native="setLayout" v-if="setting"> |
|
|
|
<span>布局设置</span> |
|
|
|
<span>布局设置</span> |
|
|
|
</el-dropdown-item> |
|
|
|
</el-dropdown-item> |
|
|
|
<el-dropdown-item @click.native="lockScreen"> |
|
|
|
<el-dropdown-item @click.native="lockScreen"> |
|
|
|
<span>锁定屏幕</span> |
|
|
|
<span>锁定屏幕</span> |
|
|
|
</el-dropdown-item> --> |
|
|
|
</el-dropdown-item> |
|
|
|
<el-dropdown-item divided @click.native="logout"> |
|
|
|
<el-dropdown-item divided @click.native="logout"> |
|
|
|
<span>退出登录</span> |
|
|
|
<span>退出登录</span> |
|
|
|
</el-dropdown-item> |
|
|
|
</el-dropdown-item> |
|
|
|
@ -57,18 +73,18 @@ |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import { mapGetters } from "vuex"; |
|
|
|
import Breadcrumb from '@/components/Breadcrumb' |
|
|
|
import Breadcrumb from "@/components/Breadcrumb"; |
|
|
|
import TopNav from './TopNav' |
|
|
|
import TopNav from "./TopNav"; |
|
|
|
import TopBar from './TopBar' |
|
|
|
import TopBar from "./TopBar"; |
|
|
|
import Logo from './Sidebar/Logo' |
|
|
|
import Logo from "./Sidebar/Logo"; |
|
|
|
import Hamburger from '@/components/Hamburger' |
|
|
|
import Hamburger from "@/components/Hamburger"; |
|
|
|
import Screenfull from '@/components/Screenfull' |
|
|
|
import Screenfull from "@/components/Screenfull"; |
|
|
|
import SizeSelect from '@/components/SizeSelect' |
|
|
|
import SizeSelect from "@/components/SizeSelect"; |
|
|
|
import Search from '@/components/HeaderSearch' |
|
|
|
import Search from "@/components/HeaderSearch"; |
|
|
|
import RuoYiGit from '@/components/RuoYi/Git' |
|
|
|
import RuoYiGit from "@/components/RuoYi/Git"; |
|
|
|
import RuoYiDoc from '@/components/RuoYi/Doc' |
|
|
|
import RuoYiDoc from "@/components/RuoYi/Doc"; |
|
|
|
import HeaderNotice from './HeaderNotice' |
|
|
|
import HeaderNotice from "./HeaderNotice"; |
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
components: { |
|
|
|
@ -82,57 +98,54 @@ export default { |
|
|
|
Search, |
|
|
|
Search, |
|
|
|
RuoYiGit, |
|
|
|
RuoYiGit, |
|
|
|
RuoYiDoc, |
|
|
|
RuoYiDoc, |
|
|
|
HeaderNotice |
|
|
|
HeaderNotice, |
|
|
|
}, |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
computed: { |
|
|
|
...mapGetters([ |
|
|
|
...mapGetters(["sidebar", "avatar", "device", "nickName"]), |
|
|
|
'sidebar', |
|
|
|
|
|
|
|
'avatar', |
|
|
|
|
|
|
|
'device', |
|
|
|
|
|
|
|
'nickName' |
|
|
|
|
|
|
|
]), |
|
|
|
|
|
|
|
setting: { |
|
|
|
setting: { |
|
|
|
get() { |
|
|
|
get() { |
|
|
|
return this.$store.state.settings.showSettings |
|
|
|
return this.$store.state.settings.showSettings; |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
navType: { |
|
|
|
navType: { |
|
|
|
get() { |
|
|
|
get() { |
|
|
|
return this.$store.state.settings.navType |
|
|
|
return this.$store.state.settings.navType; |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
showLogo: { |
|
|
|
showLogo: { |
|
|
|
get() { |
|
|
|
get() { |
|
|
|
return this.$store.state.settings.sidebarLogo |
|
|
|
return this.$store.state.settings.sidebarLogo; |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
toggleSideBar() { |
|
|
|
toggleSideBar() { |
|
|
|
this.$store.dispatch('app/toggleSideBar') |
|
|
|
this.$store.dispatch("app/toggleSideBar"); |
|
|
|
}, |
|
|
|
}, |
|
|
|
setLayout(event) { |
|
|
|
setLayout(event) { |
|
|
|
this.$emit('setLayout') |
|
|
|
this.$emit("setLayout"); |
|
|
|
}, |
|
|
|
}, |
|
|
|
lockScreen() { |
|
|
|
lockScreen() { |
|
|
|
const currentPath = this.$route.fullPath |
|
|
|
const currentPath = this.$route.fullPath; |
|
|
|
this.$store.dispatch('lock/lockScreen', currentPath).then(() => { |
|
|
|
this.$store.dispatch("lock/lockScreen", currentPath).then(() => { |
|
|
|
this.$router.push('/lock') |
|
|
|
this.$router.push("/lock"); |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
logout() { |
|
|
|
logout() { |
|
|
|
this.$confirm('确定注销并退出系统吗？', '提示', { |
|
|
|
this.$confirm("确定注销并退出系统吗？", "提示", { |
|
|
|
confirmButtonText: '确定', |
|
|
|
confirmButtonText: "确定", |
|
|
|
cancelButtonText: '取消', |
|
|
|
cancelButtonText: "取消", |
|
|
|
type: 'warning' |
|
|
|
type: "warning", |
|
|
|
}).then(() => { |
|
|
|
}) |
|
|
|
this.$store.dispatch('LogOut').then(() => { |
|
|
|
.then(() => { |
|
|
|
location.href = '/index' |
|
|
|
this.$store.dispatch("LogOut").then(() => { |
|
|
|
|
|
|
|
location.href = "/index"; |
|
|
|
|
|
|
|
}); |
|
|
|
}) |
|
|
|
}) |
|
|
|
}).catch(() => {}) |
|
|
|
.catch(() => {}); |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@ -147,7 +160,7 @@ export default { |
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
background: #fff; |
|
|
|
background: #fff; |
|
|
|
box-shadow: 0 1px 4px rgba(0,21,41,.08); |
|
|
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
// padding: 0 8px; |
|
|
|
// padding: 0 8px; |
|
|
|
@ -157,15 +170,15 @@ export default { |
|
|
|
line-height: 46px; |
|
|
|
line-height: 46px; |
|
|
|
height: 100%; |
|
|
|
height: 100%; |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
transition: background .3s; |
|
|
|
transition: background 0.3s; |
|
|
|
-webkit-tap-highlight-color:transparent; |
|
|
|
-webkit-tap-highlight-color: transparent; |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
flex-shrink: 0; |
|
|
|
flex-shrink: 0; |
|
|
|
margin-right: 8px; |
|
|
|
margin-right: 8px; |
|
|
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
&:hover { |
|
|
|
background: rgba(0, 0, 0, .025) |
|
|
|
background: rgba(0, 0, 0, 0.025); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -208,10 +221,10 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
&.hover-effect { |
|
|
|
&.hover-effect { |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
transition: background .3s; |
|
|
|
transition: background 0.3s; |
|
|
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
&:hover { |
|
|
|
background: rgba(0, 0, 0, .025) |
|
|
|
background: rgba(0, 0, 0, 0.025); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -232,7 +245,7 @@ export default { |
|
|
|
border-radius: 50%; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.user-nickname{ |
|
|
|
.user-nickname { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
bottom: 10px; |
|
|
|
bottom: 10px; |
|
|
|
left: 2px; |
|
|
|
left: 2px; |
|
|
|
|
