<template>
|
<div class="header" v-cloak>
|
<div class="top_nav">
|
<div class="container">
|
<div class="logo">
|
<img
|
src="/src/assets/image/header_logo.png"
|
title="七星瓢虫环境科技-大气污染解决方案 空气监测 臭氧与PM2.5协同管控"
|
/>
|
</div>
|
<div class="top-nav">
|
<ul class="menuList">
|
<li
|
v-for="menu in menuList"
|
:key="menu.id"
|
@mouseenter="menu.show = !menu.show"
|
@mouseleave="menu.show = !menu.show"
|
>
|
<div></div>
|
|
<span class="navName" @click="goPage(menu)">
|
<img v-if="menu.id === '7'" src="/src/assets/image/phone.png" class="phoneIcon" />
|
{{ menu.name }}
|
</span>
|
<span v-if="menu.id !== '7'">|</span>
|
<template v-if="menu.list.length > 0">
|
<div class="overList" v-show="menu.show">
|
<div
|
@click="goPage(val)"
|
v-for="(val, index) in menu.list"
|
:key="index"
|
class="menuBox"
|
:class="{ hoverBg: val.show }"
|
@mouseenter="val.show = !val.show"
|
@mouseleave="val.show = !val.show"
|
>
|
<div>
|
{{ val.name }}
|
</div>
|
</div>
|
</div>
|
</template>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive } from 'vue'
|
import { useRouter } from 'vue-router'
|
let menuList = reactive([
|
{ name: '首页', path: '/', id: '1', show: false, list: [] },
|
{
|
name: '解决方案',
|
path: '/solution',
|
id: '2',
|
show: false,
|
list: [
|
{ name: '臭氧&PM2.5协同管控', show: false, path: '/solution', id: '2' },
|
{ name: '涉气企业无组织排放断面管控', show: false, path: '/solution', id: '21' },
|
{ name: '环保管家服务', show: false, path: '/solution', id: '22' },
|
{ name: '更多详情', show: false, path: '/solution', id: '23' }
|
]
|
},
|
{
|
name: '产品中心',
|
path: '/product',
|
show: false,
|
id: '3',
|
list: [
|
{ name: '23参数微型空气站', show: false, path: '/product', id: '3' },
|
{ name: '大气环境智慧监测指挥平台', show: false, path: '/product', id: '31' },
|
{ name: '无人机数据黑匣子监测系统', show: false, path: '/product', id: '32' },
|
{ name: '一体化扬尘监测系统', show: false, path: '/product', id: '33' }
|
]
|
},
|
{
|
name: '新闻中心',
|
path: '/news',
|
show: false,
|
id: '4',
|
list: [
|
{ name: '公司新闻', show: false, path: '/news', id: '4' },
|
{ name: '行业新闻', show: false, path: '/news', id: '41' }
|
]
|
},
|
{
|
name: '关于我们',
|
path: '/about',
|
show: false,
|
id: '5',
|
list: [
|
{ name: '品牌故事', show: false, path: '/about', id: '5', hash: '#mian1' },
|
{ name: '发展历程', show: false, path: '/about', id: '51', hash: '#mian2' },
|
{ name: '企业文化', show: false, path: '/about', id: '52', hash: '#mian3' }
|
]
|
},
|
{ name: '联系我们', path: '/contact', id: '6', show: false, list: [] },
|
{ name: '0512-36871300', path: '/contact', id: '7', show: false, list: [] }
|
])
|
const router = useRouter()
|
let goPage = (item: any) => {
|
if (item.path !== '') {
|
let hash = item.hash ? item.hash : ''
|
router.push({ path: item.path, hash: hash, query: { name: item.name, id: item.id } })
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
[v-cloak] {
|
display: none;
|
}
|
body {
|
margin: 0px;
|
}
|
@media (min-width: 768px) {
|
.container {
|
width: 750px;
|
}
|
}
|
@media (min-width: 992px) {
|
.container {
|
width: 970px;
|
}
|
}
|
@media (min-width: 1200px) {
|
.container {
|
/* width: 1170px; */
|
width: 1270px;
|
}
|
}
|
.header {
|
position: fixed;
|
z-index: 100;
|
width: 100%;
|
background-color: rgba(0, 0, 0, 0.6);
|
padding-top: 10px;
|
|
.container {
|
margin-right: auto;
|
margin-left: auto;
|
display: flex;
|
align-items: flex-end;
|
justify-content: space-between;
|
.top-nav {
|
li {
|
cursor: pointer;
|
margin-right: 10px;
|
color: #fff;
|
font-weight: 900;
|
font-size: 14px;
|
position: relative;
|
.navName {
|
padding: 0.2em 1.5em;
|
font-size: 0.875em;
|
line-height: 57px;
|
transition: 0.5s all;
|
&:hover {
|
color: #ff575a;
|
}
|
}
|
.overList {
|
position: absolute;
|
width: 185px;
|
left: 0;
|
padding-bottom: 12px;
|
transition: 0.5s all;
|
background: rgba(0, 0, 0, 0.7);
|
border-bottom-right-radius: 6px;
|
border-bottom-left-radius: 6px;
|
margin-left: -35px;
|
overflow: hidden;
|
padding-top: 6px;
|
box-shadow: 0 0 2px #ccc inset;
|
text-align: center;
|
.menuBox {
|
padding: 10px;
|
font-size: 12px;
|
border-bottom: 1px solid #f2f2f2;
|
}
|
}
|
}
|
}
|
}
|
}
|
.menuList {
|
display: flex;
|
}
|
.hoverBg {
|
background: #ff575a;
|
}
|
.phoneIcon {
|
vertical-align: middle;
|
}
|
</style>
|
