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.
73 lines
2.2 KiB
73 lines
2.2 KiB
3 months ago
|
<template>
|
||
|
|
<div class="max-w-[1400px] mx-auto pb-10 sm:pb-5">
|
||
|
|
<h2 class="title-font py-11 md:py-8 sm:py-4">应用数据</h2>
|
||
|
|
<div class="h-[580px] md:h-[382px] md:w-[760px] sm:w-[348px] sm:h-[176px] mx-auto">
|
||
|
|
<ClientOnly>
|
||
|
|
<MovieCarousel3D class="sm:hidden md:hidden">
|
||
|
|
<swiper-slide v-for="(movie, index) in imgList" :key="index" class="size-full">
|
||
|
|
<div class="w-full h-full">
|
||
|
|
<img :src="movie" alt="" class="w-full h-full object-cover" />
|
||
|
|
</div>
|
||
|
|
</swiper-slide>
|
||
|
|
</MovieCarousel3D>
|
||
|
|
<swiper-container
|
||
|
|
ref="containerRef"
|
||
|
|
class="size-full mx-auto hidden sm:block md:block"
|
||
|
|
:autoplay="{ delay: 3000 }"
|
||
|
|
loop
|
||
|
|
pagination
|
||
|
|
>
|
||
|
|
<swiper-slide v-for="(movie, index) in imgList" :key="index" class="size-full">
|
||
|
|
<div class="w-full h-full">
|
||
|
|
<img :src="movie" alt="" class="w-full h-full object-cover" />
|
||
|
|
</div>
|
||
|
|
</swiper-slide>
|
||
|
|
</swiper-container>
|
||
|
|
</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" />
|
||
|
|
<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/7m.png', '/images/cloudData/7m.png', '/images/cloudData/7m.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 lang="scss" scoped></style>
|