<template>
  <div>
    <div class="h-[888px] w-full">
      <div class="size-full relative flex overflow-hidden items-center sm:items-start">
        <picture class="absolute w-full h-full left-0 top-0 -z-10">
          <source media="(max-width: 480px)" :srcset="slide.bgSm" />
          <source media="(max-width: 1280px)" :srcset="slide.bgLg" />
          <img :src="slide.bgLg" loading="eager" class="size-full object-cover" />
        </picture>
        <div class="w-[1440px] md:w-[870px] sm:w-[300px] sm:top-19 relative mx-auto">
          <div class="flex flex-col gap-10 text-white justify-center items-center w-[398px]">
            <h2 class="text-5xl md:text-lg sm:text-xs font-bold">
              {{ slide.title }}
            </h2>
            <div
              class="text-4xl md:text-2xl sm:text-base overflow-hidden font-bold bg-gradient-to-r from-[#69AA25] to-[#13A892] w-[328px] h-[48px] rounded-full flex items-center justify-center"
            >
              {{ slide.subtitle }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-[888px] max-w-[1440px] w-full relative mx-auto">
      <div v-for="item in slide.content" :key="item.title" class="flex gap-10">
        <div class="px-56">
          <h3 class="text-5xl font-bold text-[#414141]">
            {{ item.title }}
          </h3>
        </div>
        <ul>
          <li v-for="info in item.info" :key="info.label">
            <span>{{ info.label }}</span>
            <p v-for="value in info.value" :key="value">{{ value }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const slide = {
  bgLg: '/images/banner/bk1000.png',
  bgSm: '/images/banner/device_sm.png',
  title: '储能工业控制主机',
  subtitle: 'BK-1000',
  content: [
    {
      title: '尺寸与重量',
      info: [
        { label: '长度', value: ['162.6mm'] },
        { label: '宽度', value: ['75.1mm'] },
        { label: '厚度', value: ['8.4mm'] },
        {
          label: '重量',
          value: [
            '约226克（含电池）',
            '*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。',
          ],
        },
        {
          label: 'xxxx',
          value: [
            '约226克（含电池）',
            '*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。',
          ],
        },
      ],
    },
  ],
}
</script>

<style scoped></style>
