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" />
          <NuxtImg :src="slide.bgLg" loading="eager" class="size-full object-cover" format="webp" />
        </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="max-w-[1200px] md:max-w-[750px] sm:max-w-[320px] w-full relative mx-auto">
      <div
        v-for="item in slide.content"
        :key="item.title"
        class="flex border-b py-10 border-[#E5E5E5] gap-10"
      >
        <div class="px-[12%]">
          <h3 class="text-2xl font-bold text-[#414141]">
            {{ item.title }}
          </h3>
        </div>
        <!-- grid grid-cols-2 md:hidden sm:hidden -->
        <div class="flex-1 flex items-center">
          <div v-for="column in item.info" :key="column.column" class="flex flex-col gap-4">
            <div v-for="info in column.items" :key="info.label">
              <div class="text-xl font-bold text-[#17A755] mb-1">{{ info.label }}</div>
              <p
                v-for="value in info.value"
                :key="value"
                class="text-base text-[#6F6F6F] font-[400]"
              >
                {{ value }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const slide = {
  bgLg: '/images/product/BK-1000_lg.png',
  bgSm: '/images/product/BK-1000_sm.png',
  title: '储能工业控制主机',
  subtitle: 'BK-1000',
  content: [
    {
      title: '系统',
      info: [
        {
          column: 1,
          items: [
            { label: '处理器', value: ['双核Cortex-A7，1.2GHz 工业级'] },
            { label: '内存', value: ['512M'] },
            { label: '板载存储', value: ['4G'] },
            { label: '操作系统', value: ['Linux-Buildroot'] },
          ],
        },
      ],
    },
    {
      title: '电源',
      info: [
        {
          column: 1,
          items: [
            { label: '输入范围', value: ['电压范围DC9-36V'] },
            { label: '防护等级', value: ['防反接，浪涌4KV'] },
            { label: '峰值功耗', value: ['10W'] },
          ],
        },
      ],
    },
    {
      title: '接口',
      info: [
        {
          column: 1,
          items: [
            { label: 'RS485', value: ['6路  隔离方案，抗干扰性强，电力四级'] },
            { label: 'CAN', value: ['2路  隔离方案，抗干扰性强，电力四级'] },
            { label: 'DO', value: ['4路  隔离方案，3路常开，1路转换，电力四级'] },
            { label: 'DI', value: ['4路  隔离方案，抗干扰性强，电力四级'] },
            { label: '以太网', value: ['2路  工业级 防雷击浪涌'] },
            { label: '显示接口', value: ['无'] },
            { label: 'USB-A', value: ['2路 工业级'] },
            { label: '调试接口', value: ['1路，Type-C'] },
          ],
        },
      ],
    },
    {
      title: '存储',
      info: [
        {
          column: 1,
          items: [
            { label: 'TF卡', value: ['1路，TF卡'] },
            { label: 'SATA接口', value: ['无'] },
          ],
        },
      ],
    },
    {
      title: '无线',
      info: [
        {
          column: 1,
          items: [
            { label: '4G', value: ['选配'] },
            { label: '北斗/GPS', value: ['选配'] },
            { label: 'wifi', value: ['无'] },
            { label: '蓝牙', value: ['无'] },
          ],
        },
      ],
    },
    {
      title: '环境',
      info: [
        {
          column: 1,
          items: [
            { label: '工作温度', value: ['-40℃~85℃，95%无冷凝'] },
            { label: '存储环境', value: ['-40℃~85℃，95%无冷凝'] },
            { label: '海拔高度', value: ['<3000m'] },
          ],
        },
      ],
    },
    {
      title: '机械',
      info: [
        {
          column: 1,
          items: [
            { label: '尺寸', value: ['244*32*160'] },
            { label: '安装', value: ['壁挂或桌面安装'] },
          ],
        },
      ],
    },
    {
      title: '防护',
      info: [
        {
          column: 1,
          items: [{ label: 'EMC', value: ['电力四级'] }],
        },
      ],
    },
  ],
}
</script>