上传走进中泽和二级时间轴

src/pages/common/css/common.less

@@ -751,7 +751,7 @@ footer{
                 height: 186px;
                 position: absolute;
                 bottom:40px;
-                left: -85px;
+                right: -78px;
                 background: url('../images/weixin.png') no-repeat;
                 background-size: 100%;
                 opacity: 0;
@@ -789,7 +789,7 @@ footer{
 .chooseM{
     display: none;
 }
-@media screen and (min-width: 1080px) and (max-width: 1320px) {
+@media screen and (min-width: 1080px) and (max-width: 1390px) {
     .headerPC{
         padding: 0px 50px;
         .logo{
@@ -808,6 +808,13 @@ footer{
                 margin-right: 10px;
             }
         }
+        .footerIcon{
+            &>div{
+                &>div{
+                    right: 0px;
+                }
+            }
+        }
     }
   }
 

src/pages/common/tpl/header.tpl

@@ -3,7 +3,7 @@
         <div class="logo"></div>
         <div class="menu">
             <div class="menuOne">
-                <a href="">走进中泽</a>
+                <a href="./intoZz.html">走进中泽</a>
                 <div class="menuSon">
                     <div class="menuUp"></div>
                     <a href=""><span>集团简介</span></a>
@@ -86,7 +86,7 @@
                     <a class="title" href="./index.html">首页</a>
                 </div>
                 <div>
-                    <div class="title"><a href="">走进中泽</a><span class="iconfont icon-xiala"></span></div>
+                    <div class="title"><a href="./intoZz.html">走进中泽</a><span class="iconfont icon-xiala"></span></div>
                     <div class="menuSon">
                         <a href=""><span>集团简介</span></a>
                         <a href=""><span>发展历程</span></a>

src/pages/intoTime/App.js

@@ -0,0 +1,104 @@
+import Swiper from 'swiper/bundle'
+import gsap from 'gsap'
+import LocomotiveScroll from 'locomotive-scroll';
+import Common from '../common/js/Common'
+import {
+    isMobile
+} from '../common/js/utils'
+
+export default class App {
+    constructor() {
+        let common = new Common(document.querySelector('.main'),0)   //导航菜单高亮，0是首页，后面的按顺序添加
+        this.isMobile = isMobile()
+        
+        this.scroll = new LocomotiveScroll();
+        // 图片及视频资源懒加载。防止阻塞js执行
+        let lazyDoms = document.querySelectorAll(".lazy");
+        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();
+            }
+        });
+        this.timerFun();
+    }
+    timerFun() {
+        let _this=this;
+        //布置移动端内容
+        let isMob=this.isMobile;
+        if(isMob){
+            let timeAllm=document.querySelector('.timeAllm');
+            let timeLis=document.querySelectorAll('.timeLi');
+            let timeLisArray = Array.from(timeLis);
+            // 提取 year 值并排序
+            timeLisArray.sort((a, b) => {
+                let yearA = parseInt(a.querySelector('.year').textContent, 10);
+                let yearB = parseInt(b.querySelector('.year').textContent, 10);
+                return yearB - yearA; // 从大到小排序
+            });
+            timeLisArray.forEach((item,index)=>{
+                timeAllm.appendChild(item)
+            })
+        }else{
+            //pc端点击事件
+            let timeCks=document.querySelectorAll('.timeY');
+            let timeUls=document.querySelectorAll('.timeUl');
+            let ulScrolls=[];
+            let verticalScrollPosition = document.getElementById('yourElementId').offsetTop;
+            console.log(verticalScrollPosition,8888);
+            
+            // 初始化 ulScrolls 数组
+            let num=0;
+            timeUls.forEach((ul, index) => {
+                ulScrolls.push(ul);
+            });
+            timeCks.forEach((item,index)=>{
+                
+                item.addEventListener('click',()=>{
+                    timeCks.forEach((item2,index2)=>{
+                        item2.classList.remove('timeCk');
+                        // timeUls[index2].classList.remove('timeShow');
+                    })
+                    item.classList.add('timeCk');
+                    // timeUls[index].classList.add('timeShow');
+                    _this.scroll.scrollTo(timeUls[index]);
+                })
+            });
+            // 添加滚动事件监听器
+            // let fourCon = document.querySelector(".fourCon");
+            function updateScrollChange1() {
+                try {
+                    // let hh = fourCon.getBoundingClientRect();
+                    let scrollY = window.scrollY;
+                    ulScrolls.forEach((item, index) => {
+                            if (scrollY >= item.offsetTop&&scrollY < item.offsetTop+item.scrollHeight) {
+                                timeCks.forEach((item2,index2)=>{
+                                    item2.classList.remove('timeCk');
+                                })
+                                timeCks[index].classList.add('timeCk');
+                            }
+                        
+                    });
+                    console.log(scrollY,ulScrolls);
+                    
+                } catch (error) { }
+            }
+            window.addEventListener('scroll', updateScrollChange1);
+        }
+    }
+    
+
+}

src/pages/intoTime/index.html

