import Swiper from 'swiper/bundle' import gsap from 'gsap' import Common from '../common/js/Common' import { isMobile } from '../common/js/utils' // const BASEURL = 'http://192.168.1.33:9100'; const BASEURL = 'http://localhost:3002/api'; const pageSize = 5; export default class App { constructor() { let common = new Common(document.querySelector('.main'),4) //导航菜单高亮,0是首页,后面的按顺序添加 this.isMobile = isMobile() let lazyDoms = document.querySelectorAll(".lazy"); let Time = null; let isMob=this.isMobile; lazyDoms.forEach((item) => { if (item.nodeName == "PICTURE") { item.children[0].setAttribute("srcset", item.children[0].dataset.srcset); item.children[1].setAttribute("src", item.children[1].dataset.src); } if (item.nodeName == "IMG") { if(isMob){item.setAttribute("src", item.dataset.srcm);} else{ item.setAttribute("src", item.dataset.src); } } if (item.nodeName == "VIDEO") { console.log(item, 'item---2') item.setAttribute("src", item.dataset.src); // item.load(); } }); bindDom(); banner() function banner() { let menuChange=true; let menuType = document.querySelector(".headCon"); menuType.classList.add("menuType"); let mySwiper = new Swiper('.bannerSwiper1', { autoplay: true,//可选选项,自动滑动 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.btn-nextB', prevEl: '.btn-prevB', }, on:{ slideChange: function(){ // if(menuChange){ // if(this.activeIndex==0){ // menuType.classList.add("menuType"); // }else{ // menuType.classList.remove("menuType"); // } // } }, }, }); let mySwiper2 = new Swiper('.bannerSwiper2', { autoplay: true,//可选选项,自动滑动 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.btn-nextB', prevEl: '.btn-prevB', }, on:{ slideChange: function(){ // if(menuChange){ // if(this.activeIndex==0){ // menuType.classList.add("menuType"); // }else{ // menuType.classList.remove("menuType"); // } // } }, }, }); // 获取滚动条位置并更新显示 function updateScrollInfo() { let scrollY = window.scrollY; if(scrollY>110){ if(menuChange){ menuChange=false; menuType.classList.remove("menuType"); } }else if(scrollY<110&&menuChange==false){ menuChange=true; if(mySwiper.activeIndex==0){ menuType.classList.add("menuType"); }else{ menuType.classList.remove("menuType"); } } } // 添加滚动事件监听器 window.addEventListener('scroll', updateScrollInfo); // 初始化显示 updateScrollInfo(); } function bindDom(){ const tabs_ul = document.querySelectorAll(".tabs_li"); tabs_ul.forEach((item,index)=>{ item.addEventListener('click',()=>{ tabs_ul.forEach((li) => { li.classList.remove('tabs_lis'); }); // 给当前点击的元素添加 tabs_lis 类名 item.classList.add('tabs_lis'); }) }) } function hotNews(){ const news_banner = document.querySelector('.news_banner'); const img = news_banner.querySelector('img') const cont1 = news_banner.querySelector('.cont1') const cont2 = news_banner.querySelector('.cont2') const cont3 = news_banner.querySelector('.cont3') fetch(BASEURL+'/system/news/top') .then(response => { if (!response.ok) { throw new Error('网络响应不是 OK'); } return response.json(); }) .then(response => { if (response.surfaceUrl) img.src = response.surfaceUrl cont1.textContent = response.title cont2.textContent = response.digest cont3.textContent = response.date news_banner.addEventListener('click',() => { window.open('/articleDetails.html?id='+response.uuid) }) }) .catch(error => { console.error('请求失败:', error); // 处理错误 }); } function pageTurningClickEvent (){ // 上一页 const previousPage = document.querySelector('#previousPage'); previousPage.addEventListener('click', function(event) { event.preventDefault() const currentPage = sessionStorage.getItem('news_currentPage'); if(currentPage && parseInt(currentPage) > 1){ initList(parseInt(currentPage) - 1) } }) //下一页 const nextPage = document.querySelector('#nextPage'); nextPage.addEventListener('click', function(event) { event.preventDefault() const currentPage = sessionStorage.getItem('news_currentPage'); const pageCount = Math.ceil(parseInt(sessionStorage.getItem('news_total')) / pageSize) if(currentPage && parseInt(currentPage) < pageCount){ initList(parseInt(currentPage) + 1) } }) } } }