website/components/pageLayout/electricPower.vue

<template>
  <div class="relative md:mt-6 sm:mt-3 pb-[92px] md:pb-[32px] sm:pb-[16px]">
    <h2 class="title-font pt-12 pb-10 md:pb-7 sm:pt-[16px] sm:pb-[12px] relative z-10">
      电力四级防护
    </h2>
    <picture class="absolute inset-0 z-0">
      <source media="(max-width: 1024px)" srcset="/images/electricPower/bg_sm.png" />
      <source media="(max-width: 1025px)" srcset="/images/electricPower/bg_lg.png" />
      <NuxtImg
        src="/images/electricPower/bg_lg.png"
        loading="eager"
        class="size-full object-cover"
        format="webp"
      />
    </picture>
    <div
      class="relative w-full h-[calc(100%-136px)] md:h-[calc(100%-100px)] sm:h-[calc(100%-60px)] z-20 text-white max-w-[1440px] mx-auto flex items-center justify-center gap-10"
    >
      <div
        class="w-[494px] h-[672px] md:w-[286px] md:h-[378px] sm:w-[142px] sm:h-[188px] select-none"
      >
        <SwiperFlip>
          <swiper-slide v-for="(movie, index) in imgList" :key="index" class="size-[90%]">
            <div class="w-full h-full">
              <NuxtImg :src="movie" alt="" class="w-full h-full object-cover" format="webp" />
            </div>
          </swiper-slide>
        </SwiperFlip>
      </div>

      <div
        class="w-[580px] h-[698px] md:w-[308px] md:h-[396px] sm:w-[154px] sm:h-[198px] md:px-0 sm:px-0 px-13 md:py-6 sm:py-3 backdrop-blur-xl rounded-3xl md:rounded-xl sm:rounded-lg flex flex-col justify-center"
        style="
          background-image: linear-gradient(
            270deg,
            rgba(3, 10, 41, 0.64) 4%,
            rgba(17, 33, 86, 0.24) 97%
          );
        "
      >
        <div
          v-for="(item, idx) in electricPowerList"
          :key="idx"
          class="h-[150px] md:h-[96px] sm:h-[48px] md:pl-7 sm:pl-4 md:py-4 sm:py-2 w-full flex items-center border-b border-white/20 border-dashed gap-9 md:gap-6 sm:gap-2"
          :class="{ 'md:border-b-0 sm:border-b-0': idx === electricPowerList.length - 1 }"
        >
          <NuxtImg
            :src="item.img"
            loading="eager"
            class="size-16 md:size-10 sm:size-5"
            format="webp"
          />
          <div class="text-white">
            <h6 class="text-3xl md:text-xl sm:text-xs font-bold">{{ item.title }}</h6>
            <div
              class="text-xl opacity-75 mt-4 md:mt-[6px] md:leading-[16px] sm:leading-[8px] sm:mt-[3px] md:text-base sm:text-[8px]"
            >
              {{ item.desc }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const imgList = [
  '/images/electricPower/c1.png',
  '/images/electricPower/c5.png',
  '/images/electricPower/c3.png',
  '/images/electricPower/c4.png',
]
const electricPowerList = [
  {
    title: '电气安全',
    desc: '过载与短路防护',
    img: '/images/electricPower/icon1.png',
  },
  {
    title: '人身安全',
    desc: '绝缘与隔离防护',
    img: '/images/electricPower/icon2.png',
  },
  {
    title: '系统稳定性',
    desc: '电磁与浪涌防护，4kV冲击',
    img: '/images/electricPower/icon3.png',
  },
  {
    title: '可靠性根基',
    desc: '-40℃~85℃宽温域运行能力',
    img: '/images/electricPower/icon4.png',
  },
]
</script>

<style scoped></style>