You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
3.1 KiB
111 lines
3.1 KiB
<template> |
|
<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 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" /> |
|
</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>
|
|
|