|
|
@@ -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>
|
|
|
|