From 0222d16a8ba5c5825362c03a5b3b410cd4fa40d1 Mon Sep 17 00:00:00 2001
From: sric <sirrcvip@126.com>
Date: 星期四, 20 十一月 2025 23:51:44 +0800
Subject: [PATCH] Merge branch 'master' of https://git.v-ji.com/git/r/yujiu_web
---
src/views/HomeView.vue | 518 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 518 insertions(+), 0 deletions(-)
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
new file mode 100644
index 0000000..045dd3a
--- /dev/null
+++ b/src/views/HomeView.vue
@@ -0,0 +1,518 @@
+<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>
--
Gitblit v1.8.0