@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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" />
+    <%= require('../common/tpl/headerLink.tpl') %>
+  </head>
+
+  <body>
+    <%= require('../common/tpl/header.tpl') %>
+    
+    <div class="main">
+      <div class="wow fadeInUp title">发展历程</div>
+      <img class="wow fadeInUp lazy" data-src="./static/images/intoTime/banner.jpg" data-srcM="./static/images/intoTime/banner.jpg" alt="" />
+      <div class="wow fadeInUp title title2">中华之馈  泽润东方</div>
+      <div class="time" id="yourElementId">
+        <div class="timeYear pcTxt">
+          <div>
+            <div class="timeY timeCk">2020s<span></span></div>
+            <div class="timeY">2010s<span></span></div>
+            <div class="timeY">2000s<span></span></div>
+            <div class="timeY">1990s<span></span></div>
+          </div>
+        </div>
+        <div class="timeAll pcTxt">
+          <div class="timeUl timeL timeShow">
+            <div class="timeLiL">
+              <div class="timeLi">
+                <div class="timeYTit"><span>2020s</span></div>
+                <div class="img"><img class="lazy" data-src="./static/images/intoTime/2024.jpg" data-srcM="./static/images/intoTime/2024.jpg" alt="" /></div>
+                <div class="year">2024</div>
+                <div class="text">控股丹化化工科技股份有限公司及其下属企业通辽金煤化工有限公司</div>
+              </div>
+              <div class="timeLi">
+                <div class="img"><img class="lazy" data-src="./static/images/intoTime/2022.jpg" data-srcM="./static/images/intoTime/2022.jpg" alt="" /></div>
+                <div class="year">2022</div>
+                <div class="text">并购吉林天池钼业有限公司<br>成立北京中泽新能源有限公司</div>
+              </div>
+              <div class="timeLi">
+                <div class="img"><img class="lazy" data-src="./static/images/intoTime/2020.jpg" data-srcM="./static/images/intoTime/2020.jpg" alt="" /></div>
+                <div class="year">2020</div>
+                <div class="text">成立吉林中泽新型建材有限公司<br>成立内蒙古中泽控股集团有限责任公司</div>
+              </div>
+            </div>
+            <div class="timeLiR">
+              <div class="timeLi">
+                <div class="img"><img class="lazy" data-src="./static/images/intoTime/2023.jpg" data-srcM="./static/images/intoTime/2023.jpg" alt="" /></div>
+                <div class="year">2023</div>
+                <div class="text">并购黑龙江安瑞佳石油化工有限公司，成立黑龙江新瑞石油化工有限公司</div>
+              </div>
+              <div class="timeLi">
+                <div class="img"><img class="lazy" data-src="./static/images/intoTime/2021.jpg" data-srcM="./static/images/intoTime/2021.jpg" alt="" /></div>
+                <div class="year">2021</div>
+                <div class="text">成立新疆中泽控股集团有限责任公司<br>成立新疆吉铁铁合金有限责任公司<br>成立沈阳中泽镁材料研究院有限公司</div>
+              </div>
+            </div>
+          </div>
+          <div class="timeUl timeR">
+            <div class="timeLiL">
+              <div class="timeLi">
+                <div class="img"><img class="lazy" data-src="./static/images/intoTime/2018.jpg" data-srcM="./static/images/intoTime/2018.jpg" alt="" /></div>
+                <div class="year">2018</div>
+                <div class="text">成立吉蒙炭素有限责任公司<br>成立万联易达物流科技有限公司</div>
+              </div>
+              <div class="timeLi addliH">
+                <div class="img"><img class="lazy" data-src="./static/images/intoTime/2016.jpg" data-srcM="./static/images/intoTime/2016.jpg" alt="" /></div>
+                <div class="year">2016</div>
+                <div class="text">投资建设吉铁吉炭乌兰察布冶金综合项目<br>成立吉铁铁合金有限责任公司</div>
+              </div>
+              <div class="timeLi">
+                <div class="year">2014</div>
+                <div class="text">成立北京中泽控股集团有限公司<br>并购中钢集团吉林铁合金股份有限公司</div>
+              </div>
+              <div class="timeLi">
+                <div class="img"><img class="lazy" data-src="./static/images/intoTime/2011.jpg" data-srcM="./static/images/intoTime/2011.jpg" alt="" /></div>
+                <div class="year">2011</div>
+                <div class="text">并购辽宁省机械研究院，成立辽宁省机械研究院有限公司</div>
+              </div>
+            </div>
+            <div class="timeLiR">
+              <div class="timeLi">
+                <div class="timeYTit"><span>2010s</span></div>
+                <div class="img"><img class="lazy" data-src="./static/images/intoTime/2019.jpg" data-srcM="./static/images/intoTime/2019.jpg" alt="" /></div>
+                <div class="year">2019</div>
+                <div class="text">重整吉林昊融集团股份有限公司及其下属吉林吉恩镍业股份有公司、吉林大黑山钼业股份有限公司、四平昊融银业有限公司等<br>成立吉林中泽昊融集团有限公司<br>成立吉林中泽钼业有限公司</div>
+              </div>
+              <div class="timeLi">
+                <div class="year">2017</div>
+                <div class="text">成立内蒙古瑞志现代煤化工有限公司<br>成立吉铁（天津）国际贸易有限公司</div>
+              </div>
+              <div class="timeLi">
+                <div class="img"><img class="lazy" data-src="./static/images/intoTime/2015.jpg" data-srcM="./static/images/intoTime/2015.jpg" alt="" /></div>
+                <div class="year">2015</div>
+                <div class="text">完成吉铁改制，成立吉林铁合金股份有限公司和辽阳铁合金有限责任公司<br>并购吉林炭素有限公司<br>成立北京中睿元同投资管理有限公司</div>
+              </div>
+              <div class="timeLi">
+                <div class="year">2013</div>
+                <div class="text">成立沈阳中泽地产有限公司、朝阳中泽地产有限公司、营口中泽地产有限公司<br>成立大连中泽产业发展有限公司，投资建设大连中泽产业园项目</div>
+              </div>
+            </div>
+          </div>
+          <div class="timeUl timeR">
+            <div class="timeLiL">
+              <div class="timeLi">
+                <div class="img"><img class="lazy" data-src="./static/images/intoTime/2006.jpg" data-srcM="./static/images/intoTime/2006.jpg" alt="" /></div>
+                <div class="year">2006</div>
+                <div class="text">并购朝阳重型机器厂，成立朝阳重型机器有限公司</div>
+              </div>
+              <div class="timeLi">
+                <div class="year">2004</div>
+                <div class="text">成立沈阳三耳兔股份有限公司</div>
+              </div>
+              <div class="timeLi">
+                <div class="year">2002</div>
+                <div class="text">并购营口针织二厂，成立营口舒爱得针织有限公司<br>成立辽宁中泽地产有限公司</div>
+              </div>
+            </div>
+            <div class="timeLiR">
+              <div class="timeLi addliH2">
+                <div class="timeYTit"><span>2000s</span></div>
+                <div class="year">2009</div>
+                <div class="text">启动“辽阳中泽城”大型城市综合体建设项目</div>
+              </div>
+              <div class="timeLi">
+                <div class="year">2005</div>
+                <div class="text">并购辽阳宾馆，成立辽阳宾馆有限责任公司</div>
+              </div>
+              <div class="timeLi">
+                <div class="year">2003</div>
+                <div class="text">并购朝阳纺织厂，成立辽宁中泽集团朝阳纺织有限责任公司</div>
+              </div>
+              <div class="timeLi">
+                <div class="year">2001</div>
+                <div class="text">并购辽阳纺织厂，成立辽宁三耳兔服饰有限公司</div>
+              </div>
+            </div>
+          </div>
+          <div class="timeUl timeL">
+            <div class="timeLiL">
+              <div class="timeLi">
+                <div class="timeYTit"><span>1990s</span></div>
+                <div class="year">1997</div>
+                <div class="text">并购辽阳针织二厂，成立中泽集团针织有限公司</div>
+              </div>
+            </div>
+            <div class="timeLiR">
+              <div class="timeLi">
+                <div class="year">1995</div>
+                <div class="text">成立辽阳中泽出租车有限公司</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="timeAll mTxt timeAllm">
+          <!-- <div class="timeLi">
+            <div class="timeYTit"><span>2020s</span></div>
+            <div class="img"><img class="lazy" data-src="./static/images/intoTime/2024.jpg" data-srcM="./static/images/intoTime/2024.jpg" alt="" /></div>
+            <div class="year">2024</div>
+            <div class="text">控股丹化化工科技股份有限公司及其下属企业通辽金煤化工有限公司</div>
+          </div>
+          <div class="timeLi">
+            <div class="img"><img class="lazy" data-src="./static/images/intoTime/2022.jpg" data-srcM="./static/images/intoTime/2022.jpg" alt="" /></div>
+            <div class="year">2022</div>
+            <div class="text">并购吉林天池钼业有限公司<br>成立北京中泽新能源有限公司</div>
+          </div>
+          <div class="timeLi">
+            <div class="img"><img class="lazy" data-src="./static/images/intoTime/2020.jpg" data-srcM="./static/images/intoTime/2020.jpg" alt="" /></div>
+            <div class="year">2020</div>
+            <div class="text">成立吉林中泽新型建材有限公司<br>成立内蒙古中泽控股集团有限责任公司</div>
+          </div> -->
+        </div>
+      </div>
+      
+    </div>
+    <%= require('../common/tpl/footer.tpl') %>
+    <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->
+  </body>
+</html>

src/pages/intoTime/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/intoTime/index.less

