三个页面

src/pages/articleDetails/App.js

@@ -27,51 +27,51 @@ export default class App {
                 // item.load();
             }
         });
-        vx()
-        function vx(){
-            console.log('vx',wx)
-            wx.config({
-                debug: false, // 开启调试模式
-                appId: 'YOUR_APP_ID', // 公众号的唯一标识
-                timestamp: 176565448486313, // 生成签名的时间戳
-                nonceStr: 'NONCESTR', // 生成签名的随机串
-                signature: 'SIGNATURE', // 签名，见附录1
-                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 需要使用的 JS 接口列表
-            });
+
+        // vx()
+        // function vx(){
+        //     wx.config({
+        //         debug: false, // 开启调试模式
+        //         appId: 'YOUR_APP_ID', // 公众号的唯一标识
+        //         timestamp: 176565448486313, // 生成签名的时间戳
+        //         nonceStr: 'NONCESTR', // 生成签名的随机串
+        //         signature: 'SIGNATURE', // 签名，见附录1
+        //         jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 需要使用的 JS 接口列表
+        //     });
          
-            wx.ready(function () {
-                // 分享到朋友圈
-                wx.onMenuShareTimeline({
-                    title: '分享标题', // 分享标题
-                    link: 'https://example.com', // 分享链接
-                    imgUrl: 'https://example.com/image.jpg', // 分享图标
-                    success: function () {
-                        // 用户确认分享后执行的回调函数
-                    },
-                    cancel: function () {
-                        // 用户取消分享后执行的回调函数
-                    }
-                });
-                const shareWx = document.querySelector('.shareWx');
-                console.log(shareWx)
-                shareWx.addEventListener('click',function(){
-                    // 分享给朋友
-                    wx.onMenuShareAppMessage({
-                        title: '分享标题', // 分享标题
-                        desc: '分享描述', // 分享描述
-                        type: 'link', // 分享类型,music、video或link，不填默认为link
-                        success: function () {
-                            // 用户确认分享后执行的回调函数
+        //     wx.ready(function () {
+        //         // 分享到朋友圈
+        //         wx.onMenuShareTimeline({
+        //             title: '分享标题', // 分享标题
+        //             link: 'https://example.com', // 分享链接
+        //             imgUrl: 'https://example.com/image.jpg', // 分享图标
+        //             success: function () {
+        //                 // 用户确认分享后执行的回调函数
+        //             },
+        //             cancel: function () {
+        //                 // 用户取消分享后执行的回调函数
+        //             }
+        //         });
+        //         const shareWx = document.querySelector('.shareWx');
+        //         console.log(shareWx)
+        //         shareWx.addEventListener('click',function(){
+        //             // 分享给朋友
+        //             wx.onMenuShareAppMessage({
+        //                 title: '分享标题', // 分享标题
+        //                 desc: '分享描述', // 分享描述
+        //                 type: 'link', // 分享类型,music、video或link，不填默认为link
+        //                 success: function () {
+        //                     // 用户确认分享后执行的回调函数
                             
-                        },
-                        cancel: function () {
-                            // 用户取消分享后执行的回调函数
-                        }
-                    });
-                })
+        //                 },
+        //                 cancel: function () {
+        //                     // 用户取消分享后执行的回调函数
+        //                 }
+        //             });
+        //         })
                 
-            });
-        }
+        //     });
+        // }
     }
     
     

src/pages/articleDetails/index.html

@@ -9,7 +9,7 @@
     <meta name="Keywords" content="" />
     <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
     <link href="./static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
-    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
+
     <%= require('../common/tpl/headerLink.tpl') %>
 </head>
 
@@ -23,9 +23,9 @@
                         <div>来源：中泽集团</div>
                         <div>浏览次数：227</div>
                     </div>
-                    <div class="head_right">
-                        分享到：<img src="./static/images/vx.png" alt="" /></span>
-                    </div>
+                    <!-- <div id="shareWx" class="head_right">
+                        分享到：<div class="sharethis-inline-share-buttons"></div>
+                    </div> -->
                 </div>
                 <div class="detail_head2">
                     <div class="head_left">
@@ -34,9 +34,9 @@
                     </div>
                     <div class="head_right">
                         <div>浏览次数：227</div>
-                        <div class="shareWx">
-                            分享到：<img src="./static/images/vx.png" alt="" /></span>
-                        </div>
+                        <!-- <div id="shareWx" class="shareWx">
+                            分享到：<div class="sharethis-inline-share-buttons"></div>
+                        </div> -->
                     </div>
                 </div>
                 <div class="detail_title">

