Merge branch 'master' of http://git.cn-wbst.cn/zhongze/zhongze-front

src/pages/common/css/common.less

@@ -637,7 +637,7 @@ footer{
                     top: 42px;
                     left: 0px;
                     width: 100%;
-                    max-height: 100px;
+                    max-height: 120px;
                     overflow-y: auto;
                     background: #fff;
                     color: #000;

src/pages/intoZz/App.js

@@ -1,10 +1,11 @@
 import Swiper from 'swiper/bundle'
 import gsap from 'gsap'
 import LocomotiveScroll from 'locomotive-scroll';
-import Common from '../common/js/Common'
+import Common from '../common/js/Common';
 import {
     isMobile
-} from '../common/js/utils'
+} from '../common/js/utils';
+import $ from '/dev/static/lib/jquery-2.1.1.min.js';
 
 export default class App {
     constructor() {
@@ -51,8 +52,8 @@ export default class App {
         });
         
         fourRsons.forEach((item, index) => {
-            item.style.width = fourR.offsetWidth + 'px';
-            item.style.height = fourR.offsetWidth + 'px';
+            item.style.width = fourR.offsetWidth+1 + 'px';
+            item.style.height = fourR.offsetWidth+1 + 'px';
             item.style.zIndex = fourRsons.length - index;
         });
         function changeDiv(num, val) {
@@ -178,22 +179,22 @@ export default class App {
             let threeDivs=document.querySelectorAll(".threeDiv");
             
             let moresList=[];
-            fourMores.forEach((item, index) => {
-                let sonList=[];
-                let lists=item.querySelectorAll(".fours");
-                lists.forEach((item2,index2)=>{
-                    let newSlide=item2.cloneNode(true);
-                    sonList.push(newSlide);
-                });
-                moresList.push(sonList);
-                item.addEventListener("click", (e) => {
-                    moresList[index].forEach((item2,index2)=>{
-                        item.parentElement.appendChild(item2);
-                    });
-                    item.parentElement.parentElement.classList.add("fourMoreShow");
-                    item.remove();
-                });
-            });
+            // fourMores.forEach((item, index) => {
+            //     let sonList=[];
+            //     let lists=item.querySelectorAll(".fours");
+            //     lists.forEach((item2,index2)=>{
+            //         let newSlide=item2.cloneNode(true);
+            //         sonList.push(newSlide);
+            //     });
+            //     moresList.push(sonList);
+            //     item.addEventListener("click", (e) => {
+            //         moresList[index].forEach((item2,index2)=>{
+            //             item.parentElement.appendChild(item2);
+            //         });
+            //         item.parentElement.parentElement.classList.add("fourMoreShow");
+            //         item.remove();
+            //     });
+            // });
 
             function doFun() {
                 let fourMoress=document.querySelectorAll(".fourMore");
@@ -208,29 +209,63 @@ export default class App {
                 });
             }
 
-            threeDivs.forEach((item, index) => {
-                item.addEventListener("click", (e) => {
-                    if(item.parentElement.classList.contains("fourMoreShow")){
-                        item.parentElement.classList.remove("fourMoreShow");
-                        item.parentElement.querySelectorAll(".fours").forEach((item2,index2)=>{
-                            if(index2>3){
-                                item2.remove();
-                            }
+            // threeDivs.forEach((item, index) => {
+            //     item.addEventListener("click", (e) => {
+            //         if(item.parentElement.classList.contains("fourMoreShow")){
+            //             item.parentElement.classList.remove("fourMoreShow");
+            //             item.parentElement.querySelectorAll(".fours").forEach((item2,index2)=>{
+            //                 if(index2>3){
+            //                     item2.remove();
+            //                 }
                             
-                        });
-                        let newDiv = document.createElement('div');
-                        newDiv.className = 'fours fourMore';
+            //             });
+            //             let newDiv = document.createElement('div');
+            //             newDiv.className = 'fours fourMore';
 
-                        let innerDiv = document.createElement('div');
-                        innerDiv.className = 'fourDiv';
-                        innerDiv.textContent = '展开更多';
+            //             let innerDiv = document.createElement('div');
+            //             innerDiv.className = 'fourDiv';
+            //             innerDiv.textContent = '展开更多';
 
-                        newDiv.appendChild(innerDiv);
-                        item.parentElement.querySelector(".threeSon").appendChild(newDiv);
-                        doFun();
-                    }
-                });
+            //             newDiv.appendChild(innerDiv);
+            //             item.parentElement.querySelector(".threeSon").appendChild(newDiv);
+            //             doFun();
+            //         }
+            //     });
+            // });
+
+            $(".twoDiv").click(function(){
+                if($(this).parent().hasClass("closeDiv")){
+                    $(this).parent().removeClass("closeDiv");
+                    $(this).siblings().slideDown();
+                }else{
+                    $(this).parent().addClass("closeDiv");
+                    $(this).siblings().slideUp();
+                    
+                }
+            });
+            $(".hasFour").click(function(){
+                if($(this).parent().hasClass("closeDiv")){
+                    $(this).parent().removeClass("closeDiv");
+                    $(this).siblings().slideDown();
+                }else{
+                    $(this).parent().addClass("closeDiv");
+                    $(this).siblings().slideUp();
+                    
+                }
             });
+            $(".fourMore").click(function(){
+                if($(this).hasClass("openSon")){
+                    $(this).children(".fourMoreList").slideUp();
+                    $(this).removeClass("openSon");
+                    $(this).children(".fourDivMore").text("展开更多")
+                }else{
+                    $(this).children(".fourMoreList").slideDown()
+                    $(this).addClass("openSon");
+                    $(this).children(".fourDivMore").text("收起更多")
+                }
+                
+            });
+            
         }
         else{
             let fourMores=document.querySelectorAll(".fourMore");
@@ -242,32 +277,52 @@ export default class App {
                 });
                 item.remove();
             });
-            let twoDivs=document.querySelectorAll(".twoDiv");
-            twoDivs.forEach((item, index) => {
-                item.addEventListener("click", (e) => {
-                    if(item.parentElement.querySelectorAll('.three').length>0){
-                        if(item.parentElement.classList.contains("openDiv")){
-                            item.parentElement.classList.remove("openDiv");
-                        }else{
-                            item.parentElement.classList.add("openDiv");
-                        }
-                    }
+            // let twoDivs=document.querySelectorAll(".twoDiv");
+            // twoDivs.forEach((item, index) => {
+            //     item.addEventListener("click", (e) => {
+            //         if(item.parentElement.querySelectorAll('.three').length>0){
+            //             if(item.parentElement.classList.contains("openDiv")){
+            //                 item.parentElement.classList.remove("openDiv");
+            //             }else{
+            //                 item.parentElement.classList.add("openDiv");
+            //             }
+            //         }
                     
-                });
+            //     });
+            // });
+            $(".twoDiv").click(function(){
+                if($(this).parent().hasClass("openDiv")){
+                    $(this).parent().removeClass("openDiv");
+                    $(this).siblings().slideUp();
+                }else{
+                    $(this).parent().addClass("openDiv");
+                    $(this).siblings().slideDown();
+                    
+                }
             });
-            let threeDivs=document.querySelectorAll(".threeDiv");
-            threeDivs.forEach((item, index) => {
-                item.addEventListener("click", (e) => {
-                    if(item.parentElement.querySelectorAll('.fours').length>0){
-                        if(item.parentElement.classList.contains("openDiv")){
-                            item.parentElement.classList.remove("openDiv");
-                        }else{
-                            item.parentElement.classList.add("openDiv");
-                        }
-                    }
+            $(".threeDiv").click(function(){
+                if($(this).parent().hasClass("openDiv")){
+                    $(this).parent().removeClass("openDiv");
+                    $(this).siblings().slideUp();
+                }else{
+                    $(this).parent().addClass("openDiv");
+                    $(this).siblings().slideDown();
                     
-                });
+                }
             });
+            // let threeDivs=document.querySelectorAll(".threeDiv");
+            // threeDivs.forEach((item, index) => {
+            //     item.addEventListener("click", (e) => {
+            //         if(item.parentElement.querySelectorAll('.fours').length>0){
+            //             if(item.parentElement.classList.contains("openDiv")){
+            //                 item.parentElement.classList.remove("openDiv");
+            //             }else{
+            //                 item.parentElement.classList.add("openDiv");
+            //             }
+            //         }
+                    
+            //     });
+            // });
         }
     }
 

src/pages/intoZz/index.html

@@ -215,8 +215,8 @@
                             <div class="fourDiv">新疆中泽控股集团有限责任公司</div>
                           </div>
                           <!-- 超出的元素加到下面fourMoreList中，如果有更多就加上 fourMore -->
-                          <div class="fours fourMore">
-                            <div class="fourDiv">展开更多</div>
+                          <div class="fourMore">
+                            
                             <div class="fourMoreList">
                               <div class="fours">
                                 <div class="fourDiv">吉林中泽控股有限公司</div>
@@ -306,6 +306,7 @@
                                 <div class="fourDiv">吉林哈达湾开发建设股份有限公司</div>
                               </div>
                             </div>
+                            <div class="fourDivMore">展开更多</div>
                           </div>
                         </div>
                       </div>

src/pages/intoZz/index.less

@@ -170,6 +170,7 @@
         position: sticky;
         top: 80px;
         overflow: hidden;
+        max-width: 749px;
         max-height: 749px;
         .fourRson{
           position: absolute;
@@ -203,6 +204,7 @@
         .one{
           width: 100%;
           display: flex;
+          align-items: center;
           .zk{
             width: 24px;
             height: 24px;
@@ -220,6 +222,8 @@
               position: absolute;
               top: 50%;
               right: -14px;
+              opacity: 1;
+              transition: all 0.3s ease-in-out;
             }
             &::before{
               content: '';
@@ -240,6 +244,7 @@
               top: 50%;
               left: 50%;
               transform: translate(-50%,-50%);
+              opacity: 0;
             }
           }
           .oneDiv{
@@ -252,7 +257,7 @@
             writing-mode: vertical-rl;
             text-align: center;
             line-height: 112px;
-            margin-top: 353px;
+            // margin-top: 353px;
             position: relative;
             .oneLine{
               position: absolute;
@@ -282,20 +287,24 @@
             flex-wrap: wrap;
             align-content: space-around;
             position: relative;
-            &::before{
-              content: '';
-              width: 0px;
-              height: calc(100% - 560px);
-              position: absolute;
-              top: 136px;
-              left: 53px;
-              border-left: 1px solid #BBBEC0;
-            }
+            
             .two{
               width: 100%;
               display: flex;
-              margin-bottom: 100px;
+              align-items: center;
+              // margin-bottom: 100px;
+              padding: 50px 0px;
+              box-sizing: border-box;
               position: relative;
+              &::before{
+                content: '';
+                width: 0px;
+                height: 50%;
+                position: absolute;
+                bottom: 0;
+                left: -37px;
+                border-left: 1px solid #BBBEC0;
+              }
               &:first-child{
                 .twoDiv{
                   &::before{
@@ -306,15 +315,19 @@
               }
               &:last-child{
                 margin-bottom: 0px;
-                &::after{
-                  content: '';
-                  width: 8px;
-                  height: 100%;
-                  position: absolute;
-                  left: -40px;
-                  top: 277px;
-                  background: #F5F5F6;
+                &::before{
+                  bottom: auto;
+                  top: 0px;
                 }
+                // &::after{
+                //   content: '';
+                //   width: 8px;
+                //   height: 100%;
+                //   position: absolute;
+                //   left: -40px;
+                //   top: 277px;
+                //   background: #F5F5F6;
+                // }
                 .twoDiv{
                   &::before{
                     background: url('./images/towDw.jpg') no-repeat;
@@ -333,6 +346,7 @@
                 padding-left: 28px;
                 box-sizing: border-box;
                 position: relative;
+                cursor: pointer;
                 &::before{
                   content: '';
                   position: absolute;
@@ -345,11 +359,14 @@
                   transform: translateY(-50%);
                 }
               }
-              .hasThree{
-                margin-top: 110px;
-              }
-              .hasThreeFour{
-                margin-top: 234px;
+              // .hasThree{
+              //   margin-top: 110px;
+              // }
+              // .hasThreeFour{
+              //   margin-top: 234px;
+              // }
+              .hasFour{
+                cursor: pointer;
               }
               .twoSon{
                 width: calc(100% - 288px);
@@ -359,21 +376,29 @@
                 flex-wrap: wrap;
                 align-content: space-around;
                 position: relative;
-                &::before{
-                  content: '';
-                  width: 0px;
-                  height: calc(100% - 60px);
-                  position: absolute;
-                  top: 30px;
-                  left: 26px;
-                  border-left: 1px dashed #BBBEC0;
-                }
+                
+                
                 .three{
                   width: 100%;
                   display: flex;
-                  margin-bottom: 20px;
+                  padding: 10px 0px;
+                  align-items: center;
+                  position: relative;
+                  &::before{
+                    content: '';
+                    width: 0px;
+                    height: 100%;
+                    position: absolute;
+                    bottom: 0px;
+                    left: -34px;
+                    border-left: 1px dashed #BBBEC0;
+                  }
                   &:last-child{
-                    margin-bottom: 0px;
+                    &::before{
+                      bottom: auto;
+                      top: 0px;
+                      height: 50%;
+                    }
                     .threeDiv{
                       &::before{
                         background: url('./images/jtDw.jpg') no-repeat;
@@ -382,6 +407,9 @@
                     }
                   }
                   &:first-child{
+                    &::before{
+                      height: 50%;
+                    }
                     .threeDiv{
                       &::before{
                         background: url('./images/jtUp.jpg') no-repeat;
@@ -412,9 +440,7 @@
                       transform: translateY(-50%);
                     }
                   }
-                  .hasFour{
-                    margin-top: 126px;
-                  }
+                  
                   .threeSon{
                     width: calc(100% - 290px);
                     padding-left: 60px;
@@ -423,20 +449,27 @@
                     flex-wrap: wrap;
                     align-content: space-around;
                     position: relative;
-                    &::before{
-                      content: '';
-                      width: 0px;
-                      height: calc(100% - 60px);
-                      position: absolute;
-                      top: 30px;
-                      left: 26px;
-                      border-left: 1px dashed #BBBEC0;
-                    }
+                    
                     .fours{
                       width: 100%;
-                      margin-bottom: 20px;
+                      // margin-bottom: 20px;
+                      padding: 10px 0px;
+                      position: relative;
+                      &::before{
+                        content: '';
+                        width: 0px;
+                        height:100%;
+                        position: absolute;
+                        bottom: 0px;
+                        left:-34px;
+                        border-left: 1px dashed #BBBEC0;
+                      }
                       &:last-child{
-                        margin-bottom: 0px;
+                        &::before{
+                          bottom: auto;
+                          top: 0px;
+                          height: 50%;
+                        }
                         .fourDiv{
                           &::before{
                             background: url('./images/jtDw.jpg') no-repeat;
@@ -445,6 +478,9 @@
                         }
                       }
                       &:first-child{
+                        &::before{
+                          height: 50%;
+                        }
                         .fourDiv{
                           &::before{
                             background: url('./images/jtUp.jpg') no-repeat;
@@ -481,10 +517,109 @@
                       }
                     }
                     .fourMore{
+                      width: 100%;
+                      padding-top: 10px;
+                      position: relative;
+                      &::before{
+                        content: '';
+                        width: 0px;
+                        height:50%;
+                        position: absolute;
+                        top: 0px;
+                        left:-34px;
+                        border-left: 1px dashed #BBBEC0;
+                      
+                    }
+                      .fourMoreList{
+                        display: none;
+                        .fours{
+                          &:first-child{
+                            &::before{
+                              height: 100%;
+                            }
+                          }
+                          &:last-child{
+                            &::before{
+                              height: 100%;
+                            }
+                          }
+                        }
+                      }
                       .fourDiv{
+                        width: 396px;
+                        height: 60px;
+                        background: rgba(216,218,219,0.2);
+                        border-radius: 10px;
+                        border: 1px dashed #D8DADB;
+                        font-size: 20px;
+                        line-height: 60px;
+                        padding-left: 20px;
+                        box-sizing: border-box;
+                        position: relative;
+                        &::before{
+                          content: '';
+                          position: absolute;
+                          top: 50%;
+                          left: -35px;
+                          width: 24px;
+                          height: 18px;
+                          background: url('./images/jt.png') no-repeat;
+                          background-size: 24px 18px;
+                          transform: translateY(-50%);
+                        }
+                        &:last-child{
+                          
+                          &::before{
+                            background: url('./images/jt.png') no-repeat;
+                            background-size: 24px 18px;
+                          }
+                          
+                        }
+                        &:first-child{
+                          
+                            &::before{
+                              background: url('./images/jt.png') no-repeat;
+                              background-size: 24px 18px;
+                            }
+                          
+                        }
+                      }
+                      .fourDivMore{
+                        width: 396px;
+                        height: 60px;
+                        background: rgba(216,218,219,0.2);
+                        border-radius: 10px;
                         font-size: 20px;
                         color: #666666;
                         cursor: pointer;
+                        padding-left: 20px;
+                        box-sizing: border-box;
+                        position: relative;
+                        border: 1px dashed #D8DADB;
+                        line-height: 60px;
+                        &::before{
+                          content: '';
+                          position: absolute;
+                          top: 50%;
+                          left: -35px;
+                          width: 24px;
+                          height: 18px;
+                          transform: translateY(-50%);
+                          background: url('./images/jtDw.jpg') no-repeat;
+                          background-size: 24px 18px;
+                        }
+                        
+                      }
+                    }
+                    .openSon{
+                      padding-top: 0px;
+                      &::before{
+                        height: 40px;
+                        bottom: 30px;
+                        top: auto;
+                      }
+                      .fourDivMore{
+                        margin-top: 10px;
                       }
                     }
                   }
@@ -500,13 +635,26 @@
                   }
                 }
               }
-              .hasfourThree{
-                &::before{
-                  height: calc(100% - 290px);
-                  top: 150px;
-                }
-                .three{
-                  margin-bottom: 100px;
+              // .hasfourThree{
+              //   &::before{
+              //     height: calc(100% - 290px);
+              //     top: 150px;
+              //   }
+              //   .three{
+              //     margin-bottom: 0px;
+              //     padding: 50px 0px;
+              //   }
+              // }
+            }
+            .closeDiv{
+              &>div{
+                &>.zk{
+                  &::after{
+                    opacity: 1;
+                  }
+                  .linez{
+                    display: none;
+                  }
                 }
               }
             }
@@ -920,6 +1068,7 @@ display: none;
               }
               .two{
                 margin-bottom: 0px;
+                padding: 0px 0px;
                 flex-wrap: wrap;
                 &:last-child{
                   &::after{
@@ -959,7 +1108,11 @@ display: none;
                   .three{
                     margin-bottom: 0px;
                     flex-wrap: wrap;
+                    padding: 0px 0px;
                     border-bottom: 1px solid #BBBEC0;
+                    &::before{
+                      display: none;
+                    }
                     &:last-child{
                       border-bottom: 0px solid #BBBEC0;
                     }
@@ -993,7 +1146,11 @@ display: none;
                       .fours{
                         width: 100%;
                         margin-bottom: 0px;
+                        padding: 0px 0px;
                         padding-bottom: 20px;
+                        &::before{
+                          display: none;
+                        }
                         &:last-child{
                           padding-bottom: 30px;
                         }
@@ -1018,12 +1175,12 @@ display: none;
             }
           }
           .openDiv{
-            &>.twoSon{
-              display: flex !important;
-            }
-            &>.threeSon{
-              display: flex !important;
-            }
+            // &>.twoSon{
+            //   display: flex !important;
+            // }
+            // &>.threeSon{
+            //   display: flex !important;
+            // }
             &>div{
               &>.zk{
                 div{

src/pages/join/index.less

@@ -210,6 +210,11 @@
                             margin-bottom: 0;
                         }
                     }
+                    &>p{
+                        &:first-child{
+                            color: #B81C25;
+                        }
+                    }
                     .h4{
                         margin-top: 50px;
                         font-size: 24px;

src/pages/news/index.less

@@ -180,6 +180,7 @@
         max-width: 1920px;
         margin: 0 auto;
         background: #F6F6F6;
+        box-sizing: border-box;
         .news_list{
             width: 1300px;
             margin: 0 auto;