349 lines
8.9 KiB
Vue
349 lines
8.9 KiB
Vue
<template>
|
|
<header class="w-full bg-white text-white pt-6 absolute top-0 left-0 " style="height: 100px;z-index: 100;">
|
|
<nav class="container mx-auto px-4">
|
|
<div class="flex justify-between items-center">
|
|
<!-- Logo section -->
|
|
<div class="text-center">
|
|
<div class="nwTitle text-2xl md:text-[26px]">{{ store.tempApiData.company_name}}</div>
|
|
<div class="nwTitle1 text-xs md:text-sm">{{store.tempApiData.en_company_name }}</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" :class="{ 'transform rotate-45 translate-y-2': isMenuOpen }"></span>
|
|
<span class="block w-6 h-0.5 bg-gray-800 mb-1.5" :class="{ 'opacity-0': isMenuOpen }"></span>
|
|
<span class="block w-6 h-0.5 bg-gray-800" :class="{ 'transform -rotate-45 -translate-y-2': isMenuOpen }"></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 === '/' }">
|
|
{{ locale == 'zh' ? web_site_cate.biaoti1 : web_site_cate.biaoti1_en }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="/index_about/" :class="{ 'active': route.path === '/index_about/' }">
|
|
{{ locale == 'zh' ? web_site_cate.biaoti2 : web_site_cate.biaoti2_en }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="/index_service/" :class="{ 'active': route.path === '/index_service/' }">
|
|
{{ locale == 'zh' ? web_site_cate.biaoti3 : web_site_cate.biaoti3_en }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="/index_clients/" :class="{ 'active': route.path === '/index_clients/' }">
|
|
{{ locale == 'zh' ? web_site_cate.biaoti4 : web_site_cate.biaoti4_en }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="/index_news/" :class="{ 'active': route.path === '/index_news/' }">
|
|
{{ locale == 'zh' ? web_site_cate.biaoti6 : web_site_cate.biaoti6_en }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="/index_contact/" :class="{ 'active': route.path === '/index_contact/' }">
|
|
{{ locale == 'zh' ? web_site_cate.biaoti7 : web_site_cate.biaoti7_en }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="/index_products/" :class="{ 'active': route.path === '/index_products/' }">
|
|
{{ locale == 'zh' ? web_site_cate.biaoti5 : web_site_cate.biaoti5_en }}
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="header_lang hidden md:flex space-x-4">
|
|
<span @click="changeLanguage('zh')" class="cursor-pointer">中文版</span>
|
|
<span @click="changeLanguage('en')" class="cursor-pointer">English</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile menu -->
|
|
|
|
</nav>
|
|
<div v-show="isMenuOpen" class="mobile-menu md:hidden mt-4 px-2">
|
|
<ul class="flex flex-col">
|
|
<li class="py-2">
|
|
<NuxtLink to="/" :class="{ 'active': route.path === '/' }" @click="closeMenu">
|
|
{{ $t('home') }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li class="py-2">
|
|
<NuxtLink to="/index_about/" :class="{ 'active': route.path === '/index_about/' }" @click="closeMenu">
|
|
{{ $t('index_about') }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li class="py-2">
|
|
<NuxtLink to="/index_service/" :class="{ 'active': route.path === '/index_service/' }" @click="closeMenu">
|
|
{{ $t('index_services') }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li class="py-2">
|
|
<NuxtLink to="/index_clients/" :class="{ 'active': route.path === '/index_clients/' }" @click="closeMenu">
|
|
{{ $t('index_clients') }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li class="py-2">
|
|
<NuxtLink to="/index_news/" :class="{ 'active': route.path === '/index_news/' }" @click="closeMenu">
|
|
{{ $t('index_news') }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li class="py-2">
|
|
<NuxtLink to="/index_contact/" :class="{ 'active': route.path === '/index_contact/' }" @click="closeMenu">
|
|
{{ $t('index_contact') }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li class="py-2">
|
|
<NuxtLink to="/index_products/" :class="{ 'active': route.path === '/index_products/' }" @click="closeMenu">
|
|
{{ $t('index_products') }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li class="py-3 flex space-x-4">
|
|
<span @click="changeLanguage('zh')" class="cursor-pointer">中文版</span>
|
|
<span @click="changeLanguage('en')" class="cursor-pointer">English</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useStore } from '~/store'
|
|
import $api from '@/service/webRequest'
|
|
const store = useStore()
|
|
const route = useRoute()
|
|
const isMenuOpen = ref(false)
|
|
const { locale } = useI18n()
|
|
const web_site_cate = ref({});
|
|
const top_two = ref({});
|
|
|
|
onMounted(() => {
|
|
webSiteCate();
|
|
topTwoList();
|
|
})
|
|
const toggleMenu = () => {
|
|
isMenuOpen.value = !isMenuOpen.value
|
|
}
|
|
|
|
const closeMenu = () => {
|
|
isMenuOpen.value = false
|
|
}
|
|
|
|
const changeLanguage = (lang: string) => {
|
|
locale.value = lang
|
|
localStorage.setItem('isEnglish', lang)
|
|
//store.setIsEnglish(lang)
|
|
closeMenu()
|
|
}
|
|
|
|
const webSiteCate = () => {
|
|
$api.get("/api/sys_config?name=web_site_cate")
|
|
.then((res: any) => {
|
|
console.log(res)
|
|
web_site_cate.value = res.data.data.config
|
|
})
|
|
.catch((err) => {
|
|
console.dir(err)
|
|
})
|
|
}
|
|
const topTwoList = () => {
|
|
$api.get("/api/sys_config?name=top_two")
|
|
.then((res: any) => {
|
|
console.log(res)
|
|
top_two.value = res.data.data.config
|
|
})
|
|
.catch((err) => {
|
|
console.dir(err)
|
|
})
|
|
}
|
|
|
|
console.log(route)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.nwTitle {
|
|
color: #1C1C1C;
|
|
line-height: 30px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nwTitle1 {
|
|
color: #1C1C1C;
|
|
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%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.products{
|
|
position: relative;
|
|
.products_list{
|
|
display: none;
|
|
position: absolute;
|
|
background: #ffffff;
|
|
width: 120px;
|
|
li{
|
|
a {
|
|
display: block;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
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%;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
&:hover .products_list{
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobile-menu {
|
|
background-color: white;
|
|
border-radius: 4px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
animation: fadeIn 0.3s ease;
|
|
|
|
li {
|
|
a {
|
|
display: block;
|
|
padding: 0 10px;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
color: #9C9C9C;
|
|
transition: all 0.3s ease;
|
|
|
|
&.active, &:hover {
|
|
color: #214ADB;
|
|
}
|
|
}
|
|
}
|
|
|
|
span {
|
|
color: #1C1C1C;
|
|
font-weight: bold;
|
|
|
|
&:hover {
|
|
color: #214ADB;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
header {
|
|
height: auto !important;
|
|
min-height: 80px;
|
|
}
|
|
}
|
|
</style>
|