src/pages/enterprisePartyBuilding/App.js

@@ -0,0 +1,189 @@
+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)
+                }
+            })
+        }
+    }
+    
+
+   
+}

src/pages/enterprisePartyBuilding/index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="cn">
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title>党建工作</title>
+    <meta name="description" content="" />
+    <meta name="Keywords" content="" />
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
+    <link href="./static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
+    <%= require('../common/tpl/headerLink.tpl') %>
+</head>
+
+<body>
+    <%= require('../common/tpl/header.tpl') %>
+        <div class="main">
+            <div class="content content2">
+                <div class="news_title">企业党建</div>
+            </div>
+            <div class="tabs_box">
+                <div class="tabs_li tabs_lis">全部<span>·</span>30</div>
+                <div class="tabs_li">党建活动<span>·</span>12</div>
+                <div class="tabs_li">党建会议<span>·</span>5</div>
+                <div class="tabs_li">党建表彰<span>·</span>10</div>
+            </div>
+            <div class="article_list">
+                <a class="article_li">
+                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
+                    <div class="txt2">2024-12-13</div>
+                </a>
+                <a class="article_li">
+                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
+                    <div class="txt2">2024-12-13</div>
+                </a>
+                <a class="article_li">
+                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
+                    <div class="txt2">2024-12-13</div>
+                </a>
+                <a class="article_li">
+                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
+                    <div class="txt2">2024-12-13</div>
+                </a>
+                <a class="article_li">
+                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
+                    <div class="txt2">2024-12-13</div>
+                </a>
+                <a class="article_li">
+                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
+                    <div class="txt2">2024-12-13</div>
+                </a>
+                <a class="article_li">
+                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
+                    <div class="txt2">2024-12-13</div>
+                </a>
+            </div> 
+            <div class="news_paging">
+                <!-- 锚点：#tab -->
+                <a id="previousPage" class="previousPage">
+                   <span class="icon iconfont icon-jiantou"></span>
+                </a>
+                <div id="paging" style="display: flex;align-items: center;">
+                    <a class="pageNum">1</a>
+                    <a class="pageNum">2</a>
+                    <a class="pageNum">3</a>
+                    <a class="pageNum pageNums">...</a>
+                </div>
+                <a id="nextPage" class="nextPage">
+                    <span class="icon iconfont icon-jiantou"></span>
+                </a>
+            </div>
+            <div class="study_box">
+                <div class="study_head">
+                    <div class="txt">学习文件</div>
+                    <a href="">查看学习文件</a>
+                </div>
+                <div class="wow domInUp banner">
+                    <div class="swiper bannerSwiper bannerSwiper2">
+                      <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                          <img
+                            class="lazy"
+                            data-src="./static/images/index/banner1.jpg"
+                            data-srcM="./static/images/index/banner1.jpg"
+                            alt=""
+                          />
+                        </div>
+                      </div>
+                      <!-- 如果需要分页器 -->
+                      <div class="swiper-pagination"></div>
+                      
+                      <!-- 如果需要导航按钮 -->
+                      <div class="btn-prev btn-prevB"><span class="icon iconfont icon-jiantou"></span></div>
+                      <div class="btn-next btn-nextB"><span class="icon iconfont icon-jiantou"></span></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <%= require('../common/tpl/footer.tpl') %>
+            <%= require('../common/tpl/bottomBar.tpl') %>
+</body>
+
+</html>

src/pages/enterprisePartyBuilding/index.js

@@ -0,0 +1,15 @@
+import "./../common/css/common.less";
+import "./index.less";
+import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
+import App from './App.js';
+
+// swiper的css目前环境解析不出来，放static下，不走webpack 
+//import 'swiper/swiper-bundle.css';
+
+vhCheck();
+//禁止浏览器刷新后回到上一个页面滚动位置
+if ('scrollRestoration' in history) {
+    history.scrollRestoration = 'manual';
+}
+
+new App();

src/pages/enterprisePartyBuilding/index.less

