285 lines
8.1 KiB
Vue
285 lines
8.1 KiB
Vue
<template>
|
||
<div class="navbar">
|
||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/> -->
|
||
<!-- <div class="free-user-login-notice"><i class="el-icon-warning-outline" /> 您当前是免费测试账号，接口频次为10QPS（大约5~10人同时访问），服务器和带宽资源有限，建议您升级为付费会员尊享极速体验。</div> -->
|
||
<!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/> -->
|
||
<!-- <top-nav id="topmenu-container" class="topmenu-container" /> -->
|
||
<div style="line-height: 46px;cursor: pointer;height: 100%;float: left; position: relative;">
|
||
<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>
|
||
<div style="line-height: 46px;cursor: pointer;height: 100%;float: left;max-width: 70%;min-width: 50%; position: relative;">
|
||
<top-tags-view class="topmenu-container" style="left:0px;" />
|
||
</div>
|
||
|
||
<div class="right-menu">
|
||
|
||
<!-- 搜索 -->
|
||
<div class="right-menu-item hover-effect" style="padding: 0 20px;">
|
||
<search id="header-search"/>
|
||
</div>
|
||
|
||
<!-- 消息通知 -->
|
||
<div class="right-menu-item hover-effect" style="padding: 0 20px;">
|
||
<top-notice/>
|
||
</div>
|
||
|
||
<!-- 国际化 -->
|
||
<el-dropdown class="right-menu-item hover-effect" trigger="click">
|
||
<div class="avatar-wrapper" >
|
||
<div style="display: inline-flex;line-height: 20px;padding: 5px;text-align: center; min-width: 35px; border-radius: 30px;" slot="reference">
|
||
<div>
|
||
<svg-icon icon-class="lang" style="width:20px" />
|
||
<!-- <img v-if="i18nLang=='zh'" style="width:20px" src="../../assets/lang_logo/zh-cn.png" /> -->
|
||
<!-- <img v-if="i18nLang=='en'" style="width:20px" src="../../assets/lang_logo/en.png" /> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-dropdown-menu slot="dropdown" >
|
||
<el-dropdown-item @click.native="changeLanguage('zh')">
|
||
<span v-if="i18nLang=='zh'" style="display:block;color: red;">{{ $t('locale.zh') }}</span>
|
||
<span v-else style="display:block;">{{ $t('locale.zh') }}</span>
|
||
</el-dropdown-item>
|
||
<el-dropdown-item @click.native="changeLanguage('en')">
|
||
<span v-if="i18nLang=='en'" style="display:block;color: red;">{{ $t('locale.en') }}</span>
|
||
<span v-else style="display:block;">{{ $t('locale.en') }}</span>
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
|
||
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
||
<div class="avatar-wrapper">
|
||
<div style="display: inline-flex;line-height: 25px;">
|
||
<div><img :src="avatar" class="user-avatar"></div>
|
||
<div style="font-size:12px;color: gray;">{{nickName}}</div>
|
||
</div>
|
||
<i class="el-icon-caret-bottom" />
|
||
</div>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<router-link to="/user/profile">
|
||
<el-dropdown-item>个人信息</el-dropdown-item>
|
||
</router-link>
|
||
<!-- <el-dropdown-item @click.native="setting = true">
|
||
<span>布局设置</span>
|
||
</el-dropdown-item> -->
|
||
<el-dropdown-item @click.native="showKfView">
|
||
<span>联系客服</span>
|
||
</el-dropdown-item>
|
||
<el-dropdown-item divided @click.native="logout">
|
||
<span>退出登录</span>
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</div>
|
||
|
||
<div class="kf_dialog_center">
|
||
<el-dialog title="" :visible.sync="openKfView" width="400px" append-to-body>
|
||
<div style="padding:30px">
|
||
<img :src="zoneConfig.kfQrImage" width="100%" draggable="false"/>
|
||
<div style="text-align: center;">打开微信扫一扫 添加专属客服</div>
|
||
<div style="text-align: center" >帮助您更全面的了解系统功能</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } 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 TopTagsView from '../components/TopTagsView'
|
||
import TopNotice from '../components/TopNotice'
|
||
|
||
export default {
|
||
components: {
|
||
Breadcrumb,
|
||
TopNav,
|
||
Hamburger,
|
||
Screenfull,
|
||
SizeSelect,
|
||
Search,
|
||
TopTagsView,
|
||
TopNotice
|
||
},
|
||
data() {
|
||
return {
|
||
openKfView:false
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters([
|
||
'sidebar',
|
||
'avatar',
|
||
'nickName',
|
||
'device'
|
||
]),
|
||
zoneConfig: {
|
||
get() {
|
||
return this.$store.state.zoneConfig;
|
||
},
|
||
},
|
||
setting: {
|
||
get() {
|
||
return this.$store.state.settings.showSettings
|
||
},
|
||
set(val) {
|
||
this.$store.dispatch('settings/changeSetting', {
|
||
key: 'showSettings',
|
||
value: val
|
||
})
|
||
}
|
||
},
|
||
|
||
topNav: {
|
||
get() {
|
||
return this.$store.state.settings.topNav
|
||
}
|
||
},
|
||
|
||
i18nLang:{
|
||
get() {
|
||
return this.$i18n.locale;
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
toggleSideBar() {
|
||
this.$store.dispatch('app/toggleSideBar')
|
||
},
|
||
async logout() {
|
||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.$store.dispatch('LogOut').then(() => {
|
||
// location.href = '/index';
|
||
let indexUrl=this.$store.state.permission.indexPage;
|
||
location.href = indexUrl;
|
||
|
||
})
|
||
}).catch(() => {});
|
||
},
|
||
changeLanguage(locale) {
|
||
localStorage.setItem('locale', locale)
|
||
this.$i18n.locale = locale
|
||
},
|
||
showKfView(){
|
||
this.openKfView=true;
|
||
},
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
|
||
.topmenu-container {
|
||
position: absolute;
|
||
left: 50px;
|
||
}
|
||
|
||
.errLog-container {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.right-menu {
|
||
float: right;
|
||
// height: 100%;
|
||
// line-height: 50px;
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
padding: 0 12px;
|
||
font-size: 18px;
|
||
height: 100%;
|
||
|
||
&:focus {
|
||
outline: none;
|
||
}
|
||
|
||
.right-menu-item {
|
||
// display: inline-block;
|
||
// padding: 0 8px;
|
||
// height: 100%;
|
||
// font-size: 18px;
|
||
// color: #5a5e66;
|
||
// vertical-align: text-bottom;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
height: 100%;
|
||
padding: 0 12px;
|
||
cursor: pointer;
|
||
|
||
&.hover-effect {
|
||
cursor: pointer;
|
||
transition: background .3s;
|
||
|
||
&:hover {
|
||
background: rgba(0, 0, 0, .025)
|
||
}
|
||
}
|
||
}
|
||
|
||
.avatar-container {
|
||
margin-right: 30px;
|
||
|
||
.avatar-wrapper {
|
||
margin-top: 5px;
|
||
position: relative;
|
||
|
||
.user-avatar {
|
||
cursor: pointer;
|
||
width: 25px;
|
||
height: 25px;
|
||
border-radius: 25px;
|
||
}
|
||
|
||
.el-icon-caret-bottom {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
right: -20px;
|
||
top: 10px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|