You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.8 KiB
89 lines
2.8 KiB
3 years ago
|
<template>
|
||
|
|
<div class="header">
|
||
|
|
<div class="logo">
|
||
|
|
<img src="/images/logo.png" />
|
||
|
|
南京生态环境评估决策平台
|
||
|
|
</div>
|
||
|
|
<div class="nav">
|
||
|
|
<div class="nav-item" @click="onNavClick('MicrowaveRadiation')" :class="{'active': currentPath === 'MicrowaveRadiation'}">微波辐射计</div>
|
||
|
|
<div class="nav-item" @click="onNavClick('RamanLidar')" :class="{'active': currentPath === 'RamanLidar'}">拉曼激光雷达</div>
|
||
|
|
<div class="nav-item" @click="onNavClick('SynergyEvaluation')" :class="{'active': currentPath === 'SynergyEvaluation'}">生态环境效应评估</div>
|
||
|
|
<div class="nav-item" @click="onNavClick('DecisionSupport')" :class="{'active': currentPath === 'DecisionSupport'}">决策支持</div>
|
||
|
|
<div class="nav-item" @click="onNavClick('SystemManagement')" :class="{'active': currentPath === 'SystemManagement'}">系统管理</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { reactive, onMounted, toRefs } from "vue";
|
||
|
|
import { useRouter } from 'vue-router';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Header',
|
||
|
|
setup() {
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
let options = reactive({
|
||
|
|
currentPath: 'MicrowaveRadiation'
|
||
|
|
})
|
||
|
|
|
||
|
|
const onNavClick = (path) => {
|
||
|
|
options.currentPath = path;
|
||
|
|
router.push({path: path});
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
...toRefs(options),
|
||
|
|
onNavClick
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.header {
|
||
|
|
width: 100%;
|
||
|
|
height: 84px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
color: #ffffff;
|
||
|
|
.logo {
|
||
|
|
margin-left: 20px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
font-size: 30px;
|
||
|
|
font-weight: bold;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 53px;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.nav {
|
||
|
|
margin: 17px 0 0 50px;
|
||
|
|
display: flex;
|
||
|
|
font-size: 22px;
|
||
|
|
.nav-item {
|
||
|
|
width: 170px;
|
||
|
|
height: 66px;
|
||
|
|
margin: 0 25px;
|
||
|
|
line-height: 50px;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
&:nth-of-type(3) {
|
||
|
|
width: 230px;
|
||
|
|
&.active {
|
||
|
|
background: url("/images/nav-bg-big.png") no-repeat center/cover;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.active {
|
||
|
|
color: #ffffff;
|
||
|
|
background: url("/images/nav-bg.png") no-repeat center/cover;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|