@@ -0,0 +1,553 @@
+// pc端：
+// 设计稿1440*900 所有尺寸基本按px来即可;
+// 正文 16px;
+
+
+// 移动端：
+// 设计稿宽800px，按逻辑尺寸的两倍制作。因此真实尺寸需要除2；
+// 如设计稿字体大小28px,则实真字体大小为28px/2=14px;
+// 或使用vw 字体大小：28/800*10 = 3.5vw 
+// 正文 14px 或 3.5vw
+
+//pc端样式
+.main {
+    width: 100%;
+    max-width: 1920px;
+    margin: 0 auto;
+    padding-top: 70px;
+    .content{
+        width: 1500px;
+        margin: 0 auto;
+        .news_title{
+            text-align: center;
+            padding-top: 120px;
+            margin-bottom: 80px;
+            font-weight: bold;
+            font-size: 40px;
+            font-family: Microsoft YaHei;
+            color: #333333;
+        }
+       
+    }
+    .banner{
+        width: 100%;
+        height: 100vh;
+        .bannerSwiper{
+          width: 100%;
+          height: 100%;
+          img{
+            width: 100%;
+              height: 100%;
+              object-fit: cover;
+          }
+          .btn-prev,.btn-next{
+            position: absolute;
+            top: 50%;
+            margin-top: -22px;
+            width: 44px;
+            height: 44px;
+            border: 1px solid #000000;
+            z-index: 2;
+            text-align: center;
+            color: #000000;
+            background: transparent;
+            transition: all .3s ease-in-out;
+            cursor: pointer;
+            span{
+              font-size: 36px;
+              display: inline-block;
+              transform: rotate(90deg);
+              line-height: 44px;
+    
+            }
+            &:hover{
+              background: #48a038;
+              border-color: #48a038;
+              color: #fff;
+            }
+          }
+          .btn-prev{
+            left: 100px;
+            transform: rotate(-180deg);
+          }
+          .btn-next{
+            right: 100px;
+          }
+          .swiper-button-disabled{
+            cursor: no-drop;
+            background: transparent;
+            color: #979292;
+            border-color: #979292;
+            &:hover{
+              background: transparent;
+              border-color: #979292;
+              color: #979292;
+            }
+          }
+          .swiper-pagination{
+            bottom: 40px;
+            display: none;
+            .swiper-pagination-bullet{
+              background: #ffffff;
+              opacity:1;
+              position: relative;
+              width: 6px;
+              height: 6px;
+              margin:0 6px;
+              &::before{
+                content: '';
+                position: absolute;
+                left: -3px;
+                top: -3px;
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                border: 1px solid #ffffff;
+                opacity: 0;
+                transition: all .3s ease-in-out;
+              }
+            }
+            .swiper-pagination-bullet-active{
+              &::before{
+                opacity: 1;
+              }
+            }
+          }
+        }
+
+    }
+
+    .tabs_box{
+        width: 1300px;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        font-family: Source Han Sans CN;
+        font-size: 16px;
+        color: #000000;
+        margin-bottom: 60px;
+        .tabs_li{
+            border: 1px solid #000000;
+            padding: 10px 30px;
+            margin-right: 20px;
+            cursor: pointer;
+            transition: all .2s;
+            span{
+                display: inline-block;
+                margin: 0 10px;
+                font-weight: bold;
+            }
+        }
+        .tabs_lis{
+            background: #B81C25;
+            border: 1px solid #B81C25;
+            color: #fff;
+        }
+    }
+    .article_list{
+        width: 1300px;
+        margin: 0 auto;
+        display: flex;
+        flex-wrap: wrap;
+        .article_li{
+            width: 406px;
+            margin-bottom: 62px;
+            padding-bottom: 62px;
+            padding-right: 41px;
+            border-bottom: 1px solid #DDE2E6;
+
+            &:nth-of-type(3n){
+                padding-right: 0;
+            }
+            &:nth-of-type(7){
+                border: 0;
+                margin: 0;
+            }
+            &:nth-of-type(8){
+                border: 0;
+                margin: 0;
+            }
+            &:nth-of-type(9){
+                border: 0;
+                margin: 0;
+            }
+            img{
+                width: 100%;
+                height: 305px;
+                object-fit: cover;
+                margin-bottom: 20px;
+            }
+            .txt1{
+                font-size: 20px;
+                color: #000000;
+                display: -webkit-box;        /* 使用 Flexbox 布局 */
+                -webkit-box-orient: vertical; /* 垂直方向排列 */
+                -webkit-line-clamp: 2;      /* 限制显示的行数，这里是3行 */
+                overflow: hidden;            /* 隐藏超出部分 */
+                text-overflow: ellipsis;
+                line-height: 30px;
+                margin-bottom: 20px;
+            }
+            .txt2{
+                font-size: 14px;
+                color: #666666;
+            }
+        }
+    }
+    .news_paging{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 100px 0 120p x;
+        .previousPage{
+            width: 40px;
+            height: 40px;
+            color: #B81C25;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid #B81C25;
+            margin-right: 20px;
+            cursor: pointer;
+            transition: all 0.2s;
+            span{
+                font-size: 26px;
+                transform: rotate(-90deg);
+            }
+            &:hover{
+                background: #B81C25;
+                border: 1px solid #B81C25;
+                color: #fff;
+            }
+        }
+        .nextPage{
+            width: 40px;
+            height: 40px;
+            color: #B81C25;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid #B81C25;
+            margin-left: 20px;
+            cursor: pointer;
+            transition: all 0.2s;
+            span{
+                font-size: 26px;
+                transform: rotate(90deg);
+            }
+            &:hover{
+                background: #B81C25;
+                border: 1px solid #B81C25;
+                color: #fff;
+            }
+        }
+        .pageNum{
+            min-width: 40px;
+            height: 40px;
+            line-height: 40px;
+            font-family: Source Han Sans CN;
+            font-size: 18px;
+            color: #000;
+            transition: all 0.2s;
+            padding: 0 5px;
+            box-sizing: border-box;
+            cursor: pointer;
+            text-align: center;
+            border: 1px solid #DDE2E6;
+            border-radius: 2px;
+            &:hover{
+                background: #B81C25;
+                border: 1px solid #B81C25;
+                color: #fff;
+            }
+        }
+        .pageNums{
+            pointer-events: none;
+        }
+        .pageNum+.pageNum{
+            margin-left: 10px;
+        }
+        .pageNumActive{
+            color: #041954;
+        }
+        .ellipsis{
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 22px;
+            padding: 10px 15px;
+            color: #333333;
+            // cursor: pointer;
+            transition: all 0.2s;
+            // &:hover{
+            //     color:#48A038
+            // }
+        }
+    }
+    .study_box{
+        width: 100%;
+        background-color: #F6F6F6;
+        padding-top: 122px;
+        padding-bottom: 130px;
+
+        .study_head{
+            width: 1498px;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 81px;
+            .txt{
+                font-weight: bold;
+                font-size: 48px;
+                color: #231F20;
+                margin-left: 100px;
+            }
+            a{
+                width: 200px;
+                height: 45px;
+                background: #B81C25;
+                border-radius: 8px;
+                font-size: 14px;
+                color: #FFFFFF;
+                text-align: center;
+                line-height: 45px;
+                margin-right: 100px;
+            }
+        }
+        .bannerSwiper2{
+            width: 1498px;
+            margin: 0 auto;
+        }
+    }
+}
+a{
+    display: inline-block;
+}
+
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    .main{
+        
+    }
+}
+
+//移动端样式
+@media screen and (max-width:800px) {
+   
+    .main {
+        width: 100%;
+        padding-top: 3.5vw;
+        .content{
+            width: 92.125vw;
+            margin: 0 auto;
+            .news_title{
+                display: block;
+                margin-bottom: 10.75vw;
+                font-size: 6.375vw;
+                text-align: center;
+            }
+        }
+        .content2{
+            padding-top: 17.5vw;
+            .news_title{
+                font-size: 4.75vw;
+                padding-top: 0;
+            }
+        }
+        .banner{
+            width: 100%;
+            height: auto;
+            .bannerSwiper{
+              width: 100%;
+              height: 100%;
+              img{
+                    width: 100%;
+                    height: 46.75vw;
+                    object-fit: cover;
+              }
+              .btn-prev,.btn-next{
+                position: absolute;
+                top: 50%;
+                margin-top: -22px;
+                width: 44px;
+                height: 44px;
+                border: 1px solid #000000;
+                z-index: 2;
+                text-align: center;
+                color: #000000;
+                background: transparent;
+                transition: all .3s ease-in-out;
+                cursor: pointer;
+                span{
+                  font-size: 36px;
+                  display: inline-block;
+                  transform: rotate(90deg);
+                  line-height: 44px;
+        
+                }
+                &:hover{
+                  background: #48a038;
+                  border-color: #48a038;
+                  color: #fff;
+                }
+              }
+              .btn-prev{
+                left: 100px;
+                transform: rotate(-180deg);
+              }
+              .btn-next{
+                right: 100px;
+              }
+              .swiper-button-disabled{
+                cursor: no-drop;
+                background: transparent;
+                color: #979292;
+                border-color: #979292;
+                &:hover{
+                  background: transparent;
+                  border-color: #979292;
+                  color: #979292;
+                }
+              }
+              .swiper-pagination{
+                bottom: 40px;
+                display: none;
+                .swiper-pagination-bullet{
+                  background: #ffffff;
+                  opacity:1;
+                  position: relative;
+                  width: 6px;
+                  height: 6px;
+                  margin:0 6px;
+                  &::before{
+                    content: '';
+                    position: absolute;
+                    left: -3px;
+                    top: -3px;
+                    width: 10px;
+                    height: 10px;
+                    border-radius: 50%;
+                    border: 1px solid #ffffff;
+                    opacity: 0;
+                    transition: all .3s ease-in-out;
+                  }
+                }
+                .swiper-pagination-bullet-active{
+                  &::before{
+                    opacity: 1;
+                  }
+                }
+              }
+            }
+    
+        }
+    
+        .tabs_box{
+            width: 92.125vw;
+            flex-wrap: wrap;
+            margin-bottom: 10.625vw;
+            font-size: 3.75vw;
+            .tabs_li{
+                padding: 1.875vw 3.75vw;
+                margin-right: 3vw;
+                margin-bottom: 4vw;
+                span{
+                    display: inline-block;
+                    margin: 0 3px 0 8px;
+                    font-weight: bold;
+                }
+                &:nth-of-type(3n){
+                    margin-right: 0;
+                }
+            }
+            .tabs_lis{
+                background: #B81C25;
+                border: 1px solid #B81C25;
+                color: #fff;
+            }
+        }
+        .article_list{
+            width: 92.125vw;
+            margin: 0 auto;
+            .article_li{
+                width: 100%;
+                margin-bottom: 10.5vw;
+                padding-bottom: 10.5vw;
+                padding-right: 0;
+                border-bottom: 1px solid #DDE2E6;
+    
+              
+                &:nth-of-type(7){
+                   border-bottom: 1px solid #DDE2E6;
+                }
+                &:nth-of-type(8){
+                   border-bottom: 1px solid #DDE2E6;
+                }
+                &:nth-of-type(9){
+                   border-bottom: 1px solid #DDE2E6;
+                }
+                &:last-child{
+                    border: 0;
+                }
+                img{
+                    height: 69.125vw;
+                    margin-bottom: 5.125vw;
+                }
+                .txt1{
+                    font-size: 3.75vw;
+                }
+            }
+        }
+        .news_paging{
+            padding-top: 16vw;
+            .previousPage{
+                width: 40px;
+                height: 40px;
+                margin-right: 20px;
+                box-sizing: border-box;
+            }
+            .nextPage{
+                width: 40px;
+                height: 40px;
+                margin-left: 3.25vw;
+                transition: all 0.2s;
+                box-sizing: border-box;
+            }
+            .pageNum{
+                font-size: 3.5vw;
+            }
+            .ellipsis{
+                font-size: 3.5vw;
+                padding: 1.875vw 2.5vw;
+                // &:hover{
+                //     color:#48A038
+                // }
+            }
+        }
+        .study_box{
+            padding-top: 13.75vw;
+            padding-bottom: 35.875vw;
+            position: relative;
+
+            .study_head{
+                width: 92.125vw;
+                margin-bottom: 10.5vw;
+                .txt{
+                    width: 100%;
+                    font-size: 4.75vw;
+                    margin-left: 0;
+                    text-align: center;
+                }
+                a{
+                    position: absolute;
+                    bottom:15vw;
+                    left: 50%;
+                    margin-left: -25%;
+                }
+            }
+            .bannerSwiper2{
+                width: 92.125vw;
+                margin: 0 auto;
+            }
+        }
+    }
+}

