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;