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.
66 lines
2.2 KiB
66 lines
2.2 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" |
|
> |
|
<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" |
|
> |
|
<picture class="absolute inset-0 z-0"> |
|
<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 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]', |
|
}, |
|
{ |
|
title: '增强中间件', |
|
contentList: [ |
|
'IEC104协议', |
|
'DL/T645协议', |
|
'ModbusTCP Server/Client', |
|
'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] ', |
|
}, |
|
{ |
|
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-[142px] relative left-[-30px] md:left-[-16px] sm:left-[-8px] ', |
|
}, |
|
] |
|
</script> |
|
|
|
<style scoped></style>
|
|
|