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();
|
|||
|
|
}
|