fix: 样式调整

components/pageLayout/midele.vue

@@ -2,14 +2,24 @@
   <h2 class="title-font pt-20 sm:p-4 md:p-8 pb-12">全生态中间件</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"
-      :class="item.clx"
+      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">
+      <picture class="absolute inset-0 z-0 text-white">
         <img :src="item.lgBg" loading="eager" class="size-full" />
       </picture>
       <section class="relative z-10 sm:p-3 size-full flex flex-col">
@@ -31,12 +41,22 @@
 </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-[142px] relative right-[-30px] md:right-[-16px] sm:right-[-8px]',
+    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: '增强中间件',
@@ -47,7 +67,7 @@ const middleWareList = [
       'ModbusRTU Server/Client',
     ],
     lgBg: '/images/middle/4m_lg.jpg',
-    clx: 'w-[612px] h-[678px] md:w-[266px] md:h-[342px] sm:w-[138px] sm:h-[172px] relative z-[20] ',
+    clx: 'w-[540px] h-[584px] md:w-[234px] md:h-[288px] sm:w-[126px] sm:h-[152px] relative z-[20]',
   },
   {
     title: '专业中间件',
@@ -58,9 +78,34 @@ const middleWareList = [
       '云端数据交互SDK',
     ],
     lgBg: '/images/middle/4s_lg.jpg',
-    clx: 'w-[540px] h-[584px] md:w-[234px] md:h-[288px] sm:w-[126px] sm:h-[142px] relative left-[-30px] md:left-[-16px] sm:left-[-8px] ',
+    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></style>
+<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>