From c571fe0c1ecc4ed23c9ca32a61cded2bc5b2faae Mon Sep 17 00:00:00 2001 From: congzc Date: Fri, 19 May 2023 10:41:58 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E4=BA=8B=E4=BB=B6=E8=BD=AE=E6=92=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/home.vue | 79 +++++++++++++++++++++++++++++++----- 1 file changed, 69 insertions(+), 10 deletions(-) diff --git a/src/components/home/home.vue b/src/components/home/home.vue index f5d74e5..e32172c 100644 --- a/src/components/home/home.vue +++ b/src/components/home/home.vue @@ -254,18 +254,31 @@
+
-
+
{{ item.title }}
-
@@ -316,12 +329,16 @@ import 'swiper/dist/js/swiper'; import 'swiper/dist/css/swiper.css'; import Swiper from 'swiper'; +// import { Swiper, SwiperSlide } from 'swiper'; import { mapState, mapActions } from 'vuex'; export default { data() { return { isPlayed: true, + // 轮播图效果 + swiperIndex: 0, + timer: null, //零时存放 charactersMy: 1, languageLsit: [ @@ -597,7 +614,29 @@ export default { }, methods: { ...mapActions(['setCharacters']), - + // 鼠标进入轮播图 + enterSwiper(index) { + this.stopTimer(); + this.swiperIndex = index; + }, + // 鼠标离开轮播图 + leaveSwiper() { + this.startTimer(); + }, + // 轮播图自增 + startTimer() { + let that = this; + that.timer = setInterval(() => { + that.swiperIndex++; // index 自增 1 + if (that.swiperIndex >= that.timeLsit.length) { + that.swiperIndex = 0; + } + }, 3000); // 每 3 秒执行一次 + }, + // 清除定时器 + stopTimer() { + clearInterval(this.timer); // 清除计时器 + }, change(value) { console.log(value); this.setCharacters(value); @@ -698,6 +737,8 @@ export default { }, mounted() { + // 在组件挂载后开始计时器 + this.startTimer(); // console.log(); new Swiper('.swiper-container', { slidesPerView: 3, @@ -732,6 +773,10 @@ export default { this.goView(goView); }); } + }, + beforeDestroy() { + // 在组件销毁前清除计时器 + this.stopTimer(); } }; @@ -1624,6 +1669,20 @@ export default { } } } + .hoverBox { + opacity: 0.65 !important; + transform: scale(1.1) !important; + .circle { + width: 23px !important; + height: 23px !important; + background: url('../../assets/img/a.png') !important; + background-size: cover !important; + background-repeat: no-repeat !important; + background-position: center !important; + background-position: center !important; + transform: scale(0.9) !important; + } + } } .cooperationBox { margin-bottom: 30px;