144 lines
3.6 KiB
JavaScript
144 lines
3.6 KiB
JavaScript
var vm = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
tel: '',
|
|
i: 2,
|
|
tabI: 1,
|
|
tabClickI: 0,
|
|
activeIndex: 2,
|
|
solveSwiper: "",
|
|
teleManaI: 1,
|
|
sscManaI: 1,
|
|
},
|
|
mounted() {
|
|
if (screen.availWidth !== 1280 && window.devicePixelRatio !== 1.5) {
|
|
AOS.init({
|
|
disable: "mobile",
|
|
duration: 600,
|
|
delay: 50,
|
|
easing: 'ease-in-out'
|
|
})
|
|
} else {
|
|
AOS.init({
|
|
disable: true,
|
|
duration: 600,
|
|
delay: 50,
|
|
easing: 'ease-in-out'
|
|
})
|
|
}
|
|
var _this = this;
|
|
var solveSwiper = new Swiper('.tele-swiper-container', {
|
|
// loop: true, // 循环模式选项
|
|
initialSlide: 1,
|
|
slidesPerView: 'auto',
|
|
centeredSlides: true,
|
|
observer: true,
|
|
// spaceBetween: -50,
|
|
// slidesOffsetBefore: -50,
|
|
observeParents: true,
|
|
slideToClickedSlide: true,
|
|
autoplay: {
|
|
delay: 5000
|
|
},
|
|
// pagination: {
|
|
// el: '.swiper-pagination',
|
|
// clickable: true,
|
|
// },
|
|
on: {
|
|
slideChangeTransitionStart: function () {
|
|
_this.i = this.activeIndex + 1;
|
|
},
|
|
},
|
|
});
|
|
this.solveSwiper = solveSwiper;
|
|
var customSwiper = new Swiper('.tele-custom-swiper-wrap', {
|
|
// loop: true, // 循环模式选项
|
|
initialSlide: 0,
|
|
slidesPerView: 3,
|
|
centeredSlides: true,
|
|
slidesPerView: 'auto',
|
|
observer: true,
|
|
observeParents: true,
|
|
autoplay: {
|
|
delay: 5000
|
|
},
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
}
|
|
});
|
|
this.animateTab();
|
|
this.allSwiper()
|
|
},
|
|
mixins: [mixins],
|
|
methods: {
|
|
solveTab(i) {
|
|
this.i = i;
|
|
var j = i - 1;
|
|
this.solveSwiper.slideTo(j, 1000, false);
|
|
},
|
|
teleMana(i) {
|
|
this.teleManaI = i;
|
|
},
|
|
sscTab(i) {
|
|
this.sscManaI = i;
|
|
},
|
|
allSwiper() {//swiper
|
|
new Swiper('.use-wrap .swiper-container', {
|
|
watchSlidesProgress: true,
|
|
slidesPerView: 'auto',
|
|
centeredSlides: true,
|
|
loop: true,
|
|
loopedSlides: 3,
|
|
autoplay: true,
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
on: {
|
|
progress: function (progress) {
|
|
for (i = 0; i < this.slides.length; i++) {
|
|
var slide = this.slides.eq(i);
|
|
var slideProgress = this.slides[i].progress;
|
|
modify = 1;
|
|
if (Math.abs(slideProgress) > 1) {
|
|
modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
|
|
}
|
|
translate = slideProgress * modify * 450 + 'px';
|
|
scale = 1 - Math.abs(slideProgress) / 5;
|
|
zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
|
|
slide.transform('translateX(' + translate + ') scale(' + scale + ')');
|
|
slide.css('zIndex', zIndex);
|
|
slide.css('opacity', 1);
|
|
if (Math.abs(slideProgress) > 3) {
|
|
slide.css('opacity', 0);
|
|
}
|
|
}
|
|
},
|
|
setTransition: function (swiper, transition) {
|
|
for (var i = 0; i < this.slides.length; i++) {
|
|
var slide = this.slides.eq(i)
|
|
slide.transition(transition);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
})
|
|
},
|
|
tab(i) {
|
|
this.tabI = i;
|
|
this.tabClickI = i
|
|
clearInterval(this.timer);
|
|
},
|
|
animateTab(time = 3000) {
|
|
this.timer = setInterval(() => {
|
|
this.tabI++
|
|
if (this.tabI > 4) {
|
|
this.tabI = 1
|
|
}
|
|
}, time)
|
|
}
|
|
}
|
|
});
|