| @@ -254,18 +254,31 @@ | |||||
| <div class="timeBox"> | <div class="timeBox"> | ||||
| <div class="xian"></div> | <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="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="timeText">{{ item.title }}</div> | ||||
| <div class="ImgBox"> | <div class="ImgBox"> | ||||
| <!-- <img | |||||
| :src=" | |||||
| timeFlag == index | |||||
| ? require('../../assets/img/a.png') | |||||
| : require('../../assets/img/h.png') | |||||
| " | |||||
| alt | |||||
| /> --> | |||||
| <div class="circle"></div> | <div class="circle"></div> | ||||
| </div> | </div> | ||||
| <div class="ctn"> | <div class="ctn"> | ||||
| @@ -316,12 +329,16 @@ | |||||
| import 'swiper/dist/js/swiper'; | import 'swiper/dist/js/swiper'; | ||||
| import 'swiper/dist/css/swiper.css'; | import 'swiper/dist/css/swiper.css'; | ||||
| import Swiper from 'swiper'; | import Swiper from 'swiper'; | ||||
| // import { Swiper, SwiperSlide } from 'swiper'; | |||||
| import { mapState, mapActions } from 'vuex'; | import { mapState, mapActions } from 'vuex'; | ||||
| export default { | export default { | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| isPlayed: true, | isPlayed: true, | ||||
| // 轮播图效果 | |||||
| swiperIndex: 0, | |||||
| timer: null, | |||||
| //零时存放 | //零时存放 | ||||
| charactersMy: 1, | charactersMy: 1, | ||||
| languageLsit: [ | languageLsit: [ | ||||
| @@ -597,7 +614,29 @@ export default { | |||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| ...mapActions(['setCharacters']), | ...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) { | change(value) { | ||||
| console.log(value); | console.log(value); | ||||
| this.setCharacters(value); | this.setCharacters(value); | ||||
| @@ -698,6 +737,8 @@ export default { | |||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| // 在组件挂载后开始计时器 | |||||
| this.startTimer(); | |||||
| // console.log(); | // console.log(); | ||||
| new Swiper('.swiper-container', { | new Swiper('.swiper-container', { | ||||
| slidesPerView: 3, | slidesPerView: 3, | ||||
| @@ -732,6 +773,10 @@ export default { | |||||
| this.goView(goView); | this.goView(goView); | ||||
| }); | }); | ||||
| } | } | ||||
| }, | |||||
| beforeDestroy() { | |||||
| // 在组件销毁前清除计时器 | |||||
| this.stopTimer(); | |||||
| } | } | ||||
| }; | }; | ||||
| </script> | </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 { | .cooperationBox { | ||||
| margin-bottom: 30px; | margin-bottom: 30px; | ||||