hanye-website/pages/index.vue

<template>
  <div>
    <!-- 轮播图 -->
    <section class="max-w-full mb-12 md:mb-32">
      <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 }"
        effect="creative"
        :creativeEffect="{
          prev: {
            shadow: true,
            translate: ['-120%', -20, -50],
          },
          next: {
            shadow: true,
            translate: ['-20%', -20, -50],
          },
        }"
        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"
            :style="{
              backgroundImage: `url(${homeA1Webp})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              backgroundRepeat: 'no-repeat',
            }"
          ></div>
        </SwiperSlide>
        <SwiperSlide>
          <div
            class="max-w-screen-2xl mx-auto h-full"
            :style="{
              backgroundImage: `url(${homeA1Webp})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              backgroundRepeat: 'no-repeat',
            }"
          ></div>
        </SwiperSlide>
        <!-- Add more slides as needed -->
        <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">
      <div class="max-w-screen-2xl mx-auto relative">
        <div
          class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4 px-4 md:px-0"
        >
          {{ $t("products.usage") }}
        </div>
        <div
          class="justify-center text-white font-normal mb-8 px-4 md:px-0 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 relative overflow-x-auto whitespace-nowrap scrollbar-hide scroll-smooth"
      >
        <div class="w-full mb-8 inline-flex items-center gap-4 px-4 md:px-0">
          <div
            class="cursor-pointer select-none px-7 py-3 rounded-full outline outline-1 outline-offset-[-1px] outline-cyan-400 inline-flex justify-center items-center gap-2.5"
          >
            <div
              class="text-center justify-center text-cyan-400 text-sm font-normal leading-tight md:text-base"
            >
              外付けストレージ化
            </div>
          </div>

          <div
            class="cursor-pointer select-none px-8 py-3 rounded-full outline outline-1 outline-offset-[-1px] outline-zinc-700 inline-flex justify-center items-center gap-2.5"
          >
            <div
              class="text-center justify-center text-zinc-300 text-sm font-normal leading-tight md:text-base"
            >
              外付けストレージ化
            </div>
          </div>

          <div
            class="cursor-pointer select-none px-8 py-3 rounded-full outline outline-1 outline-offset-[-1px] outline-zinc-700 inline-flex justify-center items-center gap-2.5"
          >
            <div
              class="text-center justify-center text-zinc-300 text-sm font-normal leading-tight md:text-base"
            >
              外付けストレージ化
            </div>
          </div>
        </div>
        <div class="absolute right-0 top-1 z-10 lg:block hidden">
          <div class="flex items-center justify-center gap-4">
            <div
              class="swiper-button-prev-2 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-2 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="w-full relative pl-[calc((100vw-1536px)/2)] 2xl:pl-[calc((100vw-1536px)/2)] lg:pl-[0] md:pl-[0] sm:pl-[0] max-w-full"
      >
        <div class="w-full">
          <Swiper
            :modules="[Navigation]"
            :spaceBetween="30"
            slidesPerView="auto"
            :grid="{
              fill: 'column',
              rows: 1,
            }"
            :navigation="{
              prevEl: '.swiper-button-prev-2',
              nextEl: '.swiper-button-next-2',
            }"
            class="h-32 sm:h-32 md:h-64 lg:h-96 max-w-full"
          >
            <SwiperSlide
              class="!w-32 sm:!w-32 md:!w-64 lg:!w-96 !h-32 sm:!h-32 md:!h-64 lg:!h-96"
            >
              <div
                class="w-full h-full [background:#181818] rounded-2xl px-2 md:px-10 flex flex-col items-center justify-center"
              >
                <img
                  :src="product"
                  alt="h1"
                  class="w-full h-full object-contain"
                />
                <div
                  class="text-center text-white text-base font-bold leading-tight mb-4 hidden md:block"
                >
                  Hanye Q60-2TST3
                </div>
                <div
                  class="text-center justify-center text-white text-xs font-normal mb-8 leading-tight hidden md:block opacity-80"
                >
                  2TB SSD UP TO 550MB/s
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide
              class="!w-32 sm:!w-32 md:!w-64 lg:!w-96 !h-32 sm:!h-32 md:!h-64 lg:!h-96"
            >
              <div
                class="w-full h-full [background:#181818] rounded-2xl px-2 md:px-10 flex flex-col items-center justify-center"
              >
                <img
                  :src="product"
                  alt="h1"
                  class="w-full h-full object-contain"
                />
                <div
                  class="text-center text-white text-base font-bold leading-tight mb-4 hidden md:block"
                >
                  Hanye Q60-2TST3
                </div>
                <div
                  class="text-center justify-center text-white text-xs font-normal mb-8 leading-tight hidden md:block opacity-80"
                >
                  2TB SSD UP TO 550MB/s
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide
              class="!w-32 sm:!w-32 md:!w-64 lg:!w-96 !h-32 sm:!h-32 md:!h-64 lg:!h-96"
            >
              <div
                class="w-full h-full [background:#181818] rounded-2xl px-2 md:px-10 flex flex-col items-center justify-center"
              >
                <img
                  :src="product"
                  alt="h1"
                  class="w-full h-full object-contain"
                />
                <div
                  class="text-center text-white text-base font-bold leading-tight mb-4 hidden md:block"
                >
                  Hanye Q60-2TST3
                </div>
                <div
                  class="text-center justify-center text-white text-xs font-normal mb-8 leading-tight hidden md:block opacity-80"
                >
                  2TB SSD UP TO 550MB/s
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide
              class="!w-32 sm:!w-32 md:!w-64 lg:!w-96 !h-32 sm:!h-32 md:!h-64 lg:!h-96"
            >
              <div
                class="w-full h-full [background:#181818] rounded-2xl px-2 md:px-10 flex flex-col items-center justify-center"
              >
                <img
                  :src="product"
                  alt="h1"
                  class="w-full h-full object-contain"
                />
                <div
                  class="text-center text-white text-base font-bold leading-tight mb-4 hidden md:block"
                >
                  Hanye Q60-2TST3
                </div>
                <div
                  class="text-center justify-center text-white text-xs font-normal mb-8 leading-tight hidden md:block opacity-80"
                >
                  2TB SSD UP TO 550MB/s
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide
              class="!w-32 sm:!w-32 md:!w-64 lg:!w-96 !h-32 sm:!h-32 md:!h-64 lg:!h-96"
            >
              <div
                class="w-full h-full [background:#181818] rounded-2xl px-2 md:px-10 flex flex-col items-center justify-center"
              >
                <img
                  :src="product"
                  alt="h1"
                  class="w-full h-full object-contain"
                />
                <div
                  class="text-center text-white text-base font-bold leading-tight mb-4 hidden md:block"
                >
                  Hanye Q60-2TST3
                </div>
                <div
                  class="text-center justify-center text-white text-xs font-normal mb-8 leading-tight hidden md:block opacity-80"
                >
                  2TB SSD UP TO 550MB/s
                </div>
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
      </div>
    </section>

    <!-- 按用途产品展示 -->

    <!-- Tag description -->
    <section class="max-w-full mb-12 md:mb-32">
      <div
        class="max-w-screen-2xl mx-auto grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 md:grid-cols-3"
      >
        <div class="inline-flex justify-start items-center gap-5 px-4">
          <div
            class="w-16 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-12 h-12 left-[9.50px] top-[9.50px] absolute overflow-hidden 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 px-4">
          <div
            class="w-16 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-12 h-12 left-[9.50px] top-[9.50px] absolute overflow-hidden 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 px-4">
          <div
            class="w-16 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-12 h-12 left-[9.50px] top-[9.50px] absolute overflow-hidden 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-0 md:mb-28">
      <div class="max-w-screen-2xl mx-auto relative">
        <div
          class="justify-center text-cyan-400 text-base font-normal leading-tight mb-4 px-4 md:px-0"
        >
          {{ $t("products.strong_point") }}
        </div>
        <div
          class="justify-center text-white font-normal mb-8 px-4 md:px-0 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="overflow-hidden w-full">
        <div
          class="w-full relative pl-[calc((100vw-1536px)/2)] 2xl:pl-[calc((100vw-1536px)/2)] lg:pl-[0] md:pl-[0] sm:pl-[0] 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-[320px] sm:h-[320px] 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-4 md:px-20"
                :style="{
                  backgroundImage: `url(${homeC1Webp})`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  backgroundRepeat: 'no-repeat',
                }"
              >
                <div
                  class="w-[100%] md:w-[50%] bg-white/5 rounded-2xl backdrop-blur-[50px] px-8 py-12 flex flex-col gap-8 border border-white/10"
                >
                  <div
                    class="opacity-90 justify-start text-white text-2xl font-normal md:text-4xl"
                  >
                    一貫体制による高品質と安定供給
                  </div>
                  <div
                    class="opacity-70 justify-start text-white text-lg font-normal leading-relaxed hidden sm:block"
                  >
                    「企画・開発から製造、品質管理、販売、オンラインショップ運営まで自社で完結。ISO認証取得の工場で生産された信頼性の高い製品を、安定してお届けします。」
                  </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 hidden md:block"
    >
      <div class="h-full relative">
        <h1
          class="text-center justify-start text-white font-normal absolute top-1/3 left-4 right-4 -translate-x-0 md:left-1/2 md:-translate-x-1/2 md:right-auto text-xl sm:text-2xl md:text-3xl"
        >
          {{ $t("products.consultation") }}
        </h1>
        <div
          class="w-40 h-11 bg-zinc-300/10 rounded-lg outline outline-1 flex items-center justify-center gap-2 outline-white/20 backdrop-blur-[10px] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/5"
        >
          <span class="text-white text-sm font-normal">{{
            $t("products.consultation_button")
          }}</span>
          <i class="icon-arrow-right text-white text-sm font-normal"></i>
        </div>
        <video
          :src="videoSrc"
          autoplay
          muted
          loop
          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 video from "@/assets/videos/video.mp4";
import homeA1Webp from "@/assets/images/home-a-1.webp";
import homeC1Webp from "@/assets/images/home-c-1.webp";
import product from "@/assets/images/product.png";

const videoSrc = ref(video);

/**
 * 网站首页
 * 展示网站主要内容和精选产品
 */
// 模拟数据
const featuredProducts = [
  {
    id: 1,
    title: "产品一",
    description: "这是产品一的详细描述，介绍产品特点和用途。",
  },
  {
    id: 2,
    title: "产品二",
    description: "这是产品二的详细描述，介绍产品特点和用途。",
  },
  {
    id: 3,
    title: "产品三",
    description: "这是产品三的详细描述，介绍产品特点和用途。",
  },
];

// SEO优化
useHead({
  title: "Hanye - 首页",
  meta: [
    {
      name: "description",
      content: "基于 Nuxt3 的静态网站脚手架，支持多语言（中文、英文、日文）。",
    },
  ],
});
</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 */
}
</style>