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.
69 lines
1.9 KiB
69 lines
1.9 KiB
<template> |
|
<div |
|
class="mx-auto pb-10 sm:pb-5" |
|
style="background-image: linear-gradient(180deg, #1e1d25 0%, #18181c 100%)" |
|
> |
|
<h2 class="title-font py-11 md:py-8 sm:py-4">云端数据</h2> |
|
<div |
|
class="relative h-[580px] max-w-[1400px] md:h-auto md:w-full sm:w-[348px] sm:h-[176px] mx-auto" |
|
> |
|
<ClientOnly> |
|
<MovieCarousel3D> |
|
<swiper-slide v-for="(movie, index) in imgList" :key="index" class="size-4/5"> |
|
<div class="w-full h-full"> |
|
<img :src="movie" alt="" class="w-full h-full object-cover" format="webp" /> |
|
</div> |
|
</swiper-slide> |
|
</MovieCarousel3D> |
|
</ClientOnly> |
|
</div> |
|
<div |
|
class="flex gap-[144px] md:gap-[72px] sm:gap-[36px] justify-center mt-[58px] md:mt-[30px] sm:mt-[15px]" |
|
> |
|
<div |
|
v-for="(item, index) in cloudDataList" |
|
:key="index" |
|
class="flex flex-col gap-[18px] md:gap-2 sm:gap-1 justify-center" |
|
> |
|
<img |
|
:src="item.icon" |
|
alt="" |
|
class="size-16 md:size-14 sm:size-7 object-cover mx-auto" |
|
format="webp" |
|
/> |
|
<h3 class="text-[26px] md:text-xl sm:text-[10px] sm:leading-[10px] text-white font-bold"> |
|
{{ item.title }} |
|
</h3> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script setup> |
|
import MovieCarousel3D from '~/components/SwiperSlider3D.vue' |
|
const imgList = ['/images/cloudData/7l.png', '/images/cloudData/7m.png', '/images/cloudData/7r.png'] |
|
const cloudDataList = [ |
|
{ |
|
icon: '/images/cloudData/7icon1.png', |
|
title: '站点拓扑', |
|
}, |
|
{ |
|
icon: '/images/cloudData/7icon2.png', |
|
title: '全数据曲线', |
|
}, |
|
{ |
|
icon: '/images/cloudData/7icon3.png', |
|
title: '站点收益', |
|
}, |
|
{ |
|
icon: '/images/cloudData/7icon4.png', |
|
title: '故障视图', |
|
}, |
|
{ |
|
icon: '/images/cloudData/7icon5.png', |
|
title: '自定义规则', |
|
}, |
|
] |
|
</script> |
|
|
|
<style scoped></style>
|
|
|