yanghao 2 viikkoa sitten
vanhempi
commit
709f594f37
1 muutettua tiedostoa jossa 13 lisäystä ja 3 poistoa
  1. 13 3
      src/views/index.vue

+ 13 - 3
src/views/index.vue

@@ -12,9 +12,12 @@
               class="carousel-slide absolute inset-0 transition-opacity duration-500 ease-in-out"
               v-for="(slide, index) in slides"
               :key="index"
+              v-show="currentIndex === index"
               :class="{
                 'opacity-100': currentIndex === index,
                 'opacity-0': currentIndex !== index,
+                'z-10': currentIndex === index,
+                'z-0 pointer-events-none': currentIndex !== index,
               }"
             >
               <div class="hero-copy carousel-caption">
@@ -221,7 +224,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import * as authUtil from "@/utils/auth";
 import * as dd from "dingtalk-jsapi";
 import Header from "@components/home/header.vue";
@@ -391,6 +394,7 @@ const slides = ref([
 
 // 当前索引
 const currentIndex = ref(0);
+let slideTimer: ReturnType<typeof setInterval> | null = null;
 
 // 下一页
 const nextSlide = () => {
@@ -601,8 +605,14 @@ function dingTalkAutoLogin() {
 
 onMounted(() => {
   dingTalkAutoLogin();
-  const interval = setInterval(nextSlide, 5000);
-  return () => clearInterval(interval); // 清理定时器
+  slideTimer = setInterval(nextSlide, 5000);
+});
+
+onUnmounted(() => {
+  if (slideTimer) {
+    clearInterval(slideTimer);
+    slideTimer = null;
+  }
 });
 </script>