| @@ -254,18 +254,31 @@ | |||
| <div class="timeBox"> | |||
| <div class="xian"></div> | |||
| <!-- <swiper class="timeF" :slides-per-view="3" :space-between="50"> | |||
| <swiper-slide class="itemBox" v-for="(item, index) in timeLsit" :key="index" @click="timeFlag = index"> | |||
| <div class="timeText">{{ item.title }}</div> | |||
| <div class="ImgBox"> | |||
| <div class="circle"></div> | |||
| </div> | |||
| <div class="ctn"> | |||
| {{ characters == 1 ? item.ctn1 : item.ctn1_y }} | |||
| </div> | |||
| <div class="ctn"> | |||
| {{ characters == 1 ? item.ctn2 : item.ctn2_y }} | |||
| </div> | |||
| </swiper-slide> | |||
| </swiper> --> | |||
| <div class="timeF"> | |||
| <div class="itemBox" v-for="(item, index) in timeLsit" :key="index" @click="timeFlag = index"> | |||
| <div | |||
| class="itemBox" | |||
| @mouseenter="enterSwiper(index)" | |||
| @mouseleave="leaveSwiper" | |||
| :class="swiperIndex == index ? 'hoverBox' : ''" | |||
| v-for="(item, index) in timeLsit" | |||
| :key="index" | |||
| @click="timeFlag = index"> | |||
| <div class="timeText">{{ item.title }}</div> | |||
| <div class="ImgBox"> | |||
| <!-- <img | |||
| :src=" | |||
| timeFlag == index | |||
| ? require('../../assets/img/a.png') | |||
| : require('../../assets/img/h.png') | |||
| " | |||
| alt | |||
| /> --> | |||
| <div class="circle"></div> | |||
| </div> | |||
| <div class="ctn"> | |||
| @@ -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(); | |||
| } | |||
| }; | |||
| </script> | |||
| @@ -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; | |||