最新改版开发

src/pages/common/css/common.less

@@ -106,6 +106,51 @@ img:not([src]) {
         color: #48A038;
     }
 }
+.btn3{
+    position: relative;
+    width: 240px;
+    height: 60px;
+    box-sizing: border-box;
+    color: #000;
+    display: flex;
+    text-align: center;
+    line-height: 60px;
+    font-size: 18px;
+    transition: all .3s ease-in-out;
+    cursor: pointer;
+    border-radius: 30px;
+    box-sizing: border-box;
+    border: 1px solid #000;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    &::before{
+        content: '';
+        width: 10px;
+        height: 10px;
+        position: absolute;
+        bottom: -10px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: #B81C25;
+        border-radius: 50%;
+        transition: all .3s ease-in-out;
+        z-index: -1;
+    }
+    &>span{
+        // transition: all .3s ease-in-out;
+        transform: rotate(90deg);
+        font-size: 30px;
+        margin-left: 8px;
+    }
+    &:hover{
+        color: #fff;
+        border: 1px solid #B81C25;
+        &::before{
+            transform: translateX(-50%) scale(30);
+        }
+    }
+}
 .btnW{
     color: #fff;
     &:hover{
@@ -186,14 +231,20 @@ header{
         .logo{
             
         }
-        .menu{
-            &>div{
-                &>a{
-                    color: #ffffff;
+        
+        .headerPC{
+            .menu{
+                &>div{
+                    &>a{
+                        color: #ffffff;
+                    }
+                }
+                .menuClicked{
+                    &::before{
+                        background: #fff;
+                    }
                 }
             }
-        }
-        .headerPC{
             .logo{
                 background: url("../images/logoW.png") no-repeat;
                 background-size: 142px 32px;
@@ -258,20 +309,30 @@ header{
         margin: 0 auto;
         &>div{
             display: inline-block;
-            padding: 0 20px;
+            padding: 0 30px;
             position: relative;
             height: 70px;
+            cursor: pointer;
             &>a{
                 line-height: 70px;
                 z-index: 11;
                 transition: all .3s ease;
-                
+                font-size: 16px;
             }
             &:hover{
                 &>a{color: #B81C25;}
             }
         }
         .menuClicked{
+            &::before{
+                content: '';
+                width: calc(100% - 40px);
+                height: 2px;
+                position: absolute;
+                bottom: 0px;
+                left: 20px;
+                background: #B81C25;
+            }
             &>a{
                 color: #B81C25;
             }
@@ -283,10 +344,10 @@ header{
         padding: 15px 0px 15px;
         background: #fff;
         box-shadow: 0px 2px 6px 0px rgba(183,183,183,0.43);
-        border-radius: 8px;
+        // border-radius: 8px;
         z-index: 10;
         width: auto;
-        width: 172px;
+        width: 260px;
         white-space: nowrap;
         left: 50%;
         transform: translateX(-50%) translateY(0%);
@@ -295,6 +356,7 @@ header{
         // opacity: 1;
         display: none;
         text-align: center;
+        font-size: 20px;
         .menuUp{
             width: 100%;
             height: 2px;
@@ -322,7 +384,8 @@ header{
             padding: 15px 0;
             transition: all .3s ease;
             &:hover{
-                color: #B81C25;
+                color: #fff;
+                background: #B81C25;
             }
             &:last-child {
                 margin-bottom: 0;
@@ -556,7 +619,7 @@ footer{
     width: 100%;
     max-width: 1920px;
     margin: 0 auto;
-    background-color: #B81C25;
+    background-color: #f8f8f8;
     padding-top: 80px;
     position: relative;
     .footer{
@@ -569,13 +632,14 @@ footer{
         .footerLeft{
             width: 320px;
             text-align: left;
-            color: #fff;
+            color: #333333;
             margin-right: 100px;
             .footerLogo{
                 width: 291px;
                 height: 64px;
-                background: url('../images/logoBai.png') no-repeat;
+                background: url('../images/logoB.png') no-repeat;
                 background-size: 100% 100%;
+                margin-bottom: 50px;
             }
             .footerLCon1{
                 width: 100%;
@@ -596,10 +660,10 @@ footer{
             .footerLCon2{
                 width: 100%;
                 font-size: 14px;
-                font-weight: bold;
-                margin-top: 40px;
+                // font-weight: bold;
+                margin-top: 20px;
                 span{
-                    opacity: 0.7;
+                    // opacity: 0.7;
                     font-weight: 100;
                 }
                 .txt16{
@@ -659,6 +723,13 @@ footer{
                 }
                 
             }
+            .imgWx{
+                text-align: center;
+                span{
+                    margin-top: 10px;
+                    display: block;
+                }
+            }
             .btnShow{
                 .btnDownTitle{
                     .iconfont{
@@ -680,7 +751,7 @@ footer{
             margin-bottom: 10px;
             margin-right: 20px;
             display: flex;
-            color: #fff;
+            color: #333333;
             justify-content: flex-start;
             .h4{
                 margin-bottom: 20px;
@@ -691,7 +762,7 @@ footer{
             &>div{
                 margin-right: 58px;
                 a{
-                    color: #fff;
+                    color: #333;
                     display: block;
                     span{
                         display: inline-block;
@@ -703,7 +774,7 @@ footer{
                             left: 0px;
                             width: 0%;
                             height: 1px;
-                            background: #fff;
+                            background: #333;
                             transition: all .3s ease-in-out;
                         }
                     }
@@ -787,14 +858,17 @@ footer{
     }
     .footerText{
         width: 100%;
+        max-width: 1300px;
+        margin: 0px auto;
+        border-top: 1px solid #dfdfdf;
         text-align: center;
-        color: #fff;
+        color: #999999;
         font-size: 12px;
         box-sizing: border-box;
         padding:20px 15px;
         opacity: 0.7;
         a{
-            color: #fff;
+            color: #999999;
         }
         br,&>span{
             display: none;
@@ -948,17 +1022,13 @@ footer{
         }
     }
     .btn3{
-        &>a{
-            &:hover{
-                .btnCon{
-                    &>div{
-                        color: #000000;
-                    }
-                    .btnBg{
-                        // border-radius: 24px;
-                    }
-                }
-            }
+        width: 190px;
+        height: 40px;
+        line-height: 40px;
+        font-size: 14px;
+        border-radius: 20px;
+        &>span{
+            font-size: 20px;
         }
     }
     
@@ -1092,10 +1162,10 @@ footer{
                 margin-top: 40px;
                 margin-bottom: 30px;
                 padding-bottom: 15px;
-                border-bottom: 1px solid #ffffff21;
+                border-bottom: 1px solid #dfdfdf;
                 a{
                     width: 60px;
-                    color: #fff;
+                    color: #333333;
                     font-size: 14px;
                     display: inline-block;
                     padding: 15px 0px;
@@ -1111,7 +1181,7 @@ footer{
             }
             .footerRight{
                 width: 100%;
-                color: #FFFFFF;
+                color: #333333;
                 .btnUp{
                     display: block;
                     width: 100%;
@@ -1121,16 +1191,25 @@ footer{
                 .footerLConM{
                     display: block;
                     font-size: 14px;
-                    padding-top: 10px;
+                    margin-bottom: 60px;
                     a{
-                        color: #FFFFFF;
+                        color: #333333;
                         margin-top: 30px;
                         display: block;
                         width: 100%;
                     }
                     div{
-                        color: #FFFFFF;
-                        margin-top: 30px;
+                        color: #333333;
+                    }
+                }
+                .imgWx{
+                    padding-bottom: 30px;
+                    img{
+                        width: 90px;
+                        display: inline-block;
+                    }
+                    span{
+                        margin-top: 5px;
                     }
                 }
             }

src/pages/common/js/Common.js

@@ -36,15 +36,15 @@ export default class Common {
     // window.requestUrl = 'https://www.foton.com.cn';
     this.textAni();
     
-    let btnDownTitle = document.querySelector(".btnDownTitle");
-    let btnDownMenu = document.querySelector(".btnDown");
-    btnDownTitle.addEventListener("click", (e) => {
-      if (btnDownMenu.classList?.contains("btnShow")) {
-        btnDownMenu.classList.remove("btnShow");
-      } else {
-        btnDownMenu.classList.add("btnShow");
-      }
-    });
+    // let btnDownTitle = document.querySelector(".btnDownTitle");
+    // let btnDownMenu = document.querySelector(".btnDown");
+    // btnDownTitle.addEventListener("click", (e) => {
+    //   if (btnDownMenu.classList?.contains("btnShow")) {
+    //     btnDownMenu.classList.remove("btnShow");
+    //   } else {
+    //     btnDownMenu.classList.add("btnShow");
+    //   }
+    // });
     let logo = document.querySelector(".logo");
     logo.addEventListener("click", (e) => {
       window.requestUrl = './index.html';
@@ -57,7 +57,7 @@ export default class Common {
     
     if (anchor) {
       let element = document.getElementById(anchor);
-      element.scrollIntoView({ behavior: 'smooth',block: 'start' });
+      if(element)element.scrollIntoView({ behavior: 'smooth',block: 'start' });
     }
     if(window.location.href.indexOf("intoZz.html?") !== -1){
       

src/pages/common/tpl/footer.tpl

@@ -2,45 +2,39 @@
     <div class="wow fadeIn footer">
         <div class="footerLeft">
             <div class="footerLogo"></div>
-            <div class="footerLCon1"><div>电话：<span>010-65008562</span></div><div>邮编：<span>100020</span></div></div>
+            <!--<div class="footerLCon1"><div>电话：<span>010-65008562</span></div><div>邮编：<span>100020</span></div></div>-->
             <div class="footerLCon2">地址：<span>北京市朝阳区金河东路正大中心北塔28层</span></div>
             <div class="footerLCon2">邮箱：<span class="txt16">zzjt@lnzzgroup.com</span></div>
         </div>
         <div class="footerCenter">
             <div class="footerClick">
-                <a class="h7" href="./intoZz.html"><span>走进中泽</span></a>
+                <a class="h7" href="./index.html"><span>走进中泽</span></a>
                 <span class="icon iconfont icon-arrow-right"></span>
                 <div class="footerShow show1">
-                <a class="h7R" href="./intoZz.html#jtjj"><span>集团简介</span></a>
-                <a class="h7R" href="./intoZz.html#qywh"><span>企业文化</span></a>
-                <a class="h7R" href="./intoZz.html#qyjg"><span>企业架构</span></a>
-                <a class="h7R" href="./intoZz.html#fzlc"><span>发展历程</span></a>
-                <a class="h7R" href="./intoZz.html#ryzz"><span>资质荣誉</span></a>
+                <a class="h7R" href="./index.html#jtjs"><span>集团介绍</span></a>
+                <a class="h7R" href="./index.html#fzlc"><span>发展历程</span></a>
+                <a class="h7R" href="./index.html#qywh"><span>企业文化</span></a>
+                <a class="h7R" href="./index.html#xwdt"><span>新闻动态</span></a>
                 </div>
             </div>
             <div class="footerClick">
                 <a class="h7" href="./product.html"><span>产业布局</span></a>
                 <span class="icon iconfont icon-arrow-right"></span>
-                <div class="footerShow show2"><a class="h7R" href="./productDec1.html"><span>铁合金</span></a>
-                <a class="h7R" href="./productDec2.html"><span>炭素</span></a>
-                <a class="h7R" href="./productDec3.html"><span>钼业</span></a>
-                <a class="h7R" href="./productDec4.html"><span>镍业</span></a>
-                <a class="h7R" href="./productDec5.html"><span>化工</span></a>
-                <a class="h7R" href="./productDec6.html"><span>装备制造</span></a>
-                <a class="h7R" href="./productDec7.html"><span>产业互联网</span></a>
-                <a class="h7R" href="./productDec8.html"><span>金融</span></a>
-                <a class="h7R" href="./productDec9.html"><span>其他</span></a></div>
+                <div class="footerShow show2">
+                <a class="h7R" href="./product.html#hxbk"><span>核心板块</span></a>
+                <a class="h7R" href="./product.html#cyhl"><span>产业互联</span></a>
+                <a class="h7R" href="./product.html#cyml"><span>成员名录</span></a></div>
             </div>
             
             <div class="footerClick">
-                <a class="h7" href="./news.html"><span>新闻中心</span></a>
+                <a class="h7" href="./news.html"><span>新闻动态</span></a>
                 <span class="icon iconfont icon-arrow-right"></span>
                 <div class="footerShow show2"><a class="h7R" href="./news.html#point"><span>集团新闻</span></a>
-                <a class="h7R" href="./news.html#point"><span>前沿资讯</span></a>
-                <a class="h7R" href="./news.html#point"><span>政策引领</span></a>
-                <a class="h7R" href="./news.html#point"><span>研发创新</span></a></div>
+                <a class="h7R" href="./news.html#point"><span>行业资讯</span></a>
+                <a class="h7R" href="./partyBuilding.html"><span>党建工作</span></a>
+                <a class="h7R" href="./socialResponsibility.html"><span>社会责任</span></a></div>
             </div>
-            <div class="footerClick">
+            <!--<div class="footerClick">
                 <a class="h7" href="./partyBuilding.html"><span>党建工作</span></a>
                 <span class="icon iconfont icon-arrow-right"></span>
                 <div class="footerShow show2"><a class="h7R" href="./partyBuilding.html#p1"><span>企业党建</span></a>
@@ -51,49 +45,45 @@
                 <span class="icon iconfont icon-arrow-right"></span>
                 <div class="footerShow show2"><a class="h7R" href="./socialResponsibility.html#p1"><span>社会公益</span></a>
                 <a class="h7R" href="./socialResponsibility.html#p2"><span>绿色转型</span></a></div>
-            </div>
+            </div>-->
             <div class="footerClick">
                 <a class="h7" href="./join.html"><span>加入中泽</span></a>
                 <span class="icon iconfont icon-arrow-right"></span>
                 <div class="footerShow show2"><a class="h7R" href="./join.html#careersInfo"><span>招聘信息</span></a>
-                <a class="h7R" href="./join.html?type=b#careersInfo"><span>招标信息</span></a>
-                <a class="h7R" href="./join.html#contactUs"><span>联系我们</span></a></div>
+                <a class="h7R" href="./join.html?type=b#careersInfo"><span>招标信息</span></a></div>
             </div>
         </div>
         <div class="footerCenterM">
-            <a class="h7" href="./intoZz.html">走进中泽</a>
+            <a class="h7" href="./index.html">走进中泽</a>
             <div></div>
             <a class="h7" href="./product.html">产业布局</a>
             <div></div>
             <a class="h7" href="./news.html">新闻中心</a>
             <div></div>
-            <a class="h7" href="./partyBuilding.html">党建工作</a>
-            <a class="h7" href="./socialResponsibility.html">社会责任</a>
-            <div></div>
             <a class="h7" href="./join.html">加入中泽</a>
         </div>
         <div class="footerRight">
-            <div class="btnUp">旗下企业：</div>
+            <!--<div class="btnUp">旗下企业：</div>
             <div class="btnDown">
                 <div class="btnDownTitle"><span class="tit">旗下企业</span><span class="iconfont icon-xiala"></span></div>
                 <div class="btnDownMenu">
                     <a href="">旗下企业1</a>
                     <a href="">旗下企业2</a>
                 </div>
-            </div>
+            </div>-->
+            
             <div class="footerLConM">
-                <a href="tel:01065008562" class="footerLCon2">电话：010-65008562</a>
-                <div class="footerLCon2">邮编：100020</div>
                 <div class="footerLCon2">地址：北京市朝阳区金河东路正大中心北塔28层</div>
                 <a href="mail:zzjt@lnzzgroup.com" class="footerLCon2">邮箱：zzjt@lnzzgroup.com</a>
             </div>
+            <div class="imgWx"><img src="./static/images/weixin.png" alt=""/><span>微信公众号</span></div>
         </div>
     </div>
-    <div class="footerIcon">
+    <!--<div class="footerIcon">
         <div class="weixin">
             <span class="icon iconfont icon-weixin"></span>
             <div><img src="./static/images/weixin.png" alt=""/></div>
         </div>
-    </div>
+    </div>-->
     <div class="footerText"><a href="">法律声明</a><span></span><a href="">隐私政策</a><br>中泽集团版权所有 ZHONGZE GROUP COPYRIGHT <br>@ 2014-2024 <a href="https://beian.miit.gov.cn/#/Integrated/index">辽ICP备14015583号</a></div>
 </footer>

src/pages/common/tpl/header.tpl

@@ -3,42 +3,35 @@
         <div class="logo"></div>
         <div class="menu">
             <div class="menuOne">
-                <a href="./intoZz.html">走进中泽</a>
+                <a href="./index.html">走进中泽</a>
                 <div class="menuSon">
                     <div class="menuUp"></div>
-                    <a href="./intoZz.html#jtjj"><span>集团简介</span></a>
-                    <a href="./intoZz.html#qywh"><span>企业文化</span></a>
-                    <a href="./intoZz.html#qyjg"><span>企业架构</span></a>
-                    <a href="./intoZz.html#fzlc"><span>发展历程</span></a>
-                    <a href="./intoZz.html#ryzz"><span>资质荣誉</span></a>
+                    <a href="./index.html#jtjs"><span>集团介绍</span></a>
+                    <a href="./index.html#fzlc"><span>发展历程</span></a>
+                    <a href="./index.html#qywh"><span>企业文化</span></a>
+                    <a href="./index.html#xwdt"><span>新闻动态</span></a>
                 </div>
             </div>
             <div class="menuOne">
                 <a href="./product.html">产业布局</a>
                 <div class="menuSon">
                     <div class="menuUp"></div>
-                    <a href="./productDec1.html"><span>铁合金</span></a>
-                    <a href="./productDec2.html"><span>炭素</span></a>
-                    <a href="./productDec3.html"><span>钼业</span></a>
-                    <a href="./productDec4.html"><span>镍业</span></a>
-                    <a href="./productDec5.html"><span>化工</span></a>
-                    <a href="./productDec6.html"><span>装备制造</span></a>
-                    <a href="./productDec7.html"><span>产业互联网</span></a>
-                    <a href="./productDec8.html"><span>金融</span></a>
-                    <a href="./productDec9.html"><span>其他</span></a>
+                    <a href="./product.html#hxbk"><span>核心板块</span></a>
+                    <a href="./product.html#cyhl"><span>产业互联</span></a>
+                    <a href="./product.html#cyml"><span>成员名录</span></a>
                 </div>
             </div>
             <div class="menuOne">
-                <a href="./news.html">新闻中心</a>
+                <a href="./news.html">新闻动态</a>
                 <div class="menuSon">
                     <div class="menuUp"></div>
                     <a href="./news.html#point"><span>集团新闻</span></a>
-                    <a href="./news.html#point"><span>前沿资讯</span></a>
-                    <a href="./news.html#point"><span>政策引领</span></a>
-                    <a href="./news.html#point"><span>研发创新</span></a>
+                    <a href="./news.html#point"><span>行业资讯</span></a>
+                    <a href="./partyBuilding.html"><span>党建工作</span></a>
+                    <a href="./socialResponsibility.html"><span>社会责任</span></a>
                 </div>
             </div>
-            <div class="menuOne">
+            <!--<div class="menuOne">
                 <a href="./partyBuilding.html">党建工作</a>
                 <div class="menuSon">
                     <div class="menuUp"></div>
@@ -53,22 +46,21 @@
                     <a href="./socialResponsibility.html#p1"><span>社会公益</span></a>
                     <a href="./socialResponsibility.html#p2"><span>绿色转型</span></a>
                 </div>
-            </div>
+            </div>-->
             <div class="menuOne">
                 <a href="./join.html">加入中泽</a>
                 <div class="menuSon">
                     <div class="menuUp"></div>
                     <a href="./join.html#careersInfo"><span>招聘信息</span></a>
                     <a href="./join.html?type=b#careersInfo"><span>招标信息</span></a>
-                    <a href="./join.html#contactUs"><span>联系我们</span></a>
                 </div>
             </div>
         </div>
-        <div class="language menuOne">
+        <!--<div class="language menuOne">
             <a class="btn2 btnW" style="display:none;"><span class="iconfont icon-search"></span></a>
             <span class="line" style="display:none"></span>
             <a href="./join.html#contactUs" class="aborder">联系我们</a>
-        </div>
+        </div>-->
     </div>
     <div class="headerMobile">
         <div class="logo"></div>
@@ -82,43 +74,36 @@
         <div class="navFlag">
             <div class="navBg"></div>
             <div class="navMenu">
-                <div>
+                <!--<div>
                     <a class="title" href="./index.html">首页</a>
-                </div>
+                </div>-->
                 <div>
-                    <div class="title"><a href="./intoZz.html">走进中泽</a><span class="iconfont icon-xiala"></span></div>
+                    <div class="title"><a href="./index.html">走进中泽</a><span class="iconfont icon-xiala"></span></div>
                     <div class="menuSon">
-                        <a href="./intoZz.html#jtjj"><span>集团简介</span></a>
-                        <a href="./intoZz.html#qywh"><span>企业文化</span></a>
-                        <a href="./intoZz.html#qyjg"><span>企业架构</span></a>
-                        <a href="./intoZz.html#fzlc"><span>发展历程</span></a>
-                        <a href="./intoZz.html#ryzz"><span>资质荣誉</span></a>
+                        <a href="./index.html#jtjs"><span>集团介绍</span></a>
+                        <a href="./index.html#fzlc"><span>发展历程</span></a>
+                        <a href="./index.html#qywh"><span>企业文化</span></a>
+                        <a href="./index.html#xwdt"><span>新闻动态</span></a>
                     </div>
                 </div>
                 <div>
                     <div class="title"><a href="./product.html">产业布局</a><span class="iconfont icon-xiala"></span></div>
                     <div class="menuSon">
-                        <a href="./productDec1.html"><span>铁合金</span></a>
-                        <a href="./productDec2.html"><span>炭素</span></a>
-                        <a href="./productDec3.html"><span>钼业</span></a>
-                        <a href="./productDec4.html"><span>镍业</span></a>
-                        <a href="./productDec5.html"><span>化工</span></a>
-                        <a href="./productDec6.html"><span>装备制造</span></a>
-                        <a href="./productDec7.html"><span>产业互联网</span></a>
-                        <a href="./productDec8.html"><span>金融</span></a>
-                        <a href="./productDec9.html"><span>其他</span></a>
+                        <a href="./product.html#hxbk"><span>核心板块</span></a>
+                        <a href="./product.html#cyhl"><span>产业互联</span></a>
+                        <a href="./product.html#cyml"><span>成员名录</span></a>
                     </div>
                 </div>
                 <div>
-                    <div class="title"><a href="./news.html">新闻中心</a><span class="iconfont icon-xiala"></span></div>
+                    <div class="title"><a href="./news.html">新闻动态</a><span class="iconfont icon-xiala"></span></div>
                     <div class="menuSon">
                         <a href="./news.html#point"><span>集团新闻</span></a>
-                        <a href="./news.html#point"><span>前沿资讯</span></a>
-                        <a href="./news.html#point"><span>政策引领</span></a>
-                        <a href="./news.html#point"><span>研发创新</span></a>
+                        <a href="./news.html#point"><span>行业资讯</span></a>
+                        <a href="./partyBuilding.html"><span>党建工作</span></a>
+                        <a href="./socialResponsibility.html"><span>社会责任</span></a>
                     </div>
                 </div>
-                <div>
+                <!--<div>
                     <div class="title"><a href="./partyBuilding.html">党建工作</a><span class="iconfont icon-xiala"></span></div>
                     <div class="menuSon">
                         <a href="./partyBuilding.html#p1"><span>企业党建</span></a>
@@ -131,13 +116,12 @@
                         <a href="./socialResponsibility.html#p1"><span>社会公益</span></a>
                         <a href="./socialResponsibility.html#p2"><span>绿色转型</span></a>
                     </div>
-                </div>
+                </div>-->
                 <div>
                     <div class="title"><a href="./join.html">加入中泽</a><span class="iconfont icon-xiala"></span></div>
                     <div class="menuSon">
                         <a href="./join.html#careersInfo"><span>招聘信息</span></a>
                         <a href="./join.html?type=b#careersInfo"><span>招标信息</span></a>
-                        <a href="./join.html#contactUs"><span>联系我们</span></a>
                     </div>
                 </div>
             </div>

src/pages/index/App.js

@@ -8,7 +8,7 @@ import {
 
 export default class App {
     constructor() {
-        let common = new Common()   //导航菜单高亮，0是首页，后面的按顺序添加
+        let common = new Common(document.querySelector('.main'),0)   //导航菜单高亮，0是首页，后面的按顺序添加
         this.isMobile = isMobile()
         
         this.scroll = new LocomotiveScroll();
@@ -105,32 +105,46 @@ export default class App {
     }
     //产品轮播
     news() {
+        let newsType1Li = document.querySelectorAll(".newsType1 .newsLi");
+        let newsType2Li = document.querySelectorAll(".newsType2 .newsLi");
         let mySwiper = new Swiper('.newsSwiper1', {
             autoplay: true,//可选选项，自动滑动
+            allowTouchMove: false,
+            on: {
+                slideChange: function () {
+                  let num=this.activeIndex;
+                  newsType1Li.forEach((item,index)=>{
+                    if(index==num){
+                        item.classList.add("liHight");
+                    }else{
+                        item.classList.remove("liHight");
+                    }
+                  });
+                },
+            },
             pagination: {
                 el: '.swiper-pagination1',
-                clickable :true,
-            }
+                clickable :false,
+            },
         });
         let mySwiper2 = new Swiper('.newsSwiper2', {
-            autoplay: true,//可选选项，自动滑动
+            autoplay: false,//可选选项，自动滑动
+            allowTouchMove: false,
+            on: {
+                slideChange: function () {
+                    let num=this.activeIndex;
+                    newsType2Li.forEach((item,index)=>{
+                      if(index==num){
+                          item.classList.add("liHight");
+                      }else{
+                          item.classList.remove("liHight");
+                      }
+                    }); 
+                },
+            },
             pagination: {
                 el: '.swiper-pagination2',
-                clickable :true,
-            }
-        });
-        let mySwiper3 = new Swiper('.newsSwiper3', {
-            autoplay: true,//可选选项，自动滑动
-            pagination: {
-                el: '.swiper-pagination3',
-                clickable :true,
-            }
-        });
-        let mySwiper4 = new Swiper('.newsSwiper4', {
-            autoplay: true,//可选选项，自动滑动
-            pagination: {
-                el: '.swiper-pagination4',
-                clickable :true,
+                clickable :false,
             }
         });
         let newsCks = document.querySelectorAll(".newsCk");
@@ -138,10 +152,8 @@ export default class App {
         let newSwipers = document.querySelectorAll(".newsCon .swiper");
         
         function masterShow(num){
-            mySwiper.slideTo(0);
-            mySwiper2.slideTo(0);
-            mySwiper3.slideTo(0);
-            mySwiper4.slideTo(0);
+            // mySwiper.slideTo(0);
+            // mySwiper2.slideTo(0);
             newSwipers.forEach((item,index)=>{
                 if(index==num){
                     item.classList.add("newsShowSwiper");
@@ -156,13 +168,23 @@ export default class App {
                     item.classList.remove("newsDivShow");
                 }
             })
+            if(num==0){
+                mySwiper.slideTo(0);
+                mySwiper.autoplay.start();
+                console.log('mySwiper',mySwiper,mySwiper2);
+                
+            }else{
+                mySwiper2.slideTo(0);
+                mySwiper2.autoplay.start();
+                console.log('mySwiper2');
+            }
         }
         
         newsCks.forEach((item,index)=>{
             item.addEventListener("click", (e) => {
                 
-                item.parentNode.querySelectorAll(".newsCk").forEach(item=>{
-                    item.classList.remove("newsShow");
+                item.parentNode.querySelectorAll(".newsCk").forEach(item2=>{
+                    item2.classList.remove("newsShow");
                 });
                 item.classList.add("newsShow");
                 masterShow(index)
@@ -172,20 +194,44 @@ export default class App {
     product(){
         let isMob=this.isMobile;
         let productCks = document.querySelectorAll(".productTit");
+        let productTits=document.querySelector(".productTits");
+        function scrollLeft(num){
+            let leftNum=0;
+            productCks.forEach((item,index)=>{
+                // 获取元素的宽度
+                let width = item.getBoundingClientRect().width;
+
+                // 获取元素的 margin-right
+                let style = window.getComputedStyle(item);
+                let marginRight = parseFloat(style.marginRight);
+                if(index<num){
+                    leftNum+=width+marginRight;
+                }
+            });
+            gsap.to(productTits, {
+                scrollLeft: leftNum, // 目标滚动位置
+                duration: 0.5,   // 动画持续时间（秒）
+                ease: "power1.out" // 缓动效果
+              });
+        }
         let mySwiper = new Swiper('.productSwiper', {
                 autoplay: false,//可选选项，自动滑动
+                autoHeight: true,
                 slidesPerView: "auto",
-                loop: true,
-                loopedSlides: 4,
-                spaceBetween: isMob?0:35,
+                slidesPerGroup : isMob?1:3,
+                spaceBetween: isMob?0:20,
+                allowTouchMove: false,
+                slidesOffsetBefore : isMob?0:310,
+                slidesOffsetAfter : isMob?0:310,
                 navigation: {
                     nextEl: '.btn-nextP1',
-                    // prevEl: '.btn-prevP1',
+                    prevEl: '.btn-prevP1',
                 },
                 on:{
                     slideChange: function(){
                         console.log(this.realIndex);
                         let index0=this.realIndex;
+                        scrollLeft(index0)
                         productCks.forEach((item,index)=>{
                             if(index==index0){
                                 item.classList.add("productCk");
@@ -206,17 +252,123 @@ export default class App {
                 
             });
         });
-        // let firstProductCk = productCks[0]; // 获取第一个元素
-
-        // // 创建一个新的鼠标点击事件
-        // let clickEvent = new MouseEvent('click', {
-        // bubbles: true, // 确保事件会冒泡
-        // cancelable: true // 事件可取消
-        // });
-
-        // // 触发点击事件
-        // firstProductCk.dispatchEvent(clickEvent);
+        //发展历程
+        let historyTits = document.querySelectorAll(".historyTit div");
+        let historySlides = document.querySelectorAll(".historySwiper .swiper-slide");
+        let historySwiperWidth = document.querySelector(".historySwiper").offsetWidth;
+        let allNum = document.querySelector(".allNum");
+        let nowNum = document.querySelector(".nowNum");
+        let fillLine = document.querySelector(".fillLine");
+        allNum.textContent=historySlides.length;
+        let historySwiper = null;
+        if(isMob){
+            historySwiper = new Swiper(".historySwiper", {
+                autoplay: false,
+                rewind:true,
+                initialSlide: historySlides.length-1,
+                navigation: {
+                    nextEl: '.btn-nextH1',
+                    prevEl: '.btn-prevH1',
+                },
+                on:{
+                    slideChange: function(){
+                        nowNum.textContent=this.activeIndex+1;
+                        let numL=historySlides.length-this.activeIndex;
+                        fillLine.style.width=parseFloat(numL/historySlides.length)*100+"%";
+                    },
+                },
+              });
+        }else{
+            historySwiper = new Swiper(".historySwiper", {
+                autoplay: false,
+                rewind:true,
+                slidesPerView: "auto",
+                spaceBetween: 10,
+                freeMode: true,
+                slidesOffsetAfter : 210,
+                initialSlide: historySlides.length-1,
+                navigation: {
+                    nextEl: '.btn-nextH1',
+                    prevEl: '.btn-prevH1',
+                },
+              });
+        }
+        
+        let hisSlides=[];
+        historyTits.forEach((item,index)=>{
+            item.addEventListener("click", (e) => {
+                historyTits.forEach(item2=>{
+                    item2.classList.remove("active");
+                });
+                item.classList.add("active");
+                let year=item.textContent.substring(0,4)*1;
+                hisCk(year)
+            });
+        });
+        historySlides.forEach((item,index)=>{
+            let year=item.querySelector(".hisTime").textContent*1;
+            let obj={
+                year:year,
+                num:index
+            };
+            hisSlides.push(obj);
+        })
 
+        function hisCk(year){
+            let maxYear = null;
+            let num=0;
+            let swNum=0;
+            hisSlides.forEach((item,index)=>{
+                if(item.year>=year&&item.year<year+10){
+                    historySlides[index].classList.add("activeShow");
+                    swNum++;
+                    if (maxYear === null || item.year >= maxYear) {
+                        maxYear = item.year;
+                        num=item.num;
+                    }
+                }else{
+                    historySlides[index].classList.remove("activeShow");
+                }
+            });
+            // historySwiper.slideTo(num,2000,function(e){
+            //     console.log(e,'dddd',maxYear,num,historySwiper.getTranslate());
+            // });
+            if(isMob){
+                historySwiper.slideTo(num);
+                
+            }else{
+                let trnum=num*310;
+                let moveN=0;
+                if(trnum>historySwiperWidth){
+                    moveN=-(trnum-historySwiperWidth)-310;
+                }
+                historySwiper.setTransition(1000);//设定过渡的时间
+                historySwiper.setTranslate(moveN);//设定位移，可以为正数
+            }
+            
+            
+        }
+        //企业文化
+        var corporateSwiper = new Swiper(".corporateSwiper", {
+            effect: "fade",
+            autoplay: false,
+          });
+        let corTits=document.querySelectorAll(".corTits div");
+        let corTxts=document.querySelectorAll(".corTxts div");
+        corTits.forEach((item,index)=>{
+            item.addEventListener("mouseover", (e) => {
+                console.log(8888);
+                corTits.forEach(item2=>{
+                    item2.classList.remove("activS");
+                });
+                corTxts.forEach(item2=>{
+                    item2.classList.remove("activS");
+                });
+                item.classList.add("activS");
+                corTxts[index].classList.add("activS");
+                corporateSwiper.slideTo(index);
+            });
+        })
     }
 
 

src/pages/join/index.html

@@ -17,10 +17,6 @@
       <div class="desCon">
         <div class="wow fadeInUp desTop">
           <div class="title">加入中泽</div>
-          <div class="text">中泽控股集团股份有限公司（简称中泽集团）是以投资并购和企业运营为核心业务的大型民营集团，创建于1995年，总部位于北京。中泽控股集团股份有限公司（简称中泽集团）是以投资并购和企业运营为核心业务的大型民营集团，创建于1995年，总部位于北京。</div>
-        </div>
-        <div class="wow fadeInUp desTopImg">
-          <img class="lazy" data-src="./static/images/join/banner.jpg" data-srcM="./static/images/join/banner.jpg" alt="" />
         </div>
         <!--  -->
         <div class="careersType" id="careersInfo">
@@ -65,7 +61,7 @@
                     </div>
                     <div class="h4">5.公司名称：中泽控股集团有限公司</div>
                     <div class="h4">6.简历投递：hr@lnzzgroup.com</div>
-                    <a href="" class="btn"><span>申请加入</span></a>
+                    <!-- <a href="" class="btn"><span>申请加入</span></a> -->
                   </div>
                   <div class="infoSonLi">
                     <div class="h4">1.岗位名称：律师（公司法务方向)</div>
@@ -90,7 +86,7 @@
                     </div>
                     <div class="h4">5.公司名称：中泽控股集团有限公司</div>
                     <div class="h4">6.简历投递：hr@lnzzgroup.com</div>
-                    <a href="" class="btn"><span>申请加入</span></a>
+                    <!-- <a href="" class="btn"><span>申请加入</span></a> -->
                   </div>
                 </div>
                 <div class="wow fadeInUp infoLi">
@@ -125,7 +121,7 @@
                     </div>
                     <div class="h4">5.公司名称：中泽控股集团有限公司</div>
                     <div class="h4">6.简历投递：hr@lnzzgroup.com</div>
-                    <a href="" class="btn"><span>申请加入</span></a>
+                    <!-- <a href="" class="btn"><span>申请加入</span></a> -->
                   </div>
                   <div class="infoSonLi">
                     <div class="h4">1.岗位名称：律师（公司法务方向)</div>
@@ -150,7 +146,7 @@
                     </div>
                     <div class="h4">5.公司名称：中泽控股集团有限公司</div>
                     <div class="h4">6.简历投递：hr@lnzzgroup.com</div>
-                    <a href="" class="btn"><span>申请加入</span></a>
+                    <!-- <a href="" class="btn"><span>申请加入</span></a> -->
                   </div>
                 </div>
               </div>
@@ -200,7 +196,8 @@
                   </div>
                 </a>
               </div>
-              <a href="./joinList.html" class="btn"><span>更多</span></a>
+              <div class="btnNew"><a href="./joinList.html" class="wow fadeInUp btn3">更多<span class="icon iconfont icon-jiantou"></span></a></div>
+              
               <div class="wow fadeInUp inLiCon">
                 <div class="title">反舞弊举报通道</div>
                 <div class="liLine"></div>
@@ -211,21 +208,7 @@
             </div>
           </div>
         </div>
-        <!--  -->
-        <div class="wow fadeInUp contactUs" id="contactUs">
-          <div class="contactCon">
-            <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">电话:010-65008562</div>
-              <div class="wow fadeInUp text">邮编:100020</div>
-              <div class="wow fadeInUp text">总部地址:北京市朝阳区金河东路正大中心北塔28层</div>
-              <div class="wow fadeInUp text">邮箱:zzjt@lnzzgroup.com</div>
-            </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>
       <div class="goUp">
         <img src="./static/images/join/jt.png" alt=""/>

src/pages/join/index.less

@@ -30,22 +30,8 @@
     width: 100%;
     max-width: 1300px;
     margin: 0px auto;
-    display: flex;
-    text-align: left;
+    text-align: center;
     padding-bottom: 46px;
-    &>div{
-      width: 50%;
-    }
-  }
-  .desTopImg{
-    width: 100%;
-    max-width: 1500px;
-    margin: 0px auto;
-    padding-bottom: 100px;
-    img{
-      width: 100%;
-      display: block;
-    }
   }
   .careersType{
     width: 100%;
@@ -116,7 +102,7 @@
     .typeCon{
         width: 100%;
         background: #f6f6f6;
-        padding-bottom: 120px;
+        padding-bottom: 250px;
         display: none;
         .infoul{
             width: 100%;
@@ -266,6 +252,10 @@
                     border-bottom: 1px dashed #000000;
                     margin-bottom: 95px;
                     padding-top: 45px;
+                    padding-bottom: 100px;
+                    &:last-child{
+                        padding-bottom: 10px;
+                    }
                 }
             }
         }
@@ -294,7 +284,7 @@
                   justify-content: space-between;
                   padding-bottom: 27px;
                   border-bottom: 1px solid #acacac5e;
-                  margin-top: 27px;
+                  padding-top: 27px;
                   &:last-child{
                     border-bottom: 0px solid #ACACAC;
                   }
@@ -340,13 +330,30 @@
                       font-size: 16px;
                     }
                   }
+                  transition: all 0.3s ease-in-out;
+                  &:hover{
+                    background: rgba(184, 28, 37, 0.05);
+                    .newsLiCon{
+                        .liTitle{
+                            color: #B81C25;
+                        }
+                    }
+                    
+                  }
                 }
             }
-            .btn{
+            .btnNew{
+                text-align: center;
+            }
+            .btn3{
+                width: 200px;
+                height: 50px;
+                line-height: 50px;
                 margin: 59px auto 0px;
-                position: relative;
-                left: 50%;
-                transform: translateX(-50%);
+                font-size: 14px;
+                span{
+                    font-size: 26px;
+                }
             }
             .inLiCon{
                 width: 100%;
@@ -625,6 +632,9 @@
                 .btn{
                     margin: 20px auto 0px;
                 }
+                .btn3{
+                    margin: 20px auto 0px;
+                }
                 .inLiCon{
                     justify-content: center;
                     flex-wrap: wrap;

src/pages/product copy/App.js

@@ -0,0 +1,39 @@
+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'),1)   //导航菜单高亮，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();
+            }
+        });
+    }
+
+
+}

src/pages/product copy/index.html

@@ -0,0 +1,138 @@
+<!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="li">
+        <div class="liLeft">
+          <div class="liCon">
+            <div class="wow fadeInUp num">01</div>
+            <div class="wow fadeInUp title">铁合金</div>
+            <div class="wow fadeInUp text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆吉铁和辽阳铁合金，重点分布在内蒙、新疆地区。中泽集团发挥吉林铁合金技术、管理和品牌等综合优势，践行绿色发展理念，在资源配置合理地区以综合年产能120万吨为基础规划远期目标年产1000万吨的铁合金项目。项目采用约60%清洁能源，综合运用新质生产力推动高耗能行业转型升级，致力于打造产能规模最大、工艺技术最领先、综合成本最低、资源利用效率最高的铁合金产业集群。</div>
+            <a href="./productDec1.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+          </div>
+        </div>
+        <div class="wow fadeInUp">
+          <img class="lazy" data-src="./static/images/product/product1.png" data-srcM="./static/images/product/product1.png" alt="" />
+        </div>
+      </div>
+      <div class="li">
+        <div class="liLeft">
+          <div class="liCon">
+            <div class="wow fadeInUp num">02</div>
+            <div class="wow fadeInUp title">炭素</div>
+            <div class="wow fadeInUp text">炭素板块是中泽集团重点建设板块之一，主要企业包括吉林炭素和吉蒙炭素，主要产品包括石墨电极、石墨阳极、炭块、糊类、特种炭制品、炭纤维制品等，广泛应用于冶金、化工、机械、电子、医疗、科研及新材料等领域，产品销往40多个国家和地区。内蒙古乌兰察布地区吉蒙炭素年产8万吨石墨电极，与吉林炭素配套形成国内领先的综合类炭素制品生产基地。</div>
+            <a href="./productDec2.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+          </div>
+        </div>
+        <div class="wow fadeInUp">
+          <img class="lazy" data-src="./static/images/product/product2.png" data-srcM="./static/images/product/product2.png" alt="" />
+        </div>
+      </div>
+      <div class="li">
+        <div class="liLeft">
+          <div class="liCon">
+            <div class="wow fadeInUp num">03</div>
+            <div class="wow fadeInUp title">钼业</div>
+            <div class="wow fadeInUp text">钼业板块是中泽集团聚合旗下大黑山钼业、天池钼业、中泽钼业、中泽新型建材四家企业，以“钼采选+钼化工+钼制品+钼尾矿综合利用”为主线打造的“四位一体”大型钼产业集群。力争通过钼板块的资源集约式发展，释放钼产业综合利用效益，打造国际上规模最大、技术领先的大型钼业集团。钼资源总金属储量134万吨，钼精矿年供应能力4万吨，占国内可流通钼精矿市场份额首位。</div>
+            <a href="./productDec3.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+          </div>
+        </div>
+        <div class="wow fadeInUp">
+          <img class="lazy" data-src="./static/images/product/product3.png" data-srcM="./static/images/product/product3.png" alt="" />
+        </div>
+      </div>
+      <div class="li">
+        <div class="liLeft">
+          <div class="liCon">
+            <div class="wow fadeInUp num">04</div>
+            <div class="wow fadeInUp title">镍业</div>
+            <div class="wow fadeInUp text">镍业板块包括吉恩镍业及其子公司、四平昊融银业。中泽集团依托吉恩镍业产业基础、品牌和技术优势，拓展原料渠道，把握镍产业发展机遇，开辟国际合作路径，致力于实现镍产业规模化、可持续发展。</div>
+            <a href="./productDec4.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+          </div>
+        </div>
+        <div class="wow fadeInUp">
+          <img class="lazy" data-src="./static/images/product/product4.png" data-srcM="./static/images/product/product4.png" alt="" />
+        </div>
+      </div>
+      <div class="li">
+        <div class="liLeft">
+          <div class="liCon">
+            <div class="wow fadeInUp num">05</div>
+            <div class="wow fadeInUp title">化工</div>
+            <div class="wow fadeInUp text">化工板块是中泽集团新的业务板块，主要企业包括金煤化工、新瑞石化，主要产品为乙二醇、草酸、MTBE、乙苯、液化气、正丁烷。中泽集团规划以现有旗下化工企业为基础，逐步打造一个技术先进、产业链完备、市场领先的化工产业集群。</div>
+            <a href="./productDec5.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+          </div>
+        </div>
+        <div class="wow fadeInUp">
+          <img class="lazy" data-src="./static/images/product/product5.png" data-srcM="./static/images/product/product5.png" alt="" />
+        </div>
+      </div>
+      <div class="li">
+        <div class="liLeft">
+          <div class="liCon">
+            <div class="wow fadeInUp num">06</div>
+            <div class="wow fadeInUp title">装备制造</div>
+            <div class="wow fadeInUp text">装备制造领域由朝阳重型、辽宁省机械研究院及其下属子公司组成，是中泽集团机械研发设计、制造基地。</div>
+            <a href="./productDec6.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+          </div>
+        </div>
+        <div class="wow fadeInUp">
+          <img class="lazy" data-src="./static/images/product/product6.png" data-srcM="./static/images/product/product6.png" alt="" />
+        </div>
+      </div>
+      <div class="li">
+        <div class="liLeft">
+          <div class="liCon">
+            <div class="wow fadeInUp num">07</div>
+            <div class="wow fadeInUp title">产业互联网</div>
+            <div class="wow fadeInUp text">产业互联网板块由万联易达及其子公司构成，致力于以人工智能为支撑，推动产业生态智能化升级。以更垂直化、多模态化、行业融合化的方式推出针对性的各类人工智能纵向大模型，为社会全产业提供商品贸易、整车物流、金融等数智化解决方案，促进全产业链协同发展。</div>
+            <a href="./productDec7.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+          </div>
+        </div>
+        <div class="wow fadeInUp">
+          <img class="lazy" data-src="./static/images/product/product7.png" data-srcM="./static/images/product/product7.png" alt="" />
+        </div>
+      </div>
+      <div class="li" id="jinrong">
+        <div class="liLeft">
+          <div class="liCon">
+            <div class="wow fadeInUp num">08</div>
+            <div class="wow fadeInUp title">金融</div>
+            <div class="wow fadeInUp text">金融板块主要企业包括商贸集团、中睿元同、金山岭、深圳君奇，是实现集团投资并购与实体产业双轮驱动发展模式的重要支撑。</div>
+            <a href="./productDec8.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+          </div>
+        </div>
+        <div class="wow fadeInUp">
+          <img class="lazy" data-src="./static/images/product/product8.png" data-srcM="./static/images/product/product8.png" alt="" />
+        </div>
+      </div>
+      <div class="li" id="qita">
+        <div class="liLeft">
+          <div class="liCon">
+            <div class="wow fadeInUp num">09</div>
+            <div class="wow fadeInUp title">其他</div>
+            <div class="wow fadeInUp text">有色金属是国民经济发展的基础材料，中泽集团有色金属板块包括镍、钼、金、银等产业。</div>
+            <a href="./productDec9.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+          </div>
+        </div>
+        <div class="wow fadeInUp">
+          <img class="lazy" data-src="./static/images/product/product9.png" data-srcM="./static/images/product/product9.png" alt="" />
+        </div>
+      </div>
+    </div>
+    <%= require('../common/tpl/footer.tpl') %>
+    <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->
+  </body>
+</html>

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

@@ -0,0 +1,98 @@
+
+//pc端样式
+.main {
+    width: 100%;
+    max-width: 1920px;
+    margin: 0 auto;
+    padding-top: 71px;
+    padding-bottom: 80px;
+}
+.li{
+  width: 100%;
+  display: flex;
+  padding: 160px 0px 60px;
+  &>div{
+    width: 50%;
+    .liCon{
+      width: 650px;
+      text-align: left;
+      box-sizing: border-box;
+      padding-right: 90px;
+      .num{
+        font-family: 'MyFont1';
+        font-weight: bold;
+        font-size: 30px;
+        color: #231F20;
+        margin-bottom: 30px;
+      }
+      .text{
+        color: #9fa3a5;
+        margin-top: 28px;
+        margin-bottom: 76px;
+      }
+    }
+    img{
+      width: 100%;
+      height: 100%;
+      display: block;
+      object-fit: cover;
+    }
+  }
+  .liLeft{
+    display: flex;
+    flex-direction: row-reverse;
+  }
+}
+
+@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-bottom: 30px;
+  }
+  .li{
+    padding: 80px 15px 30px;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    &>div{
+      width: 100%;
+      .liCon{
+        width: 100%;
+        padding-right: 0px;
+        .num {
+          font-size: 20px;
+          margin-bottom: 15px;
+        }
+        .title {
+          font-size: 32px;
+          line-height: 36px;
+        }
+        .text {
+          font-size: 16px;
+          line-height: 30px;
+          margin-top: 18px;
+          margin-bottom: 40px;
+          text-align: justify;
+        }
+      }
+    }
+    .liLeft{
+      margin-bottom: 40px;
+    }
+  }
+}

src/pages/product/App.js

@@ -33,7 +33,69 @@ export default class App {
                 // item.load();
             }
         });
+        this.product();
     }
+    product(){
+        let isMob=this.isMobile;
+        let productCks = document.querySelectorAll(".productTit");
+        let productTits=document.querySelector(".productTits");
+        function scrollLeft(num){
+            let leftNum=0;
+            productCks.forEach((item,index)=>{
+                // 获取元素的宽度
+                let width = item.getBoundingClientRect().width;
 
+                // 获取元素的 margin-right
+                let style = window.getComputedStyle(item);
+                let marginRight = parseFloat(style.marginRight);
+                if(index<num){
+                    leftNum+=width+marginRight;
+                }
+            });
+            gsap.to(productTits, {
+                scrollLeft: leftNum, // 目标滚动位置
+                duration: 0.5,   // 动画持续时间（秒）
+                ease: "power1.out" // 缓动效果
+              });
+        }
+        let mySwiper = new Swiper('.productSwiper', {
+                autoplay: false,//可选选项，自动滑动
+                autoHeight: true,
+                slidesPerView: "auto",
+                slidesPerGroup : isMob?1:3,
+                spaceBetween: isMob?0:20,
+                allowTouchMove: isMob?true:false,
+                slidesOffsetBefore : isMob?0:210,
+                navigation: {
+                    nextEl: '.btn-nextP1',
+                    prevEl: '.btn-prevP1',
+                },
+                on:{
+                    slideChange: function(){
+                        console.log(this.realIndex);
+                        let index0=this.realIndex;
+                        // productTits.scrollLeft=100;
+                        scrollLeft(index0)
+                        productCks.forEach((item,index)=>{
+                            if(index==index0){
+                                item.classList.add("productCk");
+                            }else{
+                                item.classList.remove("productCk");
+                            }
+                        });
+                    },
+                },
+        });
+        productCks.forEach((item,index)=>{
+            item.addEventListener("click", (e) => {
+                item.parentNode.querySelectorAll(".productTit").forEach(item2=>{
+                    item2.classList.remove("productCk");
+                });
+                item.classList.add("productCk");
+                mySwiper.slideToLoop(index);
+                
+            });
+        });
+    }
 
 }

src/pages/product/index.html

@@ -7,6 +7,11 @@
     <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>
 
@@ -14,121 +19,249 @@
     <%= require('../common/tpl/header.tpl') %>
     
     <div class="main">
-      <div class="li">
-        <div class="liLeft">
-          <div class="liCon">
-            <div class="wow fadeInUp num">01</div>
-            <div class="wow fadeInUp title">铁合金</div>
-            <div class="wow fadeInUp text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆吉铁和辽阳铁合金，重点分布在内蒙、新疆地区。中泽集团发挥吉林铁合金技术、管理和品牌等综合优势，践行绿色发展理念，在资源配置合理地区以综合年产能120万吨为基础规划远期目标年产1000万吨的铁合金项目。项目采用约60%清洁能源，综合运用新质生产力推动高耗能行业转型升级，致力于打造产能规模最大、工艺技术最领先、综合成本最低、资源利用效率最高的铁合金产业集群。</div>
-            <a href="./productDec1.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+      <div class="product" id="hxbk">
+        <div class="wow fadeInUp title" data-wow-delay="0.2s">核心板块</div>
+        <div class="wow fadeInUp productCon">
+          <div class="productTits">
+            <div>
+            <div class="productTit productCk">
+              <div>铁合金</div>
+            </div>
+            <div class="productTit">
+              <div>炭素</div>
+            </div>
+            <div class="productTit">
+              <div>钼业</div>
+            </div>
+            <div class="productTit">
+              <div>镍业</div>
+            </div>
+            <div class="productTit">
+              <div>大消费</div>
+            </div>
+            <div class="productTit">
+              <div>产业互联网</div>
+            </div>
+            <div class="productTit">
+              <div>石油化工</div>
+            </div>
           </div>
-        </div>
-        <div class="wow fadeInUp">
-          <img class="lazy" data-src="./static/images/product/product1.png" data-srcM="./static/images/product/product1.png" alt="" />
-        </div>
-      </div>
-      <div class="li">
-        <div class="liLeft">
-          <div class="liCon">
-            <div class="wow fadeInUp num">02</div>
-            <div class="wow fadeInUp title">炭素</div>
-            <div class="wow fadeInUp text">炭素板块是中泽集团重点建设板块之一，主要企业包括吉林炭素和吉蒙炭素，主要产品包括石墨电极、石墨阳极、炭块、糊类、特种炭制品、炭纤维制品等，广泛应用于冶金、化工、机械、电子、医疗、科研及新材料等领域，产品销往40多个国家和地区。内蒙古乌兰察布地区吉蒙炭素年产8万吨石墨电极，与吉林炭素配套形成国内领先的综合类炭素制品生产基地。</div>
-            <a href="./productDec2.html" class="wow fadeInUp btn"><span>查看更多</span></a>
           </div>
-        </div>
-        <div class="wow fadeInUp">
-          <img class="lazy" data-src="./static/images/product/product2.png" data-srcM="./static/images/product/product2.png" alt="" />
-        </div>
-      </div>
-      <div class="li">
-        <div class="liLeft">
-          <div class="liCon">
-            <div class="wow fadeInUp num">03</div>
-            <div class="wow fadeInUp title">钼业</div>
-            <div class="wow fadeInUp text">钼业板块是中泽集团聚合旗下大黑山钼业、天池钼业、中泽钼业、中泽新型建材四家企业，以“钼采选+钼化工+钼制品+钼尾矿综合利用”为主线打造的“四位一体”大型钼产业集群。力争通过钼板块的资源集约式发展，释放钼产业综合利用效益，打造国际上规模最大、技术领先的大型钼业集团。钼资源总金属储量134万吨，钼精矿年供应能力4万吨，占国内可流通钼精矿市场份额首位。</div>
-            <a href="./productDec3.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+          <div class="productConBox">
+            <div class="swiper productSwiper">
+              <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                  <a href="./productDec1.html">
+                    <img class="lazy" data-src="./static/images/product/core1.jpg" data-srcM="./static/images/product/core1.jpg" alt="" />
+                    <div class="slideZ"></div>
+                    <div class="slideCon">
+                        <div class="conTit">铁合金</div>
+                        <div class="text">铁合金板块是中泽集团重要业务板块之一,主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆吉铁和辽阳铁合金，重点分布在内蒙、新疆地区。中泽集团发挥吉林铁合金技术、管理和品牌等综合优势，践行绿色发展理念，在资源配置合理地区以综合年产能120万吨为基础规划远期目标年产1000万吨的铁合金项目。</div>
+                    </div>
+                  </a>
+                </div>
+                <div class="swiper-slide">
+                  <a href="./productDec2.html"><img class="lazy" data-src="./static/images/product/core2.jpg" data-srcM="./static/images/product/core2.jpg" alt="" />
+                    <div class="slideZ"></div>
+                    <div class="slideCon">
+                        <div class="conTit">炭素</div>
+                        <div class="text">主要企业是吉林炭素和吉蒙炭素，主要产品包括石墨电极、石墨阳极、炭块、糊类、特种炭制品、炭纤维制品等，产品销往40多个国家和地区。</div>
+                    </div>
+                  </a>
+                </div>
+                <div class="swiper-slide">
+                  <a href="./productDec3.html"><img class="lazy" data-src="./static/images/product/core3.jpg" data-srcM="./static/images/product/core3.jpg" alt="" />
+                    <div class="slideZ"></div>
+                    <div class="slideCon">
+                      <div class="conTit">钼业</div>
+                      <div class="text">钼业</div>
+                    </div>
+                  </a>
+                </div>
+                <div class="swiper-slide">
+                  <a href="./productDec4.html"><img class="lazy" data-src="./static/images/product/core4.jpg" data-srcM="./static/images/product/core4.jpg" alt="" />
+                    <div class="slideZ"></div>
+                    <div class="slideCon">
+                        <div class="conTit">镍业</div>
+                        <div class="text">镍业</div>
+                    </div>
+                  </a>
+                </div>
+                <div class="swiper-slide">
+                  <a href="./productDec5.html"><img class="lazy" data-src="./static/images/product/core5.jpg" data-srcM="./static/images/product/core5.jpg" alt="" />
+                    <div class="slideZ"></div>
+                    <div class="slideCon">
+                      <div class="conTit">大消费</div>
+                      <div class="text">大消费</div>
+                    </div>
+                  </a>
+                </div>
+                <div class="swiper-slide">
+                  <a href="./productDec6.html"><img class="lazy" data-src="./static/images/product/core6.jpg" data-srcM="./static/images/product/core6.jpg" alt="" />
+                    <div class="slideZ"></div>
+                    <div class="slideCon">
+                      <div class="conTit">产业互联网</div>
+                      <div class="text">产业互联网</div>
+                    </div>
+                  </a>
+                </div>
+                <div class="swiper-slide">
+                  <a href="./productDec7.html"><img class="lazy" data-src="./static/images/product/core7.jpg" data-srcM="./static/images/product/core7.jpg" alt="" />
+                    <div class="slideZ"></div>
+                    <div class="slideCon">
+                      <div class="conTit">石油化工</div>
+                      <div class="text">石油化工</div>
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
-        <div class="wow fadeInUp">
-          <img class="lazy" data-src="./static/images/product/product3.png" data-srcM="./static/images/product/product3.png" alt="" />
-        </div>
-      </div>
-      <div class="li">
-        <div class="liLeft">
-          <div class="liCon">
-            <div class="wow fadeInUp num">04</div>
-            <div class="wow fadeInUp title">镍业</div>
-            <div class="wow fadeInUp text">镍业板块包括吉恩镍业及其子公司、四平昊融银业。中泽集团依托吉恩镍业产业基础、品牌和技术优势，拓展原料渠道，把握镍产业发展机遇，开辟国际合作路径，致力于实现镍产业规模化、可持续发展。</div>
-            <a href="./productDec4.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+          <div class="swiper-page">
+            <!-- 如果需要分页器 -->
+            <div class="btn-prev btn-prevP1"><span class="icon iconfont icon-jiantou"></span></div>
+            <div class="btn-next btn-nextP1"><span class="icon iconfont icon-jiantou"></span></div>
           </div>
         </div>
-        <div class="wow fadeInUp">
-          <img class="lazy" data-src="./static/images/product/product4.png" data-srcM="./static/images/product/product4.png" alt="" />
-        </div>
       </div>
-      <div class="li">
-        <div class="liLeft">
-          <div class="liCon">
-            <div class="wow fadeInUp num">05</div>
-            <div class="wow fadeInUp title">化工</div>
-            <div class="wow fadeInUp text">化工板块是中泽集团新的业务板块，主要企业包括金煤化工、新瑞石化，主要产品为乙二醇、草酸、MTBE、乙苯、液化气、正丁烷。中泽集团规划以现有旗下化工企业为基础，逐步打造一个技术先进、产业链完备、市场领先的化工产业集群。</div>
-            <a href="./productDec5.html" class="wow fadeInUp btn"><span>查看更多</span></a>
-          </div>
-        </div>
-        <div class="wow fadeInUp">
-          <img class="lazy" data-src="./static/images/product/product5.png" data-srcM="./static/images/product/product5.png" alt="" />
+      <div class="wow fadeInUp Industrial" id="cyhl">
+        <img class="wow fadeInUp lazy" data-wow-delay="0.2s" data-src="./static/images/product/Industrial1.png" data-srcM="./static/images/product/Industrial1m.png" alt="" />
+        <div>
+          <img class="wow fadeInUp lazy" data-wow-delay="0.4s" data-src="./static/images/product/Industrial2.png" data-srcM="./static/images/product/Industrial2m.png" alt="" />
+          <img class="wow fadeInUp lazy" data-wow-delay="0.6s" data-src="./static/images/product/Industrial3.png" data-srcM="./static/images/product/Industrial3m.png" alt="" />
+          <img class="wow fadeIn lazy" data-wow-delay="0.8s" data-src="./static/images/product/Industrial4.png" data-srcM="./static/images/product/Industrial4m.png" alt="" />
         </div>
       </div>
-      <div class="li">
-        <div class="liLeft">
-          <div class="liCon">
-            <div class="wow fadeInUp num">06</div>
-            <div class="wow fadeInUp title">装备制造</div>
-            <div class="wow fadeInUp text">装备制造领域由朝阳重型、辽宁省机械研究院及其下属子公司组成，是中泽集团机械研发设计、制造基地。</div>
-            <a href="./productDec6.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+      <div class="member" id="cyml">
+        <div class="wow fadeInUp title" data-wow-delay="0.2s">成员名录</div>
+        <div class="wow fadeInUp memberCon">
+          <div class="memberLi">
+            <img src="./static/images/product/member1.jpg" alt=""/>
+            <div class="liTit">吉铁铁合金有限公司</div>
+            <div class="upDiv">
+              <div class="upDivTit">吉铁铁合金有限公司</div>
+              <div class="text">集生产经营、研发设 计、设备制造等于一体的全国铁合金行业龙头企业</div>
+              <a href=""></a>
+            </div>
           </div>
-        </div>
-        <div class="wow fadeInUp">
-          <img class="lazy" data-src="./static/images/product/product6.png" data-srcM="./static/images/product/product6.png" alt="" />
-        </div>
-      </div>
-      <div class="li">
-        <div class="liLeft">
-          <div class="liCon">
-            <div class="wow fadeInUp num">07</div>
-            <div class="wow fadeInUp title">产业互联网</div>
-            <div class="wow fadeInUp text">产业互联网板块由万联易达及其子公司构成，致力于以人工智能为支撑，推动产业生态智能化升级。以更垂直化、多模态化、行业融合化的方式推出针对性的各类人工智能纵向大模型，为社会全产业提供商品贸易、整车物流、金融等数智化解决方案，促进全产业链协同发展。</div>
-            <a href="./productDec7.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+          <div class="memberLi">
+            <img src="./static/images/product/member2.jpg" alt=""/>
+            <div class="liTit">吉林炭素有限公司</div>
+            <div class="upDiv">
+              <div class="upDivTit">吉林炭素有限公司</div>
+              <div class="text">产品主要包括石墨电极、石墨阳极、炭块、糊类、特种炭制品、炭纤维制品等，广泛应用于冶金、化工、机械、电子、医疗及新材料等领域</div>
+              <a href=""></a>
+            </div>
           </div>
-        </div>
-        <div class="wow fadeInUp">
-          <img class="lazy" data-src="./static/images/product/product7.png" data-srcM="./static/images/product/product7.png" alt="" />
-        </div>
-      </div>
-      <div class="li" id="jinrong">
-        <div class="liLeft">
-          <div class="liCon">
-            <div class="wow fadeInUp num">08</div>
-            <div class="wow fadeInUp title">金融</div>
-            <div class="wow fadeInUp text">金融板块主要企业包括商贸集团、中睿元同、金山岭、深圳君奇，是实现集团投资并购与实体产业双轮驱动发展模式的重要支撑。</div>
-            <a href="./productDec8.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+          <div class="memberLi">
+            <img src="./static/images/product/member3.jpg" alt=""/>
+            <div class="liTit">吉林吉恩镍业股份有限公司</div>
+            <div class="upDiv">
+              <div class="upDivTit">吉林吉恩镍业股份有限公司</div>
+              <div class="text">集采矿、选矿、冶炼、精炼、化工于一体的大型镍、铜、钴有色金属生产加工企业。</div>
+              <a href=""></a>
+            </div>
           </div>
-        </div>
-        <div class="wow fadeInUp">
-          <img class="lazy" data-src="./static/images/product/product8.png" data-srcM="./static/images/product/product8.png" alt="" />
-        </div>
-      </div>
-      <div class="li" id="qita">
-        <div class="liLeft">
-          <div class="liCon">
-            <div class="wow fadeInUp num">09</div>
-            <div class="wow fadeInUp title">其他</div>
-            <div class="wow fadeInUp text">有色金属是国民经济发展的基础材料，中泽集团有色金属板块包括镍、钼、金、银等产业。</div>
-            <a href="./productDec9.html" class="wow fadeInUp btn"><span>查看更多</span></a>
+          <div class="memberLi">
+            <img src="./static/images/product/member4.jpg" alt=""/>
+            <div class="liTit">吉林大黑山钼业股份有限公司</div>
+            <div class="upDiv">
+              <div class="upDivTit">吉林大黑山钼业股份有限公司</div>
+              <div class="text">集钼金属采矿、选矿、碎石骨料加工为一体的综合性矿山企业</div>
+              <a href=""></a>
+            </div>
           </div>
-        </div>
-        <div class="wow fadeInUp">
-          <img class="lazy" data-src="./static/images/product/product9.png" data-srcM="./static/images/product/product9.png" alt="" />
+          <div class="memberLi">
+            <img src="./static/images/product/member5.jpg" alt=""/>
+            <div class="liTit">吉林中泽钼业有限公司</div>
+            <div class="upDiv">
+              <div class="upDivTit">吉林中泽钼业有限公司</div>
+              <div class="text">产品主要为氧化钼、钼铁、钼酸铵、高纯氧化钼等。</div>
+              <a href=""></a>
+            </div>
+          </div>
+          <div class="memberLi">
+            <img src="./static/images/product/member6.jpg" alt=""/>
+            <div class="liTit">万联易达物流科技有限公司</div>
+            <div class="upDiv">
+              <div class="upDivTit">万联易达物流科技有限公司</div>
+              <div class="text">以大宗商品交易和整车物流服务为纽带,以人工智能为支撑的产业互联网公司。</div>
+              <a href=""></a>
+            </div>
+          </div>
+          <div class="memberLi">
+            <img src="./static/images/product/member7.jpg" alt=""/>
+            <div class="liTit">通辽金煤化工有限公司</div>
+            <div class="upDiv">
+              <div class="upDivTit">通辽金煤化工有限公司</div>
+              <div class="text">主要产品包括煤制乙二醇、草酸、催化剂、完全生物降解塑料等</div>
+              <a href=""></a>
+            </div>
+          </div>
+          <div class="memberLi">
+            <img src="./static/images/product/member8.jpg" alt=""/>
+            <div class="liTit">辽宁省机械研究院有限公司</div>
+            <div class="upDiv">
+              <div class="upDivTit">辽宁省机械研究院有限公司</div>
+              <div class="text">主营科研业务为机械轻量化 设计、智能装备及大宗固废综合利用系统等。</div>
+              <a href=""></a>
+            </div>
+          </div>
+          <div class="memberLi">
+            <img src="./static/images/product/member9.jpg" alt=""/>
+            <div class="liTit">吉林卓创新材料有限公司</div>
+            <div class="upDiv">
+              <div class="upDivTit">吉林卓创新材料有限公司</div>
+              <div class="text">主要生产羰基铁粉、羰基镍粉等新材料产品。</div>
+              <a href=""></a>
+            </div>
+          </div>
+          <div class="memberLi">
+            <img src="./static/images/product/member10.jpg" alt=""/>
+            <div class="liTit">吉林中泽新型建材有限公司</div>
+            <div class="upDiv">
+              <div class="upDivTit">吉林中泽新型建材有限公司</div>
+              <div class="text">主营蒸压加气混凝土砌块、板材、高性能无机石等系列绿色建材产品。</div>
+              <a href=""></a>
+            </div>
+          </div>
+          <div class="memberLi">
+            <img src="./static/images/product/member11.jpg" alt=""/>
+            <div class="liTit">朝阳重型机器有限公司</div>
+            <div class="upDiv">
+              <div class="upDivTit">朝阳重型机器有限公司</div>
+              <div class="text">公司成立于1959年，是集研发设计、设备制造、安装服务、进出口商务、物流及技术咨询于一体的综合性装备制造企业。</div>
+              <a href=""></a>
+            </div>
+          </div>
+          <div class="memberLi">
+            <img src="./static/images/product/member12.jpg" alt=""/>
+            <div class="liTit">黑龙江新瑞石油化工有限公司</div>
+            <div class="upDiv">
+              <div class="upDivTit">黑龙江新瑞石油化工有限公司</div>
+              <div class="text">主要产品为甲基叔丁基醚（MTBE）、乙苯、液化气、正丁烷等。</div>
+              <a href=""></a>
+            </div>
+          </div>
+          <div class="memberLi">
+            <img src="./static/images/product/member13.jpg" alt=""/>
+            <div class="liTit">吉林市神舟炭纤维有限责任公司</div>
+            <div class="upDiv">
+              <div class="upDivTit">吉林市神舟炭纤维有限责任公司</div>
+              <div class="text">主要产品有聚丙烯睛基碳纤维、平纹碳布、斜纹碳布，主要应用于国防军工和民用领域。</div>
+              <a href=""></a>
+            </div>
+          </div>
+          <div class="memberLi">
+            <!-- <img src="./static/images/product/member1.png" alt=""/> -->
+            <div class="liTit">沈阳中泽镁材料研究院有限公司</div>
+            <div class="upDiv">
+              <div class="upDivTit">沈阳中泽镁材料研究院有限公司</div>
+              <div class="text">以镁为主体的金属制取、加工及高性能材料领域的新技术开发。</div>
+              <a href=""></a>
+            </div>
+          </div>
+          
         </div>
       </div>
     </div>

src/pages/product/index.less

@@ -3,44 +3,268 @@
 .main {
     width: 100%;
     max-width: 1920px;
+    min-height: 100vh;
     margin: 0 auto;
     padding-top: 71px;
-    padding-bottom: 80px;
+    padding-bottom: 30px;
 }
-.li{
+.product{
   width: 100%;
-  display: flex;
-  padding: 160px 0px 60px;
-  &>div{
-    width: 50%;
-    .liCon{
-      width: 650px;
-      text-align: left;
-      box-sizing: border-box;
-      padding-right: 90px;
-      .num{
-        font-family: 'MyFont1';
-        font-weight: bold;
-        font-size: 30px;
-        color: #231F20;
-        margin-bottom: 30px;
+  text-align: center;
+  padding: 125px 0px 110px;
+  &>.title{
+    text-align: left;
+    width: 100%;
+    max-width: 1300px;
+    margin: 0 auto;
+  }
+  .productCon{
+    margin: 60px auto 0px;
+    width: 100%;
+    .productTits{
+      width: 100%;
+      display: none;
+      &>div{
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        &>div{
+          width: 144px;
+          height: 146px;
+          border-radius: 8px;
+          color: #231F20;
+          padding-top: 20px;
+          box-sizing: border-box;
+          cursor: pointer;
+          transition: all .3s ease-in-out;
+          div{
+            margin-bottom: 30px;
+          }
+          
+        }
+        .productCk{
+          color: #B81C25;
+          font-weight: bold;
+        }
+      }
+      
+    }
+    .productConBox{
+      width: 100%;
+      height: 542px;
+      margin-top: 40px;
+      overflow: hidden;
+      &>div{
+        width: 100%;
+        height: 100%;
+      }
+      .swiper-slide{
+        width: 413px;
+        transition: width .3s ease-in-out;
+        overflow: hidden;
+        transform-origin: center;
+        img {
+          display: block;
+          width: auto;
+          height: 100%;
+          object-fit: cover;
+          position: relative;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+        .slideZ{
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          // background: url(./images/productz.png) no-repeat bottom;
+          background-size: 100%;
+          display: none;
+        }
+        .slideCon{
+          position: absolute;
+          width: 100%;
+          bottom: 0px;
+          left: 0;
+          text-align: center;
+          color: #fff;
+          box-sizing: border-box;
+          background-color: #b81c25;
+          height: 80px;
+          transition: all .3s ease-in-out;
+          .conTit{
+            font-size: 24px;
+            height: 80px;
+            line-height: 80px;
+          }
+          .text{
+            width: 100%;
+            line-height: 40px;
+            font-size: 20px;
+            display: none;
+            box-sizing: border-box;
+            padding: 0px 30px;
+            text-align: justify;
+          }
+          
+        }
+        &:hover{
+          
+          .slideCon{
+            height: 465px;
+            background-color: rgba(184, 28, 37, 0.8);
+            .text{
+              display: block;
+            }
+          }
+        }
+      }
+    }
+    .swiper-page{
+      width: 100%;
+      max-width: 1300px;
+      margin: 0px auto;
+      margin-top: 80px;
+      position: relative;
+      height: 60px;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      .btn-prev,.btn-next{
+        width: 60px;
+        height: 60px;
+        text-align: center;
+        color: #000;
+        cursor: pointer;
+        border-radius: 60px;
+        line-height: 60px;
+        box-sizing: border-box;
+        border: 1px solid #000;
+        transition: all .3s ease-in-out;
+        span{
+          font-size: 34px;
+          display: inline-block;
+          transform: rotate(90deg);
+        }
+        &:hover{
+          color: #fff;
+          background: #b81c25;
+          border: 1px solid #b81c25;
+        }
+      }
+      .btn-prev{
+        margin-right: 30px;
+        span{
+          transform: rotate(-90deg);
+        }
       }
-      .text{
-        color: #9fa3a5;
-        margin-top: 28px;
-        margin-bottom: 76px;
+      .btn-next{
+      }
+      .swiper-button-disabled{
+        cursor: not-allowed;
+        opacity: 0.6;
+        &:hover{
+          color: #000;
+          background: #fff;
+          border: 1px solid #000;
+        }
       }
     }
+  }
+}
+.Industrial{
+  width: 100%;
+  position: relative;
+  background: #f8f8f8;
+  img{
+    width: 100%;
+    display: block;
+  }
+  &>div{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
     img{
+      position: absolute;
       width: 100%;
-      height: 100%;
-      display: block;
-      object-fit: cover;
+      top: 0px;
+      left: 0px;
     }
   }
-  .liLeft{
+}
+.member{
+  width: 100%;
+  text-align: center;
+  margin: 0px auto;
+  max-width: 1300px;
+  padding: 125px 0px 110px;
+  .memberCon{
+    width: 100%;
     display: flex;
-    flex-direction: row-reverse;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-top: 40px;
+    img{
+      width: auto;
+      height: 144px;
+    }
+    .memberLi{
+      width: calc( 50% - 20px);
+      margin-top: 40px;
+      height: 300px;
+      box-sizing: border-box;
+      border: 1px solid #ebebeb;
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-content: center;
+      .liTit{
+        width: 100%;
+        font-size: 20px;
+        color: #333333;
+      }
+      .upDiv{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: #B81C25;
+        color: #fff;
+        box-sizing: border-box;
+        padding:35px 40px;
+        top: 0px;
+        left: 0px;
+        opacity: 0;
+        transition: all 0.3s ease-in-out;
+        .upDivTit{
+          font-size: 20px;
+          margin-bottom: 20px;
+        }
+        .text{
+          font-size: 16px;
+          line-height: 24px;
+        }
+        a{
+          width: 54px;
+          height: 54px;
+          display: block;
+          position: absolute;
+          bottom: 40px;
+          left: 50%;
+          transform: translateX(-50%);
+          background: url(./images/aicon.png) no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      &:hover{
+        .upDiv{
+          opacity: 1;
+        }
+      }
+    }
   }
 }
 
@@ -65,34 +289,164 @@
     padding-top: 61px;
     padding-bottom: 30px;
   }
-  .li{
-    padding: 80px 15px 30px;
-    flex-wrap: wrap;
+  .product{
+    padding: 100px 15px;
     box-sizing: border-box;
-    &>div{
-      width: 100%;
-      .liCon{
+    &>.text{
+      margin: 30px auto 0;
+    }
+    .productCon{
+      margin: 40px auto 0px;
+      .productTits{
         width: 100%;
-        padding-right: 0px;
-        .num {
-          font-size: 20px;
-          margin-bottom: 15px;
+        overflow-x: scroll;
+        display: block;
+        &::-webkit-scrollbar{
+          -webkit-appearance: none;
+          width: 0px;
+          height: 0px;
         }
-        .title {
-          font-size: 32px;
-          line-height: 36px;
+        
+        // &::-webkit-scrollbar:horizontal{
+        //   width: 2px;
+        //   height: 100%;
+        //   background: #fff;
+        // }
+        &::-webkit-scrollbar-thumb{
+          width: 0px;
+          height: 0px;
+          background: #B81C25;
         }
-        .text {
-          font-size: 16px;
-          line-height: 30px;
-          margin-top: 18px;
-          margin-bottom: 40px;
-          text-align: justify;
+        &>div{
+          width: 540px;
+          justify-content: flex-start;
+          &>div{
+            width: auto;
+            height: auto;
+            padding-top: 0px;
+            padding-right: 20px;
+            position: relative;
+            margin-right: 20px;
+            &:last-child{
+              padding-right: 0px;
+              margin-right: 0px;
+              &::before{
+                display: none;
+              }
+            }
+            &::before{
+              content: '';
+              position: absolute;
+              right: 0px;
+              top: 4px;
+              width: 1px;
+              height: 13px;
+              background: #999;
+              transform: rotate(20deg);
+            }
+            div{
+              margin-bottom: 0px;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+      .productConBox{
+        margin-top: 35px;
+        height: auto;
+        &>div{
+          height: auto;
+        }
+        .swiper-slide{
+          width: 100%;
+          height: auto;
+          &:hover{
+            .slideCon{
+              height: auto;
+              background: #B81C25;
+            }
+            
+          }
+          img{
+            width: 100%;
+            height: auto;
+          }
+          .slideZ{
+            display: none;
+          }
+          .slideCon{
+            position: relative;
+            color: #231F20;
+            display: block;
+            height: auto;
+            background: #B81C25;
+            color: #fff;
+            opacity: 1;
+            padding: 20px 0px;
+            .conTit{
+              display: none;
+            }
+            .text {
+              display: block;
+              line-height: 30px;
+              font-size: 16px;
+              padding: 0px 10px;
+            }
+          }
+        }
+      }
+      .swiper-page{
+        margin-top: 40px;
+        height: 40px;
+        justify-content: center;
+        display: none;
+        .btn-prev,.btn-next{
+          width: 40px;
+          height: 40px;
+          border-radius: 40px;
+          line-height: 40px;
+          span{
+            font-size: 26px;
+          }
         }
       }
     }
-    .liLeft{
-      margin-bottom: 40px;
+  }
+  .member{
+    padding: 100px 0px 40px;
+    .memberCon{
+      margin-top: 20px;
+      padding: 0px 15px;
+      box-sizing: border-box;
+      img{
+        width: auto;
+        height: 72px;
+      }
+      .memberLi{
+        margin-top: 20px;
+        width: 100%;
+        height: 165px;
+        .liTit{
+          font-size: 16px;
+        }
+        .upDiv{
+          padding: 15px 15px;
+          .upDivTit{
+            font-size: 16px;
+            margin-bottom: 10px;
+          }
+          .text{
+            font-size: 12px;
+            line-height: 20px;
+          }
+          a{
+            width: 32px;
+            height: 32px;
+            bottom: 15px;
+          }
+        }
+      }
     }
   }
+  
 }

src/pages/socialResponsibility/App.js

@@ -5,22 +5,45 @@ import {
     isMobile
 } from '../common/js/utils'
 // const BASEURL = 'http://192.168.1.33:9100';
-const BASEURL = 'http://localhost:3002/api';
-const pageSize = 5;
+// 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()
         this.num = 0;
-        this.bindDom();
+        //
+        
+        // 图片及视频资源懒加载。防止阻塞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.bindDom();
         // this.fold()
         // 获取当前链接的 hash 部分
         // 监听 hashchange 事件
-        window.addEventListener('hashchange', ()=>this.handleHashChange());
+        // window.addEventListener('hashchange', ()=>this.handleHashChange());
 
         // 如果需要在页面加载时也获取一次当前 hash
-        this.handleHashChange();
+        // this.handleHashChange();
        
     }
     // 定义一个函数来处理 hash 变化

src/pages/socialResponsibility/index.html

@@ -15,24 +15,16 @@
 <body>
   <%= require('../common/tpl/header.tpl') %>
     <div class="main">
-      <div class="content">
-        <div class="banner_box">
-          <div class="news_banner">
-            <div class="news_content">
-              <div class="cont1 wow fadeInUp">社会责任</div>
-              <div class="cont2 wow fadeInUp">
-                自成立以来，中泽集团不断发展壮大，集团和各级企业在致力于区域经济发展和行业振兴的同时，始终不忘回报社会，用实际行动配合各级政府和组织，主动参与社会实践和公益活动，妥善解决就业问题，热心助力慈善事业，积极投入抢险救灾，为建设和谐社会做出了积极的贡献，彰显了民营企业的社会责任与时代担当，产生了良好的社会声誉。
-              </div>
-            </div>
-            <img class="wow fadeInUp" src="./static/images/partyBuilding/big.png" alt="" />
+      <div class="wow fadeInUp con">
+        <img class="lazy" data-src="./static/images/partyBuilding/socialResponsibility.jpg" data-srcM="./static/images/partyBuilding/socialResponsibilitym.jpg" alt="" />
+        <div class="conDiv">
+          <div class="title">社会责任</div>
+          <div class="text">
+            自成立以来，中泽集团不断发展壮大，集团和各级企业在致力于区域经济发展和行业振兴的同时，始终不忘回报社会，用实际行动配合各级政府和组织，主动参与社会实践和公益活动，妥善解决就业问题，热心助力慈善事业，积极投入抢险救灾，为建设和谐社会做出了积极的贡献，彰显了民营企业的社会责任与时代担当，产生了良好的社会声誉。
           </div>
         </div>
-        <div class="tabs_box" id="tab">
-          <div class="tabs_li tabs_lis" data-id="p1">社会公益</div>
-          <div class="tabs_li" data-id="p2">绿色转型</div>
-        </div>
       </div>
-      <div class="news_ul">
+      <div class="wow fadeInUp news_ul">
         <div class="news_list">
           <div class="news_li">
             <div class="li_left">
@@ -150,63 +142,6 @@
           </a>
         </div>
       </div>
-      <div class="typeCon">
-        <div class="infoul">
-          <div class="infoLi">
-            <div class="liTitle">
-              <div class="h3 liTit">
-                <div class="liTitMove">
-                  <div>社会责任战略规划</div>
-                </div>
-              </div>
-              <div class="button">
-                <div class="btnjbg"></div>
-              </div>
-            </div>
-            <div class="infoSonLi">
-              <div class="text">
-                <div>《集团党建工作考核办法》中设置“社会价值”一级考核指标，细化为“社会责任认可度”二级指标，“强化社会担当”和“将社会责任融入生产经营过程”三级指标，以及 4
-                  个四级指标，督导企业形成履行社会责任特色做法、形成品牌，社会责任履行情况得到外界认可。</div>
-              </div>
-            </div>
-          </div>
-          <div class="infoLi">
-            <div class="liTitle">
-              <div class="h3 liTit">
-                <div class="liTitMove">
-                  <div>社会责任价值观</div>
-                </div>
-              </div>
-              <div class="button">
-                <div class="btnjbg"></div>
-              </div>
-            </div>
-            <div class="infoSonLi">
-              <div class="text">
-                <div>贯彻落实创新、协调、绿色、开放、共享的发展理念，统筹推进“五位一体”总体布局要求，强化集团及控股企业社会责任管理，促进经济、社会、环境的和谐与可持续发展。</div>
-              </div>
-            </div>
-          </div>
-          <div class="infoLi">
-            <div class="liTitle">
-              <div class="h3 liTit">
-                <div class="liTitMove">
-                  <div>制定《社会责任管理指引》</div>
-                </div>
-              </div>
-              <div class="button">
-                <div class="btnjbg"></div>
-              </div>
-            </div> 
-            <div class="infoSonLi">
-              <div class="text">
-                <div>根据公司法等相关法律法规以及集团实际，参考国际国内各类标准，制定并印发了《社会责任管理指引》；结合十八大以来党和国家的新思想、新论断，对照《中国企业社会责任报告指南基础框架》4.0 版，对《社会责任管理指引》进行修订。《社会责任管理指引》明确了集团及控股企业对国民经济和社会发展，资源节约和环境保护，以及股东、债权人、员工、客户、合作者、政府和社区等利益相关者所应承担的经济、法律、道德与慈善等责任。
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
 
     </div>
     <%= require('../common/tpl/footer.tpl') %>