@@ -0,0 +1,415 @@
+
+//pc端样式
+.main {
+    width: 100%;
+    max-width: 1920px;
+    margin: 0 auto;
+    padding-top: 71px;
+    position: relative;
+    text-align: center;
+    &>.title{
+      margin-top: 120px;
+      margin-bottom: 70px;
+      font-size: 60px;
+    }
+    &>.title2{
+      font-size: 48px;
+      color: #b81c25;
+      margin-top: 80px;
+      margin-bottom: 80px;
+    }
+    &>img{
+      width: 100%;
+      display: block;
+    }
+}
+.time{
+  width: 100%;
+  position: relative;
+  padding-bottom: 120px;
+  .timeYear{
+    position: -webkit-sticky;
+    position: sticky;
+    top: 170px;
+    z-index: 2;
+    &>div{
+      width: 212px;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      font-size: 24px;
+      line-height: normal;
+      overflow: hidden;
+      background: rgba(255, 255, 255, 0.5);
+      &>div{
+        // padding: 30px 0px;
+        height: 90px;
+        line-height: 90px;
+        transition: all 0.3s ease-in-out;
+        position: relative;
+        cursor: pointer;
+        padding-right: 0px;
+        span{
+          display: block;
+          width: 0px;
+          height: 2px;
+          position: absolute;
+          top: 50%;
+          right: 0px;
+          transform: translateY(-50%);
+          background: #B81C25;
+          transition: all 0.3s ease-in-out;
+        }
+      }
+      .timeCk{
+        color: #B81C25;
+        font-size: 48px;
+        font-weight: bold;
+        font-family: 'MyFont1';
+        padding-right: 70px;
+        span{
+          width: 56px;
+        }
+      }
+    }
+
+  }
+  .timeAll{
+    width: 100%;
+    margin: 0px auto;
+    max-width: 1300px;
+    position: relative;
+    padding-bottom: 180px;
+    &::before{
+      content: '';
+      position: absolute;
+      width: 1px;
+      height: 100%;
+      top: 0px;
+      left: 50%;
+      background: #999999;
+    }
+    &::after{
+      content: '';
+      position: absolute;
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+      border: 1px solid #999999;
+      background: #fff;
+      bottom: 0px;
+      left: calc(50% - 5px);
+    }
+    .timeUl{
+      width: 100%;
+      display: flex;
+      &>div{
+        width: 50%;
+        box-sizing: border-box;
+        .timeLi{
+          width: 100%;
+          margin-bottom: 170px;
+          &:last-child{
+            margin-bottom: 0px;
+          }
+          .timeYTit{
+            font-size: 120px;
+            color: #C1C6C9;
+            font-weight: bold;
+            line-height: normal;
+            margin-bottom: 8px;
+            margin-top: 80px;
+            position: relative;
+            span{
+              opacity: 0.3;
+            }
+            &::before{
+              content: '';
+              position: absolute;
+              top: -46px;
+              width: 16px;
+              height: 16px;
+              background: #B81C25;
+              border-radius: 50%;
+              opacity: 0;
+              transition: all 0.3s ease-in-out;
+            }
+            
+            &::after{
+              content: '';
+              position: absolute;
+              top: -60px;
+              width: 44px;
+              height: 44px;
+              background: #B81C25;
+              border-radius: 50%;
+              opacity: 0;
+              transition: all 0.3s ease-in-out;
+            }
+          }
+          
+          .img{
+            margin-bottom: 26px;
+            img{
+              display: block;
+            }
+          }
+          .year{
+            font-size: 38px;
+            font-weight: bold;
+            margin-bottom: 10px;
+            position: relative;
+            &::before{
+              content: '';
+              position: absolute;
+              top: 20px;
+              width: 9px;
+              height: 9px;
+              background: #000000;
+              border-radius: 50%;
+            }
+            
+            &::after{
+              content: '';
+              position: absolute;
+              top: 24px;
+              width: 25px;
+              height: 1px;
+              background: #231F20;
+            }
+          }
+          .text{
+            font-size: 24px;
+          }
+        }
+        .addliH{
+          margin-bottom: 280px;
+        }
+        .addliH2{
+          margin-bottom: 556px;
+        }
+      }
+      .timeLiL{
+        padding-right: 60px;
+        text-align: right;
+        .timeYTit{
+          &::before{
+            right: -68px;
+          }
+          &::after{
+            right: -82px;
+          }
+        }
+        .year{
+          &::before{
+            right: -65px;
+          }
+          &::after{
+            right: -58px;
+          }
+        }
+
+      }
+      .timeLiR{
+        padding-left: 60px;
+        text-align: left;
+        .timeYTit{
+          &::before{
+            left: -68px;
+          }
+          &::after{
+            left: -82px;
+          }
+        }
+        .year{
+          &::before{
+            left: -64px;
+          }
+          &::after{
+            left: -58px;
+          }
+        }
+      }
+      &:first-child{
+        &>div{
+          .timeLi{
+            .timeYTit{
+              &::before{
+                top: -86px;
+                opacity: 1;
+              }
+              &::after{
+                top: -100px;
+                opacity: 0.3;
+              }
+            }
+          }
+        }
+        
+      }
+    }
+    .timeL{
+      .timeLiR{
+        padding-top: 410px;
+      }
+    }
+    .timeR{
+      .timeLiL{
+        padding-top: 410px;
+      }
+    }
+    // .timeShow{
+    //   &>div{
+    //     .timeLi{
+    //       .timeYTit{
+    //         &::before{
+    //           opacity: 1;
+    //         }
+    //         &::after{
+    //           opacity: 0.3;
+    //         }
+    //       }
+    //     }
+    //   }
+    // }
+  }
+}
+
+
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+  
+}
+@media screen and (min-width:800px){
+  
+}
+.mTxt{
+  display: none;
+}
+//移动端样式
+@media screen and (max-width:800px) {
+  .pcTxt{
+    display: none;
+  }
+  .mTxt{
+    display: block;
+  }
+  .main{
+    padding-top: 61px;
+    padding-left: 15px;
+    padding-right: 15px;
+    box-sizing: border-box;
+    &>.title{
+      margin-top: 80px;
+      margin-bottom: 40px;
+      font-size: 24px;
+    }
+    &>.title2 {
+      font-size: 19px;
+      margin-top: 30px;
+      margin-bottom: 62px;
+      text-align: left;
+      line-height: normal;
+    }
+    .time{
+      padding-bottom: 60px;
+    }
+    .timeAll{
+      padding-left: 30px;
+      box-sizing: border-box;
+      text-align: left;
+      padding-bottom: 1px;
+      &::before{
+        left: 0px;
+      }
+      &::after{
+        left:-5px;
+      }
+      .timeLi{
+        width: 100%;
+        margin-bottom: 60px;
+        .timeYTit{
+          font-size: 60px;
+          color: #C1C6C9;
+          font-weight: bold;
+          line-height: normal;
+          margin-bottom: 4px;
+          position: relative;
+          span{
+            opacity: 0.3;
+          }
+          &::before{
+            content: '';
+            position: absolute;
+            top: -15px;
+            left: -33px;
+            width: 8px;
+            height: 8px;
+            background: #B81C25;
+            border-radius: 50%;
+            opacity: 0;
+          }
+          
+          &::after{
+            content: '';
+            position: absolute;
+            top: -22px;
+            left: -40px;
+            width: 22px;
+            height: 22px;
+            background: #B81C25;
+            border-radius: 50%;
+            opacity: 0;
+          }
+        }
+        
+        .img{
+          margin-bottom: 13px;
+          img{
+            display: block;
+          }
+        }
+        .year{
+          font-size: 19px;
+          font-weight: bold;
+          margin-bottom: 5px;
+          position: relative;
+          &::before{
+            content: '';
+            position: absolute;
+            top: 10px;
+            left: -33px;
+            width: 7px;
+            height: 7px;
+            background: #000000;
+            border-radius: 50%;
+          }
+          
+          &::after{
+            content: '';
+            position: absolute;
+            top: 13px;
+            left: -28px;
+            width: 12px;
+            height: 1px;
+            background: #231F20;
+          }
+        }
+        .text{
+          font-size: 14px;
+        }
+        &:first-child{
+          .timeYTit{
+            padding-top: 30px;
+            &::before{
+              opacity: 1;
+            }
+            &::after{
+              opacity: 0.3;
+            }
+          }
+        }
+      }
+    }
+  }
+  
+}

