fix: 轮播图问题

components/SwiperSlider3D.vue

@@ -1,40 +1,37 @@
 <template>
+  <ClientOnly>
     <div class="carousel-container">
-    <swiper-container
-      :modules="[SwiperPagination, SwiperAutoplay, SwiperNavigation]"
-      :centered-slides="true"
-      :space-between="-1000"
-      :loop="false"
-      :slides-per-view="2.5"
-      :initial-slide="1"
-      @slideChange="onSlideChange"
-      :pagination="{
-        clickable: true,
-        dynamicBullets: true,
-      }"
-      :navigation="false"
-      :autoplay="{
-        delay: 25000,
-        disableOnInteraction: false,
-      }"
-      :grabCursor="true"
-      class="carousel"
-    >
+      <swiper-container ref="containerRef" :init="false">
         <slot></slot>
       </swiper-container>
     </div>
+  </ClientOnly>
 </template>
 
 <script setup>
-import { Pagination, Navigation, Autoplay } from 'swiper/modules'
-
-const SwiperPagination = Pagination
-const SwiperNavigation = Navigation
-const SwiperAutoplay = Autoplay
-
-function onSlideChange(swiper) {
-  console.log('swiper')
-}
+const containerRef = ref(null)
+useSwiper(containerRef, {
+  effect: 'coverflow',
+  grabCursor: true,
+  centeredSlides: true,
+  loop: true,
+  initialSlide: 2,
+  slidesPerView: 'auto',
+  coverflowEffect: {
+    rotate: 0,
+    stretch: 0,
+    depth: 100,
+    modifier: 2.5,
+  },
+  pagination: {
+    el: '.swiper-pagination',
+    clickable: true,
+  },
+  navigation: {
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
+})
 </script>
 
 <style scoped>
@@ -44,82 +41,4 @@ function onSlideChange(swiper) {
   overflow: hidden;
   height: 100%;
 }
-
-.carousel {
-  width: 100%;
-  height: 100%;
-}
-
-:deep(.swiper-slide) {
-  transition:
-    transform 0.6s,
-    opacity 0.6s;
-  opacity: 0.1;
-  transform: scale(0.8);
-  filter: blur(1px);
-  overflow: hidden;
-  transform-style: preserve-3d;
-  perspective: 1000px;
-}
-:deep(.swiper-slide-prev),
-:deep(.swiper-slide-next) {
-  opacity: 0.3;
-  filter: blur(12px);
-}
-
-:deep(.swiper-slide-active) {
-  opacity: 1;
-  transform: scale(1);
-  filter: blur(0);
-  z-index: 10;
-}
-
-.slide {
-  height: 100%;
-  background-color: #0f172a;
-  color: white;
-  overflow: hidden;
-  border-radius: 16px;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-}
-
-/* 自定义Swiper分页和导航按钮样式 */
-:deep(.swiper-pagination-bullet) {
-  background: white;
-  opacity: 0.5;
-}
-
-:deep(.swiper-pagination-bullet-active) {
-  background: #60a5fa;
-  opacity: 1;
-}
-:deep(.swiper-slide-active) div {
-  filter: brightness(0.7);
-}
-
-:deep(.swiper-slide-active) div {
-  transform: translateZ(30px);
-  transition: transform 0.3s ease;
-}
-:deep(.swiper-slide-next) {
-}
-:deep(.swiper-button-prev),
-:deep(.swiper-button-next) {
-  color: white;
-  background: rgba(0, 0, 0, 0.3);
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  transition: background 0.3s ease;
-}
-
-:deep(.swiper-button-prev:hover),
-:deep(.swiper-button-next:hover) {
-  background: rgba(0, 0, 0, 0.6);
-}
-
-:deep(.swiper-button-prev:after),
-:deep(.swiper-button-next:after) {
-  font-size: 1.5rem;
-}
 </style>

components/pageLayout/cloudData.vue

@@ -1,16 +1,21 @@
 <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">
+  <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="h-[580px] max-w-[1400px] 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">
+        <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" />
             </div>
           </swiper-slide>
         </MovieCarousel3D>
-        <swiper-container
+        <!-- <swiper-container
           ref="containerRef"
           class="size-full mx-auto hidden sm:block md:block"
           :autoplay="{ delay: 3000 }"
@@ -22,7 +27,7 @@
               <img :src="movie" alt="" class="w-full h-full object-cover" />
             </div>
           </swiper-slide>
-        </swiper-container>
+        </swiper-container> -->
       </ClientOnly>
     </div>
     <div