hanye-website/pages/index.vue

<template>
  <div>
    <div class="w-full h-[88px] md:h-[0]"></div>
    <!-- 轮播图 -->
    <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
      <Swiper
        :modules="[Pagination, Autoplay, EffectCreative]"
        :slides-per-view="1"
        :space-between="30"
        :loop="true"
        :pagination="{ el: '.swiper-pagination-1', clickable: true }"
        :autoplay="{
          delay: 5000,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
          waitForTransition: true,
        }"
        effect="creative"
        :creativeEffect="{
          prev: {
            shadow: true,
            translate: ['-120%', 0, -500],
            rotate: [0, 0, -90],
            opacity: 0,
          },
          next: {
            shadow: true,
            translate: ['120%', 0, -500],
            rotate: [0, 0, 90],
            opacity: 0,
          },
        }"
        :speed="1000"
        :grabCursor="true"
        :parallax="true"
        class="h-[320px] sm:h-[320px] md:h-[768px] lg:h-[900px] swiper-container-1"
      >
        <SwiperSlide>
          <div
            class="max-w-screen-2xl mx-auto h-full relative"
            :style="{
              backgroundImage: `url(${homeA2Webp})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              backgroundRepeat: 'no-repeat',
            }"
          >
            <div
              class="w-full h-full flex-col justify-center flex gap-2 select-none relative z-10"
            >
              <div
                class="rounded border border-white w-12 h-8 bg-white/10 backdrop-blur-md leading-none justify-center flex items-center text-white text-sm font-normal"
              >
                SSD
              </div>
              <div class="justify-center flex flex-col gap-2">
                <span
                  class="text-white md:text-6xl text-1xl sm:text-2xl font-normal"
                  >{{ t("home.carousel.two.title") }}</span
                >
                <span
                  class="text-white md:text-6xl text-1xl sm:text-2xl font-normal"
                  >{{ t("home.carousel.two.description") }}</span
                >
                <span
                  class="text-white md:text-6xl text-1xl sm:text-2xl font-normal"
                  >{{ t("home.carousel.two.description2") }}</span
                >
                <span
                  class="text-cyan-400 md:text-6xl text-1xl sm:text-2xl font-normal"
                  >{{ t("home.carousel.two.description3") }}</span
                >
              </div>
              <div class="md:flex hidden flex-col gap-2 mt-4">
                <div
                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
                >
                  <div class="w-2 h-2 bg-white rounded-full"></div>
                  {{ t("home.carousel.two.description4") }}
                </div>
                <div
                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
                >
                  <div class="w-2 h-2 bg-white rounded-full"></div>
                  {{ t("home.carousel.two.description5") }}
                </div>
              </div>
              <div
                class="md:w-36 w-28 md:h-14 h-10 md:mt-12 mt-2 flex items-center justify-center bg-[#35F1FF] rounded-lg hover:bg-[#35F1FF]/80 transition-colors duration-300"
              >
                <nuxt-link
                  :to="`${homepagePath}/products/HE80-2TNLHS`"
                  class="w-full h-full !flex items-center justify-center text-zinc-900"
                >
                  {{ t("products.view_details") }}
                </nuxt-link>
              </div>
            </div>
          </div>
        </SwiperSlide>
        <SwiperSlide v-if="!isMobile">
          <div class="max-w-screen-2xl mx-auto h-full relative">
            <video
              :src="homeA3Webp"
              autoplay
              muted
              loop
              class="w-full h-full object-cover"
            ></video>
            <div
              class="w-full h-full flex-col justify-center hidden md:flex absolute top-0 left-0 z-10"
            >
              <div class="justify-center">
                <span class="text-white text-6xl font-normal leading-[78px]">{{
                  t("home.carousel.three.title")
                }}</span>
                <span class="text-white text-6xl font-normal leading-[78px]">{{
                  t("home.carousel.three.description")
                }}</span>
                <br />
                <span class="text-white text-6xl font-normal leading-[78px]">{{
                  t("home.carousel.three.description2")
                }}</span
                ><br />
                <span
                  class="text-cyan-400 text-6xl font-normal leading-[78px]"
                  >{{ t("home.carousel.three.description3") }}</span
                >
              </div>
              <div class="flex flex-col gap-2 mt-4">
                <div
                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
                >
                  <div class="w-2 h-2 bg-white rounded-full"></div>
                  {{ t("home.carousel.three.description4") }}
                </div>
                <div
                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
                >
                  <div class="w-2 h-2 bg-white rounded-full"></div>
                  {{ t("home.carousel.three.description5") }}
                </div>
              </div>
              <div
                class="w-36 h-14 mt-12 flex items-center justify-center bg-[#35F1FF] rounded-lg hover:bg-[#35F1FF]/80 transition-colors duration-300"
              >
                <nuxt-link
                  :to="`${homepagePath}/about`"
                  class="w-full h-full !flex items-center justify-center text-zinc-900"
                >
                  {{ t("products.view_details") }}
                </nuxt-link>
              </div>
            </div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div
            class="max-w-screen-2xl mx-auto h-full relative"
            :style="{
              backgroundImage: `url(${homeA1Webp})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              backgroundRepeat: 'no-repeat',
            }"
          >
            <div
              class="w-full h-full flex-col justify-center flex gap-2 select-none relative z-10"
            >
              <div
                class="rounded border border-white w-12 h-8 bg-white/10 backdrop-blur-md leading-none justify-center flex items-center text-white text-sm font-normal"
              >
                SSD
              </div>
              <div class="justify-center flex flex-col gap-2">
                <span
                  class="text-white md:text-6xl text-1xl sm:text-2xl font-normal"
                  >{{ t("home.carousel.one.title") }}</span
                >
                <span
                  class="text-white md:text-6xl text-1xl sm:text-2xl font-normal"
                  >{{ t("home.carousel.one.description") }}</span
                >
                <span
                  class="text-white md:text-6xl text-1xl sm:text-2xl font-normal"
                  >{{ t("home.carousel.one.description2") }}</span
                >
                <span
                  class="text-cyan-400 md:text-6xl text-1xl sm:text-2xl font-normal"
                  >{{ t("home.carousel.one.description3") }}</span
                >
              </div>
              <div class="md:flex hidden flex-col gap-2 mt-4">
                <div
                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
                >
                  <div class="w-2 h-2 bg-white rounded-full"></div>
                  {{ t("home.carousel.one.description4") }}
                </div>
                <div
                  class="flex items-center gap-2 text-stone-50 text-xl font-normal"
                >
                  <div class="w-2 h-2 bg-white rounded-full"></div>
                  {{ t("home.carousel.one.description5") }}
                </div>
              </div>
              <div
                class="md:w-36 w-28 md:h-14 h-10 md:mt-12 mt-2 flex items-center justify-center bg-[#35F1FF] rounded-lg hover:bg-[#35F1FF]/80 transition-colors duration-300"
              >
                <nuxt-link
                  :to="`${homepagePath}/products/HE80-2TNLHS`"
                  class="w-full h-full !flex items-center justify-center text-zinc-900"
                >
                  {{ t("products.view_details") }}
                </nuxt-link>
              </div>
            </div>
          </div>
        </SwiperSlide>

        <div class="max-w-screen-2xl mx-auto relative">
          <div
            class="swiper-pagination swiper-pagination-1 text-left bottom-1 top-0"
          ></div>
        </div>
      </Swiper>
    </section>

    <!-- 按推荐产品展示 -->
    <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
      <div class="max-w-screen-2xl mx-auto relative">
        <div
          class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4"
        >
          {{ t("products.usage") }}
        </div>
        <div
          class="justify-center text-white font-normal mb-8 md:mb-16 text-xl sm:text-2xl md:text-4xl lg:text-6xl"
        >
          {{ t("products.usage_title") }}
        </div>
      </div>
      <div class="max-w-screen-2xl mx-auto">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-10 w-full">
          <nuxt-link
            v-for="(recommend, index) in recommendList"
            :key="index"
            :to="`${homepagePath}/products/${recommend.name}`"
            class="w-full h-full"
          >
            <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"
              >
                <img
                  :src="recommend?.image"
                  class="w-full h-full object-cover transition-all duration-500 group-hover:scale-110"
                  loading="lazy"
                  alt="Product image"
                />
                <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"
                >
                  <div
                    class="px-4 py-2 bg-cyan-400/20 backdrop-blur-sm rounded-full text-white text-sm font-medium border border-cyan-400/30 transform transition-transform duration-300 group-hover:scale-105"
                  >
                    {{ t("products.view_details") }}
                  </div>
                </div>
              </div>
              <!-- 文字内容 -->
              <div
                class="w-full mt-4 min-h-[80px] transition-all duration-300 transform"
              >
                <div
                  class="text-center text-white text-base font-bold leading-tight mb-2 line-clamp-2 group-hover:text-cyan-400 transition-colors duration-300"
                >
                  {{ recommend.title }}
                </div>
                <div
                  class="text-center text-zinc-400 text-sm font-normal leading-tight line-clamp-2 group-hover:text-zinc-300 transition-colors duration-300"
                >
                {{ recommend.summary }}
                </div>
              </div>
            </div>
          </nuxt-link>
        </div>
      </div>
    </section>

    <!-- 按分类栏目展示 -->
    <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
      <div class="max-w-screen-2xl mx-auto relative">
        <div
          class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4"
        >
          {{ t("home.useCategoryTitle") }}
        </div>
        <div
          class="justify-center text-white font-normal mb-8 md:mb-16 text-xl sm:text-2xl md:text-4xl lg:text-6xl"
        >
          {{ t("home.useCategoryDescription") }}
        </div>
      </div>
      <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="select-none relative w-full animate-gradient-bg [background:linear-gradient(180deg,#444B55_0%,#98A3B4_95%)] from-zinc-900 to-zinc-800"
            >
              <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
              >
            </div>
            <div
              class="xl:flex flex-1 flex-col gap-10 absolute top-[10%] right-0"
            >
              <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") }}
                </div>
                <div class="justify-center text-white text-xl font-normal mb-8">
                  {{ t("home.business.description") }}
                </div>
                <nuxt-link
                  :to="`${homepagePath}/products?audiences=1`"
                  class="h-14 px-8 py-3.5 whitespace-nowrap 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.business.view_details") }}
                    <i class="icon-arrow-right text-xs ml-2"></i>
                  </div>
                </nuxt-link>
              </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>
            <div
              class="xl:flex flex-1 flex-col gap-10 absolute top-[10%] left-0"
            >
              <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") }}
                </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 whitespace-nowrap 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
            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>

    <!-- 核心展示 -->
    <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
      <div
        class="max-w-screen-2xl mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-2 gap-4"
      >
        <div class="inline-flex justify-start items-center gap-5">
          <div
            class="w-12 h-12 md:w-16 md:h-16 relative bg-gradient-to-b from-neutral-600 to-slate-400 rounded-xl border-b-[1.50px] border-neutral-700 overflow-hidden"
          >
            <div class="w-full h-full flex items-center justify-center">
              <i class="icon-h1 text-white text-5xl"></i>
            </div>
          </div>
          <div class="inline-flex flex-col justify-center items-start flex-1">
            <div
              class="justify-start text-white font-medium text-1xl md:text-lg"
            >
              {{ t("products.support") }}
            </div>
            <div
              class="justify-start text-zinc-300 text-xs font-normal md:text-sm"
            >
              {{ t("products.support_description") }}
            </div>
          </div>
        </div>
        <div class="inline-flex justify-start items-center gap-5">
          <div
            class="w-12 h-12 md:w-16 md:h-16 relative bg-gradient-to-b from-neutral-600 to-slate-400 rounded-xl border-b-[1.50px] border-neutral-700 overflow-hidden"
          >
            <div class="w-full h-full flex items-center justify-center">
              <i class="icon-h2 text-white text-5xl"></i>
            </div>
          </div>
          <div class="inline-flex flex-col justify-center items-start flex-1">
            <div
              class="justify-start text-white font-medium text-1xl md:text-lg"
            >
              {{ t("products.development") }}
            </div>
            <div
              class="justify-start text-zinc-300 text-xs font-normal md:text-sm"
            >
              {{ t("products.development_description") }}
            </div>
          </div>
        </div>
        <div class="inline-flex justify-start items-center gap-5">
          <div
            class="w-12 h-12 md:w-16 md:h-16 relative bg-gradient-to-b from-neutral-600 to-slate-400 rounded-xl border-b-[1.50px] border-neutral-700 overflow-hidden"
          >
            <div class="w-full h-full flex items-center justify-center">
              <i class="icon-h3 text-white text-5xl"></i>
            </div>
          </div>
          <div class="inline-flex flex-col justify-center items-start flex-1">
            <div
              class="justify-start text-white font-medium text-1xl md:text-lg"
            >
              {{ t("products.develop") }}
            </div>
            <div
              class="justify-start text-zinc-300 text-xs font-normal md:text-sm"
            >
              {{ t("products.develop_description") }}
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 关于我们 -->
    <section class="max-w-full mb-12 md:mb-32 xl:px-8 lg:px-6 md:px-4 px-4">
      <div class="max-w-screen-2xl mx-auto relative">
        <div
          class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4"
        >
          {{ t("products.strong_point") }}
        </div>
        <div
          class="justify-center text-white font-normal mb-8 md:mb-16 text-xl sm:text-2xl md:text-4xl lg:text-6xl"
        >
          {{ t("products.strong_point_title") }}
        </div>
        <div
          class="absolute right-0 top-1/2 -translate-y-1/2 z-10 lg:block hidden"
        >
          <div class="flex items-center justify-center gap-4">
            <div
              class="swiper-button-prev-3 bg-zinc-700 w-10 h-10 rounded-full flex items-center justify-center cursor-pointer hover:bg-zinc-600 transition-colors duration-200"
            >
              <i class="icon-arrow-left text-zinc-300 text-sm font-normal"></i>
            </div>
            <div
              class="swiper-button-next-3 bg-zinc-700 w-10 h-10 rounded-full flex items-center justify-center cursor-pointer hover:bg-zinc-600 transition-colors duration-200"
            >
              <i class="icon-arrow-right text-zinc-300 text-sm font-normal"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="max-w-screen-2xl mx-auto">
        <div class="w-full relative max-w-full">
          <Swiper
            :modules="[Navigation, Pagination]"
            slides-per-view="auto"
            :space-between="30"
            :pagination="{ el: '.swiper-pagination-3', clickable: true }"
            :navigation="{
              prevEl: '.swiper-button-prev-3',
              nextEl: '.swiper-button-next-3',
            }"
            class="h-auto sm:h-[360px] md:h-[480px] lg:h-[720px] max-w-full"
          >
            <SwiperSlide class="!max-w-screen-2xl !w-full">
              <div
                class="w-full h-full flex items-center px-0 md:px-20"
                :style="{
                  backgroundImage: `url(${homeC1Webp})`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  backgroundRepeat: 'no-repeat',
                }"
              >
                <div
                  class="w-[100%] md:w-[60%] h-[100%] md:h-auto bg-white/5 rounded-0 md:rounded-2xl backdrop-blur-[50px] px-4 py-8 md:py-12 md:px-8 flex flex-col gap-8 border border-white/10"
                >
                  <div
                    class="opacity-90 justify-start text-white text-2xl font-normal md:text-4xl"
                  >
                    {{ t("about.companyInfo.name") }}
                  </div>
                  <div
                    class="opacity-70 justify-start text-white text-base md:text-lg font-normal leading-relaxed whitespace-pre-wrap"
                  >
                    {{ t("about.companyInfo.description") }}
                  </div>
                </div>
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
        <div class="max-w-screen-2xl mx-auto relative">
          <div class="swiper-pagination swiper-pagination-3"></div>
        </div>
      </div>
    </section>

    <!-- 产品咨询 -->
    <section class="max-w-full h-[240px] md:h-[480px] bg-black/80 md:block">
      <div class="h-full relative">
        <div
          class="absolute top-0 left-0 w-full h-full flex flex-col gap-6 items-center justify-center z-10"
        >
          <h1
            class="text-center justify-start text-white font-normal text-xl sm:text-xl md:text-3xl px-4 sm:px-2"
          >
            {{ t("products.consultation") }}
          </h1>
          <nuxt-link
            :to="`${homepagePath}/contact`"
            class="w-32 h-10 md:w-40 md:h-11 bg-zinc-300/10 rounded-lg outline outline-1 flex items-center justify-center gap-2 outline-white/20 backdrop-blur-[10px] cursor-pointer hover:bg-zinc-300/20 transition-colors duration-200"
          >
            <span class="text-base font-normal">{{
              t("products.consultation_button")
            }}</span>
            <i class="icon-arrow-right text-sm font-normal"></i>
          </nuxt-link>
        </div>
        <img
          v-if="isMobile"
          :src="videoWebp"
          alt="video"
          class="w-full h-full object-cover opacity-20"
        />
        <video
          v-else
          :src="videoSrc"
          autoplay
          muted
          loop
          :poster="videoWebp"
          class="w-full h-full object-cover opacity-20"
        ></video>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import {
  Navigation,
  Pagination,
  Autoplay,
  EffectCreative,
} from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
import { useI18n, useRoute, useAsyncData, queryCollection } 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";
import homeA2Webp from "@/assets/images/home-a-2.webp";
import homeA3Webp from "@/assets/videos/banner03.mp4";
import homeC1Webp from "@/assets/images/home-c-1.webp";

