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