148 lines
3.6 KiB
Vue
148 lines
3.6 KiB
Vue
<template>
|
|
<header class="w-full bg-white text-white py-6 absolute top-0 left-0 " style="height: 100px;z-index: 2;">
|
|
<nav class="container mx-auto px-4">
|
|
<div class="flex justify-between items-center">
|
|
<!-- Logo section -->
|
|
<div class="text-center">
|
|
<div class="nwTitle">河南纳威格特商贸有限公司</div>
|
|
<div class="nwTitle1">Henan Navigate Trading Co., Ltd</div>
|
|
</div>
|
|
<!-- Mobile menu button -->
|
|
<div class="hdRig md:hidden">
|
|
<button class="hdBtn" @click="toggleMenu">
|
|
<span class="block w-6 h-0.5 bg-gray-800 mb-1.5"></span>
|
|
<span class="block w-6 h-0.5 bg-gray-800 mb-1.5"></span>
|
|
<span class="block w-6 h-0.5 bg-gray-800"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Navigation menu -->
|
|
<div class="homeTit hidden md:block">
|
|
<ul class="navList flex space-x-16">
|
|
<li>
|
|
<NuxtLink to="/" :class="{ 'active': route.path === '/' }">
|
|
{{ $t('home') }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="index_about" :class="{ 'active': route.path === '/index_about' }">
|
|
{{ $t('index_about') }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="index_service" :class="{ 'active': route.path === '/index_service' }">
|
|
{{ $t('index_services') }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="index_clients" :class="{ 'active': route.path === '/index_clients' }">
|
|
{{ $t('index_clients') }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="index_news" :class="{ 'active': route.path === '/index_news' }">
|
|
{{ $t('index_news') }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="index_contact" :class="{ 'active': route.path === '/index_contact' }">
|
|
{{ $t('index_contact') }}
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="header_lang hidden md:flex space-x-4">
|
|
<span @click="$i18n.locale = 'zh'" class="cursor-pointer">中文版</span>
|
|
<span @click="$i18n.locale = 'en'" class="cursor-pointer">English</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
console.log(route)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.nwTitle {
|
|
color: #1C1C1C;
|
|
font-size: 26px;
|
|
line-height: 30px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nwTitle1 {
|
|
color: #1C1C1C;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
letter-spacing: 2.7px;
|
|
}
|
|
|
|
.header_lang {
|
|
color: #1C1C1C;
|
|
font-weight: bold;
|
|
|
|
span {
|
|
&:hover {
|
|
color: #214ADB;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hdBtn {
|
|
span {
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
|
|
.navList {
|
|
li {
|
|
a {
|
|
display: block;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
color: #9C9C9C;
|
|
padding: 0 4px;
|
|
line-height: 40px;
|
|
position: relative;
|
|
transition: all 0.5s ease;
|
|
|
|
&:after {
|
|
display: block;
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
width: 0;
|
|
height: 3px;
|
|
background: #214ADB;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
&:hover {
|
|
color: #214ADB;
|
|
|
|
&:after {
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
color: #214ADB;
|
|
|
|
&:after {
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|