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" 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" class="size-full object-cover" />
                <!-- <NuxtImg
                  :src="slide.bgLg"
                  class="size-full object-cover"
                  loading="eager"
                  format="webp"
                  quality="90"
                  placeholder
                /> -->
              </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 text-lg lg:text-base md:text-base sm:text-sm">
                    <p
                      v-for="(tag, index) in slide.tags"
                      :key="index"
                      :class="tag.clx"
                      class="bg-cover bg-no-repeat bg-center bg-size-full flex items-center justify-center"
                      :style="{
                        backgroundImage: `url(${tag.bg})`,
                      }"
                    >
                      {{ tag.name }}
                    </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/bk1000_sm.png',
    title: '储能工业控制主机 BK-1000',
    subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护',
    tags: [
      {
        name: '低成本',
        bg: '/images/banner/tag1.png',
        clx: 'w-[126px] h-[38px] md:w-[100px] md:h-[30px] sm:w-[80px] sm:h-[24px]',
      },
      {
        name: '高可靠性',
        bg: '/images/banner/tag2.png',
        clx: 'w-[126px] h-[38px] md:w-[100px] md:h-[30px] sm:w-[80px] sm:h-[24px]',
      },
      {
        name: '全场景适配',
        bg: '/images/banner/tag3.png',
        clx: 'w-[148px] h-[38px] md:w-[116px] md:h-[30px] sm:w-[94px] sm:h-[24px]',
      },
    ],
  },
  {
    bgLg: '/images/banner/bk2000.png',
    bgSm: '/images/banner/bk2000_sm.png',
    title: '储能工业控制主机 BK-2000',
    subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护',
    tags: [
      {
        name: '低成本',
        bg: '/images/banner/tag1.png',
        clx: 'w-[126px] h-[38px] md:w-[100px] md:h-[30px] sm:w-[80px] sm:h-[24px]',
      },
      {
        name: '高可靠性',
        bg: '/images/banner/tag2.png',
        clx: 'w-[126px] h-[38px] md:w-[100px] md:h-[30px] sm:w-[80px] sm:h-[24px]',
      },
      {
        name: '全场景适配',
        bg: '/images/banner/tag3.png',
        clx: 'w-[148px] h-[38px] md:w-[116px] md:h-[30px] sm:w-[94px] sm:h-[24px]',
      },
    ],
  },
]
</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>