// 数据类型定义
interface Product {
  id: number;
  title: string;
  image: string;
  link: string;
  description?: string;
  name?: string;
  recommend: boolean;
  recommendIndex: number;
  summary?: string;
}

// 使用i18n
const { t, locale } = useI18n();
// 默认语言
const defaultLocale = "zh";
// 获取路由
const route = useRoute();
// 断点
const breakpoints = useBreakpoints(breakpointsTailwind);
// 是否移动端
const isMobile = breakpoints.smaller("md");

const videoSrc = ref(video);

/**
 * 使用计算属性获取当前语言的数据文件URL
 */
const productsDataUrl = computed(() => {
  return `/data/products-${locale.value}.json`;
});
const homepagePath = computed(() => {
  return locale.value === "zh" ? "" : `/${locale.value}`;
});

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);
};

// 当页面加载或语言改变时加载数据
onMounted(() => {
  loadRecommendData();
});

// SEO优化
useHead({
  title: t("home.title") + " - Hanye",
  meta: [
    {
      name: "description",
      content: t("home.description"),
    },
    {
      name: "keywords",
      content: t("home.keywords"),
    },
  ],
});
</script>

<style lang="scss" scoped>
:deep(.swiper-pagination-3) {
  margin: auto;
  position: static;
  padding: 1rem 0;
}
:deep(.swiper-pagination-bullet) {
  background-color: var(--color-bg); /* Example color */
  border: 2px solid var(--color-text);
}
:deep(.swiper-pagination-bullet-active) {
  background-color: var(--color-text); /* Example color */
}

