<template>
|
<header class="header-container">
|
<div class="content-wrap">
|
<div class="logo-title-wrap">
|
<img :src="logoUrl" alt="Logo"></img>
|
<p class="title">低空飞行监管子系统</p>
|
</div>
|
|
<div class="header-right">
|
<nav class="nav-menu">
|
<div v-for="(item, index) in topMenus" :key="index" class="nav-item" :class="{ active: item.active }"
|
@click="handleMenuClick(item)">
|
<span>{{ item.label }}</span>
|
</div>
|
</nav>
|
|
<div class="icon-group">
|
<div class="top-user">
|
<div class="icon-box">
|
<img class="gateway" @click="jumpMH" src="@/assets/images/mh.png" alt="进入门户" title="进入门户">
|
</div>
|
|
<el-dropdown popper-class="command-custom-dropdown">
|
<span class="el-dropdown-link">
|
<img class="top-bar__img" :src="userInfo.avatar" alt="" />
|
</span>
|
|
<template #dropdown>
|
<el-dropdown-menu>
|
<!-- <el-dropdown-item>
|
<router-link to="/">{{ $t('navbar.dashboard') }}</router-link>
|
</el-dropdown-item>-->
|
<!-- <el-dropdown-item>
|
<router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link>
|
</el-dropdown-item> -->
|
<el-dropdown-item @click="logout" divided>{{ $t('navbar.logOut') }}
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
<top-setting></top-setting>
|
</div>
|
</div>
|
</div>
|
</div>
|
</header>
|
</template>
|
|
<script>
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import logo from '@/assets/images/topContainer/logo.png'
|
|
import { mapGetters } from 'vuex'
|
import topLock from './top-lock.vue'
|
import topMenu from './top-menu.vue'
|
import topSearch from './top-search.vue'
|
import topTheme from './top-theme.vue'
|
import topLogs from './top-logs.vue'
|
import topColor from './top-color.vue'
|
import topLang from './top-lang.vue'
|
import topFull from './top-full.vue'
|
import topQna from './top-qna.vue'
|
import topSetting from '../setting.vue'
|
|
|
import { logOutFun } from '@/utils/util'
|
|
export default {
|
components: {
|
topLock,
|
topMenu,
|
topSearch,
|
topTheme,
|
topLogs,
|
topColor,
|
topLang,
|
topFull,
|
topQna,
|
topSetting,
|
},
|
name: 'top',
|
data () {
|
return {
|
logoUrl: logo,
|
activeMenu: 'drone-control',
|
topMenus: [
|
{
|
key: 'twin-supervision',
|
label: '孪生监管',
|
path: '/flight-supervision/#/brain',
|
},
|
{
|
key: 'airspace-collaboration',
|
label: '空域协同',
|
path: '/flight-supervision/#/space',
|
},
|
{
|
key: 'air-traffic',
|
label: '空中交通',
|
path: '/flight-supervision/#/activity',
|
},
|
{
|
key: 'information-service',
|
label: '信息服务',
|
path: '/flight-supervision/#/infoService',
|
},
|
{
|
key: 'drone-control',
|
label: '无人机管控',
|
path: '',
|
active: true,
|
},
|
],
|
}
|
},
|
filters: {},
|
created () { },
|
computed: {
|
...mapGetters([
|
'setting',
|
'userInfo',
|
'tagWel',
|
'bsTagList',
|
'tag',
|
'logsLen',
|
'logsFlag',
|
]),
|
},
|
methods: {
|
logout () {
|
ElMessageBox.confirm(`是否退出系统, 是否继续?`, '提示', {
|
type: 'warning',
|
customClass: 'command-page-view-message-box',
|
confirmButtonClass: 'command-message-box-confirm',
|
cancelButtonClass: 'command-message-box-cancel',
|
}).then(() => {
|
logOutFun()
|
})
|
},
|
jumpMH () {
|
window.open(`${window.location.origin}/droneWeb/#/gateway`, '_blank')
|
},
|
handleMenuClick (item) {
|
this.activeMenu = item.key
|
if (!item.path) return
|
window.open(`${window.location.origin}${item.path}`, '_blank')
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.header-container {
|
position: relative;
|
height: 110px;
|
background: url('@/assets/images/topContainer/top-bg.png') center / 100% 100% no-repeat !important;
|
background-repeat: no-repeat;
|
background-size: cover;
|
pointer-events: none;
|
z-index: 2;
|
|
.bg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
pointer-events: none;
|
}
|
|
.content-wrap {
|
position: absolute;
|
inset: 0;
|
display: flex;
|
align-items: center;
|
z-index: 1;
|
padding: 0 40px;
|
|
.logo-title-wrap {
|
display: flex;
|
align-items: center;
|
transform: translateY(-10px);
|
|
img {
|
width: 70px;
|
height: 63px;
|
vertical-align: middle;
|
}
|
|
.title {
|
margin-left: 16px;
|
margin-top: 0;
|
margin-bottom: 0;
|
|
width: 353px;
|
height: 43px;
|
font-family: PangMen;
|
font-weight: 400;
|
font-size: 36px;
|
color: #FFFFFF;
|
letter-spacing: 3px;
|
text-shadow: 3px 3px 0px rgba(0, 13, 42, 0.27);
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
}
|
}
|
|
.header-right {
|
display: flex;
|
align-items: center;
|
margin-left: auto;
|
margin-top: -25px;
|
pointer-events: auto;
|
|
.nav-menu {
|
display: flex;
|
margin-right: 30px;
|
gap: 0px;
|
|
.nav-item {
|
width: 136px;
|
height: 34px;
|
box-sizing: border-box;
|
text-align: center;
|
color: #afafe0;
|
text-decoration: none;
|
font-size: 20px;
|
transition: color 0.3s;
|
padding: 0;
|
background: url('@/assets/images/menu-item.png') no-repeat center / 136px 34px;
|
cursor: pointer;
|
margin: 0 10px;
|
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding-bottom: 10px;
|
line-height: 1;
|
|
font-family: YouSheBiaoTiHei;
|
|
&:hover {
|
color: #fff;
|
}
|
|
&.active {
|
color: #fff;
|
background: url('@/assets/images/active-menu-item.png') no-repeat center / 136px 34px;
|
|
span {
|
/* 降级方案：所有浏览器先显示白色文字 */
|
color: #ffffff;
|
|
/* 发光效果 */
|
text-shadow: 0px 0px 13px 0px #5da6ef73;
|
}
|
|
/* 支持渐变文字的浏览器再启用 */
|
@supports (-webkit-background-clip: text) {
|
span {
|
background: linear-gradient(180deg, #fff 22.11%, #ffffff 86.69%);
|
background-size: contain;
|
background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
}
|
}
|
}
|
}
|
|
.icon-group {
|
display: flex;
|
align-items: center;
|
margin-right: 20px;
|
gap: 15px;
|
|
|
.icon-box {
|
margin-top: 6px;
|
margin-right: 30px;
|
display: flex;
|
align-items: center;
|
gap: 0 20px;
|
|
.gateway {
|
width: 21px;
|
height: 18px;
|
}
|
|
>* {
|
cursor: pointer;
|
}
|
}
|
}
|
|
.top-bar__item {
|
margin-right: 15px;
|
display: inline-block !important;
|
}
|
|
.top-user {
|
display: flex;
|
align-items: center;
|
}
|
|
.top-bar__img {
|
margin-top: 5px;
|
width: 20px;
|
height: 20px;
|
border: 2px solid #383874;
|
border-radius: 50%;
|
}
|
|
.el-dropdown-link {
|
cursor: pointer;
|
color: #606266;
|
}
|
|
.el-dropdown-link:hover {
|
color: #409EFF;
|
}
|
}
|
}
|
}
|
</style>
|
