lizhuang
/
hanye-website
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

fix(i18n): 移除多语言文件中的多余标点符号 

style(pages): 调整首页和关于页面的字体大小和间距
refactor(pages/index): 优化产品卡片和分类区块的交互效果
master
watermax 1 week ago
parent
d732a28fcf
commit
ec486cc7d6
5 changed files with 60 additions and 128 deletions
Unified View Show Diff Stats
  1. 1
    1
      i18n/locales/en.ts
  2. 3
    3
      i18n/locales/ja.ts
  3. 3
    3
      i18n/locales/zh.ts
  4. 9
    9
      pages/about.vue
  5. 44
    112
      pages/index.vue

+ 1
- 1
i18n/locales/en.ts View File

"Feel free to inquire about product consultations and quotes.", "Feel free to inquire about product consultations and quotes.",
consultation_button: "Contact Us", consultation_button: "Contact Us",
usage: "Choose storage by usage", usage: "Choose storage by usage",
usage_title: "Select storage products based on your needs.",
usage_title: "Select storage products based on your needs",
support: "Support", support: "Support",
support_description: support_description:
"Expert technical support from our team with over 10 years of experience.", "Expert technical support from our team with over 10 years of experience.",

+ 3
- 3
i18n/locales/ja.ts View File

useCategoryDescription: "製品カテゴリー", useCategoryDescription: "製品カテゴリー",
business: { business: {
title: "企業用製品", title: "企業用製品",
description: "企業向けストレージおよびメモリ製品情報",
description: "企業向けストレージおよびメモリ製品情報 ",
view_details: "企業用製品", view_details: "企業用製品",
}, },
personal: { personal: {
product_categories_title: "製品カテゴリー", product_categories_title: "製品カテゴリー",
product_categories_description: "製品の種類で選ぶ。", product_categories_description: "製品の種類で選ぶ。",
product_categories_usage: "用途で選ぶ", product_categories_usage: "用途で選ぶ",
product_categories_usage_description: "製品の用途で選ぶ。",
product_categories_usage_description: "製品の用途で選ぶ",
viewDetails: "詳細を見る", viewDetails: "詳細を見る",
consultation: "製品に関するご相談、お見積もりはお気軽にどうぞ", consultation: "製品に関するご相談、お見積もりはお気軽にどうぞ",
consultation_button: "お問い合わせ", consultation_button: "お問い合わせ",
usage: "使い方でストレージを選ぼう", usage: "使い方でストレージを選ぼう",
usage_title: "用途に応じてストレージ製品を選ぶ。",
usage_title: "用途に応じてストレージ製品を選ぶ",
support: "サポート", support: "サポート",
support_description: "10年以上のキャリアを誇るチームが専門技術でサポート", support_description: "10年以上のキャリアを誇るチームが専門技術でサポート",
development: "独自に開発・製造、販売", development: "独自に開発・製造、販売",

+ 3
- 3
i18n/locales/zh.ts View File

}, },
}, },
useCategoryTitle: "Hanye 自主开发和制造", useCategoryTitle: "Hanye 自主开发和制造",
useCategoryDescription: "根据分类选择产品。",
useCategoryDescription: "根据分类选择产品",
business: { business: {
title: "企业用户产品", title: "企业用户产品",
description: "企业级存储及内存产品信息", description: "企业级存储及内存产品信息",
product_list_description: product_list_description:
"卓越的产品是基于我们10多年经验的技术和持续创新设计相结合的结果。", "卓越的产品是基于我们10多年经验的技术和持续创新设计相结合的结果。",
product_categories_title: "产品分类", product_categories_title: "产品分类",
product_categories_description: "根据产品类型选择产品。",
product_categories_description: "根据产品类型选择产品",
product_categories_usage: "按用途", product_categories_usage: "按用途",
product_categories_usage_description: "根据产品用途选择产品。", product_categories_usage_description: "根据产品用途选择产品。",
viewDetails: "查看详情", viewDetails: "查看详情",
consultation: "欢迎进行产品咨询，我们将在第一时间回复您", consultation: "欢迎进行产品咨询，我们将在第一时间回复您",
consultation_button: "联系我们", consultation_button: "联系我们",
usage: "推荐商品", usage: "推荐商品",
usage_title: "精心挑选的高品质产品。",
usage_title: "精心挑选的高品质产品",
support: "支持", support: "支持",
support_description: "拥有10年以上经验的团队提供专业技术支持", support_description: "拥有10年以上经验的团队提供专业技术支持",
development: "独立开发和制造", development: "独立开发和制造",

+ 9
- 9
pages/about.vue View File

<div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-32 animate-fade-in"> <div class="text-center mb-32 animate-fade-in">
<h2 <h2
class="section-title text-[#35F1FF] text-sm font-bold mb-4 tracking-[0.2em] animate-slide-in-left"
class="section-title text-[#35F1FF] text-xs font-bold mb-4 tracking-[0.2em] animate-slide-in-left"
> >
{{ t('about.full.page.profile.sectionTitle') }} {{ t('about.full.page.profile.sectionTitle') }}
</h2> </h2>
<h1 <h1
class="text-zinc-300 text-3xl font-bold mb-6 tracking-wider animate-slide-in-right"
class="text-zinc-300 text-2xl font-bold mb-6 tracking-wider animate-slide-in-right"
> >
{{ t('about.full.page.profile.titleEn') }} {{ t('about.full.page.profile.titleEn') }}
</h1> </h1>


<div class="max-w-4xl mx-auto"> <div class="max-w-4xl mx-auto">
<div class="mb-32 text-center"> <div class="mb-32 text-center">
<h3 class="text-white text-2xl font-bold mb-8 tracking-wide">
<h3 class="text-white text-xl font-bold mb-6 tracking-wide">
{{ t('about.full.page.profile.mainTitle') }} {{ t('about.full.page.profile.mainTitle') }}
</h3> </h3>
<p <p
class="text-zinc-300/80 text-base leading-relaxed max-w-2xl mx-auto"
class="text-zinc-300/80 text-sm leading-relaxed max-w-2xl mx-auto"
> >
{{ t('about.full.page.profile.mainDescription') }} {{ t('about.full.page.profile.mainDescription') }}
</p> </p>
</div> </div>


<div class="grid grid-cols-1 md:grid-cols-2 gap-32">
<div class="space-y-24">
<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
<div class="space-y-16">
<div class="relative"> <div class="relative">
<div class="absolute -left-6 top-0 w-px h-full bg-[#35F1FF]/60"></div> <div class="absolute -left-6 top-0 w-px h-full bg-[#35F1FF]/60"></div>
<div class="pl-8"> <div class="pl-8">
<h4 class="text-[#35F1FF] text-lg font-bold mb-6 tracking-wide">
<h4 class="text-[#35F1FF] text-base font-bold mb-4 tracking-wide">
{{ t('about.full.page.profile.item1.title') }} {{ t('about.full.page.profile.item1.title') }}
</h4> </h4>
<p class="text-zinc-300/80 text-sm leading-relaxed">
<p class="text-zinc-300/80 text-xs leading-relaxed">
{{ t('about.full.page.profile.item1.description') }} {{ t('about.full.page.profile.item1.description') }}
</p> </p>
</div> </div>
</div> </div>
</div> </div>


<div class="space-y-24">
<div class="space-y-16">
<div class="relative"> <div class="relative">
<div class="absolute -left-6 top-0 w-px h-full bg-[#35F1FF]/60"></div> <div class="absolute -left-6 top-0 w-px h-full bg-[#35F1FF]/60"></div>
<div class="pl-8"> <div class="pl-8">

+ 44
- 112
pages/index.vue View File

<div <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" 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 <div
class="w-full aspect-square relative transition-all duration-300 overflow-hidden rounded-lg" class="w-full aspect-square relative transition-all duration-300 overflow-hidden rounded-lg"
> >
<div <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" 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>
<!-- 添加查看详情按钮 -->
<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" 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"
> >
</div> </div>
</div> </div>
</div> </div>
<!-- 文字内容 -->
<div <div
class="w-full mt-4 min-h-[80px] transition-all duration-300 transform" class="w-full mt-4 min-h-[80px] transition-all duration-300 transform"
> >
<div class="max-w-screen-2xl mx-auto relative"> <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="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 <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>
<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="w-full p-8">
<div class="text-white text-4xl mb-4 mt-4 select-none hidden lg:block"> <div class="text-white text-4xl mb-4 mt-4 select-none hidden lg:block">
{{ t("home.business.title") }} {{ t("home.business.title") }}
</div> </div>
</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>
<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="w-full p-8">
<div class="text-white text-4xl mb-4 mt-4 select-none hidden lg:block"> <div class="text-white text-4xl mb-4 mt-4 select-none hidden lg:block">
{{ t("home.personal.title") }} {{ t("home.personal.title") }}
</div> </div>
</div> </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>
</div> </div>
</section> </section>
import "swiper/css/pagination"; import "swiper/css/pagination";


import { useBreakpoints, breakpointsTailwind } from "@vueuse/core"; 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 video from "@/assets/videos/video.mp4";
import videoWebp from "@/assets/videos/video.webp"; import videoWebp from "@/assets/videos/video.webp";
import homeA1Webp from "@/assets/images/home-a-1.webp"; import homeA1Webp from "@/assets/images/home-a-1.webp";
const recommendList = ref<Product[]>([]); const recommendList = ref<Product[]>([]);


const loadRecommendData = async () => { 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(() => { onMounted(() => {
loadRecommendData(); loadRecommendData();
}); });


// SEO优化
watch(locale, () => {
loadRecommendData();
});

useHead({ useHead({
title: t("home.title") + " - Hanye", title: t("home.title") + " - Hanye",
meta: [ meta: [
background-size: 200% 200%; background-size: 200% 200%;
animation: gradient-bg 15s ease infinite; animation: gradient-bg 15s ease infinite;
} }
</style>
</style>

Write Preview
Loading…
Cancel
Save