website/pages/index.vue

<template>
  <main class="w-full bg-black lg:min-w-[1200px]">
    <div
      class="relative h-[428px] w-full bg-gradient-to-b from-[#0C0C16] to-[#0C131E] lg:h-[888px]"
    >
      <ClientOnly>
        <swiper-container
          ref="containerRef"
          class="size-full mx-auto"
          :autoplay="{ delay: 3000 }"
          loop
          pagination
        >
          <swiper-slide v-for="(slide, idx) in slides" :key="idx" class="size-full relative">
            <div class="size-full relative flex overflow-hidden items-center sm:items-start">
              <picture class="absolute w-full h-full left-0 top-0 -z-10">
                <source media="(max-width: 480px)" :srcset="slide.bgSm" />
                <source media="(max-width: 1280px)" :srcset="slide.bgLg" />
                <img :src="slide.bgLg" loading="eager" class="size-full object-cover" />
              </picture>
              <div class="w-[1440px] md:w-[870px] sm:w-[300px] sm:top-19 relative mx-auto">
                <div class="swiper-banner-info">
                  <h6 class="text-2xl md:text-lg lg:text-xl sm:text-xs font-bold">
                    {{ slide.title }}
                  </h6>
                  <h2
                    class="text-4xl lg:text-3xl md:text-2xl sm:text-base overflow-hidden font-bold text-ellipsis whitespace-pre-line break-words"
                  >
                    {{ slide.subtitle }}
                  </h2>
                  <div
                    v-if="slide.tags"
                    class="flex gap-4 sm:gap-2 text-lg lg:text-base md:text-base sm:text-sm"
                  >
                    <p
                      v-for="(tag, index) in slide.tags"
                      :key="index"
                      class="rounded-full bg-gradient-to-r from-[#69AA25] to-[#13A892] px-[28px] py-[6px] md:px-[16px] md:py-[4px] sm:px-[12px] sm:py-[4px]"
                    >
                      {{ tag }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </swiper-slide>
        </swiper-container>
      </ClientOnly>
    </div>
    <Serve />
    <Device />
    <Middle />
    <ElectricPower />
    <Scenarios />
    <CloudData />
    <Operation />
    <About />
  </main>
</template>

<script setup lang="ts">
import Device from '@/components/pageLayout/device.vue'
import Serve from '@/components/pageLayout/serce.vue'
import Middle from '@/components/pageLayout/midele.vue'
import Scenarios from '@/components/pageLayout/scenarios.vue'
import ElectricPower from '@/components/pageLayout/electricPower.vue'
import CloudData from '@/components/pageLayout/cloudData.vue'
import Operation from '@/components/pageLayout/operation.vue'
import About from '@/components/pageLayout/abuot.vue'

// 添加SEO元信息
useSeoMeta({
  title: '比特电科 - 智能边缘网关解决方案',
  ogTitle: '比特电科 - 智能边缘网关解决方案',
  description: '比特电科提供高可靠性智能边缘网关解决方案，帮助客户实现工业控制系统的智能化升级',
  ogDescription: '比特电科提供高可靠性智能边缘网关解决方案，帮助客户实现工业控制系统的智能化升级',
  ogImage: '/images/banner/bk1000.png',
})

const slides = [
  {
    bgLg: '/images/banner/bk1000.png',
    bgSm: '/images/banner/device_sm.png',
    title: '储能工业控制主机 BK-1000',
    subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护',
    tags: ['低成本', '高可靠性', '全场景适配'],
  },
  {
    bgLg: '/images/banner/bk2000.png',
    bgSm: '/images/banner/device_sm.png',
    title: '储能工业控制主机 BK-2000',
    subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护',
    tags: ['低成本', '高可靠性', '全场景适配'],
  },
]
</script>

<style>
.swiper-banner-info {
  @apply relative flex flex-col justify-center sm:justify-normal gap-16  md:gap-4 sm:gap-2
           text-white;
}
.title-font {
  @apply text-5xl md:text-4xl sm:text-lg font-bold text-center text-white;
}
</style>