319 lines
10 KiB
JavaScript
319 lines
10 KiB
JavaScript
function debounce(func, delay) {
|
||
let timeout
|
||
return function () {
|
||
clearTimeout(timeout) // 如果持续触发，那么就清除定时器，定时器的回调就不会执行。
|
||
timeout = setTimeout(() => {
|
||
func.apply(this, arguments)
|
||
}, delay)
|
||
}
|
||
}
|
||
var vm = new Vue({
|
||
el: "#app",
|
||
data: {
|
||
count: 1,
|
||
province: 1,
|
||
com: 1,
|
||
user: 1,
|
||
man: 1,
|
||
i: 2,
|
||
activeIndex: 2, //下面是轮播图相关
|
||
soluTabI: 1,
|
||
comSwiper: "",
|
||
comSwiperI: 1,
|
||
bottomLinkShow: true,
|
||
fixAgentFlag: false,
|
||
fixAgentShowFlag: true,
|
||
indexVideoShow: false,
|
||
headerImg: "logo1_white.png",
|
||
headerStockImg: "logo_stock_white.png",
|
||
},
|
||
created() {
|
||
if (location.href === "https://www.hollycrm.com/index.html") {
|
||
location.href = "https://www.hollycrm.com/"
|
||
}
|
||
if (website_device === "mobile" || screen.width <= 768) {
|
||
this.fixAgentFlag = true
|
||
}
|
||
},
|
||
mounted() {
|
||
this.addYear()
|
||
this.addProvince()
|
||
this.addCom()
|
||
this.addUser()
|
||
this.addMan()
|
||
this.$nextTick(() => {
|
||
this.allSwiper()
|
||
})
|
||
this.showFixAgent()
|
||
// window.addEventListener("scroll", this.showHeader)
|
||
},
|
||
mixins: [mixins],
|
||
methods: {
|
||
showHeader() {
|
||
if (/Mobile|Android|webOS|iPhone|iPad|Phone/i.test(navigator.userAgent) || screen.width <= 768) {
|
||
// 移动端
|
||
if (!!document.documentElement.scrollTop && document.documentElement.scrollTop > 50) {
|
||
$(".first").css("cssText", "color:#333 !important;");
|
||
document.querySelector('.nav-right').style.cssText = "color: #333 !important"
|
||
$(".logo img:first-child").attr("src", "/assets/images/logo1.png")
|
||
}
|
||
} else {
|
||
// PC端
|
||
if (!!document.documentElement.scrollTop && document.documentElement.scrollTop > 200) {
|
||
$(".first").css("cssText", "color:#333 !important;");
|
||
document.querySelector('.nav-right').style.cssText = "color: #333 !important"
|
||
$(".logo img:first-child").attr("src", "/assets/images/logo1.png")
|
||
}
|
||
}
|
||
var header = document.querySelector(".header")
|
||
header.addEventListener("mouseover", function () {
|
||
$(".first").css("cssText", "color:#333;");
|
||
document.querySelector('.nav-right').style.cssText = "color: #333"
|
||
$(".logo img:first-child").attr("src", "/assets/images/logo1.png")
|
||
})
|
||
},
|
||
addYear() {
|
||
let num = 0
|
||
var t = setInterval(() => {
|
||
num++
|
||
this.count = num
|
||
if (num == 20) clearInterval(t)
|
||
}, 40)
|
||
},
|
||
addProvince() {
|
||
let num = 0
|
||
var t = setInterval(() => {
|
||
num++
|
||
this.province = num
|
||
if (num >= 30) clearInterval(t)
|
||
}, 30)
|
||
},
|
||
addCom() {
|
||
let num = 0
|
||
var t = setInterval(() => {
|
||
num += 125
|
||
this.com = num
|
||
if (num == 10000) clearInterval(t)
|
||
}, 10)
|
||
},
|
||
addUser() {
|
||
let num = 0
|
||
var t = setInterval(() => {
|
||
num++
|
||
this.user = num
|
||
if (num == 14) clearInterval(t)
|
||
}, 90)
|
||
},
|
||
addMan() {
|
||
let num = 0
|
||
var t = setInterval(() => {
|
||
num += 125
|
||
this.man = num
|
||
if (num == 8000) clearInterval(t)
|
||
}, 10)
|
||
},
|
||
videoShow(e) {
|
||
e.preventDefault()
|
||
var video = document.getElementById("fix-video")
|
||
this.indexVideoShow = true
|
||
if (video.paused) {
|
||
video.play()
|
||
}
|
||
},
|
||
videoClose() {
|
||
this.indexVideoShow = false
|
||
var video = document.getElementById("fix-video")
|
||
if (video.play()) {
|
||
video.pause()
|
||
}
|
||
},
|
||
pageTo(e) {
|
||
//data-href 页面跳转方法
|
||
location.href = e.currentTarget.dataset.href
|
||
},
|
||
allSwiper() {
|
||
var _this = this
|
||
// var caseVideo = document.getElementById('case-video'); //获取，函数执行完成后local内存释放
|
||
// caseVideo.autoplay = true; // 自动播放
|
||
// caseVideo.loop = true; // 循环播放
|
||
// caseVideo.muted = true; // 关闭声音，如果为false,视频无法自动播放
|
||
// if (caseVideo.paused) { //判断是否处于暂停状态
|
||
// caseVideo.play(); //开启播放
|
||
// } else {
|
||
// caseVideo.pause(); //停止播放
|
||
// }
|
||
new Swiper(".swiper-banner", {
|
||
//banner轮播
|
||
// loop: true, // 循环模式选项
|
||
initialSlide: 0,
|
||
slidesPerView: "auto",
|
||
centeredSlides: true,
|
||
slidesOffsetBefore: 0,
|
||
slidesOffsetAfter: 0,
|
||
slideToClickedSlide: true,
|
||
observer: true,
|
||
observeParents: true,
|
||
// autoHeight: true,
|
||
autoplay: {
|
||
delay: 5000,
|
||
disableOnInteraction: false,
|
||
},
|
||
pagination: {
|
||
el: ".index-swiper-pagination",
|
||
clickable: true
|
||
},
|
||
on: {
|
||
slideChangeTransitionStart: function () {
|
||
_this.i = this.activeIndex + 1
|
||
// console.log("🚀 allSwiper this.activeIndex", this.activeIndex)
|
||
// if ((this.activeIndex == 0 || this.activeIndex == 4 || this.activeIndex == 5) && (document.documentElement.scrollTop >= 0 && document.documentElement.scrollTop < 200)) {
|
||
// $(".first").css("cssText", "color:#fff;");
|
||
// document.querySelector('.nav-right').style.cssText = "color: #fff;"
|
||
// $(".logo img:first-child").attr("src", "/assets/images/logo1_white.png")
|
||
// } else {
|
||
// $(".first").css("cssText", "color:#333 !important;");
|
||
// document.querySelector('.nav-right').style.cssText = "color: #333 !important"
|
||
// $(".logo img:first-child").attr("src", "/assets/images/logo1.png")
|
||
// }
|
||
// var header = document.querySelector(".header")
|
||
// header.addEventListener("mouseover", function () {
|
||
// $(".first").css("cssText", "color:#333;");
|
||
// document.querySelector('.nav-right').style.cssText = "color: #333"
|
||
// $(".logo img:first-child").attr("src", "/assets/images/logo1.png")
|
||
// })
|
||
// header.addEventListener("mouseout", function () {
|
||
// $(".first").css("cssText", "color:#fff;");
|
||
// document.querySelector('.nav-right').style.cssText = "color: #fff"
|
||
// $(".logo img:first-child").attr("src", "/assets/images/logo1_white.png")
|
||
// })
|
||
}
|
||
}
|
||
})
|
||
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"
|
||
}
|
||
})
|
||
if (screen.width <= 768) {
|
||
//名企证言轮播
|
||
var _this = this
|
||
var comSwiper = new Swiper(".com-swiper", {
|
||
initialSlide: 1, //初始化时slide的索引
|
||
// slidesPerView: 'auto',
|
||
slideToClickedSlide: true,
|
||
centeredSlides: true,
|
||
autoplay: {
|
||
delay: 3000,
|
||
disableOnInteraction: false
|
||
},
|
||
pagination: {
|
||
el: ".swiper-pagination",
|
||
clickable: true
|
||
}
|
||
})
|
||
_this.comSwiper = comSwiper
|
||
var comBgSwiper = new Swiper(".com-bg-swiper", {
|
||
controller: {
|
||
control: comSwiper //控制Swiper1
|
||
}
|
||
})
|
||
comSwiper.controller.control = comBgSwiper
|
||
comBgSwiper.controller.control = comSwiper
|
||
} else {
|
||
var _this = this
|
||
var comSwiper = new Swiper(".com-swiper", {
|
||
initialSlide: 1, //初始化时slide的索引
|
||
slidesPerView: "auto",
|
||
slideToClickedSlide: true,
|
||
centeredSlides: true,
|
||
autoplay: {
|
||
delay: 3000,
|
||
disableOnInteraction: false
|
||
},
|
||
pagination: {
|
||
el: ".swiper-pagination",
|
||
clickable: true
|
||
}
|
||
})
|
||
_this.comSwiper = comSwiper
|
||
var comBgSwiper = new Swiper(".com-bg-swiper", {
|
||
controller: {
|
||
control: comSwiper //控制Swiper1
|
||
}
|
||
})
|
||
comSwiper.controller.control = comBgSwiper
|
||
comBgSwiper.controller.control = comSwiper
|
||
}
|
||
new Swiper(".solu-mibile-box", {
|
||
initialSlide: 1, //初始化时slide的索引
|
||
slidesPerView: "auto",
|
||
slideToClickedSlide: true,
|
||
centeredSlides: true,
|
||
autoplay: {
|
||
delay: 3000,
|
||
disableOnInteraction: false
|
||
},
|
||
pagination: {
|
||
el: ".swiper-pagination",
|
||
clickable: true
|
||
}
|
||
})
|
||
},
|
||
showFixAgent: debounce(function () {
|
||
let _this = this
|
||
let scrollVal = 0 // 滚动的值
|
||
let scrollRelative = 0 // 对比时间的值
|
||
let timer = null
|
||
if (website_device === "mobile" || screen.width <= 768) {
|
||
setTimeout(() => {
|
||
_this.fixAgentFlag = false
|
||
}, 3000)
|
||
// setTimeout(() => {
|
||
// _this.fixAgentShowFlag = false;
|
||
// }, 20000);
|
||
document.onscroll = function () {
|
||
clearTimeout(timer) // 每次滚动前 清除一次
|
||
timer = setTimeout(function () {
|
||
scrollRelative = document.documentElement.scrollTop || document.body.scrollTop
|
||
if (scrollRelative == scrollVal) {
|
||
_this.fixAgentFlag = false
|
||
}
|
||
}, 1000)
|
||
scrollVal = document.documentElement.scrollTop || document.body.scrollTop
|
||
_this.fixAgentFlag = true
|
||
}
|
||
} else {
|
||
document.onscroll = function () {
|
||
clearTimeout(timer) // 每次滚动前 清除一次
|
||
timer = setTimeout(function () {
|
||
scrollRelative = document.documentElement.scrollTop || document.body.scrollTop
|
||
if (scrollRelative == scrollVal) {
|
||
_this.fixAgentFlag = false
|
||
}
|
||
}, 1500)
|
||
scrollVal = document.documentElement.scrollTop || document.body.scrollTop
|
||
_this.fixAgentFlag = true
|
||
}
|
||
}
|
||
}, 1000),
|
||
closeFixAgent() {
|
||
this.fixAgentShowFlag = false
|
||
}
|
||
}
|
||
})
|
||
if (screen.availWidth !== 1280 && window.devicePixelRatio !== 1.5) {
|
||
new WOW().init();
|
||
}
|