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="max-w-[1920px] size-full mx-auto"
          :autoplay="{ delay: 3000 }"
          loop
          pagination
        >
          <swiper-slide v-for="(slide, idx) in slides" :key="idx" class="size-full relative">
            <img
              :src="slide.bgLg"
              loading="eager"
              class="absolute right-0 h-[100%] object-cover sm:hidden"
            />
            <img :src="slide.bgSm" alt="" class="sm:block hidden" />
            <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>
          </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'
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 absolute bottom-0 left-20 right-0 top-1/2 sm:left-1/2 sm:top-25
          sm:-translate-y-0 sm:-translate-x-[calc(300px/2)] -translate-y-1/2
          flex flex-col justify-center sm:justify-normal gap-16   md:gap-4 sm:gap-2
           xl:w-auto sm:w-[300px] text-white;
}
.title-font {
  @apply text-5xl md:text-4xl sm:text-lg font-bold text-center text-white;
}
</style>