src/pages/index/index.html

@@ -111,7 +111,7 @@
           <div class="masterDiv">
             <div class="swiper masterSwiper3">
               <div class="swiper-wrapper">
-                <div class="swiper-slide">
+                <div class="swiper-slide"> 
                   <img class="lazy" data-src="./static/images/index/car1.png" data-srcM="./static/images/index/car1.png" alt="" />
                 </div>
                 <!-- 多个直接复制添加swiper-slide -->

src/pages/partyBuilding/App.js

@@ -12,8 +12,111 @@ 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() {
         
-        // bindDom();
+            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");

src/pages/partyBuilding/index.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <title>新闻资讯</title>
+    <title>党建工作</title>
     <meta name="description" content="" />
     <meta name="Keywords" content="" />
     <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
@@ -16,9 +16,74 @@
     <%= require('../common/tpl/header.tpl') %>
         <div class="main">
             <div class="content">
-                <div class="news_title">新闻中心</div>
+                <div class="news_title">党建工作</div>
             </div>
-
+            <div class="wow domInUp banner">
+                <div class="swiper bannerSwiper bannerSwiper1">
+                  <div class="swiper-wrapper">
+                    <div class="swiper-slide">
+                      <img
+                        class="lazy"
+                        data-src="./static/images/index/banner1.jpg"
+                        data-srcM="./static/images/index/banner1.jpg"
+                        alt=""
+                      />
+                    </div>
+                  </div>
+                  <!-- 如果需要分页器 -->
+                  <div class="swiper-pagination"></div>
+                  
+                  <!-- 如果需要导航按钮 -->
+                  <div class="btn-prev btn-prevB"><span class="icon iconfont icon-jiantou"></span></div>
+                  <div class="btn-next btn-nextB"><span class="icon iconfont icon-jiantou"></span></div>
+                </div>
+            </div>
+            <div class="content content2">
+                <div class="news_title">企业党建</div>
+            </div>
+            <div class="tabs_box">
+                <div class="tabs_li tabs_lis">全部<span>·</span>30</div>
+                <div class="tabs_li">党建活动<span>·</span>12</div>
+                <div class="tabs_li">党建会议<span>·</span>5</div>
+                <div class="tabs_li">党建表彰<span>·</span>10</div>
+            </div>
+            <div class="article_list">
+                <a class="article_li">
+                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
+                    <div class="txt2">2024-12-13</div>
+                </a>
+                <a class="article_li">
+                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
+                    <div class="txt2">2024-12-13</div>
+                </a>
+                <a class="article_li">
+                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
+                    <div class="txt2">2024-12-13</div>
+                </a>
+                <a class="article_li">
+                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
+                    <div class="txt2">2024-12-13</div>
+                </a>
+                <a class="article_li">
+                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
+                    <div class="txt2">2024-12-13</div>
+                </a>
+                <a class="article_li">
+                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
+                    <div class="txt2">2024-12-13</div>
+                </a>
+                <a class="article_li">
+                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
+                    <div class="txt2">2024-12-13</div>
+                </a>
+            </div> 
             <div class="news_paging">
                 <!-- 锚点：#tab -->
                 <a id="previousPage" class="previousPage">
@@ -34,6 +99,32 @@
                     <span class="icon iconfont icon-jiantou"></span>
                 </a>
             </div>
+            <div class="study_box">
+                <div class="study_head">
+                    <div class="txt">学习文件</div>
+                    <a href="">查看学习文件</a>
+                </div>
+                <div class="wow domInUp banner">
+                    <div class="swiper bannerSwiper bannerSwiper2">
+                      <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                          <img
+                            class="lazy"
+                            data-src="./static/images/index/banner1.jpg"
+                            data-srcM="./static/images/index/banner1.jpg"
+                            alt=""
+                          />
+                        </div>
+                      </div>
+                      <!-- 如果需要分页器 -->
+                      <div class="swiper-pagination"></div>
+                      
+                      <!-- 如果需要导航按钮 -->
+                      <div class="btn-prev btn-prevB"><span class="icon iconfont icon-jiantou"></span></div>
+                      <div class="btn-next btn-nextB"><span class="icon iconfont icon-jiantou"></span></div>
+                    </div>
+                </div>
+            </div>
         </div>
         <%= require('../common/tpl/footer.tpl') %>
             <%= require('../common/tpl/bottomBar.tpl') %>

src/pages/partyBuilding/index.less

@@ -20,29 +20,193 @@
         margin: 0 auto;
         .news_title{
             text-align: center;
-            padding-top: 143px;
+            padding-top: 120px;
             margin-bottom: 80px;
             font-weight: bold;
             font-size: 40px;
             font-family: Microsoft YaHei;
             color: #333333;
         }
+       
+    }
+    .banner{
+        width: 100%;
+        height: 100vh;
+        .bannerSwiper{
+          width: 100%;
+          height: 100%;
+          img{
+            width: 100%;
+              height: 100%;
+              object-fit: cover;
+          }
+          .btn-prev,.btn-next{
+            position: absolute;
+            top: 50%;
+            margin-top: -22px;
+            width: 44px;
+            height: 44px;
+            border: 1px solid #000000;
+            z-index: 2;
+            text-align: center;
+            color: #000000;
+            background: transparent;
+            transition: all .3s ease-in-out;
+            cursor: pointer;
+            span{
+              font-size: 36px;
+              display: inline-block;
+              transform: rotate(90deg);
+              line-height: 44px;
+    
+            }
+            &:hover{
+              background: #48a038;
+              border-color: #48a038;
+              color: #fff;
+            }
+          }
+          .btn-prev{
+            left: 100px;
+            transform: rotate(-180deg);
+          }
+          .btn-next{
+            right: 100px;
+          }
+          .swiper-button-disabled{
+            cursor: no-drop;
+            background: transparent;
+            color: #979292;
+            border-color: #979292;
+            &:hover{
+              background: transparent;
+              border-color: #979292;
+              color: #979292;
+            }
+          }
+          .swiper-pagination{
+            bottom: 40px;
+            display: none;
+            .swiper-pagination-bullet{
+              background: #ffffff;
+              opacity:1;
+              position: relative;
+              width: 6px;
+              height: 6px;
+              margin:0 6px;
+              &::before{
+                content: '';
+                position: absolute;
+                left: -3px;
+                top: -3px;
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                border: 1px solid #ffffff;
+                opacity: 0;
+                transition: all .3s ease-in-out;
+              }
+            }
+            .swiper-pagination-bullet-active{
+              &::before{
+                opacity: 1;
+              }
+            }
+          }
+        }
+
     }
 
