修改反馈

src/pages/common/css/common.less

@@ -356,7 +356,7 @@ header{
         // opacity: 1;
         display: none;
         text-align: center;
-        font-size: 20px;
+        font-size: 18px;
         .menuUp{
             width: 100%;
             height: 2px;
@@ -381,11 +381,18 @@ header{
         }
         a{
             display: block;
-            padding: 15px 0;
+            padding: 9px 0;
             transition: all .3s ease;
+            span{
+                transition: all .3s ease;
+                display: inline-block;
+            }
             &:hover{
-                color: #fff;
                 background: #B81C25;
+                span{
+                    color: #fff;
+                    transform: translateY(-3px);
+                }
             }
             &:last-child {
                 margin-bottom: 0;
@@ -626,18 +633,17 @@ footer{
         width: 100%;
         max-width: 1300px;
         margin: 0px auto;
-        font-size: 14px;
+        font-size: 16px;
         display: flex;
-        justify-content: flex-start;
+        justify-content: space-between;
         .footerLeft{
-            width: 320px;
+            width: 340px;
             text-align: left;
             color: #333333;
-            margin-right: 100px;
             .footerLogo{
                 width: 291px;
                 height: 64px;
-                background: url('../images/logoB.png') no-repeat;
+                background: url('../images/logoB2.png') no-repeat;
                 background-size: 100% 100%;
                 margin-bottom: 50px;
             }
@@ -648,7 +654,7 @@ footer{
                 justify-content: space-between;
                 &>div{
                     display: inline-block;
-                    font-size: 14px;
+                    font-size: 16px;
                     font-weight: bold;
                     span{
                         opacity: 0.7;
@@ -659,7 +665,7 @@ footer{
             }
             .footerLCon2{
                 width: 100%;
-                font-size: 14px;
+                font-size: 16px;
                 // font-weight: bold;
                 margin-top: 20px;
                 span{
@@ -746,13 +752,12 @@ footer{
             }
         }
         .footerCenter{
-            width: 730px;
             box-sizing: border-box;
             margin-bottom: 10px;
-            margin-right: 20px;
             display: flex;
             color: #333333;
             justify-content: flex-start;
+            font-size: 16px;
             .h4{
                 margin-bottom: 20px;
             }
@@ -786,6 +791,9 @@ footer{
                         }
                     }
                 }
+                &>.h7{
+                    font-size: 18px;
+                }
                 .h7{
                     margin-bottom: 20px;
                     font-weight: bold;
@@ -859,7 +867,7 @@ footer{
     .footerText{
         width: 100%;
         max-width: 1300px;
-        margin: 0px auto;
+        margin: 30px auto 0px;
         border-top: 1px solid #dfdfdf;
         text-align: center;
         color: #999999;
@@ -1087,6 +1095,7 @@ footer{
                     width: 175px;
                     height: 33px;
                     margin: 0px auto;
+                    background-size: auto 100%;
                 }
                 .footerLCon1,.footerLCon2{
                     display: none;
@@ -1253,6 +1262,7 @@ footer{
             font-size: 12px;
             padding:18px 0px 25px 0px;
             line-height: 22px;
+            margin: 10px auto 0px;
             &>span{
                 width: 30px;
                 display: inline-block;

src/pages/index/App.js

@@ -349,23 +349,34 @@ export default class App {
             
         }
         //企业文化
+        
+        let corTits=document.querySelectorAll(".corTits div");
+        let corTxts=document.querySelectorAll(".corTxts div");
         var corporateSwiper = new Swiper(".corporateSwiper", {
             effect: "fade",
             autoplay: false,
+            on:{
+                slideChange: function(){
+                    let num=this.activeIndex;
+                    corTits.forEach((item2,index)=>{
+                        if(num==index){
+                            item2.classList.add("activS");
+                        }else{
+                            item2.classList.remove("activS");
+                        }
+                    });
+                    corTxts.forEach((item2,index)=>{
+                        if(num==index){
+                            item2.classList.add("activS");
+                        }else{
+                            item2.classList.remove("activS");
+                        }
+                    });
+                },
+            },
           });
-        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/index/index.html

@@ -32,6 +32,16 @@
                 data-srcM="./static/images/index/banner1m.jpg"
                 alt=""
               />
+              <!-- 用视频就用下面的，把图片删除 -->
+              <!-- <video
+                class="lazy"
+                data-src="./static/2.mp4"
+                data-srcM="./static/2.mp4"
+                autoplay
+                muted
+                loop
+                playsinline
+              ></video> -->
               <div class="slideCon">
                   <div class="title">投资并购与企业<br>运营双轮驱动</div>
               </div>
@@ -45,18 +55,8 @@
                 alt=""
               />
               <div class="slideCon">
-                <div class="title">清洁能源与高载<br>能产业协同发展</div>
-              </div>
-            </div>
-            <div class="swiper-slide">
-              <img
-                class="lazy"
-                data-src="./static/images/index/banner3.jpg"
-                data-srcM="./static/images/index/banner3m.jpg"
-                alt=""
-              />
-              <div class="slideCon">
-                <div class="title">实业为本 <br>产业报国</div>
+                <div class="title">为清洁能源配置负荷，<br>全面提升生产力效能</div>
+                <div class="title">实现高能耗产业的碳中和</div>
               </div>
             </div>
             <div class="swiper-slide">
@@ -67,7 +67,7 @@
                 alt=""
               />
               <div class="slideCon">
-                <div class="title">科技联通未来 <br>创新达成梦想</div>
+                <div class="title">构建科技物流生态系统，<br>提高生产资料的配置效率</div>
               </div>
             </div>
             <div class="swiper-slide">
@@ -140,104 +140,88 @@
             <div class="swiper productSwiper">
               <div class="swiper-wrapper">
                 <div class="swiper-slide">
-                  <a href="./productDec1.html"><img class="lazy" data-src="./static/images/index/product1.jpg" data-srcM="./static/images/index/product1.jpg" alt="" />
+                  <img class="lazy" data-src="./static/images/index/product1.jpg" data-srcM="./static/images/index/product1.jpg" alt="" />
                   <div class="slideZ"></div>
-                      <div class="slideCon">
-                        <div class="text">铁合金</div>
-                    </div>
-                  </a>
+                  <div class="slideCon">
+                      <div class="text">铁合金</div>
+                  </div>
                 </div>
                 <div class="swiper-slide">
-                  <a href="./productDec2.html"><img class="lazy" data-src="./static/images/index/product2.jpg" data-srcM="./static/images/index/product2.jpg" alt="" />
+                  <img class="lazy" data-src="./static/images/index/product2.jpg" data-srcM="./static/images/index/product2.jpg" alt="" />
                   <div class="slideZ"></div>
-                  
-                      <div class="slideCon">
-                        <div class="text">炭素</div>
-                    </div>
-                  </a>
+                  <div class="slideCon">
+                      <div class="text">炭素</div>
+                  </div>
                 </div>
                 <div class="swiper-slide">
-                  <a href="./productDec3.html"><img class="lazy" data-src="./static/images/index/product3.jpg" data-srcM="./static/images/index/product3.jpg" alt="" />
+                  <img class="lazy" data-src="./static/images/index/product3.jpg" data-srcM="./static/images/index/product3.jpg" alt="" />
                   <div class="slideZ"></div>
-                  
-                      <div class="slideCon">
-                        <div class="text">钼业</div>
-                    </div>
-                  </a>
+                  <div class="slideCon">
+                      <div class="text">钼业</div>
+                  </div>
                 </div>
                 <div class="swiper-slide">
-                  <a href="./productDec4.html"><img class="lazy" data-src="./static/images/index/product4.jpg" data-srcM="./static/images/index/product4.jpg" alt="" />
+                  <img class="lazy" data-src="./static/images/index/product4.jpg" data-srcM="./static/images/index/product4.jpg" alt="" />
                   <div class="slideZ"></div>
-                  
-                      <div class="slideCon">
-                        <div class="text">大宗贸易</div>
-                    </div>
-                  </a>
+                  <div class="slideCon">
+                      <div class="text">大宗贸易</div>
+                  </div>
                 </div>
                 <div class="swiper-slide">
-                  <a href="./productDec5.html"><img class="lazy" data-src="./static/images/index/product5.jpg" data-srcM="./static/images/index/product5.jpg" alt="" />
+                  <img class="lazy" data-src="./static/images/index/product5.jpg" data-srcM="./static/images/index/product5.jpg" alt="" />
                   <div class="slideZ"></div>
-                  
-                      <div class="slideCon">
-                        <div class="text">镍业</div>
-                    </div>
-                  </a>
+                  <div class="slideCon">
+                      <div class="text">镍业</div>
+                  </div>
                 </div>
                 <div class="swiper-slide">
-                  <a href="./productDec6.html"><img class="lazy" data-src="./static/images/index/product6.jpg" data-srcM="./static/images/index/product6.jpg" alt="" />
+                  <img class="lazy" data-src="./static/images/index/product6.jpg" data-srcM="./static/images/index/product6.jpg" alt="" />
                   <div class="slideZ"></div>
-                      <div class="slideCon">
-                        <div class="text">新材料</div>
-                    </div>
-                  </a>
+                  <div class="slideCon">
+                      <div class="text">新材料</div>
+                  </div>
                 </div>
                 <div class="swiper-slide">
-                  <a href="./productDec7.html"><img class="lazy" data-src="./static/images/index/product7.jpg" data-srcM="./static/images/index/product7.jpg" alt="" />
+                  <img class="lazy" data-src="./static/images/index/product7.jpg" data-srcM="./static/images/index/product7.jpg" alt="" />
                   <div class="slideZ"></div>
-                      <div class="slideCon">
-                        <div class="text">科研院所</div>
-                    </div>
-                  </a>
+                  <div class="slideCon">
+                      <div class="text">科研院所</div>
+                  </div>
                 </div>
                 <div class="swiper-slide">
-                  <a href="./product.html"><img class="lazy" data-src="./static/images/index/product8.jpg" data-srcM="./static/images/index/product8.jpg" alt="" />
+                  <img class="lazy" data-src="./static/images/index/product8.jpg" data-srcM="./static/images/index/product8.jpg" alt="" />
                   <div class="slideZ"></div>
-                      <div class="slideCon">
-                        <div class="text">大消费</div>
-                    </div>
-                  </a>
+                  <div class="slideCon">
+                      <div class="text">大消费</div>
+                  </div>
                 </div>
                 <div class="swiper-slide">
-                  <a href="./product.html"><img class="lazy" data-src="./static/images/index/product9.jpg" data-srcM="./static/images/index/product9.jpg" alt="" />
+                  <img class="lazy" data-src="./static/images/index/product9.jpg" data-srcM="./static/images/index/product9.jpg" alt="" />
                   <div class="slideZ"></div>
-                      <div class="slideCon">
-                        <div class="text">产业互联网</div>
-                    </div>
-                  </a>
+                  <div class="slideCon">
+                      <div class="text">产业互联网</div>
+                  </div>
                 </div>
                 <div class="swiper-slide">
-                  <a href="./product.html"><img class="lazy" data-src="./static/images/index/product10.jpg" data-srcM="./static/images/index/product10.jpg" alt="" />
+                  <img class="lazy" data-src="./static/images/index/product10.jpg" data-srcM="./static/images/index/product10.jpg" alt="" />
                   <div class="slideZ"></div>
-                      <div class="slideCon">
-                        <div class="text">装备制造</div>
-                    </div>
-                  </a>
+                  <div class="slideCon">
+                      <div class="text">装备制造</div>
+                  </div>
                 </div>
                 <div class="swiper-slide">
-                  <a href="./product.html"><img class="lazy" data-src="./static/images/index/product11.jpg" data-srcM="./static/images/index/product11.jpg" alt="" />
+                  <img class="lazy" data-src="./static/images/index/product11.jpg" data-srcM="./static/images/index/product11.jpg" alt="" />
                   <div class="slideZ"></div>
-                      <div class="slideCon">
-                        <div class="text">金融服务</div>
-                    </div>
-                  </a>
+                  <div class="slideCon">
+                      <div class="text">金融服务</div>
+                  </div>
                 </div>
                 <div class="swiper-slide">
-                  <a href="./product.html"><img class="lazy" data-src="./static/images/index/product12.jpg" data-srcM="./static/images/index/product12.jpg" alt="" />
+                  <img class="lazy" data-src="./static/images/index/product12.jpg" data-srcM="./static/images/index/product12.jpg" alt="" />
                   <div class="slideZ"></div>
-                      <div class="slideCon">
-                        <div class="text">石油化工</div>
-                    </div>
-                  </a>
+                  <div class="slideCon">
+                      <div class="text">石油化工</div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -249,23 +233,23 @@
           </div>
         </div>
       </div>
-      <div class="about">
+      <div class="wow fadeInUp about">
         <div class="wow fadeInUp title mTxt">业务版图</div>
         <div class="aboutImg">
           <img class="lazy" data-src="./static/images/index/aboutbg.png" data-srcM="./static/images/index/aboutbgm.jpg" alt="" />
-          <img class="lazy imgZi" data-src="./static/images/index/aboutbg2.png" data-srcM="./static/images/index/aboutbgm2.png" alt="" />
-          <img class="lazy imgZi" data-src="./static/images/index/aboutbg3.png" data-srcM="./static/images/index/aboutbgm3.png" alt="" />
-          <img class="lazy imgZi" data-src="./static/images/index/aboutbg4.png" data-srcM="./static/images/index/aboutbgm4.png" alt="" />
-          <img class="lazy imgZi" data-src="./static/images/index/aboutbg5.png" data-srcM="./static/images/index/aboutbgm5.png" alt="" />
-          <img class="lazy imgZi" data-src="./static/images/index/aboutbg6.png" data-srcM="./static/images/index/aboutbgm6.png" alt="" />
+          <img class="wow fadeInUp lazy imgZi" data-wow-delay="0.3s" data-src="./static/images/index/aboutbg2.png" data-srcM="./static/images/index/aboutbgm2.png" alt="" />
+          <img class="wow fadeInUp lazy imgZi" data-wow-delay="0.6s" data-src="./static/images/index/aboutbg3.png" data-srcM="./static/images/index/aboutbgm3.png" alt="" />
+          <img class="wow fadeInUp lazy imgZi" data-wow-delay="0.7s" data-src="./static/images/index/aboutbg4.png" data-srcM="./static/images/index/aboutbgm4.png" alt="" />
+          <img class="wow fadeInUp lazy imgZi" data-wow-delay="0.8s" data-src="./static/images/index/aboutbg5.png" data-srcM="./static/images/index/aboutbgm5.png" alt="" />
+          <img class="wow fadeInUp lazy imgZi" data-wow-delay="0.9s" data-src="./static/images/index/aboutbg6.png" data-srcM="./static/images/index/aboutbgm6.png" alt="" />
         </div>
         <div class="aboutCon">
           <div class="wow fadeInUp title pcTxt">业务版图</div>
-          <div class="sltImg">
+          <div class="wow fadeInUp sltImg">
             业务版图缩略图
             <img src="./static/images/index/aboutbg7.png" alt=""/>
           </div>
-          <a href="./socialResponsibility.html" class="wow fadeInUp btn3">产业布局<span class="icon iconfont icon-jiantou"></span></a>
+          <a href="./product.html" class="wow fadeInUp btn3">产业布局<span class="icon iconfont icon-jiantou"></span></a>
         </div>
       </div>
       <div class="wow fadeInUp history" id="fzlc">

src/pages/index/index.less

@@ -12,10 +12,15 @@
       width: 100%;
       height: 100%;
       img{
-        width: 100%;
+          width: 100%;
           height: 100%;
           object-fit: cover;
       }
+      video{
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
       .btn-prev,.btn-next{
         position: absolute;
         top: 50%;
@@ -235,7 +240,7 @@
         height: calc(100% - 30px);
         box-sizing: border-box;
         padding-left: 40px;
-        padding-top: 20px;
+        padding-top: 18px;
         overflow: hidden;
         &>div{
           width: 100%;
@@ -245,12 +250,23 @@
             width: 100%;
             display: flex;
             justify-content: space-between;
-            border-bottom: 1px solid #acacac5e;
+            border-bottom: 2px solid #acacac5e;
             padding: 24px 20px 24px 10px;
             box-sizing: border-box;
-            &:last-child{
-              border-bottom: 0px solid #ACACAC;
+            position: relative;
+            &::before{
+              content: '';
+              position: absolute;
+              bottom: -2px;
+              left: 0px;
+              width: 0%;
+              height: 2px;
+              background: #B81C25;
+              transition: all .5s ease;
             }
+            // &:last-child{
+            //   border-bottom: 0px solid #ACACAC;
+            // }
             .timer{
               width: 65px;
               height: 66px;
@@ -296,6 +312,9 @@
           }
           .liHight{
             background: rgba(184,28,37,.05);
+            &::before{
+              width: 100%;
+            }
             .newsLiCon{
               .liTitle,.licon{
                 color: #b81c25;
@@ -368,7 +387,8 @@
       }
       .swiper-slide{
         width: 312px;
-        transition: width .3s ease-in-out;
+        transition:width .45s cubic-bezier(.455,.03,.515,.955);
+        
         overflow: hidden;
         transform-origin: center;
         img {
@@ -615,7 +635,7 @@
           .hisIcon{
             width: 46px;
             height: 46px;
-            border: 1px solid #999999;
+            border: 0px solid #999999;
             border-radius: 50%;
             position: relative;
             .cil1{
@@ -628,6 +648,7 @@
               top: 7px;
               left: 7px;
               border-radius: 50%;
+              opacity: 0;
             }
             .cil2{
               position: absolute;
@@ -687,6 +708,7 @@
             border: 1px solid rgba(184, 28, 37, 0.3);
             .cil1{
               border: 1px solid #b81c25;
+              opacity: 1;
             }
             .cil2{
               background: #b81c25;
@@ -798,6 +820,7 @@
       }
       .activS{
         color: #B81C25;
+        font-weight: bold;
         &::before{
           opacity: 1;
         }
@@ -813,6 +836,7 @@
       }
       .activS{
         display: block;
+
       }
     }
   }
@@ -866,7 +890,7 @@
       padding-top: 130px;
       height: auto;
       .title{
-        font-size: 32px;
+        font-size: 30px;
         line-height: 48px;
         br{
           display: block;
@@ -881,12 +905,12 @@
         display: block;
         bottom: 60px;
         .swiper-pagination-bullet{
-          width: 5px;
-          height: 5px;
+          width: 6px;
+          height: 6px;
           margin: 0 6px;
           &::before{
-            left: -4px;
-            top: -4px;
+            left: -3px;
+            top: -3px;
             width: 10px;
             height: 10px;
           }
@@ -992,7 +1016,7 @@
           background: #B81C25;
         }
         &>div{
-          width: 1002px;
+          width: 1012px;
           justify-content: flex-start;
           &>div{
             width: auto;
@@ -1055,6 +1079,12 @@
               font-size: 14px;
             }
           }
+          &:hover{
+            width: 100%;
+            .slideCon{
+              opacity: 1;
+            }
+          }
         }
       }
       .swiper-page{

src/pages/join/App.js

@@ -8,7 +8,7 @@ import {
 
 export default class App {
     constructor() {
-        let common = new Common(document.querySelector('.main'),5)   //导航菜单高亮，0是首页，后面的按顺序添加
+        let common = new Common(document.querySelector('.main'),3)   //导航菜单高亮，0是首页，后面的按顺序添加
         this.isMobile = isMobile()
         
         this.scroll = new LocomotiveScroll();

src/pages/join/index.html

@@ -15,9 +15,9 @@
     
     <div class="main">
       <div class="desCon">
-        <div class="wow fadeInUp desTop">
+        <!-- <div class="wow fadeInUp desTop">
           <div class="title">加入中泽</div>
-        </div>
+        </div> -->
         <!--  -->
         <div class="careersType" id="careersInfo">
           <div class="titleBg">

src/pages/join/index.less

@@ -25,7 +25,7 @@
 .desCon{
   width: 100%;
   text-align: center;
-  padding-top: 120px;
+  padding-top: 100px;
   .desTop{
     width: 100%;
     max-width: 1300px;
@@ -282,9 +282,9 @@
                   width: 100%;
                   display: flex;
                   justify-content: space-between;
-                  padding-bottom: 27px;
                   border-bottom: 1px solid #acacac5e;
-                  padding-top: 27px;
+                  box-sizing: border-box;
+                  padding: 27px 8px;
                   &:last-child{
                     border-bottom: 0px solid #ACACAC;
                   }

src/pages/news/index.html

@@ -32,7 +32,7 @@
                         </a> 
                     </div>
                     <div class="news_banner2 wow fadeInUp">
-                        <img src="./static/images/news/02.png" alt="">
+                        <div class="news2Img"><img src="./static/images/news/02.png" alt=""></div>
                         <div class="banner2_cont">
                             <div class="txt1">交通运输部、国家发展改革委联合印发
                                 《交通物流降本提质增效行动计化》</div>
@@ -45,7 +45,7 @@
                         </div>
                     </div>
                     <div class="news_banner2 wow fadeInUp">
-                        <img src="./static/images/news/03.png" alt="">
+                        <div class="news2Img"><img src="./static/images/news/03.png" alt=""></div>
                         <div class="banner2_cont">
                             <div class="txt1">交通运输部、国家发展改革委联合印发
                                 《交通物流降本提质增效行sddsd动计化》</div>
@@ -59,11 +59,11 @@
                     </div>
                 </div>
                 <div class="tabs_box" id="point">
-                    <a class="tabs_li tabs_lis">全部</a>
-                    <a class="tabs_li">集团新闻</a>
-                    <a class="tabs_li">前沿资讯</a>
-                    <a class="tabs_li">政策引领</a>
-                    <a class="tabs_li">研发创新</a>
+                    <div class="tabs_li tabs_lis">全部</div>
+                    <div class="tabs_li">集团新闻</div>
+                    <div class="tabs_li">行业资讯</div>
+                    <!-- <a class="tabs_li">政策引领</a>
+                    <a class="tabs_li">研发创新</a> -->
                 </div>
             </div>
             <div class="news_ul">

src/pages/news/index.less

@@ -37,10 +37,12 @@
                 width: 750px;
                 height: 523px;
                 position: relative;
+                overflow: hidden;
+                border-radius: 12px;
                 img{
                     width: 100%;
                     height: 100%;
-                    border-radius: 12px;
+                    transition: all 0.3s ease;
                 }
 
                 .news_content{
@@ -68,16 +70,32 @@
                         margin-top: 27px;
                     }
                 }
-                
+                &:hover{
+                    img{
+                        transform: scale(1.1);
+                    }
+                }
             }
             .news_banner2{
                 width: 340px;
-                img{
+                .news2Img{
                     width: 100%;
-                    height: 255px;
-                    object-fit: cover;
                     border-radius: 12px;
+                    overflow: hidden;
+                    height: 255px;
                     margin-bottom: 30px;
+                    img{
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                        transition: all 0.3s ease;
+                    }
+                }
+                &:hover{
+                    .news2Img{
+                    img{
+                        transform: scale(1.1);
+                    }}
                 }
                 .txt1{
                     font-weight: bold;
@@ -179,7 +197,7 @@
         width: 100%;
         max-width: 1920px;
         margin: 0 auto;
-        background: #F6F6F6;
+        // background: #F6F6F6;
         box-sizing: border-box;
         .news_list{
             width: 1300px;
@@ -188,9 +206,9 @@
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
-                padding: 40px 0;
+                padding: 40px 8px;
                 border-bottom:1px solid #DADADA;
-                transition: all .2s;
+                transition: all .3s;
                 .li_left{
                     width: 65px;
                     height: 66px;
@@ -270,7 +288,7 @@
                     }
                 }
                 &:hover{
-                    background: #EFEFEF;
+                    background: rgba(184, 28, 37, 0.05);
                     .li_cont{
                         div:nth-child(1){
                             color: #B81C25;
@@ -287,13 +305,10 @@
         display: block;
     }
     .news_paging{
-        width: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 100px 0 120px;
-        background: #F6F6F6;
-        box-sizing: border-box;
         .previousPage{
             width: 40px;
             height: 40px;
@@ -305,6 +320,8 @@
             margin-right: 20px;
             cursor: pointer;
             transition: all 0.2s;
+            border-radius: 20px;
+            box-sizing: border-box;
             span{
                 font-size: 26px;
                 transform: rotate(-90deg);
@@ -326,6 +343,8 @@
             margin-left: 20px;
             cursor: pointer;
             transition: all 0.2s;
+            border-radius: 20px;
+            box-sizing: border-box;
             span{
                 font-size: 26px;
                 transform: rotate(90deg);
@@ -340,6 +359,7 @@
             min-width: 40px;
             height: 40px;
             line-height: 40px;
+            font-family: Source Han Sans CN;
             font-size: 18px;
             color: #000;
             transition: all 0.2s;
@@ -348,25 +368,28 @@
             cursor: pointer;
             text-align: center;
             border: 1px solid #DDE2E6;
-            border-radius: 2px;
+            border-radius: 20px;
+            box-sizing: border-box;
             &:hover{
                 background: #B81C25;
                 border: 1px solid #B81C25;
                 color: #fff;
             }
         }
-        .pageNumActive{
-            color: #fff;
-            background: #B81C25;
-        }
         .pageNums{
             pointer-events: none;
         }
         .pageNum+.pageNum{
             margin-left: 10px;
         }
+        .pageNumActive{
+            color: #fff;
+            background-color: #B81C25;
+            border: 1px solid #B81C25;
 
+        }
         .ellipsis{
+            font-family: Source Han Sans CN;
             font-weight: bold;
             font-size: 22px;
             padding: 10px 15px;
@@ -470,11 +493,13 @@ img{
                     align-items: center;
                     justify-content: space-between;
                     margin-bottom: 10.75vw;
-                    img{
+                    .news2Img{
                         width: 45.375vw;
                         height: 34vw;
-                        margin-bottom: 0;
                         border-radius: 1.625vw;
+                        overflow: hidden;
+                        height: 255px;
+                        margin-bottom: 0;
                     }
                     .banner2_cont{
                         width: 42.5vw;
@@ -639,7 +664,7 @@ img{
                 }   
                 .news_banner2{
                     width: 300px;
-                    img{
+                    .news2Img{
                         height: 180px;
                         margin-bottom: 5px;
                     }
@@ -977,7 +1002,7 @@ img{
                 }   
                 .news_banner2{
                     width: 330px;
-                    img{
+                    .news2Img{
                         height: 200px;
                     }
                     .txt1{
@@ -1104,7 +1129,7 @@ img{
                     align-items: center;
                     justify-content: space-between;
                     margin-bottom: 10.75vw;
-                    img{
+                    .news2Img{
                         width: 45.375vw;
                         height: 34vw;
                         margin-bottom: 0;

src/pages/partyBuilding/App.js

@@ -10,7 +10,7 @@ const pageSize = 5;
 
 export default class App {
     constructor() {
-        let common = new Common(document.querySelector('.main'),3)   //导航菜单高亮，0是首页，后面的按顺序添加
+        let common = new Common(document.querySelector('.main'),2)   //导航菜单高亮，0是首页，后面的按顺序添加
         this.isMobile = isMobile()
         let lazyDoms = document.querySelectorAll(".lazy");
         let Time = null;
@@ -33,8 +33,8 @@ export default class App {
                 // item.load();
             }
         });
-        bindDom();
-        banner()
+        // bindDom();
+        // banner()
         function banner() {
         
             let menuChange=true;

src/pages/partyBuilding/index.html

@@ -15,83 +15,65 @@
 <body>
     <%= require('../common/tpl/header.tpl') %>
         <div class="main">
-            <div class="content">
-                <div class="news_title wow fadeInUp">党建工作</div>
-            </div>
-            <div class="wow domInUp banner">
-                <div class="swiper bannerSwiper bannerSwiper1">
-                    <div class="swiper-wrapper">
-                        <div class="swiper-slide">
-                            <img class="lazy" data-src="./static/images/partyBuilding/01.png"
-                                data-srcM="./static/images/partyBuilding/01.png" alt="" />
-                        </div>
-                    </div>
-                    <!-- 如果需要分页器 -->
-                    <div class="swiper-pagination"></div>
-
-                    <!-- 如果需要导航按钮 -->
-                    <div class="btn-prev btn-prevB"><span class="icon iconfont icon-jiantou"></span></div>
-                    <div class="btn-next btn-nextB"><span class="icon iconfont icon-jiantou"></span></div>
-                </div>
-            </div>
-            <div class="content content2" id="p1">
+            <div class="wow fadeInUp content content2" id="p1">
                 <div class="news_title">企业党建</div>
             </div>
-            <div class="tabs_box">
+            <!-- <div class="tabs_box">
                 <div class="tabs_li tabs_lis">全部<span>·</span>30</div>
                 <div class="tabs_li">党建活动<span>·</span>12</div>
                 <div class="tabs_li">党建会议<span>·</span>5</div>
                 <div class="tabs_li">党建表彰<span>·</span>10</div>
-            </div>
-            <div class="article_list">
-                <a class="article_li">
-                    <img src="./static/images/partyBuilding/default.png" alt="">
+            </div> -->
+            <div class="wow fadeInUp article_list">
+                <a class="article_li" href="">
+                    <div class="liImg"><img src="./static/images/partyBuilding/default.png" alt=""></div>
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
-                <a class="article_li">
-                    <img src="./static/images/partyBuilding/03.png" alt="">
+                <a class="article_li" href="">
+                    <div class="liImg"><img src="./static/images/partyBuilding/03.png" alt=""></div>
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
-                <a class="article_li">
-                    <img src="./static/images/partyBuilding/04.png" alt="">
+                <a class="article_li" href="">
+                    <div class="liImg"><img src="./static/images/partyBuilding/04.png" alt=""></div>
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
-                <a class="article_li">
-                    <img src="./static/images/partyBuilding/05.png" alt="">
+                <a class="article_li" href="">
+                    <div class="liImg"><img src="./static/images/partyBuilding/05.png" alt=""></div>
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
-                <a class="article_li">
-                    <img src="./static/images/partyBuilding/06.png" alt="">
+                <a class="article_li" href="">
+                    <div class="liImg"><img src="./static/images/partyBuilding/06.png" alt=""></div>
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
-                <a class="article_li">
-                    <img src="./static/images/partyBuilding/07.png" alt="">
+                <a class="article_li" href="">
+                    <div class="liImg"><img src="./static/images/partyBuilding/07.png" alt=""></div>
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
-                <a class="article_li">
-                    <img src="./static/images/partyBuilding/08.png" alt="">
+                <a class="article_li" href="">
+                    <div class="liImg"><img src="./static/images/partyBuilding/08.png" alt=""></div>
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
-                <a class="article_li">
-                    <img src="./static/images/partyBuilding/09.png" alt="">
+                <a class="article_li" href="">
+                    <div class="liImg"><img src="./static/images/partyBuilding/09.png" alt=""></div>
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
-                <a class="article_li">
-                    <img src="./static/images/partyBuilding/10.png" alt="">
+                <a class="article_li" href="">
+                    <div class="liImg"><img src="./static/images/partyBuilding/10.png" alt=""></div>
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
             </div>
-            <div style="width: 100%;display: flex;justify-content: center;padding: 30px 0 50px;">
-                <a href="./enterprisePartyBuilding.html" class="btn newsHref">查看更多</a>
+            <div class="listBtn">
+                <!-- <a href="./enterprisePartyBuilding.html" class="btn newsHref">查看更多</a> -->
+                <a href="./enterprisePartyBuilding.html" class="wow fadeInUp btn3">查看更多<span class="icon iconfont icon-jiantou"></span></a>
             </div>
             <!-- <div class="news_paging">
                 <a id="previousPage" class="previousPage">
@@ -107,10 +89,11 @@
                     <span class="icon iconfont icon-jiantou"></span>
                 </a>
             </div> -->
-            <div class="study_box" id="p2">
-                <div class="study_head">
+            <div class=" wow domInUp study_box" id="p2">
+                <div class=" wow domInUp study_head">
                     <div class="txt">学习文件</div>
-                    <a href="https://www.12371.cn/special/dnfg/" target="_blank">查看学习文件</a>
+                    <a href="https://www.12371.cn/special/dnfg/" target="_blank" class="btn3">查看学习文件<span class="icon iconfont icon-jiantou"></span></a>
+                    <!-- <a href="https://www.12371.cn/special/dnfg/">查看学习文件</a> -->
                 </div>
                 <div class="bannerSwiper2 wow domInUp">
                     <img class="lazy" data-src="./static/images/partyBuilding/11.png"

src/pages/partyBuilding/index.less

@@ -19,8 +19,8 @@
         margin: 0 auto;
         .news_title{
             text-align: center;
-            padding-top: 120px;
-            margin-bottom: 80px;
+            padding-top: 100px;
+            margin-bottom: 50px;
             font-weight: bold;
             font-size: 64px;
             color: #333333;
@@ -158,7 +158,18 @@
             padding-bottom: 62px;
             padding-right: 41px;
             border-bottom: 1px solid #DDE2E6;
-
+            .liImg{
+                width: 100%;
+                height: 305px;
+                margin-bottom: 20px;
+                overflow: hidden;
+                img{
+                    width: 100%;
+                    height: 305px;
+                    object-fit: cover;
+                    transition: all .3s ease;
+                }
+            }
             &:nth-of-type(3n){
                 padding-right: 0;
             }
@@ -174,12 +185,12 @@
                 border: 0;
                 margin: 0;
             }
-            img{
-                width: 100%;
-                height: 305px;
-                object-fit: cover;
-                margin-bottom: 20px;
-            }
+            // img{
+            //     width: 100%;
+            //     height: 305px;
+            //     object-fit: cover;
+            //     margin-bottom: 20px;
+            // }
             .txt1{
                 font-size: 20px;
                 color: #231f20;
@@ -190,13 +201,37 @@
                 text-overflow: ellipsis;
                 line-height: 30px;
                 margin-bottom: 20px;
+                transition: all .3s ease;
             }
             .txt2{
                 font-size: 14px;
                 color: #666666;
+                transition: all .3s ease;
+            }
+            &:hover{
+                .liImg{
+                    img{
+                        transform: scale(1.1);
+                    }
+                }
+                .txt1,.txt2{
+                    color: #B81C25;
+                }
             }
         }
     }
+    .listBtn{
+        width: 100%;display: flex;justify-content: center;padding: 30px 0 90px;
+        a{
+            width: 200px;
+                height: 45px;
+                font-size: 14px;
+                line-height: 45px;
+                span{
+                    font-size: 26px;
+                }
+        }
+    }
     .news_paging{
         display: flex;
         align-items: center;
@@ -309,13 +344,13 @@
             a{
                 width: 200px;
                 height: 45px;
-                background: #B81C25;
-                border-radius: 8px;
                 font-size: 14px;
-                color: #FFFFFF;
-                text-align: center;
                 line-height: 45px;
                 margin-right: 100px;
+                z-index: 1;
+                span{
+                    font-size: 26px;
+                }
             }
         }
         .bannerSwiper2{
@@ -381,6 +416,9 @@ a{
     .main {
         width: 100%;
         padding-top: 15vw;
+        .listBtn{
+            padding: 10px 0 30px;
+        }
         .content{
             width: 92.125vw;
             margin: 0 auto;
@@ -571,12 +609,14 @@ a{
         }
         .study_box{
             padding-top: 13.75vw;
-            padding-bottom: 35.875vw;
+            padding-bottom: 100px;
             position: relative;
 
             .study_head{
                 width: 92.125vw;
                 margin-bottom: 10.5vw;
+                flex-wrap: wrap;
+                justify-content: center;
                 .txt{
                     width: 100%;
                     font-size: 6.25vw;
@@ -584,10 +624,12 @@ a{
                     text-align: center;
                 }
                 a{
-                    position: absolute;
-                    bottom:15vw;
-                    left: calc(50% - 100px);
+                    // position: absolute;
+                    // bottom:15vw;
+                    // left: calc(50% - 100px);
                     // margin-left: -25%;
+                    margin-right: 0px;
+                    margin-top: 20px;
                 }
             }
             .bannerSwiper2{

src/pages/product/App.js

@@ -39,6 +39,9 @@ export default class App {
         let isMob=this.isMobile;
         let productCks = document.querySelectorAll(".productTit");
         let productTits=document.querySelector(".productTits");
+        
+        let productConBox=document.querySelector(".product .productConBox");
+        let productPage=document.querySelector(".product .swiper-page");
         function scrollLeft(num){
             let leftNum=0;
             productCks.forEach((item,index)=>{
@@ -58,6 +61,10 @@ export default class App {
                 ease: "power1.out" // 缓动效果
               });
         }
+        let pageAfter=0;
+        if(productConBox.getBoundingClientRect().width>1300){
+            pageAfter=(productConBox.getBoundingClientRect().width-productPage.getBoundingClientRect().width)/2;
+        }
         let mySwiper = new Swiper('.productSwiper', {
                 autoplay: false,//可选选项，自动滑动
                 autoHeight: true,
@@ -66,6 +73,7 @@ export default class App {
                 spaceBetween: isMob?0:20,
                 allowTouchMove: isMob?true:false,
                 slidesOffsetBefore : isMob?0:210,
+                slidesOffsetAfter : isMob?0:pageAfter,
                 navigation: {
                     nextEl: '.btn-nextP1',
                     prevEl: '.btn-prevP1',

src/pages/product/index.html

@@ -37,13 +37,13 @@
               <div>镍业</div>
             </div>
             <div class="productTit">
-              <div>大消费</div>
+              <div>产业互联网</div>
             </div>
             <div class="productTit">
-              <div>产业互联网</div>
+              <div>化工</div>
             </div>
             <div class="productTit">
-              <div>石油化工</div>
+              <div>大消费</div>
             </div>
           </div>
           </div>
@@ -51,68 +51,60 @@
             <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 class="text">主要企业是吉林铁合金、吉铁铁合金、瑞志煤化工、新疆吉铁和辽阳铁合金综合运用新质生产力推动高耗能行业转型升级，打造产能规模最大、工艺技术最领先、综合成本最低、资源利用效率最高的铁合金产业集群，</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="" />
+                  <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="" />
+                  <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 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="" />
+                  <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 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="" />
+                  <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 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="" />
+                  <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 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="" />
+                  <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 class="conTit">大消费</div>
+                      <div class="text">主要企业是后谷控股(云南)有限公司。注册成立于2007年，是集咖啡种植、咖啡深加工、销售及进出口业务为一体的咖啡全产业链企业。后谷咖啡是中国第一个本土咖啡品牌，也是国内唯一家获得中国驰名商标的全产业链咖啡品牌。</div>
                     </div>
-                  </a>
                 </div>
               </div>
             </div>
@@ -136,8 +128,7 @@
         <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="liImg"><img src="./static/images/product/member1.jpg" alt=""/></div>
             <div class="upDiv">
               <div class="upDivTit">吉铁铁合金有限公司</div>
               <div class="text">集生产经营、研发设 计、设备制造等于一体的全国铁合金行业龙头企业</div>
@@ -145,8 +136,7 @@
             </div>
           </div>
           <div class="memberLi">
-            <img src="./static/images/product/member2.jpg" alt=""/>
-            <div class="liTit">吉林炭素有限公司</div>
+            <div class="liImg"><img src="./static/images/product/member2.jpg" alt=""/></div>
             <div class="upDiv">
               <div class="upDivTit">吉林炭素有限公司</div>
               <div class="text">产品主要包括石墨电极、石墨阳极、炭块、糊类、特种炭制品、炭纤维制品等，广泛应用于冶金、化工、机械、电子、医疗及新材料等领域</div>
@@ -154,8 +144,7 @@
             </div>
           </div>
           <div class="memberLi">
-            <img src="./static/images/product/member3.jpg" alt=""/>
-            <div class="liTit">吉林吉恩镍业股份有限公司</div>
+            <div class="liImg"><img src="./static/images/product/member3.jpg" alt=""/></div>
             <div class="upDiv">
               <div class="upDivTit">吉林吉恩镍业股份有限公司</div>
               <div class="text">集采矿、选矿、冶炼、精炼、化工于一体的大型镍、铜、钴有色金属生产加工企业。</div>
@@ -163,8 +152,7 @@
             </div>
           </div>
           <div class="memberLi">
-            <img src="./static/images/product/member4.jpg" alt=""/>
-            <div class="liTit">吉林大黑山钼业股份有限公司</div>
+            <div class="liImg"><img src="./static/images/product/member4.jpg" alt=""/></div>
             <div class="upDiv">
               <div class="upDivTit">吉林大黑山钼业股份有限公司</div>
               <div class="text">集钼金属采矿、选矿、碎石骨料加工为一体的综合性矿山企业</div>
@@ -172,8 +160,7 @@
             </div>
           </div>
           <div class="memberLi">
-            <img src="./static/images/product/member5.jpg" alt=""/>
-            <div class="liTit">吉林中泽钼业有限公司</div>
+            <div class="liImg"><img src="./static/images/product/member5.jpg" alt=""/></div>
             <div class="upDiv">
               <div class="upDivTit">吉林中泽钼业有限公司</div>
               <div class="text">产品主要为氧化钼、钼铁、钼酸铵、高纯氧化钼等。</div>
@@ -181,8 +168,7 @@
             </div>
           </div>
           <div class="memberLi">
-            <img src="./static/images/product/member6.jpg" alt=""/>
-            <div class="liTit">万联易达物流科技有限公司</div>
+            <div class="liImg"><img src="./static/images/product/member6.jpg" alt=""/></div>
             <div class="upDiv">
               <div class="upDivTit">万联易达物流科技有限公司</div>
               <div class="text">以大宗商品交易和整车物流服务为纽带,以人工智能为支撑的产业互联网公司。</div>
@@ -190,8 +176,7 @@
             </div>
           </div>
           <div class="memberLi">
-            <img src="./static/images/product/member7.jpg" alt=""/>
-            <div class="liTit">通辽金煤化工有限公司</div>
+            <div class="liImg"><img src="./static/images/product/member7.jpg" alt=""/></div>
             <div class="upDiv">
               <div class="upDivTit">通辽金煤化工有限公司</div>
               <div class="text">主要产品包括煤制乙二醇、草酸、催化剂、完全生物降解塑料等</div>
@@ -199,8 +184,7 @@
             </div>
           </div>
           <div class="memberLi">
-            <img src="./static/images/product/member8.jpg" alt=""/>
-            <div class="liTit">辽宁省机械研究院有限公司</div>
+            <div class="liImg"><img src="./static/images/product/member8.jpg" alt=""/></div>
             <div class="upDiv">
               <div class="upDivTit">辽宁省机械研究院有限公司</div>
               <div class="text">主营科研业务为机械轻量化 设计、智能装备及大宗固废综合利用系统等。</div>
@@ -208,8 +192,7 @@
             </div>
           </div>
           <div class="memberLi">
-            <img src="./static/images/product/member9.jpg" alt=""/>
-            <div class="liTit">吉林卓创新材料有限公司</div>
+            <div class="liImg"><img src="./static/images/product/member9.jpg" alt=""/></div>
             <div class="upDiv">
               <div class="upDivTit">吉林卓创新材料有限公司</div>
               <div class="text">主要生产羰基铁粉、羰基镍粉等新材料产品。</div>
@@ -217,8 +200,7 @@
             </div>
           </div>
           <div class="memberLi">
-            <img src="./static/images/product/member10.jpg" alt=""/>
-            <div class="liTit">吉林中泽新型建材有限公司</div>
+            <div class="liImg"><img src="./static/images/product/member10.jpg" alt=""/></div>
             <div class="upDiv">
               <div class="upDivTit">吉林中泽新型建材有限公司</div>
               <div class="text">主营蒸压加气混凝土砌块、板材、高性能无机石等系列绿色建材产品。</div>
@@ -226,8 +208,7 @@
             </div>
           </div>
           <div class="memberLi">
-            <img src="./static/images/product/member11.jpg" alt=""/>
-            <div class="liTit">朝阳重型机器有限公司</div>
+            <div class="liImg"><img src="./static/images/product/member11.jpg" alt=""/></div>
             <div class="upDiv">
               <div class="upDivTit">朝阳重型机器有限公司</div>
               <div class="text">公司成立于1959年，是集研发设计、设备制造、安装服务、进出口商务、物流及技术咨询于一体的综合性装备制造企业。</div>
@@ -235,8 +216,7 @@
             </div>
           </div>
           <div class="memberLi">
-            <img src="./static/images/product/member12.jpg" alt=""/>
-            <div class="liTit">黑龙江新瑞石油化工有限公司</div>
+            <div class="liImg"><img src="./static/images/product/member12.jpg" alt=""/></div>
             <div class="upDiv">
               <div class="upDivTit">黑龙江新瑞石油化工有限公司</div>
               <div class="text">主要产品为甲基叔丁基醚（MTBE）、乙苯、液化气、正丁烷等。</div>
@@ -244,8 +224,7 @@
             </div>
           </div>
           <div class="memberLi">
-            <img src="./static/images/product/member13.jpg" alt=""/>
-            <div class="liTit">吉林市神舟炭纤维有限责任公司</div>
+            <div class="liImg"><img src="./static/images/product/member13.jpg" alt=""/></div>
             <div class="upDiv">
               <div class="upDivTit">吉林市神舟炭纤维有限责任公司</div>
               <div class="text">主要产品有聚丙烯睛基碳纤维、平纹碳布、斜纹碳布，主要应用于国防军工和民用领域。</div>
@@ -253,7 +232,7 @@
             </div>
           </div>
           <div class="memberLi">
-            <!-- <img src="./static/images/product/member1.png" alt=""/> -->
+            <!-- <div class="liImg"><img src="./static/images/product/member1.png" alt=""/></div> -->
             <div class="liTit">沈阳中泽镁材料研究院有限公司</div>
             <div class="upDiv">
               <div class="upDivTit">沈阳中泽镁材料研究院有限公司</div>

src/pages/product/index.less

@@ -90,7 +90,7 @@
           text-align: center;
           color: #fff;
           box-sizing: border-box;
-          background-color: #b81c25;
+          background-color: rgba(184, 28, 37, 0.8);
           height: 80px;
           transition: all .3s ease-in-out;
           .conTit{
@@ -222,16 +222,54 @@
       flex-wrap: wrap;
       justify-content: center;
       align-content: center;
+      transition: all 0.4s ease 0s;
+      .liImg{
+        height: 144px;
+        width: 100%;
+        position: relative;
+        transition: all 0.4s ease 0s;
+        img{
+          width: auto;
+          height: auto;
+          max-height: 100%;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
       .liTit{
         width: 100%;
         font-size: 20px;
         color: #333333;
+        transition: all 0.4s ease 0s;
       }
+      // .text{
+      //   font-size: 16px;
+      //   line-height: 24px;
+      //   padding: 0px 20px;
+      //   display: none;
+      //   color: #fff;
+      //   margin-top: 20px;
+      // }
+      // a{
+      //   width: 54px;
+      //   height: 0px;
+      //   display: block;
+      //   position: absolute;
+      //   bottom: 40px;
+      //   left: 50%;
+      //   transform: translateX(-50%);
+      //   background: url(./images/aicon.png) no-repeat;
+      //   background-size: 100% 100%;
+      //   transition: all 0.4s ease 0s;
+      // }
       .upDiv{
         position: absolute;
         width: 100%;
         height: 100%;
-        background: #B81C25;
+        background: url(./images/cymlbg.png) no-repeat;
+        background-size: 100% 100%;
         color: #fff;
         box-sizing: border-box;
         padding:35px 40px;
@@ -242,14 +280,18 @@
         .upDivTit{
           font-size: 20px;
           margin-bottom: 20px;
+          transform: translateY(100%);
+          transition: all 0.4s ease 0s;
         }
         .text{
           font-size: 16px;
           line-height: 24px;
+          transform: translateY(70%);
+          transition: all 0.4s ease 0s;
         }
         a{
           width: 54px;
-          height: 54px;
+          height: 0px;
           display: block;
           position: absolute;
           bottom: 40px;
@@ -257,11 +299,23 @@
           transform: translateX(-50%);
           background: url(./images/aicon.png) no-repeat;
           background-size: 100% 100%;
+          transition: all 0.4s ease 0s;
         }
       }
       &:hover{
+        
+        // .text{
+        //   display: block;
+        // }
+        
         .upDiv{
           opacity: 1;
+          .upDivTit,.text{
+            transform: translateY(0%);
+          }
+          a{
+            height: 54px;
+          }
         }
       }
     }
@@ -290,13 +344,13 @@
     padding-bottom: 30px;
   }
   .product{
-    padding: 100px 15px;
+    padding: 50px 15px;
     box-sizing: border-box;
-    &>.text{
-      margin: 30px auto 0;
+    &>.title{
+      text-align: center;
     }
     .productCon{
-      margin: 40px auto 0px;
+      margin: 30px auto 0px;
       .productTits{
         width: 100%;
         overflow-x: scroll;
@@ -352,7 +406,7 @@
         }
       }
       .productConBox{
-        margin-top: 35px;
+        margin-top: 22px;
         height: auto;
         &>div{
           height: auto;
@@ -426,9 +480,13 @@
         margin-top: 20px;
         width: 100%;
         height: 165px;
+        .liImg{
+          height: 72px;
+        }
         .liTit{
           font-size: 16px;
         }
+        
         .upDiv{
           padding: 15px 15px;
           .upDivTit{
@@ -438,12 +496,22 @@
           .text{
             font-size: 12px;
             line-height: 20px;
+            padding: 0px 10px;
           }
           a{
             width: 32px;
-            height: 32px;
+            height: 0px;
             bottom: 15px;
           }
+          
+        }
+        &:hover{
+          .upDiv{
+            a{
+              height: 32px;
+            }
+          }
+          
         }
       }
     }

src/pages/socialResponsibility/App.js

@@ -10,7 +10,7 @@ import {
 
 export default class App {
     constructor() {
-        let common = new Common(document.querySelector('.main'),4)   //导航菜单高亮，0是首页，后面的按顺序添加
+        let common = new Common(document.querySelector('.main'),2)   //导航菜单高亮，0是首页，后面的按顺序添加
         this.isMobile = isMobile()
         this.num = 0;
         //

src/pages/socialResponsibility/index.html

@@ -136,6 +136,7 @@
             <a class="pageNum">2</a>
             <a class="pageNum">3</a>
             <a class="pageNum pageNums">...</a>
+            <a class="pageNum">300</a>
           </div>
           <a id="nextPage" class="nextPage">
             <span class="icon iconfont icon-jiantou"></span>

src/pages/socialResponsibility/index.less

@@ -52,9 +52,10 @@
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
-                padding: 40px 0;
+                padding: 40px 8px;
                 border-bottom:1px solid #DADADA;
                 transition: all .2s;
+                box-sizing: border-box;
                 .li_left{
                     width: 65px;
                     height: 66px;