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.
137 lines
3.8 KiB
137 lines
3.8 KiB
<template>
|
|
<header class="header w-full">
|
|
<div class="container header-height flex items-center">
|
|
<NuxtLink :to="localePath('/')" class="logo-box flex items-center">
|
|
<img class="logo" :src="siteInfo.logo"/>
|
|
</NuxtLink>
|
|
<div class="flex-1 flex">
|
|
<NuxtLink :class="{active: activeKey.startsWith('index') }" class="nav-item items-center flex px-4 hover:text-yellow" :to="localePath('/')">
|
|
{{ $t('homePage') }}
|
|
</NuxtLink>
|
|
<NuxtLink :class="{active: activeKey.startsWith('news')}" class="nav-item items-center flex px-4" :to="localePath('/news')">
|
|
{{ $t('news') }}
|
|
</NuxtLink>
|
|
<NuxtLink :class="{active: activeKey.startsWith('african-video')}" class="nav-item items-center flex px-4" :to="localePath('/african-video')" >
|
|
{{ $t('africanVideo') }}
|
|
</NuxtLink>
|
|
<NPopover trigger="hover" placement="bottom">
|
|
<template #trigger>
|
|
<span :style="{color: (activeKey.startsWith('service') || activeKey.startsWith('product')? '#896B34':'')}" class="nav-item items-center flex px-4 cursor-pointer">
|
|
{{$t('serviceAndProduct')}}
|
|
</span>
|
|
</template>
|
|
<div class="p-2">
|
|
<NuxtLink :class="{active: activeKey.startsWith('service')}" class="nav-item items-center flex py-2" :to="localePath('/service')">
|
|
{{ $t('service') }}
|
|
</NuxtLink>
|
|
<NuxtLink :class="{active: activeKey.startsWith('product')}" class="nav-item items-center flex py-2" :to="localePath('/product')">
|
|
{{ $t('product') }}
|
|
</NuxtLink>
|
|
</div>
|
|
</NPopover>
|
|
|
|
|
|
<NuxtLink :class="{active: activeKey.startsWith('about')}" class="nav-item items-center flex px-4" :to="localePath('/about')">
|
|
{{ $t('aboutUs') }}
|
|
</NuxtLink>
|
|
</div>
|
|
<NSpace class="items-center">
|
|
<NInput @keydown="searchFunc" :placeholder="$t('search')" size="medium" v-model:value="keyword">
|
|
<template #prefix>
|
|
<n-icon :component="SearchOutline" color="#E5E5E5" />
|
|
</template>
|
|
</NInput>
|
|
<NButton size="medium" text type="default" @click="switchLanguage" tertiary>{{ $t('language') }}</NButton>
|
|
</NSpace>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {MenuOption, NIcon, NInput, NButton, NSpace,NDropdown,NPopover} from "naive-ui";
|
|
import {NuxtLink} from "#components";
|
|
import {SearchOutline} from "@vicons/ionicons5";
|
|
// 站点信息
|
|
const siteInfo = useSiteInfo()
|
|
|
|
// 当前页面高亮
|
|
const activeKey = ref<String>('index')
|
|
const route = useRoute()
|
|
activeKey.value = route.name?route.name.toString(): ''
|
|
watch(
|
|
() => route.name,
|
|
(name) => {
|
|
console.log(name)
|
|
activeKey.value = name?name.toString(): ''
|
|
}
|
|
)
|
|
|
|
const serviceAndProduct = ref<any[]>([
|
|
{
|
|
label: '布朗酒店，伦敦',
|
|
key: "brown's hotel, london"
|
|
},
|
|
])
|
|
|
|
// 切换语言
|
|
const { locale, locales, setLocale } = useI18n()
|
|
const localePath = useLocalePath()
|
|
const switchLanguage = () => {
|
|
locale.value = locale.value == 'zh' ? 'en' : 'zh'
|
|
useCookie('lang').value = locale.value
|
|
}
|
|
// 搜索
|
|
const keyword = ref<String>('')
|
|
const searchFunc = (e: any) => {
|
|
if(e.key === 'Enter'){
|
|
const path = localePath({
|
|
path: '/search',
|
|
query: {
|
|
word: keyword.value
|
|
}
|
|
})
|
|
navigateTo(path)
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<style scoped>
|
|
.header {
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 999;
|
|
background: rgba(255,255,255, .7);
|
|
color: #333333;
|
|
|
|
}
|
|
|
|
.logo-box{
|
|
max-width: 300px;
|
|
height: 60px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-content: center;
|
|
}
|
|
.logo{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.container {
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.nav-item {
|
|
font-size: 18px;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
color: #896B34;
|
|
}
|
|
|
|
.nav-item.active {
|
|
color: #896B34;
|
|
}
|
|
</style>
|