|
Before Width: | Height: | Size: 2.4 MiB |
@ -1,11 +1,146 @@
@@ -1,11 +1,146 @@
|
||||
<template> |
||||
<main class="h-screen w-full"> |
||||
<img src="../assets/images/bg.jpg" class="h-[32rem] w-full object-cover" /> |
||||
<main class="w-full bg-black lg:min-w-[1200px]"> |
||||
<ClientOnly> |
||||
<div |
||||
class="relative h-[428px] w-full bg-gradient-to-b from-[#0C0C16] to-[#0C131E] lg:h-[888px]" |
||||
> |
||||
<swiper-container |
||||
ref="containerRef" |
||||
class="max-w-[1920px] size-full mx-auto" |
||||
:autoplay="{ delay: 3000 }" |
||||
loop |
||||
pagination |
||||
> |
||||
<swiper-slide v-for="(slide, idx) in slides" :key="idx" class="size-full relative"> |
||||
<img |
||||
src="/public/images/banner/device_lg.png" |
||||
loading="eager" |
||||
class="absolute right-0 h-[100%] object-cover sm:hidden" |
||||
/> |
||||
<img src="/public/images/banner/device_sm.png" alt="" class="sm:block hidden" /> |
||||
<div class="swiper-banner-info"> |
||||
<h6 class="text-2xl md:text-lg lg:text-xl sm:text-xs font-bold"> |
||||
{{ slide.title }} |
||||
</h6> |
||||
<h2 |
||||
class="text-4xl lg:text-3xl md:text-2xl sm:text-base overflow-hidden font-bold text-ellipsis whitespace-pre-line break-words" |
||||
> |
||||
{{ slide.subtitle }} |
||||
</h2> |
||||
<div |
||||
v-if="slide.tags" |
||||
class="flex gap-4 sm:gap-2 text-lg lg:text-base md:text-base sm:text-sm" |
||||
> |
||||
<p |
||||
v-for="(tag, index) in slide.tags" |
||||
:key="index" |
||||
class="rounded-full bg-gradient-to-r from-[#69AA25] to-[#13A892] px-[28px] py-[6px] md:px-[16px] md:py-[4px] sm:px-[12px] sm:py-[4px]" |
||||
> |
||||
{{ tag }} |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</swiper-slide> |
||||
</swiper-container> |
||||
</div> |
||||
</ClientOnly> |
||||
<div> |
||||
<h2 |
||||
class="pt-12 pb-10 md:pb-7 sm:pt-[16px] sm:pb-[12px] text-5xl md:text-4xl sm:text-lg font-bold text-center text-white" |
||||
> |
||||
服务矩阵 |
||||
</h2> |
||||
<div |
||||
class="grid grid-cols-8 sm:grid-cols-2 sm:gap-2 gap-[24px] sm:w-[328px] sm:mx-auto max-w-[1440px] mx-auto md:p-5" |
||||
> |
||||
<div v-for="(item, idx) in serveList" :key="idx" :class="item.clx"> |
||||
<picture class="absolute inset-0 z-0"> |
||||
<source media="(max-width: 480px)" :srcset="item.smBg" /> |
||||
<source media="(max-width: 1280px)" :srcset="item.lgBg" /> |
||||
<img :src="item.lgBg" loading="eager" class="size-full object-cover" /> |
||||
</picture> |
||||
<section class="relative z-10 p-6 sm:p-3 size-full"> |
||||
<h3 class="text-white text-3xl md:text-lg sm:text-xs font-bold">{{ item.title }}</h3> |
||||
<div |
||||
class="text-[#A4B0B7] flex flex-col lg:text-lg sm:text-[10px] gap-2 sm:gap-1 mt-9 sm:mt-3" |
||||
> |
||||
<p v-for="(content, idx) in item.contentList" :key="idx">{{ content }}</p> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</main> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue' |
||||
const slides = [ |
||||
{ |
||||
bg: '../assets/images/banner-device.png', |
||||
title: '储能工业控制主机 BK-2000', |
||||
subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护', |
||||
tags: ['低成本', '高可靠性', '全场景适配'], |
||||
}, |
||||
// { |
||||
// bg: '../assets/images/banner-device.png', |
||||
// title: '储能工业控制主机 BK-2000', |
||||
// subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护', |
||||
// tags: ['低成本', '高可靠性', '全场景适配'], |
||||
// }, |
||||
] |
||||
|
||||
const serveList = [ |
||||
{ |
||||
title: '丰富的接口', |
||||
lgBg: '/images/serve/2.1_lg.png', |
||||
smBg: '/images/serve/2.1_sm.png', |
||||
contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'], |
||||
clx: 'md:aspect-[1/1.0585] relative md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]', |
||||
}, |
||||
{ |
||||
title: '完美的中间件生态', |
||||
lgBg: '/images/serve/2.2_lg.png', |
||||
smBg: '/images/serve/2.2_sm.png', |
||||
contentList: ['MQTT', 'OPC UA', 'Modbus', 'OPC UA', 'Modbus', '……'], |
||||
clx: 'md:aspect-[1/1.0585] relative md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]', |
||||
}, |
||||
{ |
||||
title: '电力四级防护', |
||||
lgBg: '/images/serve/2.3_lg.png', |
||||
smBg: '/images/serve/2.3_sm.png', |
||||
contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'], |
||||
clx: 'md:aspect-[1/1.0585] relative md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px]', |
||||
}, |
||||
{ |
||||
title: '运维系统工具', |
||||
lgBg: '/images/serve/2.4_lg.png', |
||||
smBg: '/images/serve/2.4_sm.png', |
||||
contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'], |
||||
clx: 'md:aspect-[1/1.0585] md:col-span-2 sm:aspect-auto sm:w-[160px] sm:h-[166px] relative', |
||||
}, |
||||
|
||||
{ |
||||
title: '储能家EMS应用', |
||||
lgBg: '/images/serve/2.5_lg.png', |
||||
smBg: '/images/serve/2.5_sm.png', |
||||
contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'], |
||||
clx: 'md:aspect-[2.5/1.0158] relative md:col-span-5 sm:aspect-auto sm:w-[160px] sm:h-[166px]', |
||||
}, |
||||
{ |
||||
title: '云端储能平台', |
||||
lgBg: '/images/serve/2.6_lg.png', |
||||
smBg: '/images/serve/2.6_sm.png', |
||||
contentList: ['2路CAN', '8路485', '10路DI', '10路DO', '4路网口', '……'], |
||||
clx: 'md:aspect-[1.5/1.0158] relative md:col-span-3 sm:aspect-auto sm:w-[160px] sm:h-[166px]', |
||||
}, |
||||
] |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
<style scoped> |
||||
.swiper-banner-info { |
||||
@apply absolute bottom-0 left-20 right-0 top-1/2 sm:left-1/2 sm:top-25 |
||||
sm:-translate-y-0 sm:-translate-x-[calc(300px/2)] -translate-y-1/2 |
||||
flex flex-col justify-center sm:justify-normal gap-16 md:gap-4 sm:gap-2 |
||||
xl:w-auto sm:w-[300px] text-white; |
||||
} |
||||
</style> |
||||
|
||||
|
After Width: | Height: | Size: 7.8 MiB |
|
After Width: | Height: | Size: 3.7 MiB |
|
After Width: | Height: | Size: 2.5 MiB |
|
After Width: | Height: | Size: 228 KiB |
|
After Width: | Height: | Size: 209 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 198 KiB |
|
After Width: | Height: | Size: 181 KiB |
|
After Width: | Height: | Size: 176 KiB |
|
After Width: | Height: | Size: 194 KiB |
|
After Width: | Height: | Size: 177 KiB |
|
After Width: | Height: | Size: 664 KiB |
|
After Width: | Height: | Size: 231 KiB |
|
After Width: | Height: | Size: 339 KiB |
|
After Width: | Height: | Size: 245 KiB |