.use-business {
  background-image: url("@/assets/images/business.webp");
  background-size: auto 548px;
  background-position: left top;
  background-repeat: no-repeat;
}

.use-personal {
  background-image: url("@/assets/images/personal.webp");
  background-size: auto 480px;
  background-position: right bottom;
  background-repeat: no-repeat;
}

// 优化过渡动画
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  width: 100%;
  height: 300px;
}

@media (min-width: 640px) {
  .slide-fade-enter-active,
  .slide-fade-leave-active {
    height: 350px;
  }
}

@media (min-width: 768px) {
  .slide-fade-enter-active,
  .slide-fade-leave-active {
    height: 400px;
  }
}

@media (min-width: 1024px) {
  .slide-fade-enter-active,
  .slide-fade-leave-active {
    height: 450px;
  }
}

.slide-fade-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

// 添加响应式优化
@media (max-width: 640px) {
  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateX(15px);
  }
}

// 优化图片加载动画
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient 3s ease infinite;
}

// 移除 pagination 相关样式
:deep(.swiper-pagination-2) {
  display: none;
}

// 添加导航按钮禁用样式
:deep(.swiper-button-disabled) {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

// 优化轮播图样式
:deep(.swiper-container-1) {
  .swiper-slide {
    transition: all 0.5s ease;
    transform-origin: center center;
    backface-visibility: hidden;
    perspective: 1000px;
  }

  .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: all 0.3s ease;
    margin: 0 8px !important;

    &-active {
      background: #fff;
      border-color: #fff;
      transform: scale(1.2);
    }
  }

  .swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
  }
}

// 优化图片加载动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.swiper-slide-active {
  img {
    animation: fadeIn 0.8s ease-out forwards;
  }
}

// 优化产品卡片动画和交互
.swiper-slide {
  a {
    text-decoration: none;
    display: block;
    height: 100%;

    &:hover {
      text-decoration: none;
    }

    > div {
      position: relative;
      z-index: 1;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      }
    }
  }
}

// 移除卡片抖动动画
@keyframes cardHover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-2px);
  }
}

// 添加渐变背景动画
@keyframes gradient-bg {
  0% {
    background-position: 0% 50%;
    opacity: 1;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.85;
  }
  100% {
    background-position: 0% 50%;
    opacity: 1;
  }
}

.animate-gradient-bg {
  background-size: 200% 200%;
  animation: gradient-bg 15s ease infinite;
}
</style>