website/components/pageLayout/midele.vue

<template>
  <h2 class="title-font pt-20 sm:p-4 md:p-8 pb-19">全生态中间件</h2>
  <div
    class="max-w-[1440px] mx-auto md:p-5 bg-black relative flex items-center justify-center pb-[107px] md:pb-17 sm:pb-10"
    ref="containerRef"
  >
    <div
      v-for="(item, idx) in middleWareList"
      :key="idx"
      class="relative shadow-[0_0_4px_0_rgba(7,6,44,0.61)] rounded-xl bg-cover overflow-hidden transition-all duration-300 cursor-pointer"
      :class="[
        item.clx,
        {
          'scale-active': activeIndex === idx,
          'scale-inactive': activeIndex !== null && activeIndex !== idx && idx === 1,
          'scale-default': activeIndex === null && idx === 1,
        },
      ]"
      @mouseenter="setActiveIndex(idx)"
      @mouseleave="clearActiveIndex()"
    >
      <picture class="absolute inset-0 z-0 text-white">
        <img :src="item.lgBg" loading="eager" class="size-full" :alt="item.title" />
      </picture>
      <section class="relative z-10 sm:p-3 size-full flex flex-col">
        <h3
          class="text-[#5897FF] text-5xl md:text-2xl md:mt-6 sm:text-xs mt-15 sm:mt-3 text-center font-bold"
        >
          {{ item.title }}
        </h3>
        <div
          class="text-[#A4B0B7] flex flex-col mt-21 md:mt-6 sm:mt-3 items-center text-3xl md:text-base sm:text-[8px] sm:leading-[14px] gap-9 md:gap-4 sm:gap-2"
        >
          <p v-for="(content, idx) in item.contentList" :key="idx" class="text-center">
            {{ content }}
          </p>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
const activeIndex = ref<number | null>(null)

const setActiveIndex = (idx: number) => {
  activeIndex.value = idx
}

const clearActiveIndex = () => {
  activeIndex.value = null
}

const middleWareList = [
  {
    title: '基础协议中间件',
    contentList: ['DI/DO/RS485/', 'Can/Led/MQTT/', 'HTTP/TCP/UDP协议'],
    lgBg: '/images/middle/4s_lg.jpg',
    clx: 'w-[540px] h-[584px] md:w-[234px] md:h-[288px] sm:w-[126px] sm:h-[152px] relative right-[-30px] md:right-[-16px] sm:right-[-8px] z-10',
  },
  {
    title: '增强中间件',
    contentList: [
      'IEC104协议',
      'DL/T645协议',
      'ModbusTCP Server/Client',
      'ModbusRTU Server/Client',
    ],
    lgBg: '/images/middle/4m_lg.jpg',
    clx: 'w-[540px] h-[584px] md:w-[234px] md:h-[288px] sm:w-[126px] sm:h-[152px] relative z-[20]',
  },
  {
    title: '专业中间件',
    contentList: [
      '日志、对时SDK',
      '时序数据库、SQL数据库',
      'QT HMIS、OTA升级SDK',
      '云端数据交互SDK',
    ],
    lgBg: '/images/middle/4s_lg.jpg',
    clx: 'w-[540px] h-[584px] md:w-[234px] md:h-[288px] sm:w-[126px] sm:h-[152px] relative left-[-30px] md:left-[-16px] sm:left-[-8px] z-10',
  },
]
</script>

<style scoped>
.scale-active,
.scale-default {
  transform: scale(1.1);
  z-index: 30;
}

.scale-inactive {
  width: 540px !important;
  height: 584px !important;
}

@media (max-width: 768px) {
  .scale-inactive {
    width: 234px !important;
    height: 288px !important;
  }
}

@media (max-width: 640px) {
  .scale-inactive {
    width: 126px !important;
    height: 152px !important;
  }
}
</style>