website/pages/products/BK-1000.vue

<template>
  <div>
    <div class="h-[888px] w-full md:h-[710px] sm:h-[410px]">
      <div
        class="size-full relative flex overflow-hidden items-center md:items-start sm:items-start"
      >
        <picture class="absolute w-full h-full left-0 top-0 -z-10">
          <source media="(max-width: 1024px)" :srcset="slide.bgSm" />
          <source media="(max-width: 1025px)" :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] md:h-[calc(100%-200px)] sm:top-19 relative mx-auto flex md:justify-center sm:justify-center sm:pt-10"
        >
          <div
            class="flex flex-col gap-10 sm:gap-3 text-white justify-center items-center w-[398px]"
          >
            <h2
              class="text-5xl md:text-[40px] md:leading-[40px] sm:text-[20px] sm:leading-[20px] font-bold"
            >
              {{ slide.title }}
            </h2>
            <div
              class="text-4xl md:text-[28px] md:leading-[28px] sm:text-xs overflow-hidden font-bold bg-gradient-to-r from-[#69AA25] to-[#13A892] w-[328px] h-[48px] md:w-[258px] sm:w-[130px] sm:h-[24px] rounded-full flex items-center justify-center"
            >
              {{ slide.subtitle }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="h-[888px] max-w-[1440px] md:max-w-[750px] sm:max-w-[320px] w-full relative mx-auto pt-[136px] md:pt-[48px] sm:pt-[24px]"
    >
      <div v-for="item in slide.content" :key="item.title" class="flex md:flex-col sm:flex-col">
        <div class="px-[12%] md:px-0 sm:px-0 md:pt-12 sm:pt-6 md:pb-23 sm:pb-11">
          <h3 class="text-5xl sm:text-2xl font-bold text-[#414141] md:text-center sm:text-center">
            {{ item.title }}
          </h3>
        </div>
        <div class="flex-1 grid grid-cols-2 md:hidden sm:hidden">
          <div v-for="column in item.info" :key="column.column" class="flex flex-col">
            <div v-for="info in column.items" :key="info.label" class="min-h-[160px]">
              <div class="text-3xl font-bold text-[#17A755] mb-5">{{ info.label }}</div>
              <p
                v-for="value in info.value"
                :key="value"
                class="text-[18px] text-[#6F6F6F] font-[400]"
              >
                {{ value }}
              </p>
            </div>
          </div>
        </div>
        <div class="hidden md:block sm:block">
          <div
            v-for="column in item.info"
            :key="column.column"
            class="flex flex-wrap md:gap-5 sm:gap-1"
          >
            <div
              v-for="info in column.items"
              :key="info.label"
              class="md:min-h-[182px] md:max-w-[640px] sm:max-w-[320px] sm:min-h-[92px] md:min-w-[200px] sm:min-w-[100px]"
              :class="{ 'flex-1': column.column === 1 }"
            >
              <div class="text-3xl sm:text-base font-bold text-[#17A755] mb-5">
                {{ info.label }}
              </div>
              <p
                v-for="value in info.value"
                :key="value"
                class="text-[18px] sm:text-[10px] sm:leading-[10px] text-[#6F6F6F] font-[400]"
              >
                {{ value }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const slide = {
  bgLg: '/images/banner/bk1000.png',
  bgSm: '/images/banner/bk1000_sm.png',
  title: '储能工业控制主机',
  subtitle: 'BK-1000',
  content: [
    {
      title: '尺寸与重量',
      info: [
        {
          column: 1,
          items: [
            { label: '长度', value: ['162.6mm'] },
            { label: '宽度', value: ['75.1mm'] },
            { label: '厚度', value: ['8.4mm'] },
          ],
        },

        {
          column: 2,
          items: [
            {
              label: '重量',
              value: [
                '约226克（含电池）',
                '*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。',
              ],
            },
            {
              label: 'xxxx',
              value: [
                '约226克（含电池）',
                '*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。',
              ],
            },
          ],
        },
      ],
    },
  ],
}
</script>

<style scoped></style>