src/pages/intoZz/App.js

@@ -0,0 +1,167 @@
+import Swiper from 'swiper/bundle'
+import gsap from 'gsap'
+import LocomotiveScroll from 'locomotive-scroll';
+import Common from '../common/js/Common'
+import {
+    isMobile
+} from '../common/js/utils'
+
+export default class App {
+    constructor() {
+        let common = new Common(document.querySelector('.main'),0)   //导航菜单高亮，0是首页，后面的按顺序添加
+        this.isMobile = isMobile()
+        
+        this.scroll = new LocomotiveScroll();
+        // 图片及视频资源懒加载。防止阻塞js执行
+        let lazyDoms = document.querySelectorAll(".lazy");
+        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();
+            }
+        });
+        this.four();
+    }
+    four() {
+        let isMob = this.isMobile;
+
+        let fourCon = document.querySelector(".fourCon");
+        let fourSons = document.querySelectorAll(".fourSon");
+        let fourR = document.querySelector(".fourR");
+        let fourRsons = document.querySelectorAll(".fourRson");
+
+        let sonArr = [];
+        fourSons.forEach((item, index) => {
+            let childHeight = item.offsetHeight;
+            if (index == 3) childHeight = childHeight * 0.5;
+            sonArr.push([childHeight, index]);
+        });
+        
+        fourRsons.forEach((item, index) => {
+            item.style.width = fourR.offsetWidth + 'px';
+            item.style.height = fourR.offsetWidth + 'px';
+            item.style.zIndex = fourRsons.length - index;
+        });
+        function changeDiv(num, val) {
+            fourSons.forEach((item, index) => {
+                if (index == num) {
+                    let nvl = val * 100;
+                    nvl = nvl > 97 ? 100 : nvl < 3 ? 0 : nvl;
+                    nvl = nvl.toFixed(2);
+                    if (index < fourSons.length - 1) {
+                        fourRsons[index].style.clipPath = 'inset(0px 0px ' + nvl + '%)';
+                        if (index > 0) {
+                            fourRsons[index - 1].style.clipPath = 'inset(0px 0px 100%)';
+                        }
+                    }
+                    if (index < fourSons.length) fourSons[index + 1].style.opacity = 0.3 + (val > 0.7 ? 0.7 : val);
+                }
+            })
+        }
+
+
+        // 获取元素的滚动条高度
+        let scrollHeight = fourCon.scrollHeight;
+        let conStart = 0;
+        let conEnd = 0;
+        function updateScrollChange1() {
+            try {
+                let hh = fourCon.getBoundingClientRect();
+                let scrollTop = hh.top;
+                let scrollBottom = hh.bottom;
+                let scrollY = window.scrollY;
+
+
+                if (scrollTop < 0 & conStart == 0) {
+                    conStart = scrollY;
+                    conEnd = scrollY + scrollHeight;
+                    let startH = 0;
+                    sonArr.forEach((item, index) => {
+                        let childH = scrollY + startH + item[0];
+                        let childHs = scrollY + startH;
+                        if(index==0){
+                            startH += item[0]-80;
+                        }else{
+                            startH += item[0];
+                        }
+                        item.push(childH)
+                        item.push(childHs)
+                    });
+                } else if (scrollTop < 0 && scrollY > conStart && scrollY < conEnd) {
+
+
+
+                    sonArr.forEach((item, index) => {
+                        let chazhi = item[2] - scrollY;
+                        if (chazhi > 0 && scrollY < item[2] && scrollY > item[3]) {
+                            let bili = chazhi / item[0];
+                            bili = bili.toFixed(4);
+                            bili = parseFloat(bili);
+                            bili = 1 - bili;
+                            bili = bili.toFixed(4);
+                            bili = parseFloat(bili);
+                            changeDiv(index, bili)
+                        }
+                    });
+                }
+            } catch (error) { }
+        }
+
+
+        // 添加滚动事件监听器
+        if(!isMob){
+            window.addEventListener('scroll', updateScrollChange1);
+        }
+        
+        //弹框资质荣誉
+        let pop=document.querySelector(".pop");
+        let guanbi=document.querySelector(".icon-guanbi");
+        let allNum=document.querySelector(".allNum");
+        let honorsRis=document.querySelectorAll(".honorsRi");
+        let nowNum=document.querySelector(".nowNum");
+        let nowName=document.querySelector(".nowName");
+        
+        let mySwiper = new Swiper('.productSwiper', {
+            autoplay: false,//可选选项，自动滑动
+            // loop: true,
+            // loopedSlides: 4,
+            navigation: {
+                nextEl: isMob?'.btn-nextP2':'.btn-nextP1',
+                prevEl: isMob?'.btn-prevP2':'.btn-prevP1',
+            },
+            on:{
+                slideChange: function(){
+                    let index0=this.realIndex;
+                    nowNum.textContent=index0+1;
+                    let name=honorsRis[index0].querySelector(".text").textContent;
+                    nowName.textContent=name;
+                },
+            },
+        });
+        
+        allNum.textContent=honorsRis.length;
+        honorsRis.forEach((item, index) => {
+            item.addEventListener("click", (e) => {
+                mySwiper.slideTo(index, 1000, false);
+                pop.classList.add("popShow");
+            });
+        });
+        guanbi.addEventListener("click", (e) => {
+            pop.classList.remove("popShow");
+        });
+    }
+
+}

src/pages/intoZz/index.html

