162 lines
3.0 KiB
Vue
162 lines
3.0 KiB
Vue
<template>
|
|
<div id="header-container">
|
|
<IntegratedLayout>
|
|
<div class="navigation-container">
|
|
<div class="logo">
|
|
<img src="/logo/white-logo.png" alt="" />
|
|
<span>AIProdLaunch</span>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="navigation-item pointer" v-for="item in navRoutes" :key="item.path"
|
|
@click="handleParentClick(item)" @mouseenter="showSubmenu(item)" @mouseleave="hideSubmenu">
|
|
<span
|
|
:class="{ 'selected-navigation': $route.matched.some(record => record.path === item.path) }">{{
|
|
item.meta.navigationName }}
|
|
<i class="el-icon-arrow-down" v-if="item.meta.children"></i>
|
|
</span>
|
|
<div v-if="activeMenu === item.path && item.meta.children" class="submenu">
|
|
<div v-for="sub in item.children" :key="sub.path" @click.stop="goto(sub.path)"
|
|
class="submenu-item pointer">
|
|
<img :src="`/logo/${sub.meta.icon}.png`" alt="" />
|
|
{{ sub.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</IntegratedLayout>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
routes
|
|
} from '~/router';
|
|
|
|
export default {
|
|
name: "Header",
|
|
|
|
computed: {
|
|
/**
|
|
* 得到routes的meta里非hidden的路由
|
|
*/
|
|
navRoutes() {
|
|
const r = routes.filter(e => {
|
|
if (e.meta) {
|
|
return !e.meta.hidden
|
|
}
|
|
return false
|
|
})
|
|
return r
|
|
},
|
|
|
|
/**
|
|
* 得到当前的路由path
|
|
*/
|
|
currentRoutePath() {
|
|
return this.$route.path
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
activeMenu: null
|
|
}
|
|
},
|
|
methods: {
|
|
handleParentClick(item) {
|
|
const hasVisibleChildren = item.meta && !item.meta.children;
|
|
if (hasVisibleChildren) {
|
|
this.goto(item.path);
|
|
}
|
|
},
|
|
/**
|
|
* 编程式导航
|
|
* @param {String} path 导航的路径
|
|
*/
|
|
goto(path) {
|
|
this.$router.push(path)
|
|
},
|
|
showSubmenu(item) {
|
|
if (item.children) {
|
|
this.activeMenu = item.path;
|
|
}
|
|
},
|
|
hideSubmenu() {
|
|
this.activeMenu = null;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#header-container {
|
|
width: 100%;
|
|
height: $navigationBarHeight;
|
|
background: $header-backgroungd;
|
|
|
|
|
|
.navigation-container {
|
|
height: $navigationBarHeight;
|
|
display: flex;
|
|
font-weight: 500;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.logo {
|
|
@include flex-center;
|
|
color: $white;
|
|
|
|
span {
|
|
font-size: $normal-font-size;
|
|
}
|
|
}
|
|
|
|
.navigation-item {
|
|
margin-left: 20px;
|
|
padding: 10px;
|
|
position: relative;
|
|
|
|
span {
|
|
color: $grey;
|
|
|
|
&:hover {
|
|
color: $white;
|
|
}
|
|
|
|
&.selected-navigation {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
.submenu {
|
|
z-index: 10;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
padding: 20px 10px;
|
|
transform: translateX(-50%);
|
|
background: $white;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
border-radius: 6px;
|
|
|
|
&-item {
|
|
white-space: nowrap; // 防止文字换行
|
|
padding: 10px;
|
|
color: #000000;
|
|
@include display-flex;
|
|
|
|
img {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
&:hover {
|
|
background: #F5F6F9;
|
|
color: $main-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|