website/components/pageLayout/cloudData.vue

<template>
  <div
    class="mx-auto pb-10 sm:pb-5"
    style="background-image: linear-gradient(180deg, #1e1d25 0%, #18181c 100%)"
  >
    <h2 class="title-font py-11 md:py-8 sm:py-4">云端数据</h2>
    <div
      class="relative h-[580px] max-w-[1400px] md:h-auto md:w-full sm:w-[348px] sm:h-[176px] mx-auto"
    >
      <ClientOnly>
        <MovieCarousel3D>
          <swiper-slide v-for="(movie, index) in imgList" :key="index" class="size-4/5">
            <div class="w-full h-full">
              <img :src="movie" alt="" class="w-full h-full object-cover" format="webp" />
            </div>
          </swiper-slide>
        </MovieCarousel3D>
      </ClientOnly>
    </div>
    <div
      class="flex gap-[144px] md:gap-[72px] sm:gap-[36px] justify-center mt-[58px] md:mt-[30px] sm:mt-[15px]"
    >
      <div
        v-for="(item, index) in cloudDataList"
        :key="index"
        class="flex flex-col gap-[18px] md:gap-2 sm:gap-1 justify-center"
      >
        <img
          :src="item.icon"
          alt=""
          class="size-16 md:size-14 sm:size-7 object-cover mx-auto"
          format="webp"
        />
        <h3 class="text-[26px] md:text-xl sm:text-[10px] sm:leading-[10px] text-white font-bold">
          {{ item.title }}
        </h3>
      </div>
    </div>
  </div>
</template>

<script setup>
import MovieCarousel3D from '~/components/SwiperSlider3D.vue'
const imgList = ['/images/cloudData/7l.png', '/images/cloudData/7m.png', '/images/cloudData/7r.png']
const cloudDataList = [
  {
    icon: '/images/cloudData/7icon1.png',
    title: '站点拓扑',
  },
  {
    icon: '/images/cloudData/7icon2.png',
    title: '全数据曲线',
  },
  {
    icon: '/images/cloudData/7icon3.png',
    title: '站点收益',
  },
  {
    icon: '/images/cloudData/7icon4.png',
    title: '故障视图',
  },
  {
    icon: '/images/cloudData/7icon5.png',
    title: '自定义规则',
  },
]
</script>

<style scoped></style>