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.
87 lines
2.4 KiB
87 lines
2.4 KiB
<template>
|
|
<div class="header">
|
|
<div class="logo">
|
|
<img src="/images/logo.png" />
|
|
南京生态环境评估决策平台
|
|
</div>
|
|
<div class="nav">
|
|
<div class="nav-item">
|
|
<router-link to="/MicrowaveRadiation">微波辐射计</router-link>
|
|
</div>
|
|
<div class="nav-item">
|
|
<router-link to="/RamanLidar">拉曼激光雷达</router-link>
|
|
</div>
|
|
<div class="nav-item">
|
|
<router-link to="/SynergyEvaluation">生态环境效应评估</router-link>
|
|
</div>
|
|
<div class="nav-item">
|
|
<router-link to="/DecisionSupport">决策支持</router-link>
|
|
</div>
|
|
<div class="nav-item">
|
|
<router-link to="/SystemManagement">系统管理</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'Header',
|
|
setup() {
|
|
return {}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.header {
|
|
width: 100%;
|
|
height: 0.84rem;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #ffffff;
|
|
.logo {
|
|
margin-left: 0.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: 2px;
|
|
font-size: 0.3rem;
|
|
font-weight: bold;
|
|
|
|
img {
|
|
width: 0.53rem;
|
|
margin-right: 0.1rem;
|
|
}
|
|
}
|
|
.nav {
|
|
margin: 0.17rem 0 0 0.5rem;
|
|
display: flex;
|
|
font-size: 0.22rem;
|
|
.nav-item {
|
|
width: 1.7rem;
|
|
height: 0.66rem;
|
|
margin: 0 0.25rem;
|
|
line-height: 0.5rem;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
|
|
a {
|
|
height: 100%;
|
|
color: #ffffff;
|
|
}
|
|
|
|
&:nth-of-type(3) {
|
|
width: 2.3rem;
|
|
.active {
|
|
background: url("/images/nav-bg-big.png") no-repeat center/cover;
|
|
}
|
|
}
|
|
.active {
|
|
color: #23FBFF;
|
|
background: url("/images/nav-bg.png") no-repeat center/cover;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|