|
|
|
@ -2,14 +2,24 @@
@@ -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 @@
@@ -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 = [
@@ -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 = [
@@ -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> |
|
|
|
|