<script setup>
|
import banner from '@/assets/images/banner1@2x.png';
|
import banner2 from '@/assets/images/banner2@2x.png';
|
|
const getUrl = (name) => {
|
// return new URL(url, import.meta.url).href;
|
return new URL(`../assets/images/${name}.png`, import.meta.url).href;
|
};
|
|
const getIcon = (name) => {
|
// return new URL(url, import.meta.url).href;
|
return new URL(`../assets/images/icons/${name}.png`, import.meta.url).href;
|
};
|
|
const route = useRoute();
|
const router = useRouter();
|
|
const navs = [
|
{
|
path: '/',
|
name: 'About us',
|
},
|
{
|
path: '/Products',
|
name: 'Products',
|
},
|
{
|
path: '/Projects',
|
name: 'Projects',
|
},
|
{
|
path: '/Clients',
|
name: 'Clients',
|
},
|
{
|
path: '/Career',
|
name: 'Career',
|
},
|
];
|
|
const activeNav = ref(route.path == '' ? '/' : route.path);
|
|
const banners = [
|
{
|
id: 1,
|
image: banner, // 雪山 (Home-3)
|
title: 'CLEAN AIR.',
|
subtitle: 'SMART TECHNOLOGY.',
|
},
|
{
|
id: 2,
|
image: banner2, // 工业风 (Home-2)
|
title: 'CLEAN AIR.',
|
subtitle: 'SMART TECHNOLOGY.',
|
},
|
// {
|
// id: 3,
|
// image: banner2, // 工业风 (Home-2)
|
// title: 'CLEAN AIR.',
|
// subtitle: 'SMART TECHNOLOGY.',
|
// },
|
];
|
|
const currentSlide = ref(0);
|
let timer = null;
|
|
const nextSlide = () => {
|
currentSlide.value = (currentSlide.value + 1) % banners.length;
|
};
|
|
const prevSlide = () => {
|
currentSlide.value = (currentSlide.value - 1 + banners.length) % banners.length;
|
};
|
|
const goToSlide = (index) => {
|
currentSlide.value = index;
|
};
|
|
const startAutoPlay = () => {
|
clearInterval(timer);
|
timer = setInterval(nextSlide, 6000);
|
};
|
|
const stopAutoPlay = () => {
|
clearInterval(timer);
|
};
|
|
onMounted(() => {
|
startAutoPlay();
|
});
|
|
onUnmounted(() => {
|
stopAutoPlay();
|
});
|
|
const solutions = [
|
{
|
title: 'Ventilation Damper',
|
// image: getUrl('../assets/images/图层 79@2x.png'),
|
// icon: getUrl('../assets/images/icons/Ventilation Damper-icon@2x.png'),
|
image: getUrl('图层 79@2x'),
|
icon: getIcon('Ventilation Damper-icon@2x'),
|
},
|
{
|
title: 'Air Ducts',
|
// image: getUrl('../assets/images/Air Ducts-pic@2x.png'),
|
// icon: getUrl('../assets/images/icons/Air Ducts-icon@2x.png'),
|
image: getUrl('Air Ducts-pic@2x'),
|
icon: getIcon('Air Ducts-icon@2x'),
|
},
|
{
|
title: 'Muffler',
|
// image: getUrl('../assets/images/Muffler-pic@2x.png'),
|
// icon: getUrl('../assets/images/icons/Muffler-icon@2x.png'),
|
image: getUrl('Muffler-pic@2x'),
|
icon: getIcon('Muffler-icon@2x'),
|
},
|
{
|
title: 'Air Outlet',
|
// image: getUrl('../assets/images/Air Outlet-pic@2x.png'),
|
// icon: getUrl('../assets/images/icons/Air Outlet-icon@2x.png'),
|
image: getUrl('Air Outlet-pic@2x'),
|
icon: getIcon('Air Outlet-icon@2x'),
|
},
|
];
|
|
const changeLange = (lang = 'en') => {
|
if (lang === 'en') {
|
router.push('/');
|
} else {
|
router.push('/cn');
|
}
|
};
|
</script>
|
|
<template>
|
<div class="en-font min-h-screen font-sans text-slate-800 bg-[#F1F1F3]">
|
<div
|
class="absolute z-50 left-0 top-0 right-0 h-[180px] bg-linear-[to_bottom,#fff,rgba(255,255,255,.91)_21%,rgba(255,255,255,.88)_48%,rgba(255,255,255,.6)_65%,rgba(255,255,255,0.20),transparent]"
|
>
|
<header
|
class="px-10 lg:px-20 xl:px-30 2xl:px-55 3xl:px-80 py-[30px] flex items-center justify-between relative z-50"
|
>
|
<div class="flex flex-row flex-nowrap">
|
<img
|
class="h-[38px] w-[170px] aspect-188/42 lg:h-[42px] lg:w-[188px]"
|
src="@/assets/images/logo@2x.png"
|
/>
|
<nav
|
class="hidden ml-8 md:flex gap-x-8 text-[22px] font-bold text-[#132251] tracking-wide"
|
>
|
<template v-for="item in navs" :key="item.path">
|
<a
|
href="#"
|
class="px-4 text-nowrap border-b-8 border-transparent transition-colors duration-300"
|
:class="[
|
activeNav === item.path ? ' border-b-8 border-[#132251]! scale-[1.15]' : '',
|
]"
|
@click="activeNav = item.path"
|
>{{ item.name }}</a
|
>
|
</template>
|
</nav>
|
</div>
|
|
<div class="group relative h-8 cursor-pointer select-none transition">
|
<div
|
class="relative z-20 px-2.5 bg-white border-2 border-[#132251] rounded-full w-full flex items-center gap-2"
|
>
|
<img src="@/assets/images/en-icon@2x.png" class="w-8 h-auto" alt="UK Flag" />
|
<span class="text-xl font-bold text-[#132251]">EN</span>
|
<el-icon class=""><ArrowDown /></el-icon>
|
</div>
|
|
<ul
|
class="opacity-0 scale-y-0 absolute z-10 top-4 pt-5 pb-2 px-1 left-0 right-0 w-full rounded-br-lg rounded-bl-lg transition-transform origin-top duration-300 bg-[#132251] group-hover:opacity-100 group-hover:scale-y-100"
|
>
|
<li
|
class="text-#fff flex flex-row items-center gap-x-2 px-2 rounded-full hover:bg-[#2499D3] transition duration-300"
|
@click="changeLange('cn')"
|
>
|
<img src="@/assets/images/CN-icon@2x.png" class="w-8 h-auto" alt="UK Flag" />
|
<span class="text-xl font-bold text-white">CN</span>
|
</li>
|
</ul>
|
</div>
|
</header>
|
</div>
|
|
<div
|
class="relative w-full h-screen md:h-[707px] overflow-hidden bg-white group"
|
@mouseenter="stopAutoPlay"
|
@mouseleave="startAutoPlay"
|
>
|
<div class="relative w-full h-full">
|
<transition-group name="fade">
|
<div
|
v-for="(banner, index) in banners"
|
:key="banner.id"
|
v-show="currentSlide === index"
|
class="absolute inset-0 w-full h-full"
|
>
|
<img
|
:src="banner.image"
|
class="slide-up-imgage w-full h-full object-cover brightness-[0.65]"
|
/>
|
|
<div class="absolute inset-0 flex items-center px-6 md:px-30 z-20">
|
<div class="text-white">
|
<div
|
class="slide-up-text bg-black/40 rounded-xs pt-[60px] pr-[98px] pb-10 pl-[82px] text-[50px]/[50px]"
|
style="animation-delay: 1.2s"
|
>
|
<h1
|
:key="`t1-${currentSlide}`"
|
class="slide-up-text font-bold tracking-tighter drop-shadow-2xl"
|
style="animation-delay: 1.8s"
|
>
|
{{ banner.title }}
|
</h1>
|
<h2
|
:key="`t2-${currentSlide}`"
|
class="slide-up-text font-bold tracking-tighter drop-shadow-2xl"
|
style="animation-delay: 1.8s"
|
>
|
{{ banner.subtitle }}
|
</h2>
|
</div>
|
|
<!-- <p
|
:key="`t3-${currentSlide}`"
|
class="slide-up-text text-base md:text-xl font-light text-gray-100 max-w-xl tracking-wide leading-loose"
|
style="animation-delay: 1.3s; font-family: sans-serif"
|
>
|
Leading service provider of smart technology and tailored solutions for industrial
|
waste gas treatment.
|
</p> -->
|
</div>
|
</div>
|
</div>
|
</transition-group>
|
</div>
|
|
<button
|
@click="prevSlide"
|
class="absolute w-[30px] h-[71px] left-[85px] top-1/2 -translate-y-1/2 z-30 cursor-pointer rounded-full transition-all duration-500 backdrop-blur-sm group-hover:opacity-100 opacity-0"
|
>
|
<img class="w-full h-full" src="@/assets/images/icons/左-btn@2x.png" />
|
</button>
|
|
<button
|
@click="nextSlide"
|
class="absolute w-[30px] h-[71px] right-[85px] top-1/2 -translate-y-1/2 z-30 cursor-pointer rounded-full transition-all duration-500 backdrop-blur-sm group-hover:opacity-100 opacity-0"
|
>
|
<img class="w-full h-full" src="@/assets/images/icons/右-btn@2x.png" />
|
</button>
|
|
<div class="absolute bottom-14 left-1/2 -translate-x-1/2 z-30 flex gap-4">
|
<button
|
v-for="(banner, index) in banners"
|
:key="index"
|
@click="goToSlide(index)"
|
class="h-4 cursor-pointer rounded-full bg-white transition-all duration-[1500ms]"
|
:class="currentSlide === index ? 'w-20 opacity-100' : 'w-4 hover:opacity-80'"
|
></button>
|
</div>
|
</div>
|
|
<section class="pt-25 bg-white text-center overflow-hidden">
|
<div class="container mx-auto">
|
<h3 class="text-[46px] font-bold text-[#132251]">About Us</h3>
|
<p
|
class="mt-8 max-w-3xl mx-auto text-2xl font-bold md:text-xl text-[#132251] mb-12 leading-relaxed px-4"
|
>
|
The Thundearth Group is committed to being a leading service provider of <br />
|
smart technology and tailored solutions for industrial waste gas treatment
|
</p>
|
|
<div class="relative mx-auto w-[78.4%] h-auto">
|
<img
|
src="@/assets/images/maps@2x.png"
|
class="w-full h-full object-contain"
|
alt="Map Pattern"
|
/>
|
|
<!-- <div
|
v-for="loc in locations"
|
:key="loc.country"
|
class="absolute flex flex-col items-center group cursor-pointer hover:scale-110 transition-transform duration-300"
|
:style="{ top: loc.top, left: loc.left }"
|
>
|
<div
|
class="bg-white/90 backdrop-blur border border-gray-200 shadow-sm px-2 py-0.5 rounded-[2px] flex items-center gap-1.5 mb-1 whitespace-nowrap"
|
>
|
<img
|
:src="`https://flagcdn.com/w20/${loc.flag}.png`"
|
class="w-3.5 h-auto shadow-sm"
|
:alt="loc.country"
|
/>
|
<span class="text-[10px] md:text-xs font-bold text-blue-900">{{ loc.country }}</span>
|
</div>
|
<MapPin class="w-4 h-4 text-blue-500 fill-blue-500" />
|
</div> -->
|
</div>
|
</div>
|
</section>
|
|
<section class="relative h-[228px] text-white">
|
<div class="absolute inset-0 z-0">
|
<img src="@/assets/images/数字底图@2x.png" class="w-full h-full object-cover grayscale" />
|
</div>
|
|
<div
|
class="container mx-auto h-full px-[200px] flex flex-row justify-between items-center font-bold text-white relative z-10"
|
>
|
<div class="px-2 flex flex-col items-center">
|
<div class="text-[76px]/[76px]">2018</div>
|
<div class="text-[26px] tracking-wider">Foundation</div>
|
</div>
|
<div class="px-2 flex flex-col items-center">
|
<div class="text-[76px]/[76px]">7</div>
|
<div class="text-[26px] tracking-wider">Countries</div>
|
</div>
|
<div class="px-2 flex flex-col items-center">
|
<div class="text-[76px]/[76px]">70+</div>
|
<div class="text-[26px] tracking-wider">Employees</div>
|
</div>
|
<div class="px-2 flex flex-col items-center">
|
<div class="text-[76px]/[76px]">40+</div>
|
<div class="text-[26px] tracking-wider">Projects</div>
|
</div>
|
</div>
|
</section>
|
|
<section class="mt-25 bg-blue-50/30 text-center">
|
<div class="container mx-auto px-4">
|
<h3 class="text-[46px] font-bold text-[#132251]">Solution</h3>
|
|
<div class="mt-14 flex flex-row flex-wrap max-w-[1230px] gap-px mx-auto">
|
<div
|
v-for="sol in solutions"
|
:key="sol.title"
|
class="group relative h-[200px] flex-1 basis-[45%] shrink-0 text-[26px] overflow-hidden cursor-pointer"
|
>
|
<img :src="sol.image" class="w-full h-full transition duration-700" />
|
|
<div
|
class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 w-[55%] flex flex-col items-center justify-center text-white p-4 bg-black/70"
|
>
|
<img class="w-16 h-16" :src="sol.icon" />
|
<h4 class="text-2xl font-semibold tracking-wide">{{ sol.title }}</h4>
|
</div>
|
|
<div
|
class="absolute z-30 inset-0 bg-blue transition-colors duration-300 group-hover:bg-blue-500/50"
|
></div>
|
</div>
|
</div>
|
</div>
|
</section>
|
|
<h3 class="text-[46px] pt-25 pb-15 text-center font-bold text-[#132251]">News</h3>
|
|
<div class="w-full relative">
|
<el-carousel height="auto" class="border" indicator-position="none" arrow="never">
|
<el-carousel-item style="height: 400px">
|
<div class="relative h-full w-full">
|
<img class="h-full w-full" src="@/assets/images/新闻-pic@2x.png" />
|
<div
|
class="absolute top-0 left-0 bottom-0 w-[51%] pt-[87px] pb-20 pl-[202px] pr-[244px] text-white text-[26px] bg-[url('@/assets/images/News-正文@2x.png')] bg-no-repeat bg-size-[100%_100%]"
|
>
|
Thundearth continues its expansion <br />and is strengthening its presence in Germany.
|
We are excited to establish another subsidiary in Munich and to offer our products and
|
services even more effectively in the German and European markets.
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
<div class="absolute top-1/2 left-[54px] -translate-y-1/2 w-[42px] h-25 cursor-pointer">
|
<img class="w-full h-full" src="@/assets/images/icons/左-btn@2x.png" />
|
</div>
|
<div class="absolute top-1/2 right-[54px] -translate-y-1/2 w-[42px] h-25 cursor-pointer">
|
<img class="w-full h-full" src="@/assets/images/icons/右-btn@2x.png" />
|
</div>
|
</div>
|
|
<section class="bg-[#f2f4f7] mt-[111px] pb-[124px]">
|
<div class="container mx-auto px-4">
|
<h3 class="text-[46px] font-bold text-center text-[#132251] mb-10">Contact Us</h3>
|
|
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-start gap-6 md:gap-0">
|
<div class="w-full md:w-[51%] pr-0 md:pr-[67px]">
|
<form class="space-y-[18px] text-[26px]">
|
<div class="grid grid-cols-2 gap-4">
|
<input
|
type="text"
|
placeholder="Name"
|
class="w-full h-[46px] px-5 bg-[#a3a3a3] placeholder-white text-white rounded-full focus:outline-none focus:ring-2 focus:ring-[#132251]"
|
/>
|
<input
|
type="text"
|
placeholder="Phone"
|
class="w-full h-[46px] px-5 bg-[#a3a3a3] placeholder-white text-white rounded-full focus:outline-none focus:ring-2 focus:ring-[#132251]"
|
/>
|
</div>
|
<input
|
type="email"
|
placeholder="Email"
|
class="w-full h-[46px] px-5 bg-[#a3a3a3] placeholder-white text-white rounded-full focus:outline-none focus:ring-2 focus:ring-[#132251]"
|
/>
|
<textarea
|
rows="4"
|
placeholder="Message"
|
class="w-full h-[121px] p-5 bg-[#a3a3a3] placeholder-white text-white rounded-2xl focus:outline-none focus:ring-2 focus:ring-[#132251] resize-none"
|
></textarea>
|
|
<button
|
class="bg-[#132251] w-32 cursor-pointer h-[70px] text-white py-2 rounded-3xl font-medium hover:bg-blue-900 transition shadow-md w-32"
|
>
|
Submit
|
</button>
|
</form>
|
</div>
|
|
<div
|
class="w-full aspect-571/311 2xl:w-[571px] text-white rounded-lg p-8 relative overflow-hidden flex flex-col justify-center bg-[url('@/assets/images/信息框@2x.png')] bg-no-repeat bg-size-[100%_100%]"
|
>
|
<div class="relative z-10 space-y-5 text-[26px]">
|
<div class="flex items-start gap-3">
|
<img class="h-[39px] w-[25px] mt-2" src="@/assets/images/icons/tel-icon@2x.png" />
|
<div>
|
<p>+86 177 4276 6126</p>
|
<p>+966 50 802 7425</p>
|
</div>
|
</div>
|
<div class="flex items-center gap-3">
|
<img class="h-[27px] w-9" src="@/assets/images/icons/mail-icon@2x.png" />
|
<p>liangr@thundearth.com</p>
|
</div>
|
<div class="flex items-start gap-3">
|
<img class="h-8 w-8" src="@/assets/images/icons/location-icon@2x.png" />
|
<p class="leading-tight">5 Tonggang Road, Dalian Free Trade Zone Liaoning, China</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</section>
|
</div>
|
</template>
|
|
<style scoped>
|
.fade-enter-active,
|
.fade-leave-active {
|
/* transition: all 2.5s cubic-bezier(0.22, 1, 0.36, 1); */
|
/* position: absolute;
|
width: 100%;
|
height: 100%;
|
top: 0;
|
left: 0;
|
overflow: hidden; */
|
transition:
|
opacity 0.3s ease-in-out,
|
transform 1.2s;
|
}
|
|
.fade-leave-active {
|
opacity: 0;
|
}
|
|
.fade-enter-from {
|
opacity: 0;
|
transform: translateY(30%) scale(1.01);
|
z-index: 10;
|
}
|
|
.fade-enter-to {
|
opacity: 1;
|
transform: translateY(0) scale(1);
|
z-index: 10;
|
}
|
|
.fade-leave-to {
|
opacity: 0;
|
/* display: none; */
|
transform: scale(1);
|
z-index: 0;
|
}
|
|
.slide-up-text {
|
opacity: 0;
|
transform: translateY(40px);
|
animation: textSlideUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
}
|
|
.slide-up-imgage {
|
opacity: 0;
|
animation: imageSlideUp 1.2s forwards;
|
}
|
|
@keyframes textSlideUp {
|
to {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
|
@keyframes imageSlideUp {
|
from {
|
opacity: 0;
|
transform: translateY(30%);
|
}
|
to {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
</style>
|
