(function () {
"use strict";
var rootId = "product-app-1";
var container = document.querySelector(
'[data-html-code-id="' + rootId + '"]',
);
if (!container) {
return;
}
const obj = {
data() {
return {
isMob: false,
isOneShow: false,
isTwoShow: false,
isBigShow: false,
image: "",
perView: 3,
};
},
methods: {
// 平滑滚动至指定位置
moveTo(id) {
let current = $(id).offset().top;
$("body, html")
.stop()
.animate({
scrollTop: current - 100,
});
},
toggleClamp(id) {
if (id === 1) {
this.isOneShow = true;
}
if (id === 2) {
this.isTwoShow = true;
}
},
hideClamp(id) {
if (id === 1) {
this.isOneShow = false;
this.moveTo("#clampPic");
}
if (id === 2) {
this.isTwoShow = false;
this.moveTo("#clampPicTwo");
}
},
// 点击放大
showBigger(e) {
if (this.isMob) {
this.image = e.target.currentSrc;
this.isBigShow = true;
}
},
handleBigClose() {
this.isBigShow = false;
},
},
watch: {},
mounted() {
if (/Mobile|Android|iPhone|iPad/i.test(navigator.userAgent)) {
// 移动端配置
this.isMob = true;
this.perView = 1;
let tl_1 = gsap.timeline({
scrollTrigger: {
trigger: "#arrowWrap",
start: "top 50%",
toggleActions: "play none none reverse", // 滚动进入时播放,离开时反转(隐藏)
// markers: true,
},
defaults: {
duration: 3,
ease: "power1.out",
},
});
tl_1
.from("#arrowWrap", {
maskImage: "linear-gradient(to bottom, black 0%, transparent 15%)",
})
.to("#arrowWrap", {
maskImage: "linear-gradient(to bottom, black 100%,black 100%)",
});
} else {
this.isMob = false;
this.perView = 3;
let tl_1 = gsap.timeline({
scrollTrigger: {
trigger: "#arrowWrap",
start: "top 80%",
toggleActions: "play none none reverse", // 滚动进入时播放,离开时反转(隐藏)
// markers: true,
},
defaults: {
duration: 2,
ease: "power1.out",
},
});
tl_1
.from("#arrowWrap", {
maskImage: "linear-gradient(90deg, black 0%, transparent 15%)",
})
.to("#arrowWrap", {
maskImage: "linear-gradient(90deg, black 100%,black 100%)",
});
}
const aSwiper = new Swiper(".mr-product-xinyun .aSwiper", {
grabCursor: true,
loop: false,
speed: 1000,
spaceBetween: 20,
pagination: {
el: ".aPagination",
clickable: true,
},
// effect: "fade",
// fadeEffect: {
// crossFade: true,
// },
autoplay: {
delay: 5000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
slidesPerView: this.perView,
slidesPerGroup: this.perView,
autoHeight:true,
});
},
computed: {},
};
const app = Vue.createApp(obj);
app.mount("#mr-app");
})();