|
|
|
@@ -251,7 +251,6 @@ |
|
|
|
<div |
|
|
|
class="w-full h-full bg-zinc-900 rounded-2xl p-4 flex flex-col items-center justify-start relative overflow-hidden group hover:bg-zinc-800 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-400/10" |
|
|
|
> |
|
|
|
<!-- 图片容器 --> |
|
|
|
<div |
|
|
|
class="w-full aspect-square relative transition-all duration-300 overflow-hidden rounded-lg" |
|
|
|
> |
|
|
|
@@ -264,7 +263,6 @@ |
|
|
|
<div |
|
|
|
class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" |
|
|
|
></div> |
|
|
|
<!-- 添加查看详情按钮 --> |
|
|
|
<div |
|
|
|
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-4 group-hover:translate-y-0" |
|
|
|
> |
|
|
|
@@ -275,7 +273,6 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 文字内容 --> |
|
|
|
<div |
|
|
|
class="w-full mt-4 min-h-[80px] transition-all duration-300 transform" |
|
|
|
> |
|
|
|
@@ -313,23 +310,20 @@ |
|
|
|
<div class="max-w-screen-2xl mx-auto relative"> |
|
|
|
<div class="w-full grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
|
<!-- 企业产品 --> |
|
|
|
<div class="flex h-[240px] lg:h-[440px] xl:h-[540px] relative"> |
|
|
|
<div class="flex h-[240px] lg:h-[440px] xl:h-[540px] relative group transition-all duration-500 hover:shadow-2xl hover:shadow-cyan-400/20 hover:-translate-y-2"> |
|
|
|
|
|
|
|
<div |
|
|
|
class="select-none relative w-full animate-gradient-bg [background:linear-gradient(180deg,#444B55_0%,#98A3B4_95%)] from-zinc-900 to-zinc-800" |
|
|
|
class="select-none relative w-full overflow-hidden animate-gradient-bg [background:linear-gradient(180deg,#444B55_0%,#98A3B4_95%)] from-zinc-900 to-zinc-800 transition-all duration-700 group-hover:from-zinc-800 group-hover:to-zinc-700" |
|
|
|
> |
|
|
|
<img |
|
|
|
src="@/assets/images/business.webp" |
|
|
|
alt="business" |
|
|
|
class="max-h-[90%] absolute bottom-0 left-0 z-10" |
|
|
|
/> |
|
|
|
<span |
|
|
|
class="text-transparent bg-clip-text bg-gradient-to-r from-[rgba(255,255,255,0.05)] to-[rgba(255,255,255,0.08)] absolute hidden xl:block z-0 top-[35%] left-[50%] translate-y-[-50%] translate-x-[-50%] text-[170px] font-bold select-none" |
|
|
|
>Business</span |
|
|
|
> |
|
|
|
<img src="@/assets/images/business.webp" alt="business" class="max-h-[90%] absolute bottom-0 left-0 z-10 transition-transform duration-700 group-hover:scale-105"> |
|
|
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-[rgba(255,255,255,0.05)] to-[rgba(255,255,255,0.08)] absolute hidden xl:block z-0 top-[35%] left-[50%] translate-y-[-50%] translate-x-[-50%] text-[170px] font-bold select-none">Business</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="xl:flex flex-1 flex-col gap-10 absolute top-[10%] right-0" |
|
|
|
> |
|
|
|
|
|
|
|
|
|
|
|
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-30 transition-opacity duration-300 z-15 pointer-events-none"></div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="xl:flex flex-1 flex-col gap-10 absolute top-[10%] right-0 z-20"> |
|
|
|
<div class="w-full p-8"> |
|
|
|
<div class="text-white text-4xl mb-4 mt-4 select-none hidden lg:block"> |
|
|
|
{{ t("home.business.title") }} |
|
|
|
@@ -350,23 +344,19 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="flex h-[240px] lg:h-[440px] xl:h-[540px] relative"> |
|
|
|
<div |
|
|
|
class="select-none overflow-hidden relative w-full animate-gradient-bg [background:linear-gradient(180deg,#0086f4_0%,#88d5fa_80%)] from-zinc-900 to-zinc-800" |
|
|
|
> |
|
|
|
<img |
|
|
|
src="@/assets/images/personal.webp" |
|
|
|
alt="personal" |
|
|
|
class="max-h-[90%] absolute bottom-0 right-[-80px] z-10" |
|
|
|
/> |
|
|
|
<span |
|
|
|
class="text-transparent bg-clip-text bg-gradient-to-r from-[rgba(255,255,255,0.05)] to-[rgba(255,255,255,0.08)] absolute hidden xl:block z-0 top-[35%] left-[50%] translate-y-[-50%] translate-x-[-50%] text-[170px] font-bold select-none" |
|
|
|
>Personal</span |
|
|
|
> |
|
|
|
<!-- 个人产品 --> |
|
|
|
<div class="flex h-[240px] lg:h-[440px] xl:h-[540px] relative group transition-all duration-500 hover:shadow-2xl hover:shadow-cyan-400/20 hover:-translate-y-2"> |
|
|
|
|
|
|
|
<div class="select-none overflow-hidden relative w-full animate-gradient-bg [background:linear-gradient(180deg,#0086f4_0%,#88d5fa_80%)] from-zinc-900 to-zinc-800"> |
|
|
|
<img src="@/assets/images/personal.webp" alt="personal" class="max-h-[90%] absolute bottom-0 right-[-80px] z-10 transition-transform duration-700 group-hover:scale-105"> |
|
|
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-[rgba(255,255,255,0.05)] to-[rgba(255,255,255,0.08)] absolute hidden xl:block z-0 top-[35%] left-[50%] translate-y-[-50%] translate-x-[-50%] text-[170px] font-bold select-none">Personal</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="xl:flex flex-1 flex-col gap-10 absolute top-[10%] left-0" |
|
|
|
> |
|
|
|
|
|
|
|
|
|
|
|
<div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-30 transition-opacity duration-300 z-15 pointer-events-none"></div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="xl:flex flex-1 flex-col gap-10 absolute top-[10%] left-0 z-20"> |
|
|
|
<div class="w-full p-8"> |
|
|
|
<div class="text-white text-4xl mb-4 mt-4 select-none hidden lg:block"> |
|
|
|
{{ t("home.personal.title") }} |
|
|
|
@@ -386,76 +376,6 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 个人产品 --> |
|
|
|
<div |
|
|
|
v-if="false" |
|
|
|
class="flex w-full gap-8 relative mb-0 xl:mb-60 flex-col xl:flex-row" |
|
|
|
> |
|
|
|
<div |
|
|
|
class="flex-1 hidden xl:flex flex-col gap-10 relative top-[-80px]" |
|
|
|
> |
|
|
|
<div class="w-full"> |
|
|
|
<div |
|
|
|
class="justify-center text-white text-6xl whitespace-nowrap mb-4 mt-20 select-none" |
|
|
|
> |
|
|
|
{{ t("home.personal.title") }} |
|
|
|
</div> |
|
|
|
<div class="justify-center text-white text-xl font-normal mb-8"> |
|
|
|
{{ t("home.personal.description") }} |
|
|
|
</div> |
|
|
|
<nuxt-link |
|
|
|
:to="`${homepagePath}/products?audiences=0`" |
|
|
|
class="h-14 px-8 py-3.5 bg-white/10 hover:bg-white/15 rounded-[10px] outline outline-1 outline-white/20 backdrop-blur-md inline-flex flex-col justify-start items-start gap-3.5" |
|
|
|
> |
|
|
|
<div class="inline-flex justify-start items-center gap-2.5"> |
|
|
|
{{ t("home.personal.view_details") }} |
|
|
|
<i class="icon-arrow-right text-xs ml-2"></i> |
|
|
|
</div> |
|
|
|
</nuxt-link> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div |
|
|
|
class="w-full select-none relative z-0 flex justify-end items-end animate-gradient-bg [background:linear-gradient(180deg,#0086f4_0%,#88d5fa_80%)]" |
|
|
|
> |
|
|
|
<img |
|
|
|
src="@/assets/images/personal.webp" |
|
|
|
alt="personal" |
|
|
|
class="pt-0 md:pt-20 max-h-full relative z-10" |
|
|
|
/> |
|
|
|
<span |
|
|
|
class="absolute text-transparent bg-clip-text bg-gradient-to-r from-[rgba(255,255,255,0.08)] to-[rgba(255,255,255,0.05)] hidden xl:block z-0 top-[25%] left-[35%] translate-y-[-50%] translate-x-[-50%] text-[160px] font-bold select-none" |
|
|
|
>Personal</span |
|
|
|
> |
|
|
|
|
|
|
|
<div |
|
|
|
class="flex xl:hidden flex-col gap-10 absolute top-0 left-0 right-0 bottom-0 z-10 justify-center p-4 md:p-8" |
|
|
|
> |
|
|
|
<div class="w-full"> |
|
|
|
<div |
|
|
|
class="justify-center text-white text-4xl md:text-7xl font-bold mb-2 select-none" |
|
|
|
> |
|
|
|
{{ t("home.personal.title") }} |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="justify-center text-white text-xl font-normal mb-8" |
|
|
|
> |
|
|
|
{{ t("home.personal.description") }} |
|
|
|
</div> |
|
|
|
<nuxt-link |
|
|
|
:to="`${homepagePath}/products?audiences=0`" |
|
|
|
class="h-14 px-8 py-3.5 bg-white/10 hover:bg-white/15 rounded-[10px] outline outline-1 outline-white/20 backdrop-blur-md inline-flex flex-col justify-start items-start gap-3.5" |
|
|
|
> |
|
|
|
<div class="inline-flex justify-start items-center gap-2.5"> |
|
|
|
{{ t("home.personal.view_details") }} |
|
|
|
<i class="icon-arrow-right text-xs ml-2"></i> |
|
|
|
</div> |
|
|
|
</nuxt-link> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
@@ -662,7 +582,7 @@ import "swiper/css/navigation"; |
|
|
|
import "swiper/css/pagination"; |
|
|
|
|
|
|
|
import { useBreakpoints, breakpointsTailwind } from "@vueuse/core"; |
|
|
|
import { useI18n, useRoute, useAsyncData, queryCollection } from "#imports"; |
|
|
|
import { useI18n, useRoute, useHead, computed, ref, onMounted, watch } from "#imports"; |
|
|
|
import video from "@/assets/videos/video.mp4"; |
|
|
|
import videoWebp from "@/assets/videos/video.webp"; |
|
|
|
import homeA1Webp from "@/assets/images/home-a-1.webp"; |
|
|
|
@@ -709,19 +629,31 @@ const homepagePath = computed(() => { |
|
|
|
const recommendList = ref<Product[]>([]); |
|
|
|
|
|
|
|
const loadRecommendData = async () => { |
|
|
|
const productsResponse = await fetch(productsDataUrl.value); |
|
|
|
const productsData = await productsResponse.json(); |
|
|
|
recommendList.value = productsData |
|
|
|
.filter((product: Product) => product.recommend) |
|
|
|
.sort((a: Product, b: Product) => b.recommendIndex - a.recommendIndex); |
|
|
|
try { |
|
|
|
const productsResponse = await fetch(productsDataUrl.value); |
|
|
|
if (!productsResponse.ok) { |
|
|
|
console.error("Failed to fetch products data:", productsResponse.statusText); |
|
|
|
recommendList.value = []; |
|
|
|
return; |
|
|
|
} |
|
|
|
const productsData = await productsResponse.json(); |
|
|
|
recommendList.value = productsData |
|
|
|
.filter((product: Product) => product.recommend) |
|
|
|
.sort((a: Product, b: Product) => b.recommendIndex - a.recommendIndex); |
|
|
|
} catch (error) { |
|
|
|
console.error("Error loading recommendation data:", error); |
|
|
|
recommendList.value = []; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 当页面加载或语言改变时加载数据 |
|
|
|
onMounted(() => { |
|
|
|
loadRecommendData(); |
|
|
|
}); |
|
|
|
|
|
|
|
// SEO优化 |
|
|
|
watch(locale, () => { |
|
|
|
loadRecommendData(); |
|
|
|
}); |
|
|
|
|
|
|
|
useHead({ |
|
|
|
title: t("home.title") + " - Hanye", |
|
|
|
meta: [ |
|
|
|
@@ -949,4 +881,4 @@ useHead({ |
|
|
|
background-size: 200% 200%; |
|
|
|
animation: gradient-bg 15s ease infinite; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
watermax
1 week ago