/* ................... 防抖函数 ................... */ function debounce(func, delay) { let timeout return function () { clearTimeout(timeout) // 如果持续触发，那么就清除定时器，定时器的回调就不会执行。 timeout = setTimeout(() => { func.apply(this, arguments) }, delay) } } var vm = new Vue({ el: "#app", data: { readManPer: "57%", tel: "", allNavList: { callcenter: [ { name: "首页", url: "/" }, { name: "呼叫中心", url: "/callcenter/" }, { name: "功能及价格", url: "/callcenterprice/" }, { name: "客户案例", url: "/wincase/" }, { name: "行业知识", url: "/innews/callcenter/" }, { name: "关于我们", url: "/aboutus/company/" } ], cloudcalcenter: [ { name: "首页", url: "/" }, { name: "云呼叫中心", url: "/callcenter/" }, { name: "功能及价格", url: "/callcenterprice/" }, { name: "客户案例", url: "/wincase/" }, { name: "行业知识", url: "/innews/cloudcalcenter/" }, { name: "关于我们", url: "/aboutus/company/" } ], call: [ { name: "首页", url: "/" }, { name: "电话呼叫中心", url: "/phone/" }, { name: "功能及价格", url: "/callcenterprice/" }, { name: "客户案例", url: "/wincase/" }, { name: "行业知识", url: "/innews/call/" }, { name: "关于我们", url: "/aboutus/company/" } ], customercall: [ { name: "首页", url: "/" }, { name: "客服呼叫中心", url: "/callcenter/" }, { name: "功能及价格", url: "/callcenterprice/" }, { name: "客户案例", url: "/wincase/" }, { name: "行业知识", url: "/innews/customercall/" }, { name: "关于我们", url: "/aboutus/company/" } ], outbound: [ { name: "首页", url: "/" }, { name: "外呼系统", url: "/phone/" }, { name: "功能及价格", url: "/callcenterprice/" }, { name: "客户案例", url: "/wincase/" }, { name: "行业知识", url: "/innews/outbound/" }, { name: "关于我们", url: "/aboutus/company/" } ], webchat: [ { name: "首页", url: "/" }, { name: "客服系统", url: "/webchat/" }, { name: "客服机器人", url: "/robot/" }, { name: "视频客服", url: "/ivvr/" }, { name: "行业知识", url: "/innews/webchat/" }, { name: "关于我们", url: "/aboutus/company/" } ], order: [ { name: "首页", url: "/" }, { name: "工单系统", url: "/order/" }, { name: "客户案例", url: "/wincase/" }, { name: "行业知识", url: "/innews/order/" }, { name: "关于我们", url: "/aboutus/company/" } ], scrm: [ { name: "首页", url: "/" }, { name: "SCRM系统", url: "/scrm/" }, { name: "客户案例", url: "/wincase/" }, { name: "行业知识", url: "/innews/scrm/" }, { name: "关于我们", url: "/aboutus/company/" } ], sale: [ { name: "首页", url: "/" }, { name: "销售跟进系统", url: "/salesplat/" }, { name: "客户案例", url: "/wincase/" }, { name: "行业知识", url: "/innews/sale/" }, { name: "关于我们", url: "/aboutus/company/" } ], ai: [ { name: "首页", url: "/" }, { name: "客服机器人", url: "/robot/" }, { name: "语音机器人", url: "/AIcall/" }, { name: "客户案例", url: "/wincase/" }, { name: "行业知识", url: "/innews/ai/" }, { name: "关于我们", url: "/aboutus/company/" } ] }, navList: [] }, mixins: [mixins], created() { this.navListShow() this.autoMenu() }, mounted() { this.showTopIcon() window.addEventListener("scroll", this.showTopIcon) this.showReadManPer(50, 100) if (screen.availWidth !== 1280 && window.devicePixelRatio !== 1.5) { new WOW().init(); }; }, methods: { showTopIcon() {//顶部导航css const self = this; if (/Mobile|Android|webOS|iPhone|iPad|Phone/i.test(navigator.userAgent) || screen.width <= 768) { if (!!document.documentElement.scrollTop && document.documentElement.scrollTop > 50) { self.headerCss = true self.mobileLogo = "logo1.png" } else { self.headerCss = true; self.mobileLogo = "logo1.png" } } else { self.headerCss = true; self.mobileLogo = "logo1.png" } }, showReadManPer(min, max) {//阅读人数百分比 this.readManPer = Math.floor(Math.random() * (max - min)) + min + "%"; }, articleApply() { //文章试用申请 if (this.tel) { sessionStorage.setItem("tel", this.tel) tool.setCookie("tel", this.tel, 1) } location.href = "/apply/" }, autoMenu: debounce(function () { var h2Tags = document.querySelectorAll('h2'); var tocContainer = document.querySelector('.toc'); // 生成目录 var tocList = document.createElement('ul'); for (var i = 0; i < h2Tags.length; i++) { var h2Tag = h2Tags[i]; var id = 'doc' + i; h2Tag.id = id; var tocItem = document.createElement('li'); var tocLink = document.createElement('a'); tocLink.href = '#' + id; tocLink.textContent = h2Tag.textContent; tocItem.appendChild(tocLink); tocList.appendChild(tocItem); } tocContainer.appendChild(tocList); // 监听目录节点点击事件 var tocLinks = tocContainer.querySelectorAll('a'); for (var i = 0; i < tocLinks.length; i++) { tocLinks[i].addEventListener('click', function (event) { event.preventDefault(); var targetId = this.getAttribute('href').substring(1); var targetElement = document.getElementById(targetId); var targetOffset = targetElement.offsetTop - 80; // 距离顶部 80px 的位置 // 执行滚动 scrollTo({ top: targetOffset, behavior: 'smooth' }); }); } // 监听滚动事件，实现目录节点的高亮 window.addEventListener('scroll', function () { var currentPosition = window.pageYOffset || document.documentElement.scrollTop; var highlightedIndex = -1; for (var i = 0; i < h2Tags.length; i++) { var h2Tag = h2Tags[i]; var rect = h2Tag.getBoundingClientRect(); if (rect.top <= 100) { highlightedIndex = i; } } // 移除所有目录节点的高亮样式 for (var i = 0; i < tocLinks.length; i++) { tocLinks[i].classList.remove('highlight'); } // 高亮显示当前区域对应的目录节点 if (highlightedIndex >= 0) { tocLinks[highlightedIndex].classList.add('highlight'); } }); }, 500), navListShow() { const self = this; const currentUrl = window.location.pathname; let navList = []; if (currentUrl.includes("/innews/callcenter/")) { navList = self.allNavList.callcenter; } else if (currentUrl.includes("/innews/cloudcalcenter/")) { navList = self.allNavList.cloudcalcenter; } else if (currentUrl.includes("/innews/call/")) { navList = self.allNavList.call; } else if (currentUrl.includes("/innews/customercall/")) { navList = self.allNavList.customercall; } else if (currentUrl.includes("/innews/outbound/")) { navList = self.allNavList.outbound; } else if (currentUrl.includes("/innews/webchat/")) { navList = self.allNavList.webchat; } else if (currentUrl.includes("/innews/order/")) { navList = self.allNavList.order; } else if (currentUrl.includes("/innews/scrm/")) { navList = self.allNavList.scrm; } else if (currentUrl.includes("/innews/sale/")) { navList = self.allNavList.sale; } else if (currentUrl.includes("/innews/ai/")) { navList = self.allNavList.ai; } self.navList = navList; } } })