website/components/pageLayout/serce.vue

<template>
  <h2 class="title-font pt-12 pb-10 md:pb-7 sm:pt-[16px] sm:pb-[12px]">服务矩阵</h2>
  <div class="grid grid-cols-8 gap-[24px] max-w-[1440px] mx-auto sm:hidden md:hidden">
    <div v-for="(item, idx) in serveList" :key="idx" :class="item.clx">
      <picture class="absolute inset-0 z-0">
        <source media="(max-width: 480px)" :srcset="item.smBg" />
        <source media="(max-width: 1280px)" :srcset="item.lgBg" />
        <img :src="item.lgBg" loading="eager" class="size-full object-cover" />
      </picture>
      <section class="relative z-10 p-6 md:p-4 size-full">
        <h3 class="text-white text-3xl md:text-lg font-bold">{{ item.title }}</h3>
        <div class="text-[#A4B0B7] flex flex-col lg:text-lg gap-2 md:mt-4 mt-9">
          <p v-for="(content, idx) in item.contentList" :key="idx">{{ content }}</p>
        </div>
      </section>
    </div>
  </div>
  <div class="hidden md:block sm:block">
    <div class="flex flex-wrap gap-4 mx-auto justify-center size-full">
      <div
        v-for="(item, idx) in serveList"
        :key="idx"
        class="relative w-[178px] h-[184px] md:w-[320px] md:h-[330px] md:py-6 sm:py-3 md:px-8 sm:px-4"
      >
        <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>
        <section class="relative z-10 size-full">
          <h3 class="text-white text-xs font-bold">{{ item.title }}</h3>
          <div
            class="text-[#A4B0B7] flex flex-col md:gap-4 sm:gap-2 md:mt-6 sm:mt-3 md:text-lg sm:text-[10px]"
          >
            <p v-for="(content, idx) in item.contentList" :key="idx">{{ content }}</p>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const serveList = [
  {
    title: '丰富的接口',
    lgBg: '/images/serve/2.1_lg.png',
    smBg: '/images/serve/2.1_sm.png',
    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
    clx: 'aspect-[1/1.0585] col-span-2 relative sm:aspect-auto sm:w-[160px] sm:h-[166px]',
  },
  {
    title: '完美的中间件生态',
    lgBg: '/images/serve/2.2_lg.png',
    smBg: '/images/serve/2.2_sm.png',
    contentList: ['MQTT', 'OPC UA', 'Modbus', 'OPC UA', 'Modbus', '……'],
    clx: 'aspect-[1/1.0585]  relative col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
  },
  {
    title: '电力四级防护',
    lgBg: '/images/serve/2.3_lg.png',
    smBg: '/images/serve/2.3_sm.png',
    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
    clx: 'aspect-[1/1.0585] relative col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]',
  },
  {
    title: '运维系统工具',
    lgBg: '/images/serve/2.4_lg.png',
    smBg: '/images/serve/2.4_sm.png',
    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
    clx: 'aspect-[1/1.0585] col-span-2 relative sm:aspect-auto sm:w-[160px] sm:h-[166px]',
  },

  {
    title: '储能家EMS应用',
    lgBg: '/images/serve/2.5_lg.png',
    smBg: '/images/serve/2.5_sm.png',
    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
    clx: 'aspect-[2.5/1.0158] col-span-5 relative sm:aspect-auto sm:w-[160px] sm:h-[166px]',
  },
  {
    title: '云端储能平台',
    lgBg: '/images/serve/2.6_lg.png',
    smBg: '/images/serve/2.6_sm.png',
    contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'],
    clx: 'aspect-[1.5/1.0158] col-span-3 relative sm:aspect-auto sm:w-[160px] sm:h-[166px]',
  },
]
</script>

<style></style>