Ver código fonte

大事件轮播

ctt_ywq
congzc 2 anos atrás
pai
commit
c571fe0c1e
1 arquivos alterados com 69 adições e 10 exclusões
  1. +69
    -10
      src/components/home/home.vue

+ 69
- 10
src/components/home/home.vue Ver arquivo

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


Carregando…
Cancelar
Salvar