website/pages/index.vue

<template>
  <main class="w-full bg-[#0C0C16] lg:min-w-[1200px]">
    <div
      class="relative h-[428px] w-full bg-gradient-to-b from-[#0C0C16] to-[#080809] lg:h-[888px]"
    >
      <ClientOnly>
        <swiper-container
          ref="containerRef"
          class="size-full mx-auto"
          loop
          :pagination="{ clickable: true }"
        >
          <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" />
              </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;
}

/* Swiper分页器样式 */
:root {
  --swiper-pagination-color: #818897;
  --swiper-pagination-bullet-width: 48px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 0;
  --swiper-pagination-bullet-inactive-color: #818897;
  --swiper-pagination-bullet-inactive-opacity: 0.3;
  --swiper-pagination-bullet-horizontal-gap: 8px;
}

/* 响应式分页器 - 移动端 */
@media (max-width: 479px) {
  :root {
    --swiper-pagination-bullet-width: 24px;
    --swiper-pagination-bullet-height: 4px;
    --swiper-pagination-bullet-horizontal-gap: 4px;
  }
}

/* 响应式分页器 - 平板 */
@media (min-width: 480px) and (max-width: 1024px) {
  :root {
    --swiper-pagination-bullet-width: 36px;
    --swiper-pagination-bullet-height: 6px;
    --swiper-pagination-bullet-horizontal-gap: 6px;
  }
}

/* 响应式分页器 - 大屏 */
@media (min-width: 1025px) {
  :root {
    --swiper-pagination-bullet-width: 48px;
    --swiper-pagination-bullet-height: 8px;
    --swiper-pagination-bullet-horizontal-gap: 8px;
  }
}
</style>