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]"
    >
      <div class="size-full mx-auto overflow-hidden relative" ref="emblaNode">
        <div class="size-full flex">
          <div v-for="(slide, idx) in slides" :key="idx" class="size-full flex-[0_0_100%]">
            <div class="size-full relative flex overflow-hidden items-center sm:items-start">
              <NuxtImg
                :src="slide.bgLg"
                class="size-full object-cover sm:hidden"
                format="webp"
                loading="lazy"
                :fetchpriority="idx === 0 ? 'high' : 'low'"
              />
              <NuxtImg
                :src="slide.bgSm"
                class="size-full object-cover hidden sm:block"
                format="webp"
                loading="lazy"
                :fetchpriority="idx === 0 ? 'high' : 'low'"
              />
              <div
                class="w-[1440px] md:w-[870px] sm:w-[258px] sm:top-19 absolute inset-0 mx-auto flex overflow-hidden items-center sm:items-start"
              >
                <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>
          </div>
        </div>

        <div
          class="absolute bottom-[4%] left-1/2 -translate-x-1/2 flex gap-2 md:gap-[6px] sm:gap-1 z-10 bg-red"
        >
          <button
            v-for="(_, index) in slides"
            :key="index"
            :class="{ 'active-slide': emblaState.selectedIndex == index }"
            class="w-12 h-2 md:w-9 md:h-[6px] sm:w-3 sm:h-1 bg-[#818897] opacity-30"
            @click="scrollTo(index)"
          />
        </div>
      </div>
    </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'
import EmblaCarousel from 'embla-carousel'
const emblaNode = ref<any>(null)
const embla = ref<any>(null)
// 添加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]',
      },
    ],
  },
]

const emblaState = reactive({
  selectedIndex: 0,
})

const scrollTo = (index: number) => embla.value?.scrollTo(index)
function updateOnSelect() {
  emblaState.selectedIndex = embla.value.selectedScrollSnap()
  // state.canScrollPrev = embla.value.canScrollPrev()
  // state.canScrollNext = embla.value.canScrollNext()
}
onMounted(() => {
  embla.value = EmblaCarousel(emblaNode.value, { loop: true }, [createAutoplay(4000)])
  embla.value.on('select', updateOnSelect)
})

function createAutoplay(delay = 4000) {
  let embla: any = null
  let timer: any = null

  function autoplay() {
    stop()
    if (!embla) return
    timer = setInterval(() => {
      if (!embla) return
      if (!embla.canScrollNext()) {
        embla.scrollTo(0) // 回到第一张
      } else {
        embla.scrollNext()
      }
    }, delay)
  }

  function stop() {
    if (timer) clearInterval(timer)
  }

  return {
    name: 'autoplay',
    options: {},
    init(emblaApi: any) {
      embla = emblaApi
      autoplay()
      embla.on('pointerDown', stop)
      embla.on('pointerUp', autoplay)
      embla.on('destroy', stop)
    },
    destroy() {
      stop()
      embla = null
    },
  }
}
</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;
}
.active-slide {
  opacity: 1;
}
</style>