<template>
  <div class="mx-auto">
    <h2 class="title-font py-11 md:py-8 sm:py-4">应用场景</h2>
    <div
      class="grid grid-cols-2 gap-x-20 pl-12 md:pl-10 sm:pl-4 md:gap-8 sm:gap-4 gap-y-8 md:gap-y-6 sm:gap-y-[12px] max-w-[1440px] mx-auto md:px-10 sm:px-4"
    >
      <div
        v-for="(item, idx) in sceneList"
        :key="idx"
        class="w-full h-[366px] md:h-[237px] sm:h-[118px] relative"
      >
        <picture class="absolute inset-0 z-0">
          <source media="(max-width: 1024px)" :srcset="item.smBg" />
          <source media="(max-width: 1025px)" :srcset="item.lgBg" />
          <img :src="item.lgBg" loading="eager" class="size-full object-cover" />
        </picture>
        <div
          class="absolute -left-10 md:-left-5 sm:-left-1 pl-12 leading-[78px] md:leading-[40px] sm:leading-[20px] z-10 w-[530px] h-[78px] md:w-[214px] md:h-[40px] sm:w-[160px] sm:h-[20px] bg-no-repeat bg-center text-white text-4xl md:text-2xl sm:text-xs font-bold"
          style="
            background-image: linear-gradient(
              90deg,
              #0b207c 0%,
              rgba(16, 73, 119, 0.56) 54%,
              rgba(14, 27, 111, 0) 100%
            );
          "
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const sceneList = [
  {
    title: '工商业储能',
    lgBg: '/images/scenarios/6.1_lg.png',
    smBg: '/images/scenarios/6.1_sm.png',
  },
  {
    title: '移动储能',
    lgBg: '/images/scenarios/6.2_lg.png',
    smBg: '/images/scenarios/6.2_sm.png',
  },
  {
    title: '微电网',
    lgBg: '/images/scenarios/6.3_lg.png',
    smBg: '/images/scenarios/6.3_sm.png',
  },
  {
    title: '其他电力应用',
    lgBg: '/images/scenarios/6.4_lg.png',
    smBg: '/images/scenarios/6.4_sm.png',
  },
]
</script>

<style scoped></style>
