website/pages/index.vue

<template>
  <main class="w-full bg-black lg:min-w-[1200px]">
    <ClientOnly>
      <div
        class="relative h-[428px] w-full bg-gradient-to-b from-[#0C0C16] to-[#0C131E] lg:h-[888px]"
      >
        <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="/public/images/banner/device_lg.png"
              loading="eager"
              class="absolute right-0 h-[100%] object-cover sm:hidden"
            />
            <img src="/public/images/banner/device_sm.png" 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>
      </div>
    </ClientOnly>
    <div>
      <h2
        class="pt-12 pb-10 md:pb-7 sm:pt-[16px] sm:pb-[12px] text-5xl md:text-4xl sm:text-lg font-bold text-center text-white"
      >
        服务矩阵
      </h2>
      <div
        class="grid grid-cols-8 sm:grid-cols-2 sm:gap-2 gap-[24px] sm:w-[328px] sm:mx-auto max-w-[1440px] mx-auto md:p-5"
      >
        <div v-for="(item, idx) in serveList" :key="idx" :class="item.clx">
          <picture class="absolute inset-0 z-0">
            <source media="(max-width: 480px)" :srcset="item.smBg" />
            <source media="(max-width: 1280px)" :srcset="item.lgBg" />
            <img :src="item.lgBg" loading="eager" class="size-full object-cover" />
          </picture>
          <section class="relative z-10 p-6 sm:p-3 size-full">
            <h3 class="text-white text-3xl md:text-lg sm:text-xs font-bold">{{ item.title }}</h3>
            <div
              class="text-[#A4B0B7] flex flex-col lg:text-lg sm:text-[10px] gap-2 sm:gap-1 mt-9 sm:mt-3"
            >
              <p v-for="(content, idx) in item.contentList" :key="idx">{{ content }}</p>
            </div>
          </section>
        </div>
      </div>
    </div>
  </main>
</template>

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

const serveList = [
  {
    title: '丰富的接口',
    lgBg: '/images/serve/2.1_lg.png',
    smBg: '/images/serve/2.1_sm.png',
    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
    clx: 'md:aspect-[1/1.0585] relative md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
  },
  {
    title: '完美的中间件生态',
    lgBg: '/images/serve/2.2_lg.png',
    smBg: '/images/serve/2.2_sm.png',
    contentList: ['MQTT', 'OPC UA', 'Modbus', 'OPC UA', 'Modbus', '……'],
    clx: 'md:aspect-[1/1.0585] relative md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
  },
  {
    title: '电力四级防护',
    lgBg: '/images/serve/2.3_lg.png',
    smBg: '/images/serve/2.3_sm.png',
    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
    clx: 'md:aspect-[1/1.0585] relative md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
  },
  {
    title: '运维系统工具',
    lgBg: '/images/serve/2.4_lg.png',
    smBg: '/images/serve/2.4_sm.png',
    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
    clx: 'md:aspect-[1/1.0585] md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px] relative',
  },

  {
    title: '储能家EMS应用',
    lgBg: '/images/serve/2.5_lg.png',
    smBg: '/images/serve/2.5_sm.png',
    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
    clx: 'md:aspect-[2.5/1.0158] relative md:col-span-5 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
  },
  {
    title: '云端储能平台',
    lgBg: '/images/serve/2.6_lg.png',
    smBg: '/images/serve/2.6_sm.png',
    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
    clx: 'md:aspect-[1.5/1.0158] relative md:col-span-3 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
  },
]
</script>

<style scoped>
.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;
}
</style>