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.
95 lines
3.3 KiB
95 lines
3.3 KiB
<template> |
|
<main class="w-full bg-black lg:min-w-[1200px]"> |
|
<div |
|
class="relative h-[428px] w-full bg-gradient-to-b from-[#0C0C16] to-[#0C131E] lg:h-[888px]" |
|
> |
|
<ClientOnly> |
|
<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="slide.bgLg" |
|
loading="eager" |
|
class="absolute right-0 h-[100%] object-cover sm:hidden" |
|
/> |
|
<img :src="slide.bgSm" 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> |
|
</ClientOnly> |
|
</div> |
|
<Serve /> |
|
<Device /> |
|
<Middle /> |
|
<ElectricPower /> |
|
<Scenarios /> |
|
<CloudData /> |
|
<Operation /> |
|
<About /> |
|
</main> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
import Device from '@/components/pageLayout/device.vue' |
|
import Serve from '@/components/pageLayout/serce.vue' |
|
import Middle from '@/components/pageLayout/midele.vue' |
|
import Scenarios from '@/components/pageLayout/scenarios.vue' |
|
import ElectricPower from '@/components/pageLayout/electricPower.vue' |
|
import CloudData from '@/components/pageLayout/cloudData.vue' |
|
import Operation from '@/components/pageLayout/operation.vue' |
|
import About from '@/components/pageLayout/abuot.vue' |
|
const slides = [ |
|
{ |
|
bgLg: '/images/banner/bk1000.png', |
|
bgSm: '/images/banner/device_sm.png', |
|
title: '储能工业控制主机 BK-1000', |
|
subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护', |
|
tags: ['低成本', '高可靠性', '全场景适配'], |
|
}, |
|
{ |
|
bgLg: '/images/banner/bk2000.png', |
|
bgSm: '/images/banner/device_sm.png', |
|
title: '储能工业控制主机 BK-2000', |
|
subtitle: '超高性价比｜开发周期缩短50%｜电力四级防护', |
|
tags: ['低成本', '高可靠性', '全场景适配'], |
|
}, |
|
] |
|
</script> |
|
|
|
<style> |
|
.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; |
|
} |
|
.title-font { |
|
@apply text-5xl md:text-4xl sm:text-lg font-bold text-center text-white; |
|
} |
|
</style>
|
|
|