@@ -0,0 +1,290 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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="intoCon">
+        <div class="intoTop">
+          <div class="wow fadeInUp title">集团简介</div>
+          <div class="wow fadeInUp">
+            <div class="text">中泽控股集团股份有限公司（简称中泽集团）是以投资并购和企业运营为核心业务的大型民营集团，创建于1995年，总部位于北京。</div>
+            <div class="text">中泽集团通过梳理资产要素、优化资源配置、提升管理效率、拓展全产业链等专业高效的运作体系，深化企业转型升级；通过搭建多元化经营结构，推进多赛道协同发展，形成优势互补、新质高效、绿色安全的产业布局；通过不断创新超越，企业经营管理水平和可持续发展能力显著提升，并购重整的经验日益丰富，高质量建设发展的能力更加突出，逐步形成了铁合金、炭素、钼业、镍业、化工、装备制造、产业互联网等核心产业，经营结构持续优化，资产规模不断扩大，社会影响力日渐增强。现有员工1.8万人，旗下40余家重点企业，主要分布在辽宁、吉林、黑龙江、内蒙古、新疆、北京、天津、上海、深圳等地。</div>
+            <div class="text">中泽集团以“实业为本、产业报国”为己任，对标国家“双碳”目标，统筹推进“投资并购与企业运营双轮驱动”的发展战略。一是继续通过并购重整，盘活存量资产，持续发展壮大集团；二是为以清洁能源为主的源网荷储一体化配置负荷，实现高载能产业的碳中和；三是构建产业互联网智能生态体系。</div>
+          </div>
+        </div>
+        <div class="wow fadeInUp intoTopImg">
+          <img class="lazy" data-src="./static/images/intoZz/banner.jpg" data-srcM="./static/images/intoZz/banner.jpg" alt="" />
+        </div>
+        <div class="four">
+          <div class="wow fadeInUp title">企业文化</div>
+          <div class="wow fadeInUp fourCon">
+            <div class="fourL">
+              <div>
+                <div class="fourHide">
+                  <div class="fourSon">
+                    <div class="fourLine"></div>
+                    <div class="fourIcon">
+                      <div class="fourdiv"></div>
+                    </div>
+                    <div class="fourText">
+                      <div class="h6">01</div>
+                      <div class="h4">徽标释义</div>
+                      <div class="h6R">
+                        <div class="text">整个logo呈深红色，代表着中泽集团一心向党的办企情怀。坚决拥护党的领导，遵守党和政府的一切决定，在党的引领下行稳致远。</div>
+                        <div class="text">大写字母“ZZ”呈起跑姿势，象征着中泽集团作为民营企业始终居安思危，择机而动，在奋进路上永不止步。</div>
+                        <div class="text">圆象征着规则，“ZZ”立于圆的正中，并与圆形相切，象征着中泽集团坚持原则,合法经营,形成了多点支撑多业并举的实体产业格局。</div>
+                      </div>
+                      <div class="fourLimg"><img src="./static/images/intoZz/qywh1.jpg" alt=""></div>
+                      <!-- <a class="btn btnBlack" href="">查看更多</a> -->
+                    </div>
+                  </div>
+                  <div class="fourSon">
+                    <div class="fourLine"></div>
+                    <div class="fourIcon">
+                      <div class="fourdiv"></div>
+                    </div>
+                    <div class="fourText">
+                      <div class="h6">02</div>
+                      <div class="h4">企业使命</div>
+                      <div class="h6R">
+                        <div class="text">专注于盘活存量和长期价值投资，助力国家经济持续健康发展。</div>
+                      </div>
+                      <div class="fourLimg"><img src="./static/images/intoZz/qywh2.jpg" alt=""></div>
+                    </div>
+                  </div>
+                  <div class="fourSon">
+                    <div class="fourLine"></div>
+                    <div class="fourIcon">
+                      <div class="fourdiv"></div>
+                    </div>
+                    <div class="fourText">
+                      <div class="h6">03</div>
+                      <div class="h4">核心价值观</div>
+                      <div class="h6R">
+                        <div class="text">实业为本  产业报国</div>
+                      </div>
+                      <div class="fourLimg"><img src="./static/images/intoZz/qywh3.jpg" alt=""></div>
+                    </div>
+                  </div>
+                  <div class="fourSon">
+                    <div class="fourLine"></div>
+                    <div class="fourIcon">
+                      <div class="fourdiv"></div>
+                    </div>
+                    <div class="fourText">
+                      <div class="h6">04</div>
+                      <div class="h4">企业精神</div>
+                      <div class="h6R">
+                        <div class="text">以人为本  家国情怀<br>
+                          正直诚信  永不妥协<br>
+                          志存高远  坚韧不拔<br>
+                          创新超越  追求卓越<br>
+                          </div>
+                      </div>
+                      <div class="fourLimg"><img src="./static/images/intoZz/qywh4.jpg" alt=""></div>
+                    </div>
+                  </div>
+                  <div class="fourSon">
+                    <div class="fourLine"></div>
+                    <div class="fourIcon">
+                      <div class="fourdiv"></div>
+                    </div>
+                    <div class="fourText">
+                      <div class="h6">05</div>
+                      <div class="h4">发展模式</div>
+                      <div class="h6R">
+                        <div class="text">投资并购与企业运营双轮驱动</div>
+                      </div>
+                      <div class="fourLimg"><img src="./static/images/intoZz/qywh5.jpg" alt=""></div>
+                    </div>
+                  </div>
+                  <div class="fourSon">
+                    <div class="fourLine"></div>
+                    <div class="fourIcon">
+                      <div class="fourdiv"></div>
+                    </div>
+                    <div class="fourText">
+                      <div class="h6">06</div>
+                      <div class="h4">投资策略</div>
+                      <div class="h6R">
+                        <div class="text">创新灵活  反应迅速<br>
+                          变革突破  持之以恒
+                        </div>
+                      </div>
+                      <div class="fourLimg"><img src="./static/images/intoZz/qywh6.jpg" alt=""></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="fourR">
+              <div class="fourRson"><img src="./static/images/intoZz/qywh1.jpg" alt=""></div>
+              <div class="fourRson"><img src="./static/images/intoZz/qywh2.jpg" alt=""></div>
+              <div class="fourRson"><img src="./static/images/intoZz/qywh3.jpg" alt=""></div>
+              <div class="fourRson"><img src="./static/images/intoZz/qywh4.jpg" alt=""></div>
+              <div class="fourRson"><img src="./static/images/intoZz/qywh5.jpg" alt=""></div>
+              <div class="fourRson"><img src="./static/images/intoZz/qywh6.jpg" alt=""></div>
+            </div>
+          </div>
+        </div>
+        <div class="enterprise">
+          <div class="enterpriseCon">
+            <div class="title">企业架构</div>
+            <div class="enterList">
+
+            </div>
+          </div>
+        </div>
+        <div class="history">
+          <div class="historyUp">
+            <div class="wow fadeInUp title">发展历程</div>
+            <div class="wow fadeInUp pcTxt"><a class="btn" href="./intoTime.html"><span>了解我们的历程</span></a></div>
+          </div>
+          <img class="wow fadeInUp" src="./static/images/intoZz/fzlc.jpg" alt="">
+          <div class="wow fadeInUp mTxt"><a class="btn" href="./intoTime.html"><span>了解我们的历程</span></a></div>
+        </div>
+        <div class="honors">
+          <div class="wow fadeInUp title">资质荣誉</div>
+          <div class="honorsCon">
+            <div class="wow fadeInUp honorsL">
+            <div class="honorsLs">
+              <div class="wow fadeInUp honorsLi">
+                <div class="numT">15<span>个</span></div>
+                <div class="numP">国家高新技术企业</div>
+              </div>
+              <div class="wow fadeInUp honorsLi">
+                <div class="numT">3<span>个</span></div>
+                <div class="numP">国家级企业技术中心</div>
+              </div>
+              <div class="wow fadeInUp honorsLi liSort">
+                <div class="numT">3<span>个</span></div>
+                <div class="numP">中国驰名商标</div>
+              </div>
+              <div class="wow fadeInUp honorsLi">
+                <div class="numT">3<span>个</span></div>
+                <div class="numP">国家认可实验室</div>
+              </div>
+              <div class="wow fadeInUp honorsLi">
+                <div class="numT">1<span>个</span></div>
+                <div class="numP">国家级绿色矿山</div>
+              </div>
+              <div class="wow fadeInUp honorsLi liSort">
+                <div class="numT">10<span>个</span></div>
+                <div class="numP">专精特新企业</div>
+              </div>
+            </div></div>
+            <div class="honorsR">
+              <div class="wow fadeInUp honorsRi">
+                <div class="img"><img src="./static/images/intoZz/1.png" alt=""><div class="imgHover">+</div></div>
+                <div class="text">国家高新技术企业</div>
+              </div>
+              <div class="wow fadeInUp honorsRi">
+                <div class="img"><img src="./static/images/intoZz/2.png" alt=""><div class="imgHover">+</div></div>
+                <div class="text">国家级企业技术中心</div>
+              </div>
+              <div class="wow fadeInUp honorsRi">
+                <div class="img"><img src="./static/images/intoZz/3.png" alt=""><div class="imgHover">+</div></div>
+                <div class="text">中国驰名商标</div>
+              </div>
+              <div class="wow fadeInUp honorsRi">
+                <div class="img img2"><img src="./static/images/intoZz/4.png" alt=""><div class="imgHover">+</div></div>
+                <div class="text">国家认可实验室</div>
+              </div>
+              <div class="wow fadeInUp honorsRi">
+                <div class="img"><img src="./static/images/intoZz/5.png" alt=""><div class="imgHover">+</div></div>
+                <div class="text">国家级绿色矿山</div>
+              </div>
+              <div class="wow fadeInUp honorsRi">
+                <div class="img"><img src="./static/images/intoZz/6.png" alt=""><div class="imgHover">+</div></div>
+                <div class="text">国家级绿色工厂</div>
+              </div>
+              <div class="wow fadeInUp honorsRi">
+                <div class="img"><img src="./static/images/intoZz/7.png" alt=""><div class="imgHover">+</div></div>
+                <div class="text">专精特新企业</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pop">
+      <div class="popCon">
+        <div class="popUp"><span class="nowName">国家高新技术企业</span><span class="nowNum">1</span>/<span class="allNum">15</span></div>
+        <div class="popSw">
+          <div class="swiper productSwiper">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide">
+                <div class="img">
+                  <img class="lazy" data-src="./static/images/intoZz/11.png" data-srcM="./static/images/intoZz/11.png" alt="" />
+                </div>
+                <div class="text">吉铁铁合金有限责任公司1</div>
+              </div>
+              <div class="swiper-slide">
+                <div class="img">
+                  <img class="lazy" data-src="./static/images/intoZz/22.png" data-srcM="./static/images/intoZz/22.png" alt="" />
+                </div>
+                <div class="text">吉铁铁合金有限责任公司2</div>
+              </div>
+              <div class="swiper-slide">
+                <div class="img">
+                  <img class="lazy" data-src="./static/images/intoZz/33.png" data-srcM="./static/images/intoZz/33.png" alt="" />
+                </div>
+                <div class="text">吉铁铁合金有限责任公司3</div>
+              </div>
+              <div class="swiper-slide">
+                <div class="img">
+                  <img class="lazy" data-src="./static/images/intoZz/44.png" data-srcM="./static/images/intoZz/44.png" alt="" />
+                </div>
+                <div class="text">吉铁铁合金有限责任公司4</div>
+              </div>
+              <div class="swiper-slide">
+                <div class="img">
+                  <img class="lazy" data-src="./static/images/intoZz/55.png" data-srcM="./static/images/intoZz/55.png" alt="" />
+                </div>
+                <div class="text">吉铁铁合金有限责任公司5</div>
+              </div>
+              <div class="swiper-slide">
+                <div class="img">
+                  <img class="lazy" data-src="./static/images/intoZz/66.png" data-srcM="./static/images/intoZz/66.png" alt="" />
+                </div>
+                <div class="text">吉铁铁合金有限责任公司6</div>
+              </div>
+              <div class="swiper-slide">
+                <div class="img">
+                  <img class="lazy" data-src="./static/images/intoZz/77.png" data-srcM="./static/images/intoZz/77.png" alt="" />
+                </div>
+                <div class="text">吉铁铁合金有限责任公司7</div>
+              </div>
+            </div>
+            <!-- 如果需要分页器 -->
+            <div class="btn-prev btn-prevP1 pcTxt"><span class="icon iconfont icon-jiantou"></span></div>
+            <div class="btn-next btn-nextP1 pcTxt"><span class="icon iconfont icon-jiantou"></span></div>
+          </div>
+          <div class="mobPage mTxt">
+            <div class="btn-prev btn-prevP2"><span class="icon iconfont icon-jiantou"></span></div>
+            <div class="btn-next btn-nextP2"><span class="icon iconfont icon-jiantou"></span></div>
+          </div>
+        </div>
+        <div class="iconfont icon-guanbi"></div>
+      </div>
+    </div>
+    <%= require('../common/tpl/footer.tpl') %>
+    <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->
+  </body>
+</html>

