<template>
|
<div class="navPage">
|
<div class="navBox">
|
<ul class="navList flex ai-c jc-sb">
|
<li v-for="item in navList" :key="item.path"
|
:class="{ active: route.query.type ? `/${route.query.type}` == item.path : route.path.indexOf(item.path) > -1 }"
|
@click="goPage(item.path)">
|
<img :src="route.path.indexOf(item.path) ? item.activeIcon : item.defaultIcon">
|
<span>{{ item.name }}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
import contrast from '@/assets/images/header/contrast_icon.svg'
|
import activeContrast from '@/assets/images/header/active_contrast_icon.svg'
|
import annotate from '@/assets/images/header/annotate_icon.svg'
|
import activeAnnotate from '@/assets/images/header/active_annotate_icon.svg'
|
import us from '@/assets/images/header/us_icon.svg'
|
import activeUs from '@/assets/images/header/active_us_icon.svg'
|
import { useRoute, useRouter } from 'vue-router'
|
import { ref, inject} from 'vue'
|
const router = useRouter()
|
const route = useRoute()
|
const config:any = inject('config')
|
const navList = ref([
|
{
|
name: '对读模式',
|
path: config.pathData.comparison,
|
defaultIcon:contrast,
|
activeIcon:activeContrast
|
},
|
{
|
name: '注释模式',
|
path: config.pathData.annotation,
|
defaultIcon:annotate,
|
activeIcon:activeAnnotate
|
},
|
{
|
name: '关于我们',
|
path: config.pathData.about,
|
defaultIcon:us,
|
activeIcon:activeUs
|
},
|
])
|
const goPage = (path: string) => {
|
router.push(path)
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.navPage{
|
height: 76px;
|
.navBox {
|
width: 600px;
|
height: 100%;
|
margin: 0 auto;
|
|
.navList {
|
height: 76px;
|
li {
|
display: flex;
|
align-items: center;
|
height: 76px;
|
line-height: 76px;
|
color: @default-banner-txt-color;
|
width: 150px;
|
font-size: 18px;
|
font-weight: bold;
|
text-align: center;
|
cursor: pointer;
|
span {
|
margin-left: 7px;
|
}
|
}
|
}
|
|
.active {
|
color: @active-txt-color !important;
|
background-size: 150px;
|
}
|
}
|
}
|
</style>
|