+    .tabs_box{
+        width: 1300px;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        font-family: Source Han Sans CN;
+        font-size: 16px;
+        color: #000000;
+        margin-bottom: 60px;
+        .tabs_li{
+            border: 1px solid #000000;
+            padding: 10px 30px;
+            margin-right: 20px;
+            cursor: pointer;
+            transition: all .2s;
+            span{
+                display: inline-block;
+                margin: 0 10px;
+                font-weight: bold;
+            }
+        }
+        .tabs_lis{
+            background: #B81C25;
+            border: 1px solid #B81C25;
+            color: #fff;
+        }
+    }
+    .article_list{
+        width: 1300px;
+        margin: 0 auto;
+        display: flex;
+        flex-wrap: wrap;
+        .article_li{
+            width: 406px;
+            margin-bottom: 62px;
+            padding-bottom: 62px;
+            padding-right: 41px;
+            border-bottom: 1px solid #DDE2E6;
+
+            &:nth-of-type(3n){
+                padding-right: 0;
+            }
+            &:nth-of-type(7){
+                border: 0;
+                margin: 0;
+            }
+            &:nth-of-type(8){
+                border: 0;
+                margin: 0;
+            }
+            &:nth-of-type(9){
+                border: 0;
+                margin: 0;
+            }
+            img{
+                width: 100%;
+                height: 305px;
+                object-fit: cover;
+                margin-bottom: 20px;
+            }
+            .txt1{
+                font-size: 20px;
+                color: #000000;
+                display: -webkit-box;        /* 使用 Flexbox 布局 */
+                -webkit-box-orient: vertical; /* 垂直方向排列 */
+                -webkit-line-clamp: 2;      /* 限制显示的行数，这里是3行 */
+                overflow: hidden;            /* 隐藏超出部分 */
+                text-overflow: ellipsis;
+                line-height: 30px;
+                margin-bottom: 20px;
+            }
+            .txt2{
+                font-size: 14px;
+                color: #666666;
+            }
+        }
+    }
     .news_paging{
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 100px 0 120px;
-        background: #F6F6F6;
+        padding: 100px 0 120p x;
         .previousPage{
             width: 40px;
             height: 40px;
-            color: #041954;
+            color: #B81C25;
             display: flex;
             align-items: center;
             justify-content: center;
-            border: 1px solid #041954;
+            border: 1px solid #B81C25;
             margin-right: 20px;
             cursor: pointer;
             transition: all 0.2s;
@@ -59,11 +223,11 @@
         .nextPage{
             width: 40px;
             height: 40px;
-            color: #041954;
+            color: #B81C25;
             display: flex;
             align-items: center;
             justify-content: center;
-            border: 1px solid #041954;
+            border: 1px solid #B81C25;
             margin-left: 20px;
             cursor: pointer;
             transition: all 0.2s;
@@ -119,6 +283,42 @@
             // }
         }
     }
+    .study_box{
+        width: 100%;
+        background-color: #F6F6F6;
+        padding-top: 122px;
+        padding-bottom: 130px;
+
+        .study_head{
+            width: 1498px;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 81px;
+            .txt{
+                font-weight: bold;
+                font-size: 48px;
+                color: #231F20;
+                margin-left: 100px;
+            }
+            a{
+                width: 200px;
+                height: 45px;
+                background: #B81C25;
+                border-radius: 8px;
+                font-size: 14px;
+                color: #FFFFFF;
+                text-align: center;
+                line-height: 45px;
+                margin-right: 100px;
+            }
+        }
+        .bannerSwiper2{
+            width: 1498px;
+            margin: 0 auto;
+        }
+    }
 }
 a{
     display: inline-block;
@@ -137,7 +337,7 @@ a{
         width: 100%;
         padding-top: 3.5vw;
         .content{
-            width: 92vw;
+            width: 92.125vw;
             margin: 0 auto;
             .news_title{
                 display: block;
@@ -146,7 +346,157 @@ a{
                 text-align: center;
             }
         }
+        .content2{
+            padding-top: 17.5vw;
+            .news_title{
+                font-size: 4.75vw;
+                padding-top: 0;
+            }
+        }
+        .banner{
+            width: 100%;
+            height: auto;
+            .bannerSwiper{
+              width: 100%;
+              height: 100%;
+              img{
+                    width: 100%;
+                    height: 46.75vw;
+                    object-fit: cover;
+              }
+              .btn-prev,.btn-next{
+                position: absolute;
+                top: 50%;
+                margin-top: -22px;
+                width: 44px;
+                height: 44px;
+                border: 1px solid #000000;
+                z-index: 2;
+                text-align: center;
+                color: #000000;
+                background: transparent;
+                transition: all .3s ease-in-out;
+                cursor: pointer;
+                span{
+                  font-size: 36px;
+                  display: inline-block;
+                  transform: rotate(90deg);
+                  line-height: 44px;
         
+                }
+                &:hover{
+                  background: #48a038;
+                  border-color: #48a038;
+                  color: #fff;
+                }
+              }
+              .btn-prev{
+                left: 100px;
+                transform: rotate(-180deg);
+              }
+              .btn-next{
+                right: 100px;
+              }
+              .swiper-button-disabled{
+                cursor: no-drop;
+                background: transparent;
+                color: #979292;
+                border-color: #979292;
+                &:hover{
+                  background: transparent;
+                  border-color: #979292;
+                  color: #979292;
+                }
+              }
+              .swiper-pagination{
+                bottom: 40px;
+                display: none;
+                .swiper-pagination-bullet{
+                  background: #ffffff;
+                  opacity:1;
+                  position: relative;
+                  width: 6px;
+                  height: 6px;
+                  margin:0 6px;
+                  &::before{
+                    content: '';
+                    position: absolute;
+                    left: -3px;
+                    top: -3px;
+                    width: 10px;
+                    height: 10px;
+                    border-radius: 50%;
+                    border: 1px solid #ffffff;
+                    opacity: 0;
+                    transition: all .3s ease-in-out;
+                  }
+                }
+                .swiper-pagination-bullet-active{
+                  &::before{
+                    opacity: 1;
+                  }
+                }
+              }
+            }
+    
+        }
+    
+        .tabs_box{
+            width: 92.125vw;
+            flex-wrap: wrap;
+            margin-bottom: 10.625vw;
+            font-size: 3.75vw;
+            .tabs_li{
+                padding: 1.875vw 3.75vw;
+                margin-right: 3vw;
+                margin-bottom: 4vw;
+                span{
+                    display: inline-block;
+                    margin: 0 3px 0 8px;
+                    font-weight: bold;
+                }
+                &:nth-of-type(3n){
+                    margin-right: 0;
+                }
+            }
+            .tabs_lis{
+                background: #B81C25;
+                border: 1px solid #B81C25;
+                color: #fff;
+            }
+        }
+        .article_list{
+            width: 92.125vw;
+            margin: 0 auto;
+            .article_li{
+                width: 100%;
+                margin-bottom: 10.5vw;
+                padding-bottom: 10.5vw;
+                padding-right: 0;
+                border-bottom: 1px solid #DDE2E6;
+    
+              
+                &:nth-of-type(7){
+                   border-bottom: 1px solid #DDE2E6;
+                }
+                &:nth-of-type(8){
+                   border-bottom: 1px solid #DDE2E6;
+                }
+                &:nth-of-type(9){
+                   border-bottom: 1px solid #DDE2E6;
+                }
+                &:last-child{
+                    border: 0;
+                }
+                img{
+                    height: 69.125vw;
+                    margin-bottom: 5.125vw;
+                }
+                .txt1{
+                    font-size: 3.75vw;
+                }
+            }
+        }
         .news_paging{
             padding-top: 16vw;
             .previousPage{
@@ -173,5 +523,31 @@ a{
                 // }
             }
         }
+        .study_box{
+            padding-top: 13.75vw;
+            padding-bottom: 35.875vw;
+            position: relative;
+
+            .study_head{
+                width: 92.125vw;
+                margin-bottom: 10.5vw;
+                .txt{
+                    width: 100%;
+                    font-size: 4.75vw;
+                    margin-left: 0;
+                    text-align: center;
+                }
+                a{
+                    position: absolute;
+                    bottom:15vw;
+                    left: 50%;
+                    margin-left: -25%;
+                }
+            }
+            .bannerSwiper2{
+                width: 92.125vw;
+                margin: 0 auto;
+            }
+        }
     }
 }