From e4439e5d0a2cba9983f013bd044fe4e22c7b7077 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Wed, 11 Feb 2026 16:35:06 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
applications/drone-command/src/page/index/top/index.vue | 340 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 227 insertions(+), 113 deletions(-)
diff --git a/applications/drone-command/src/page/index/top/index.vue b/applications/drone-command/src/page/index/top/index.vue
index e7f7b93..d090627 100644
--- a/applications/drone-command/src/page/index/top/index.vue
+++ b/applications/drone-command/src/page/index/top/index.vue
@@ -1,38 +1,49 @@
<template>
- <div class="avue-top">
- <div class="top-bar__title">
- <img :src="logoUrl" alt="">
- <span>低空飞行监管子系统</span>
- </div>
+ <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="top-bar__right">
- <div class="top-user">
- <div class="icon-box">
- <img class="gateway" @click="jumpMH" src="@/assets/images/mh.png" alt="进入门户" title="进入门户">
- </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>
- <el-dropdown popper-class="command-custom-dropdown">
- <span class="el-dropdown-link">
- <img class="top-bar__img" :src="userInfo.avatar" alt="" />
- </span>
+ <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>
- <template #dropdown>
- <el-dropdown-menu>
- <!-- <el-dropdown-item>
+ <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>
+ <!-- <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>
+ <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>
- </div>
+ </header>
</template>
<script>
@@ -69,6 +80,35 @@
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: {},
@@ -93,115 +133,189 @@
cancelButtonClass: 'command-message-box-cancel',
}).then(() => {
this.$store.dispatch('LogOut').then(() => {
- const {VITE_APP_PARENT_SYSTEM,VITE_APP_ENV} = import.meta.env
- const isDev = VITE_APP_ENV === 'development'
- isDev
- ? this.$router.push({ path: '/login' })
- : window.location.replace(`${VITE_APP_PARENT_SYSTEM}/#/login`)
+ const { VITE_APP_PARENT_SYSTEM, VITE_APP_ENV } = import.meta.env
+ const isDev = VITE_APP_ENV === 'development'
+ isDev
+ ? this.$router.push({ path: '/login' })
+ : window.location.replace(`${VITE_APP_PARENT_SYSTEM}/#/login`)
})
})
},
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>
-.avue-top {
- display: flex;
- justify-content: space-between;
- height: 100%;
+.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;
-.top-bar__left {
- flex: 0 0 auto;
-}
-
-.top-bar__title {
- margin-top: 16px;
- margin-left: 30px;
- flex: 1;
- display: flex;
- align-items: center;
- height: pxToVh(48);
-
- img {
- margin-right: 17px;
- width: 50px;
- height: 50px;
+ .bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ pointer-events: none;
}
- span {
- 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;
- }
-}
-
-.top-bar__right {
- margin-right: 28px;
- padding-top: 16px;
- flex: 0 0 auto;
- display: flex !important;
- align-items: flex-start;
- height: 100%;
- pointer-events: auto;
- box-sizing: border-box;
-
- .icon-box {
- margin-top: 6px;
- margin-right: 30px;
+ .content-wrap {
+ position: absolute;
+ inset: 0;
display: flex;
align-items: center;
- gap: 0 20px;
+ z-index: 1;
+ padding: 0 40px;
- .gateway {
- width: 21px;
- height: 18px;
+ .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;
+ }
}
- >* {
- cursor: pointer;
+ .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 {
+ background: linear-gradient(180deg,
+ #fff 22.11%,
+ #ffffff 86.69%);
+ background-size: contain;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ text-shadow: 0px 0px 13px 0px #5da6ef73;
+ }
+ }
+ }
+ }
+
+ .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;
+ }
}
}
-}
-
-.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>
--
Gitblit v1.9.3