You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
240 lines
5.5 KiB
240 lines
5.5 KiB
<template>
|
|
<div class="navbar">
|
|
|
|
<div class="navbar-header">
|
|
<div>
|
|
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
|
|
@toggleClick="toggleSideBar" />
|
|
|
|
<breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
|
|
<top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />
|
|
</div>
|
|
<div>
|
|
<div class="right-menu">
|
|
<template v-if="device !== 'mobile'">
|
|
|
|
<!-- <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" />
|
|
</el-tooltip> -->
|
|
|
|
</template>
|
|
|
|
<div class="notice-count" @click="gotoNotice"><span>{{$t('page.business.home.xx')}}</span><el-badge :value="menuCount.noticeCount" class="item"></el-badge></div>
|
|
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
|
|
<div class="avatar-wrapper">
|
|
<img src="@/assets/images/profile.jpg" class="user-avatar">
|
|
<span class="user-nickname"> {{ nickName }} </span>
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<router-link to="/user/profile">
|
|
<el-dropdown-item>{{ $t('login.profile') }}</el-dropdown-item>
|
|
</router-link>
|
|
<el-dropdown-item divided @click.native="logout">
|
|
<span>{{ $t('login.logOut') }}</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
<lang-select class="set-language" style="margin-left: 10px;"/>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters,mapState } from 'vuex'
|
|
import Breadcrumb from '@/components/Breadcrumb'
|
|
import TopNav from '@/components/TopNav'
|
|
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'
|
|
import LangSelect from '@/components/LangSelect'
|
|
|
|
export default {
|
|
emits: ['setLayout'],
|
|
components: {
|
|
Breadcrumb,
|
|
TopNav,
|
|
Hamburger,
|
|
Screenfull,
|
|
SizeSelect,
|
|
Search,
|
|
RuoYiGit,
|
|
RuoYiDoc,
|
|
LangSelect
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'sidebar',
|
|
'avatar',
|
|
'device',
|
|
'nickName',
|
|
]),
|
|
...mapState(["menuCount"]),
|
|
setting: {
|
|
get() {
|
|
return this.$store.state.settings.showSettings
|
|
}
|
|
},
|
|
topNav: {
|
|
get() {
|
|
return this.$store.state.settings.topNav
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
toggleSideBar() {
|
|
this.$store.dispatch('app/toggleSideBar')
|
|
},
|
|
setLayout(event) {
|
|
this.$emit('setLayout')
|
|
},
|
|
logout() {
|
|
this.$confirm(this.$t('system.logOut'), this.$t('system.tip'), {
|
|
confirmButtonText: this.$t('form.confirm'),
|
|
cancelButtonText: this.$t('form.cancel'),
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$store.dispatch('LogOut').then(() => {
|
|
location.href = '/user/work'
|
|
})
|
|
}).catch(() => { })
|
|
},
|
|
gotoNotice(){
|
|
this.$router.push('/user/work')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.navbar {
|
|
// height: 50px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #fff;
|
|
|
|
// box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
|
.navbar-header {
|
|
background-image: url("../../assets/images/header.png");
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
.set-language {
|
|
float: right;
|
|
height: 100%;
|
|
line-height: 50px;
|
|
right: 10px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.topmenu-container {
|
|
position: absolute;
|
|
left: 50px;
|
|
}
|
|
|
|
.errLog-container {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.right-menu {
|
|
float: right;
|
|
height: 100%;
|
|
line-height: 50px;
|
|
padding-right: 20px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.notice-count{
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.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 .3s;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, .025)
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar-container {
|
|
margin-right: 0px;
|
|
padding-right: 0px;
|
|
|
|
.avatar-wrapper {
|
|
margin-top: 10px;
|
|
right: 8px;
|
|
position: relative;
|
|
|
|
.user-avatar {
|
|
cursor: pointer;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.user-nickname {
|
|
position: relative;
|
|
bottom: 10px;
|
|
left: 2px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.el-icon-caret-bottom {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: -20px;
|
|
top: 25px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|