src/pages/intoZz/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/intoZz/index.less

@@ -0,0 +1,688 @@
+
+//pc端样式
+.main {
+  width: 100%;
+  max-width: 1920px;
+  margin: 0 auto;
+  padding-top: 71px;
+  .text{
+    text-align: justify;
+    font-size: 20px;
+    line-height: 32px;
+  }
+  .title{
+    font-size: 60px;
+  }
+}
+.intoCon{
+  width: 100%;
+  text-align: center;
+  padding-top: 120px;
+  .intoTop{
+    width: 100%;
+    max-width: 1300px;
+    margin: 0px auto;
+    display: flex;
+    text-align: left;
+    padding-bottom: 46px;
+    &>div{
+      width: 50%;
+    }
+  }
+  .intoTopImg{
+    width: 100%;
+    max-width: 1500px;
+    margin: 0px auto;
+    padding-bottom: 110px;
+    img{
+      width: 100%;
+      display: block;
+    }
+  }
+  .four{
+    width: 100%;
+    max-width: 1500px;
+    margin: 0px auto;
+    box-sizing: border-box;
+    padding-bottom: 140px;
+    .title{
+      margin-bottom: 70px;
+    }
+    .h4{
+      font-family: 'MyFont1';
+      font-size: 24px;
+      font-weight: bold;
+    }
+    .h6{
+      font-size: 16px;
+      font-weight: bold;
+      font-family: 'MyFont1';
+    }
+    .h6R{
+      font-size: 20px;
+      line-height: 32px;
+    }
+    .fourCon{
+      display: flex;
+      width: 100%;
+      text-align: left;
+      &>div{
+        width: 50%;
+      }
+      .fourL{
+        padding-left: 6.6%;
+        box-sizing: border-box;
+        &>div{
+          width: 100%;
+          // height: 100%;
+          position: relative;
+          .fourHide{
+            // position: absolute;
+            width: 100%;
+            // height: 100%;
+            // top: 0px;
+            // left: 0px;
+            // overflow-y: auto;
+            .fourSon{
+              opacity: 0.3;
+              &:first-child{
+                opacity: 1;
+              }
+              
+            }
+            &>div{
+              width: 100%;
+              height: 88%;
+              display: flex;
+              position: relative;
+              .fourLine{
+                width: 1px;
+                height: 100%;
+                background: #B81C25;
+                position: absolute;
+                top: 0;
+                left: 15px;
+                // transform: translateX(-50%);
+              }
+              .fourIcon{
+                width: 30px;
+                height: 30px;
+                position: relative;
+                
+                .fourdiv{
+                  width: 30px;
+                  height: 30px;
+                  background: #B81C25;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  &::before{
+                    content: '';
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%,-5px);
+                    width: 10px;
+                    height: 10px;
+                    background: #ffffff;
+                    border-radius: 50%;
+                  }
+                }
+              }
+              .fourText{
+                width: calc(100% - 30px);
+                box-sizing: border-box;
+                padding: 0 15% 240px 40px;
+                .h4{
+                  margin-top: 10px;
+                  margin-bottom: 10px;
+                }
+                .fourLimg{
+                  width: 100%;
+                  display: none;
+                  img{
+                    width: 100%;
+                  }
+                }
+              }
+              &:last-child{
+                .fourText{
+                  // padding: 0 18% 100px 40px;
+                }
+              }
+            }
+          }
+          .fourZ{
+            width: 100%;
+            height: 12.2%;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            background: #ffffff;
+            opacity: 0.8;
+          }
+        }
+      }
+      .fourR{
+        box-sizing: border-box;
+        position: -webkit-sticky;
+        position: sticky;
+        top: 80px;
+        overflow: hidden;
+        max-height: 749px;
+        .fourRson{
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+          img{
+            object-fit: cover;
+            display: block;
+          }
+        }
+      }
+      
+    }
+    
+  }
+  .enterprise{
+    width: 100%;
+    background: #F5F5F6;
+    padding: 120px 0px;
+    text-align: center;
+    .enterpriseCon{
+      width: 100%;
+      max-width: 1300px;
+      margin: 0px auto;
+      text-align: left;
+      .enterList{
+        margin-top: 45px;
+      }
+    }
+  }
+  .history{
+    width: 100%;
+    text-align: center;
+    padding-top: 120px;
+    .historyUp{
+      width: 100%;
+      max-width: 1300px;
+      margin: 0px auto;
+      text-align: left;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 70px;
+    }
+    img{
+      width: 100%;
+      display: block;
+    }
+  }
+  .honors{
+    width: 100%;
+    text-align: center;
+    padding-top: 120px;
+    .honorsCon{
+      width: 100%;
+      max-width: 1300px;
+      margin: 70px auto 60px;
+      text-align: left;
+      display: flex;
+      justify-content: space-between;
+      .honorsL{
+        width: 270px;
+      .honorsLs{
+        width: 100%;
+        background: #F5F5F6;
+        box-sizing: border-box;
+        padding: 0 30px 60px;
+        .honorsLi{
+          width: 100%;
+          text-align: left;
+          padding-top: 43px;
+          .numT{
+            font-size: 60px;
+            font-weight: bold;
+            color: #B81C25;
+            font-family: 'MyFont1';
+            span {
+              font-size: 20px;
+              font-weight: 400;
+              font-family: 'MyFont2';
+              margin-left: 10px;
+            }
+          }
+          .numP {
+            color: #231F20;
+            font-size: 20px;
+          }
+        }
+      }}
+      .honorsR{
+        width: calc(100% - 310px);
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        .honorsRi{
+          width: 315px;
+          text-align: center;
+          margin-bottom: 48px;
+          cursor: pointer;
+          .img{
+            width: 100%;
+            height: 234px;
+            background: url('./images/zzryBg.jpg') no-repeat;
+            background-size: 100% 100%;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            .imgHover{
+              width: 100%;
+              height: 100%;
+              position: absolute;
+              top: 0px;
+              left: 0px;
+              background: rgba(184,28,37,0.8);
+              line-height: 234px;
+              color: #fff;
+              font-size: 60px;
+              opacity: 0;
+              transition: all 0.3s ease-in-out;
+            }
+            img{
+              display: block;
+              width: auto;
+              height: 100%;
+              max-height: 150px;
+            }
+          }
+          .img2{
+            img{
+              max-height: 180px;
+            }
+          }
+          .text{
+            text-align: center;
+            margin-top: 9px;
+            transition: all 0.3s ease-in-out;
+          }
+          &:hover{
+            .imgHover{
+              opacity: 1;
+            }
+            .text{
+              color: #B81C25;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.pop{
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(35,31,32,0.8);
+  z-index: 99;
+  text-align: center;
+  display: none;
+  .popCon{
+    width: 100%;
+    max-width: 1300px;
+    padding-top: 40px;
+    margin: 0px auto;
+    box-sizing: border-box;
+    height: 100%;
+    position: relative;
+    &>.iconfont{
+      position: absolute;
+      top: 40px;
+      right: 0px;
+      font-size: 24px;
+      color: #999999;
+      cursor: pointer;
+      z-index: 9;
+      &:hover{
+        color: #ffffff;
+      }
+    }
+    .popUp{
+      text-align: left;
+      font-size: 18px;
+      color: #fff;
+      .nowNum{
+        margin-left: 10px;
+      }
+    }
+    .popSw{
+      width: 100%;
+      height: calc(100% - 24px);
+      display: flex;
+      align-items: center;
+    }
+    .swiper{
+      width: 100%;
+      position: relative;
+      .img{
+        width: 717px;
+        height: 532px;
+        margin: 0px auto;
+        background: url('./images/zzryBgT.png') no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img{
+          width: auto;
+          height: 360px;
+          display: block;
+        }
+      }
+      .text{
+        font-size: 30px;
+        color: #fff;
+        margin-top: 20px;
+      }
+    }
+    .btn-prev,.btn-next{
+      position: absolute;
+      top: 50%;
+      margin-top: -20px;
+      width: 40px;
+      height: 40px;
+      z-index: 2;
+      text-align: center;
+      color: #999999;
+      background: #231F20;
+      cursor: pointer;
+      border-radius: 2px;
+      span{
+        font-size: 24px;
+        display: inline-block;
+        line-height: 40px;
+        transform: rotate(90deg);
+      }
+      &:hover{
+        color: #ffffff;
+      }
+    }
+    .btn-prev{
+      left: 0px;
+      span{
+        transform: rotate(-90deg);
+      }
+    }
+    .btn-next{
+      right: 0px;
+    }
+    .swiper-button-disabled{
+      cursor: auto;
+      color: #999999;
+      &:hover{
+        color: #999999;
+      }
+    }
+  }
+}
+.popShow{
+  display: block;
+}
+
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+
+}
+@media screen and (min-width:800px){
+
+}
+.mTxt{
+display: none;
+}
+//移动端样式
+@media screen and (max-width:800px) {
+  .pcTxt{
+    display: none;
+  }
+  .mTxt{
+    display: block;
+  }
+  .main{
+    padding-top: 61px;
+    .title{
+      font-size: 24px;
+      line-height: normal;
+    }
+    .text{
+      font-size: 14px;
+      line-height: 24px;
+    }
+  }
+  .intoCon{
+    padding-top: 80px;
+    box-sizing: border-box;
+    padding-left: 15px;
+    padding-right: 15px;
+    // .text{
+    //   font-size: 14px;
+    //   line-height: 22px;
+    // }
+    .intoTop{
+      padding-bottom: 30px;
+      flex-wrap: wrap;
+      .title{
+        margin-bottom: 40px;
+      }
+      &>div{
+        width: 100%;
+      }
+    }
+    .intoTopImg{
+      padding-bottom: 70px;
+    }
+    .four{
+      padding: 40px 0px 0px;
+      .title{
+        margin-bottom: 40px;
+      }
+      .h6{
+        font-size: 12px;
+      }
+      .h4{
+        font-size: 18px;
+      }
+      .fourCon{
+        flex-wrap: wrap;
+        &>div{
+          width: 100%;
+        }
+        .fourL{
+          padding-left: 0;
+          &>div{
+            .fourHide{
+              position: relative;
+              overflow-y: inherit;
+              .fourSon {
+                  opacity: 1;
+              }
+              &>div{
+                height: auto;
+                margin-bottom: 20px;
+                .fourLine{
+                  display: none;
+                }
+                .fourIcon{
+                  display: none;
+                }
+                .fourText{
+                  width: 100%;
+                  padding: 0px;
+                  .fourLimg{
+                    display: block;
+                    margin-bottom: 40px;
+                    margin-top: 20px;
+                  }
+                  .btn{
+                    position: relative;
+                    left: 50%;
+                    transform: translateX(-50%);
+                  }
+                }
+                &:last-child{
+                  margin-bottom: 0px;
+                  .fourText{
+                    padding: 0px;
+                  }
+                }
+              }
+            }
+          }
+        }
+        .fourR{
+          padding-right: 0;
+        }
+      }
+    }
+    .enterprise{
+      margin-top: 70px;
+      padding: 110px 0px;
+      position: relative;
+      &::before{
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -50%;
+        width: 200%;
+        height: 100%;
+        background: #F5F5F6;
+      }
+      .enterpriseCon{
+        position: relative;
+      }
+
+    }
+    .history{
+      padding-top: 110px;
+      .historyUp{
+        margin-bottom: 40px;
+        justify-content: center;
+      }
+      .mTxt{
+        margin-top: 40px;
+        .btn{
+        font-size: 12px;
+        }
+      }
+    }
+    .honors{
+      padding-top: 110px;
+      .honorsCon{
+        margin: 40px auto 30px;
+        flex-wrap: wrap;
+        .honorsL{
+          width: 100%;
+          margin-bottom: 40px;
+          .honorsLs{
+            padding: 0;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-evenly;
+            padding-bottom: 30px;
+            .honorsLi{
+              width: 32%;
+              padding-top: 30px;
+              .numT{
+                font-size: 30px;
+                span{
+                  font-size: 12px;
+                }
+              }
+              .numP{
+                font-size: 12px;
+              }
+            }
+            .liSort{
+              width: 23%;
+            }
+          }
+        }
+        .honorsR{
+          width: 100%;
+          .honorsRi{
+            width: 165px;
+            margin-bottom: 30px;
+            .img{
+              height: 125px;
+              img{
+                max-height: 75px;
+              }
+            }
+            .img2{
+              img{
+                max-height: 95px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .pop{
+    .popCon{
+      padding-top: 70px;
+      .popUp{
+        font-size: 14px;
+        padding-left: 16px;
+      }
+      &>.iconfont{
+        top: 70px;
+        right: 16px;
+        font-size: 18px;
+      }
+      .swiper{
+        box-sizing: border-box;
+        .img{
+          width: 100%;
+          padding: 0px 15px;
+          height: 257px;
+          box-sizing: border-box;
+          img{
+            height: 174px;
+          }
+        }
+        .text{
+          font-size: 18px;
+        }
+      }
+      .popSw{
+        align-items: center;
+        flex-wrap: wrap;
+        align-content: center;
+      }
+      .mobPage{
+        position: relative;
+        margin-top: 30px;
+        width: 100%;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        .btn-prev,.btn-next{
+          position: relative;
+          border-radius: 2px;
+          margin: 0px 20px;
+          top: 0%;
+          width: 25px;
+          height: 25px;
+          span{
+            line-height: 25px;
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/join/index.html

@@ -31,9 +31,9 @@
               <div class="h5 typeTitCk" data-type="type1">招标信息</div>
             </div>
           </div>
-          <div class="typeCon typeConShow">
+          <div class="wow fadeInUp typeCon typeConShow">
               <div class="infoul all">
-                <div class="infoLi">
+                <div class="wow fadeInUp infoLi">
                   <div class="liTitle">
                     <div class="h3 liTit">
                       <div class="">
@@ -93,7 +93,7 @@
                     <a href="" class="btn"><span>申请加入</span></a>
                   </div>
                 </div>
-                <div class="infoLi">
+                <div class="wow fadeInUp infoLi">
                   <div class="liTitle">
                     <div class="h3 liTit">
                       <div class="">
@@ -157,9 +157,9 @@
           </div>
           <div class="typeCon typeCon2">
             <div class="infoul">
-              <div class="title">招标信息</div>
-              <div class="newsType">
-                <a class="newsLi" href="">
+              <div class="wow fadeInUp title">招标信息</div>
+              <div class="wow fadeInUp newsType">
+                <a class="newsLi" href="./joinDetail.html">
                   <div class="timer">
                     <div class="timerData">10</div>
                     <div>24-12</div>
@@ -200,8 +200,8 @@
                   </div>
                 </a>
               </div>
-              <a href="" class="btn"><span>更多</span></a>
-              <div class="inLiCon">
+              <a href="./joinList.html" class="btn"><span>更多</span></a>
+              <div class="wow fadeInUp inLiCon">
                 <div class="title">反舞弊举报通道</div>
                 <div class="liLine"></div>
                 <div><span class="iconfont icon-dianhua"></span>举报热线：024-31875997</div>
@@ -212,18 +212,18 @@
           </div>
         </div>
         <!--  -->
-        <div class="contactUs" id="contactUs">
+        <div class="wow fadeInUp contactUs" id="contactUs">
           <div class="contactCon">
             <div>
-              <div class="title contactUsTit">联系我们</div>
-              <div class="text text1">如您有任何疑问或想了解更多关于我们的服务，请联系我们。</div>
-              <div class="title contactType">联系方式</div>
-              <div class="text">总机:024-31875997</div>
-              <div class="text">传真:024-31875999</div>
-              <div class="text">邮箱:hr@lnzzgroup.com</div>
-              <div class="text">总部地址:辽宁省沈阳市皇姑区北陵大街56号</div>
+              <div class="wow fadeInUp title contactUsTit">联系我们</div>
+              <div class="wow fadeInUp text text1">如您有任何疑问或想了解更多关于我们的服务，请联系我们。</div>
+              <div class="wow fadeInUp title contactType">联系方式</div>
+              <div class="wow fadeInUp text">总机:024-31875997</div>
+              <div class="wow fadeInUp text">传真:024-31875999</div>
+              <div class="wow fadeInUp text">邮箱:hr@lnzzgroup.com</div>
+              <div class="wow fadeInUp text">总部地址:辽宁省沈阳市皇姑区北陵大街56号</div>
             </div>
-            <div><img class="lazy" data-src="./static/images/join/joinC.jpg" data-srcM="./static/images/join/joinC.jpg" alt="" /></div>
+            <div><img class="wow fadeInUp lazy" data-src="./static/images/join/joinC.jpg" data-srcM="./static/images/join/joinC.jpg" alt="" /></div>
           </div>
         </div>
       </div>

src/pages/joinDetail/index.html

@@ -15,19 +15,19 @@
     
     <div class="main">
       <div class="content">
-        <div class="conUp">
+        <div class="wow fadeInUp conUp">
           <span>发稿时间：2024-11-04 16:56:34</span>
           <span class="add">来源：中泽集团</span>
           <span class="num">浏览次数：227</span>
         </div>
-        <div class="conTxt">
+        <div class="wow fadeInUp conTxt">
           <div class="title">2024年集团科技人机对抗项目比选公告</div>
           <div class="text">中泽控股集团有限公司总部2024年集团科技人机对抗项目将于2024年8月2日17时30分开始进行采购项目供应商比选，请接到短信或邮件通知的供应商及时登陆申泽供应链管理平台https://tip.taikang.com下载比选文件。</div>
           <div class="text">请参选应等人务必于【2024年08月12日08时00分】前完成比选应客文件的制作、上传并进行报价。</div>
           <div class="text">请应答人务必使用谷歌或IE(版本要求11及以上)浏览器进行系统登录，请访问中泽供应链管理平台浏览相关操作说明。</div>
           <div class="text textRight">中泽控股集团有限公司总部</div>
         </div>
-        <div class="conDwn">
+        <div class="wow fadeInUp conDwn">
           <div><a href="">上一篇：中泽集团与内蒙古自治区工信厅签署战略合作协议</a></div>
           <div><a href="">下一篇：中泽集团总经理鞠自力出席中国炭素行业协会七届五次会员大会并作报告</a></div>
         </div>