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

# Conflicts:
#	src/pages/index/index.html

dev/static/font/cavan.css

@@ -0,0 +1,9 @@
+@font-face {
+    font-family: 'MyFont1'; /* 自定义字体名称 */
+    src: url('./FOTONTYPE-BOLD.TTF') format('truetype');
+}
+
+@font-face {
+    font-family: 'MyFont2';
+    src: url('./FOTONTYPE-LIGHT.TTF') format('truetype');
+}

dev/static/font/iconfont.css

@@ -1,10 +1,8 @@
 @font-face {
-  font-family: "iconfont"; /* Project id 4773851 */
-  src: 
-       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-       url('iconfont.woff?t=1734012910808') format('woff'),
-       url('iconfont.ttf?t=1734012910808') format('truetype'),
-       url('iconfont.svg?t=1734012910808#iconfont') format('svg');
+  font-family: "iconfont"; /* Project id 4790103 */
+  src: url('iconfont.woff2?t=1734834209256') format('woff2'),
+       url('iconfont.woff?t=1734834209256') format('woff'),
+       url('iconfont.ttf?t=1734834209256') format('truetype');
 }
 
 .iconfont {
@@ -15,28 +13,12 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-youjian:before {
-  content: "\e804";
+.icon-right:before {
+  content: "\e708";
 }
 
-.icon-dianhua:before {
-  content: "\e67b";
-}
-
-.icon-dadian-1:before {
-  content: "\e602";
-}
-
-.icon-xiala:before {
-  content: "\e60d";
-}
-
-.icon-logo:before {
-  content: "\e60c";
-}
-
-.icon-guanbi:before {
-  content: "\e676";
+.icon-left:before {
+  content: "\e709";
 }
 
 .icon-arrow-right:before {
@@ -47,19 +29,23 @@
   content: "\e707";
 }
 
-.icon-weibo:before {
-  content: "\e619";
-}
-
 .icon-jiantou:before {
   content: "\e63a";
 }
 
-.icon-kuaishou:before {
-  content: "\e657";
+.icon-guanbi:before {
+  content: "\e676";
+}
+
+.icon-xiazai:before {
+  content: "\e62e";
+}
+
+.icon-xiala:before {
+  content: "\e60d";
 }
 
-.icon-douyin:before {
-  content: "\e600";
+.icon-search:before {
+  content: "\e602";
 }
 

src/pages/common/css/common.less

@@ -14,6 +14,7 @@ pc端：
 
 */
 @import "/dev/static/font/iconfont.css";
+@import "/dev/static/font/cavan.css";
 
 html,
 body,
@@ -39,13 +40,13 @@ html,
 body {
     width: 100%;
     height: 100%;
-    font-family: Arial, sans-serif;
+    font-family: 'MyFont2',sans-serif;
     font-size: 16px;
-    color: #333333;
+    color: #231f20;
 }
 a{
     text-decoration: none;
-    color: #333333;
+    color: #231f20;
 }
 img{
     width: 100%;
@@ -58,21 +59,22 @@ img:not([src]) {
 
 .btn{
     position: relative;
-    z-index: 2;
-    width: 200px;
+    min-width: 200px;
     height: 50px;
+    margin: 0px auto;
+    background: #B81C25;
     box-sizing: border-box;
     color: #ffffff;
-    border: 1px solid #ffffff;
     display: inline-block;
     text-align: center;
     line-height: 50px;
     font-size: 14px;
     transition: all .3s ease-in-out;
     cursor: pointer;
+    border-radius: 8px;
     &:hover{
-        background: #48A038;
-        border-color: #48A038;
+        // background: #48A038;
+        // border-color: #48A038;
     }
 }
 .btnBlack{
@@ -104,73 +106,16 @@ img:not([src]) {
 }
 
 //公共文本样式，默认是加粗，后面加R表示不加粗,正文文本样式用text
-.h1,.h2,.h3,.h4,.h6,.h5,.h7{
+.title{
+    font-size: 56px;
+    font-family: 'MyFont1',sans-serif;
     font-weight: bold;
 }
-.h1{
-    font-size: 110px;
-    line-height: 150px;
-    letter-spacing:-1px;
-}
-.h2{
-    font-size: 72px;
-    color: #181818;
-    line-height: 100px;
-}
-.h3{
-    font-size: 40px;
-    line-height: 50px;
-}
-.h3R{
-    font-size: 40px;
-    line-height: 50px;
-}
-.h4{
-    font-size: 24px;
-    line-height: 40px;
-}
-.h4R{
-    font-size: 24px;
-    line-height: 40px;
-}
-.h5{
-    font-size: 18px;
-    line-height: 36px;
-}
-.h5R{
-    font-size: 18px;
-    font-weight: 400;
-    line-height: 36px;
-}
-.h6{
-    font-size: 16px;
-    line-height: 32px;
-}
-.h6R{
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 32px;
-}
-.h7{
-    font-size: 14px;
-    line-height: 28px;
-}
-.h7R{
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 28px;
-}
-
 // 正文文本样式
 .text{
-    font-size: 24px;
+    font-size: 20px;
     line-height: 44px;
 }
-.text48{
-    font-size: 24px;
-    line-height: 44px;
-    font-weight: bold;
-}
 
 
 
@@ -215,15 +160,18 @@ header{
     position: fixed;
     z-index: 9;
     transition: all .3s ease-in-out;
+
     .headCon{
         width: 100%;
         margin: 0 auto;
         max-width: 1920px;
         // box-shadow: 0px 0px 34px 9px rgba(0,0,0,0.1);
         background: #ffffff;
+        border-bottom: 1px solid rgba(0,0,0,0.1);
     }
     .menuType{
         background: #ffffff12;
+        border-bottom: 0px solid rgba(0,0,0,0);
         .logo{
             
         }
@@ -243,10 +191,10 @@ header{
                 a{
                     color: #ffffff;
                     &:hover{
-                        color: #48A038;
+                        color: #B81C25;
                         &.aborder{
-                            border: 1px solid #48A038;
-                            background: #48A038;
+                            border: 1px solid #B81C25;
+                            background: #B81C25;
                             color: #ffffff;
                         }
                     }
@@ -254,7 +202,7 @@ header{
                 .aborder{
                     border: 1px solid #ffffff;
                 }
-                span{
+                .line{
                     background: #ffffff;
                 }
             }
@@ -309,12 +257,12 @@ header{
                 
             }
             &:hover{
-                &>a{color: #48A038;}
+                &>a{color: #B81C25;}
             }
         }
         .menuClicked{
             &>a{
-                color: #48A038;
+                color: #B81C25;
             }
         }
     }
@@ -348,7 +296,7 @@ header{
             padding: 10px 0;
             transition: all .3s ease;
             &:hover{
-                color: #48A038;
+                color: #B81C25;
             }
             &:last-child {
                 margin-bottom: 0;
@@ -372,19 +320,23 @@ header{
             color: #000000;
             transition: all .3s ease;
             &:hover{
-                color: #48A038;
+                color: #B81C25;
                 &.aborder{
-                    border: 1px solid #48A038;
-                    background: #48A038;
+                    border: 1px solid #B81C25;
+                    background: #B81C25;
                     color: #fff;
                 }
             }
         }
         .aborder{
             border: 1px solid #000000;
-            padding: 10px 15px;
+            line-height: 30px;
+            text-align: center;
+            width: 100px;
+            height: 30px;
+            box-sizing: border-box;
         }
-        span{
+        .line{
             display: inline-block;
             width: 1px;
             height: 13px;
@@ -488,14 +440,14 @@ header{
             overflow-y: auto;
             &>div{
                 width: 100%;
-                margin-bottom: 50px;
+                margin-bottom: 30px;
                 a{
                     font-size: 16px;
                     display: block;
                     margin-bottom: 30px;
                 }
                 .title{
-                    font-size: 24px;
+                    font-size: 18px;
                 }
             }
         }
@@ -529,64 +481,175 @@ footer{
     width: 100%;
     max-width: 1920px;
     margin: 0 auto;
-    background-color: #EFEFEF;
+    background-color: #B81C25;
     padding-top: 80px;
     position: relative;
     .footer{
         width: 100%;
-        padding:0px 100px;
-        box-sizing: border-box;
-        margin-bottom: 10px;
+        max-width: 1300px;
+        margin: 0px auto;
+        font-size: 14px;
         display: flex;
-        color: #000;
         justify-content: flex-start;
-        .h4{
-            margin-bottom: 20px;
-        }
-        .h5R{
-            margin-top: 15px;
-        }
-        &>div{
-            margin-right: 110px;
-            a{
-                color: #000;
-                display: block;
-                span{
+        .footerLeft{
+            width: 320px;
+            text-align: left;
+            color: #fff;
+            margin-right: 100px;
+            .footerLogo{
+                width: 291px;
+                height: 64px;
+                background: url('../images/logoBai.png') no-repeat;
+                background-size: 100% 100%;
+            }
+            .footerLCon1{
+                width: 100%;
+                display: flex;
+                margin-top: 50px;
+                justify-content: space-between;
+                &>div{
                     display: inline-block;
-                    position: relative;
-                    &::before{
-                        content: '';
-                        width: 0%;
-                        height: 1px;
-                        background-color: #000;
-                        position: absolute;
-                        bottom: -2px;
-                        transition: all 0.3s ease-in-out;
+                    font-size: 14px;
+                    font-weight: bold;
+                    span{
+                        opacity: 0.7;
+                        font-size: 16px;
+                        font-weight: 100;
                     }
                 }
-                &:hover{
-                    span{
-                        &::before{
-                            width: 100%;
+            }
+            .footerLCon2{
+                width: 100%;
+                font-size: 14px;
+                font-weight: bold;
+                margin-top: 40px;
+                span{
+                    opacity: 0.7;
+                    font-weight: 100;
+                }
+                .txt16{
+                    font-size: 16px;
+                }
+            }
+        }
+        .footerRight{
+            width: 176px;
+            .btnDown{
+                width: 100%;
+                height: 40px;
+                border-radius: 8px;
+                border: 1px solid #FFFFFF;
+                position: relative;
+                .btnDownTitle{
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    box-sizing: border-box;
+                    padding: 0px 20px;
+                    color: #fff;
+                    cursor: pointer;
+                    .tit{
+                        opacity: 0.5;
+                    }
+                    .iconfont{
+                        font-size: 14px;
+                        float: right;
+                    }
+                }
+                .btnDownMenu{
+                    position: absolute;
+                    top: 42px;
+                    left: 0px;
+                    width: 100%;
+                    max-height: 100px;
+                    overflow-y: auto;
+                    background: #fff;
+                    color: #000;
+                    border-radius: 8px;
+                    clip-path: inset(0% 0% 100% 0%);
+                    transition: all 0.3s ease-in-out;
+                    a{
+                        width: 100%;
+                        line-height: 20px;
+                        padding: 10px 20px;
+                        display: block;
+                        box-sizing: border-box;
+                        transition: all .3s ease-in-out;
+                        &:hover{
+                            color: #B81C25;
                         }
                     }
                 }
+                .btnShow{
+                    clip-path: inset(0% 0% 0% 0%);
+                }
             }
-            .h7{
-                margin-bottom: 5px;
+            .btnUp,.footerLConM{
+                display: none;
             }
-            .h7R{
-                margin-bottom: 10px;
+        }
+        .footerCenter{
+            width: 730px;
+            box-sizing: border-box;
+            margin-bottom: 10px;
+            margin-right: 20px;
+            display: flex;
+            color: #fff;
+            justify-content: flex-start;
+            .h4{
+                margin-bottom: 20px;
             }
-            &>span{
-                display: none;
+            .h5R{
+                margin-top: 15px;
             }
-            .footerShow{
-                display: flex;
-                flex-direction: column;
+            &>div{
+                margin-right: 58px;
+                a{
+                    color: #fff;
+                    display: block;
+                    span{
+                        display: inline-block;
+                        position: relative;
+                        &::before{
+                            content: '';
+                            position: absolute;
+                            bottom: -5px;
+                            left: 0px;
+                            width: 0%;
+                            height: 1px;
+                            background: #fff;
+                            transition: all .3s ease-in-out;
+                        }
+                    }
+                    &:hover{
+                        span{
+                            &::before{
+                                width: 100%;
+                            }
+                        }
+                    }
+                }
+                .h7{
+                    margin-bottom: 20px;
+                    font-weight: bold;
+                    font-family: 'MyFont1';
+                }
+                .h7R{
+                    margin-bottom: 20px;
+                    opacity: 0.7;
+                }
+                &>span{
+                    display: none;
+                }
+                .footerShow{
+                    display: flex;
+                    flex-direction: column;
+                }
             }
         }
-        
+        .footerCenterM{
+            display: none;
+        }
     }
     .footerIcon{
         width: calc(100% - 200px);
@@ -595,12 +658,29 @@ footer{
         flex-direction: row;
         justify-content: flex-end;
         padding-bottom: 20px;
-        border-bottom: 1px solid #c6c6c6;
+        border-bottom: 1px solid #ffffff21;
+        color: #fff;
         &>div{
             margin-left: 40px;
             cursor: pointer;
+            position: relative;
+            &>div{
+                width: 187px;
+                height: 186px;
+                position: absolute;
+                bottom:40px;
+                left: -85px;
+                background: url('../images/weixin.png') no-repeat;
+                background-size: 100%;
+                opacity: 0;
+                clip-path: inset(0 0 100% 0);
+                transition: opacity 0.3s ease-in-out;
+            }
             &:hover{
-                color: #48A038;
+                &>div{
+                    opacity: 1;
+                    clip-path: inset(0 0 0 0);
+                }
             }
         }
         .iconfont{
@@ -611,12 +691,13 @@ footer{
     .footerText{
         width: 100%;
         text-align: center;
-        color: #9d9d9d;
-        font-size: 14px;
+        color: #fff;
+        font-size: 12px;
         box-sizing: border-box;
-        padding:16px 5px;
+        padding:20px 15px;
+        opacity: 0.7;
         a{
-            color: #9d9d9d;
+            color: #fff;
         }
         br,&>span{
             display: none;
@@ -654,55 +735,16 @@ footer{
     body {
         font-size: 3.5vw;
     }
-    .h1{
-        font-size: 50px;
-        line-height: 75px;
-    }
-    .h2{
-        font-size: 40px;
-        line-height: 50px;
-    }
-    .h3{
-        font-size: 24px;
-        line-height: 40px;
-    }
-    .h3R{
-        font-size: 24px;
-        line-height: 40px;
-    }
-    .h4{
-        font-size: 16px;
-        line-height: 32px;
-    }
-    .h4R{
-        font-size: 16px;
-        line-height: 32px;
-    }
-    .h5{
-        font-size: 14px;
-    }
-    .h5R{
-        font-size: 14px;
-    }
-    .h6{
-        font-size: 14px;
-        line-height: 24px;
-    }
-    .h6R{
-        font-size: 14px;
-        line-height: 24px;
-    }
-    .h7{
-        font-size: 12px;
-    }
-    .h7R{
-        font-size: 12px;
+    .title{
+        font-size: 32px;
+        line-height: 48px;
     }
     // 正文文本样式
     .text{
         font-size: 16px;
-        line-height: 30px;
+        line-height: 32px;
     }
+    
     .btn{
         width: 175px;
         height: 35px;
@@ -843,68 +885,137 @@ footer{
     footer{
         width: 100%;
         box-sizing: border-box;
-        padding: 20px 15px 55px 15px;
+        padding: 45px 15px 0px 15px;
         position: relative;
         .footer{
             margin-bottom: 0px;
             justify-content: space-between;
             flex-wrap: wrap;
             padding: 0px;
-            &>div{
-                width:100%;
-                margin-bottom: 0px;
-                padding: 20px 0px;
+            .footerLeft{
+                width: 100%;
                 margin-right: 0px;
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: space-between;
-                border-bottom: 1px solid #e5e5e5;
-                .h7{
-                    margin-bottom: 0px;
-                    line-height: 17px;
-                    font-weight: normal;
+                text-align: center;
+                .footerLogo{
+                    width: 175px;
+                    height: 33px;
+                    margin: 0px auto;
                 }
-                .h7R{
-                    margin-bottom: 0px;
+                .footerLCon1,.footerLCon2{
+                    display: none;
                 }
-                &>a{
-                    width: 50%;
-                    span{
-                        &::before{
-                            display: none;
+            }
+            .footerCenter{
+                width: 100%;
+                margin-top: 55px;
+                margin-bottom: 30px;
+                margin-right: 0px;
+                justify-content: flex-start;
+                flex-wrap: wrap;
+                display: none;
+                &>div{
+                    margin-right: 0px;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-between;
+                    width: 55px;
+                    margin-bottom: 0px;
+                    padding: 15px 0px;
+                    .h7{
+                        margin-bottom: 0px;
+                        line-height: 17px;
+                        font-weight: normal;
+                    }
+                    .h7R{
+                        margin-bottom: 0px;
+                    }
+                    &>a{
+                        width: 50%;
+                        span{
+                            &::before{
+                                display: none;
+                            }
                         }
                     }
-                }
-                &>span{
-                    font-size: 17px;
-                    width: 17px;
-                    height: 17px;
-                    line-height: 17px;
-                    display: inline-block;
-                    &::before{
-                        transform: rotate(90deg);
+                    &>span{
+                        font-size: 17px;
+                        width: 17px;
+                        height: 17px;
+                        line-height: 17px;
                         display: inline-block;
+                        &::before{
+                            transform: rotate(90deg);
+                            display: inline-block;
+                            transition: all 0.5s ease-in-out;
+                        }
+                    }
+                    .footerShow{
+                        width: 100%;
+                        display: flex;
+                        flex-wrap: wrap;
+                        height: 0px;
+                        overflow: hidden;
                         transition: all 0.5s ease-in-out;
+                        padding-top: 0px;
+                        box-sizing: border-box;
+                        flex-direction: row;
+                        align-items: center;
+                        a{
+                            width: 100%;
+                            box-sizing: border-box;
+                            display: inline-block;
+                        }
                     }
+
                 }
-                .footerShow{
+            }
+            .footerCenterM{
+                display: block;
+                width: 100%;
+                margin-top: 40px;
+                margin-bottom: 30px;
+                padding-bottom: 15px;
+                border-bottom: 1px solid #ffffff21;
+                a{
+                    width: 60px;
+                    color: #fff;
+                    font-size: 14px;
+                    display: inline-block;
+                    padding: 15px 0px;
+                }
+                div{
+                    width: 1px;
+                    height: 8px;
+                    background: #fff;
+                    opacity: 0.2;
+                    display: inline-block;
+                    margin: 0px 13px;
+                }
+            }
+            .footerRight{
+                width: 100%;
+                color: #FFFFFF;
+                .btnUp{
+                    display: block;
                     width: 100%;
-                    display: flex;
-                    flex-wrap: wrap;
-                    height: 0px;
-                    overflow: hidden;
-                    transition: all 0.5s ease-in-out;
-                    padding-top: 0px;
-                    box-sizing: border-box;
-                    flex-direction: row;
-                    align-items: center;
+                    font-size: 14px;
+                    margin-bottom: 20px;
+                }
+                .footerLConM{
+                    display: block;
+                    font-size: 14px;
+                    padding-top: 10px;
                     a{
+                        color: #FFFFFF;
+                        margin-top: 30px;
+                        display: block;
                         width: 100%;
-                        box-sizing: border-box;
-                        display: inline-block;
+                    }
+                    div{
+                        color: #FFFFFF;
+                        margin-top: 30px;
                     }
                 }
-
             }
             .ckShow{
                 &>span{
@@ -936,8 +1047,8 @@ footer{
         .footerIcon{
             width: 100%;
             justify-content: space-evenly;
-            padding-bottom: 40px;
-            padding-top: 40px;
+            padding-bottom: 45px;
+            padding-top: 60px;
             &>div{
                 margin-left: 0px;
             }

src/pages/common/js/Common.js

@@ -35,6 +35,20 @@ export default class Common {
     // window.requestUrl = 'https://www.foton.com.cn';
     this.textAni();
     
+    let btnDownTitle = document.querySelector(".btnDownTitle");
+    let btnDownMenu = document.querySelector(".btnDownMenu");
+    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';
+    });
+    
   }
   textAni(){
     let mod = this.isMobile;
@@ -215,6 +229,8 @@ export default class Common {
           }
         });
     });
+    
+    
   }
   
 }

src/pages/common/tpl/footer.tpl

@@ -1,52 +1,100 @@
 <footer>
     <div class="wow fadeIn footer">
-        <div class="footerClick">
-            <a class="h7" href="./news.html"><span>产品</span></a>
-            <span class="icon iconfont icon-arrow-right"></span>
-            <div class="footerShow show1"><a class="h7R" href="./news.html"><span>新能源整车</span></a>
-            <a class="h7R" href="./news.html#structure"><span>核心零部件</span></a>
-            <a class="h7R" href="./news.html#structure"><span>充电站</span></a>
-            <a class="h7R" href="./news.html#structure"><span>软件服务</span></a></div>
+        <div class="footerLeft">
+            <div class="footerLogo"></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="footerClick">
-            <a class="h7" href="./aboutUs.html"><span>解决方案</span></a>
-            <span class="icon iconfont icon-arrow-right"></span>
-            <div class="footerShow show2"><a class="h7R" href="./aboutUs.html#introduction"><span>能源管理方案</span></a>
-            <a class="h7R" href="./aboutUs.html#structure"><span>智慧能源管理体系</span></a>
-            <a class="h7R" href="./aboutUs.html#structure"><span>租贸业务管理方案</span></a>
-            <a class="h7R" href="./aboutUs.html#structure"><span>二手车解决方案</span></a></div>
-        </div>
-        <div class="footerClick">
-            <a class="h7" href="./serve.html"><span>服务</span></a>
-            <span class="icon iconfont icon-arrow-right"></span>
-            <div class="footerShow show3"><a class="h7R" href="./serve.html"><span>购车流程</span></a>
-            <a class="h7R" href="./serve.html#serve2"><span>门店地图</span></a>
-            <a class="h7R" href="./serve.html#serve3"><span>门店预约体验</span></a>
-            <a class="h7R" href="./serve.html#serve4"><span>服务体系</span></a>
-            <a class="h7R" href="./serve.html#serve5"><span>用户留言</span></a></div>
+        <div class="footerCenter">
+            <div class="footerClick">
+                <a class="h7" href=""><span>走进中泽</span></a>
+                <span class="icon iconfont icon-arrow-right"></span>
+                <div class="footerShow show1"><a class="h7R" href=""><span>集团简介</span></a>
+                <a class="h7R" href=""><span>发展历程</span></a>
+                <a class="h7R" href=""><span>企业架构</span></a>
+                <a class="h7R" href=""><span>企业文化</span></a>
+                <a class="h7R" href=""><span>资质荣誉</span></a>
+                </div>
+            </div>
+            <div class="footerClick">
+                <a class="h7" href=""><span>产业布局</span></a>
+                <span class="icon iconfont icon-arrow-right"></span>
+                <div class="footerShow show2"><a class="h7R" href=""><span>铁合金</span></a>
+                <a class="h7R" href=""><span>炭素</span></a>
+                <a class="h7R" href=""><span>钼业</span></a>
+                <a class="h7R" href=""><span>镍业</span></a>
+                <a class="h7R" href=""><span>化工</span></a>
+                <a class="h7R" href=""><span>装备制造</span></a>
+                <a class="h7R" href=""><span>产业互联网</span></a>
+                <a class="h7R" href=""><span>金融</span></a>
+                <a class="h7R" href=""><span>其他</span></a></div>
+            </div>
+            
+            <div class="footerClick">
+                <a class="h7" href=""><span>新闻中心</span></a>
+                <span class="icon iconfont icon-arrow-right"></span>
+                <div class="footerShow show2"><a class="h7R" href=""><span>集团新闻</span></a>
+                <a class="h7R" href=""><span>前沿资讯</span></a>
+                <a class="h7R" href=""><span>政策引领</span></a>
+                <a class="h7R" href=""><span>研发创新</span></a></div>
+            </div>
+            <div class="footerClick">
+                <a class="h7" href=""><span>党建工作</span></a>
+                <span class="icon iconfont icon-arrow-right"></span>
+                <div class="footerShow show2"><a class="h7R" href=""><span>企业党建</span></a>
+                <a class="h7R" href=""><span>学习文件</span></a></div>
+            </div>
+            <div class="footerClick">
+                <a class="h7" href=""><span>社会责任</span></a>
+                <span class="icon iconfont icon-arrow-right"></span>
+                <div class="footerShow show2"><a class="h7R" href=""><span>社会公益</span></a>
+                <a class="h7R" href=""><span>绿色转型</span></a></div>
+            </div>
+            <div class="footerClick">
+                <a class="h7" href=""><span>加入中泽</span></a>
+                <span class="icon iconfont icon-arrow-right"></span>
+                <div class="footerShow show2"><a class="h7R" href=""><span>招聘信息</span></a>
+                <a class="h7R" href=""><span>招标信息</span></a>
+                <a class="h7R" href=""><span>联系我们</span></a></div>
+            </div>
         </div>
-        <div class="footerClick">
-            <a class="h7" href="./aboutUs.html"><span>新闻资讯</span></a>
-            <span class="icon iconfont icon-arrow-right"></span>
-            <div class="footerShow show4"><a class="h7R" href="./aboutUs.html#introduction"><span>公司新闻</span></a>
-            <a class="h7R" href="./aboutUs.html#structure"><span>行业新闻</span></a></div>
+        <div class="footerCenterM">
+            <a class="h7" href="">走进中泽</a>
+            <div></div>
+            <a class="h7" href="">产业布局</a>
+            <div></div>
+            <a class="h7" href="">新闻中心</a>
+            <div></div>
+            <a class="h7" href="">党建工作</a>
+            <a class="h7" href="">社会责任</a>
+            <div></div>
+            <a class="h7" href="">加入中泽</a>
         </div>
-        <div class="footerClick">
-            <a class="h7" href="./about.html"><span>关于卡文</span></a>
-            <span class="icon iconfont icon-arrow-right"></span>
-            <div class="footerShow show5"><a class="h7R" href="./about.html#about1"><span>品牌故事</span></a>
-            <a class="h7R" href="./about.html#about2"><span>可持续发展</span></a>
-            <a class="h7R" href="./about.html#about3"><span>经销商加盟</span></a>
-            <a class="h7R" href="./about.html#about4"><span>联系我们</span></a></div>
+        <div class="footerRight">
+            <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 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>
     </div>
     <div class="footerIcon">
-        <div><span class="icon iconfont icon-weixin"></span></div>
-        <div><span class="icon iconfont icon-douyin"></span></div>
-        <div><span class="icon iconfont icon-weibo"></span></div>
-        <div><span class="icon iconfont icon-kuaishou"></span></div>
+        <div class="weixin">
+            <span class="icon iconfont icon-weixin"></span>
+            <div></div>
+        </div>
     </div>
-    <div class="footerText">法律声明 <span></span>隐私政策 <br>版权公告 Copyright © 2024 北京卡文新能源汽车有限公司　<br><a href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备2023038730号</a></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>
     <!--<div class="goTop">
         <div class="btn goTopBtn">
                   <a href="javascript:void(0);">
@@ -60,8 +108,8 @@
                 </div>
     </div> -->
 </footer>
-<div class="chooseM">
+<!--<div class="chooseM">
     <a href="">购车咨询</a>
     <span></span>
     <a href="./serveBooking.html">门店预约体验</a>
-</div>
+</div> -->

src/pages/common/tpl/header.tpl

@@ -2,63 +2,71 @@
     <div class="headCon"><div class="headerPC">
         <div class="logo"></div>
         <div class="menu">
-            <div class="menuOne"><a href="./index.html">首页</a></div>
             <div class="menuOne">
-                <a href="./product.html">产品</a>
-                <div class="menuSon">
+                <a href="">走进中泽</a>
+                <!--<div class="menuSon">
                     <div class="menuUp"></div>
-                    <a href="./product.html">新能源整车</a>
-                    <a href="./coreComponents.html">核心零部件</a>
-                    <a href="./chargingStation.html">充电站</a>
-                    <a href="./softwareServices.html">软件服务</a>
-                </div>
+                    <a href=""><span>集团简介</span></a>
+                    <a href=""><span>发展历程</span></a>
+                    <a href=""><span>企业架构</span></a>
+                    <a href=""><span>企业文化</span></a>
+                    <a href=""><span>资质荣誉</span></a>
+                </div>-->
             </div>
             <div class="menuOne">
-                <a href="./cultural.html">解决方案</a>
-                <div class="menuSon">
+                <a href="">产业布局</a>
+                <!--<div class="menuSon">
                     <div class="menuUp"></div>
                     <a href="./aboutUs.html#introduction">能源管理方案</a>
                     <a href="./aboutUs.html#structure">智慧能源管理体系</a>
                     <a href="./aboutUs.html#structure">租贸业务管理方案</a>
                     <a href="./aboutUs.html#structure">二手车解决方案</a>
-                </div>
+                </div>-->
             </div>
             <div class="menuOne">
-                <a href="./serve.html">服务</a>
-                <div class="menuSon">
+                <a href="./news.html">新闻中心</a>
+                <!--<div class="menuSon">
                     <div class="menuUp"></div>
                     <a href="./serve.html">购车流程</a>
                     <a href="./serve.html#serve2">门店地图</a>
                     <a href="./serve.html#serve3">门店预约体验</a>
                     <a href="./serve.html#serve4">服务体系</a>
                     <a href="./serve.html#serve5">用户留言</a>
-                </div>
+                </div>-->
             </div>
             <div class="menuOne">
-                <a href="./news.html">新闻资讯</a>
-                <div class="menuSon">
+                <a href="">党建工作</a>
+                <!--<div class="menuSon">
                     <div class="menuUp"></div>
                     <a href="./news.html">公司新闻</a>
                     <a href="./news.html">行业新闻</a>
-                </div>
+                </div>-->
             </div>
             <div class="menuOne">
-                <a href="./about.html">关于卡文</a>
-                <div class="menuSon">
+                <a href="">社会责任</a>
+                <!--<div class="menuSon">
                     <div class="menuUp"></div>
                     <a href="./about.html#about1">品牌故事</a>
                     <a href="./about.html#about2">可持续发展</a>
                     <a href="./about.html#about3">经销商加盟</a>
                     <a href="./about.html#about4">联系我们</a>
-                </div>
+                </div>-->
+            </div>
+            <div class="menuOne">
+                <a href="">加入中泽</a>
+                <!--<div class="menuSon">
+                    <div class="menuUp"></div>
+                    <a href="./about.html#about1">品牌故事</a>
+                    <a href="./about.html#about2">可持续发展</a>
+                    <a href="./about.html#about3">经销商加盟</a>
+                    <a href="./about.html#about4">联系我们</a>
+                </div>-->
             </div>
         </div>
         <div class="language menuOne">
-            <a href="" class="btn2 btnW">购车咨询</a>
-            <span class="line"></span>
-            <a href="./serveMap.html" class="btn2 btnW">门店地图</a>
+            <a href="./serveMap.html" class="btn2 btnW"><span class="iconfont icon-search"></span></a>
             <span class="line"></span>
-            <a href="./serveBooking.html" class="aborder">门店预约体验</a>
+            <a href="./serveBooking.html" class="aborder">联系我们</a>
         </div>
     </div>
     <div class="headerMobile">
@@ -74,49 +82,28 @@
             <div class="navBg"></div>
             <div class="navMenu">
                 <div>
-                    <a class="title" href="./index.html">首页</a>
+                    <a class="title" href="">走进中泽</a>
                 </div>
                 <div>
-                    <a class="title" href="./aboutUs.html">产品</a>
-                    <a href="">新能源整车</a>
-                    <a href="">核心零部件</a>
-                    <a href="">充电站</a>
-                    <a href="">软件服务</a>
+                    <a class="title" href="">产业布局</a>
                 </div>
                 <div>
-                    <a class="title" href="./cultural.html">解决方案</a>
-                    <a href="./aboutUs.html#introduction">能源管理方案</a>
-                    <a href="./aboutUs.html#structure">智慧能源管理体系</a>
-                    <a href="./aboutUs.html#structure">租贸业务管理方案</a>
-                    <a href="./aboutUs.html#structure">二手车解决方案</a>
+                    <a class="title" href="./news.html">新闻中心</a>
                 </div>
                 <div>
-                    <a class="title" href="./serve.html">服务</a>
-                    <a href="./serve.html">购车流程</a>
-                    <a href="./serve.html#serve2">门店地图</a>
-                    <a href="./serve.html#serve3">门店预约体验</a>
-                    <a href="./serve.html#serve4">服务体系</a>
-                    <a href="./serve.html#serve5">用户留言</a>
+                    <a class="title" href="">党建工作</a>
                 </div>
                 <div>
-                    <a class="title" href="./contactUs.html">新闻资讯</a>
-                    <a href="./aboutUs.html#introduction">公司新闻</a>
-                    <a href="./aboutUs.html#structure">行业新闻</a>
+                    <a class="title" href="">社会责任</a>
                 </div>
                 <div>
-                    <a class="title" href="./about.html">关于卡文</a>
-                    <a href="./about.html#about1">品牌故事</a>
-                    <a href="./about.html#about2">可持续发展</a>
-                    <a href="./about.html#about3">经销商加盟</a>
-                    <a href="./about.html#about4">联系我们</a>
+                    <a class="title" href="">加入中泽</a>
                 </div>
             </div>
             <div class="language">
-                <a href="http://test.cn-wbst.com/abs/en/index.html">EN</a>
-                <div></div>
-                <a href="http://test.cn-wbst.com/abs/tc/index.html">中文繁體</a>
+                <a href=""><span class="iconfont icon-search"></span></a>
                 <div></div>
-                <a href="http://test.cn-wbst.com/abs/zh/index.html">中文简体</a>
+                <a href="">联系我们</a>
             </div>
         </div>
     </div></div>

src/pages/index/App.js

@@ -8,11 +8,10 @@ import {
 
 export default class App {
     constructor() {
-        let common = new Common(document.querySelector('.main'),0)   //导航菜单高亮，0是首页，后面的按顺序添加
+        let common = new Common()   //导航菜单高亮，0是首页，后面的按顺序添加
         this.isMobile = isMobile()
         
         this.scroll = new LocomotiveScroll();
-
         // 图片及视频资源懒加载。防止阻塞js执行
         let lazyDoms = document.querySelectorAll(".lazy");
         let Time = null;
@@ -39,11 +38,8 @@ export default class App {
         this.busGrouds=[];
         
         this.banner();
+        this.news();
         this.product();
-        this.live();
-        this.four();
-        // new WOW().init();
-        
     }
     banner() {
         
@@ -51,10 +47,10 @@ export default class App {
         let menuType = document.querySelector(".headCon");
         menuType.classList.add("menuType");
         let mySwiper = new Swiper('.bannerSwiper', {
-            autoplay: true,//可选选项，自动滑动
+            autoplay: false,//可选选项，自动滑动
             // 如果需要分页器
             pagination: {
-                el: '.swiper-pagination',
+                el: '.swiper-paginationB',
             },
             
             // 如果需要前进后退按钮
@@ -105,210 +101,105 @@ export default class App {
         
     }
     //产品轮播
-    product() {
-        let mySwiper = new Swiper('.masterSwiper1', {
+    news() {
+        let mySwiper = new Swiper('.newsSwiper1', {
             autoplay: false,//可选选项，自动滑动
-            // 如果需要前进后退按钮
-            navigation: {
-                nextEl: '.btn-nextP1',
-                prevEl: '.btn-prevP1',
+            pagination: {
+                el: '.swiper-pagination1',
             }
         });
-        let mySwiper2 = new Swiper('.masterSwiper2', {
+        let mySwiper2 = new Swiper('.newsSwiper2', {
             autoplay: false,//可选选项，自动滑动
-            // 如果需要前进后退按钮
-            navigation: {
-                nextEl: '.btn-nextP2',
-                prevEl: '.btn-prevP2',
+            pagination: {
+                el: '.swiper-pagination2',
             }
         });
-        let mySwiper3 = new Swiper('.masterSwiper3', {
+        let mySwiper3 = new Swiper('.newsSwiper3', {
             autoplay: false,//可选选项，自动滑动
-            // 如果需要前进后退按钮
-            navigation: {
-                nextEl: '.btn-nextP3',
-                prevEl: '.btn-prevP3',
+            pagination: {
+                el: '.swiper-pagination3',
             }
         });
-        let ckTypes = document.querySelectorAll(".oneTit");
-        let masterDivs = document.querySelectorAll(".masterDiv");
+        let mySwiper4 = new Swiper('.newsSwiper4', {
+            autoplay: false,//可选选项，自动滑动
+            pagination: {
+                el: '.swiper-pagination4',
+            }
+        });
+        let newsCks = document.querySelectorAll(".newsCk");
+        let newsTypes = document.querySelectorAll(".newsType");
+        let newSwipers = document.querySelectorAll(".newsCon .swiper");
+        
         function masterShow(num){
-            masterDivs.forEach((item,index)=>{
+            newSwipers.forEach((item,index)=>{
                 if(index==num){
-                    item.classList.add("masterShow");
+                    item.classList.add("newsShowSwiper");
                 }else{
-                    item.classList.remove("masterShow");
+                    item.classList.remove("newsShowSwiper");
+                }
+            });
+            newsTypes.forEach((item,index)=>{
+                if(index==num){
+                    item.classList.add("newsDivShow");
+                }else{
+                    item.classList.remove("newsDivShow");
                 }
             })
         }
         
-        ckTypes.forEach((item,index)=>{
+        newsCks.forEach((item,index)=>{
             item.addEventListener("click", (e) => {
                 
-                item.parentNode.querySelectorAll(".oneTit").forEach(item=>{
-                    item.classList.remove("ckTit");
+                item.parentNode.querySelectorAll(".newsCk").forEach(item=>{
+                    item.classList.remove("newsShow");
                 });
-                item.classList.add("ckTit");
+                item.classList.add("newsShow");
                 masterShow(index)
             });
         })
     }
-    //直播视频
-    live() {
+    product(){
         let isMob=this.isMobile;
-        let ckTypes = document.querySelectorAll(".twoRChoose .btn2");
-        let twoRDivs = document.querySelectorAll(".twoRChooseDivCon");
-        function masterShow(num){
-            let nowN=num;
-            if(nowN==1||nowN==3){
-                nowN=1;
-            }else{
-                nowN=0;
-            }
-            twoRDivs.forEach((item,index)=>{
-                if(index==nowN){
-                    item.classList.add("twoRShow");
-                }else{
-                    item.classList.remove("twoRShow");
-                }
-            })
-        }
-        
-        ckTypes.forEach((item,index)=>{
+      let mySwiper = new Swiper('.productSwiper', {
+            autoplay: false,//可选选项，自动滑动
+            slidesPerView: "auto",
+            spaceBetween: isMob?0:35,
+            navigation: {
+                nextEl: '.btn-nextP1',
+                prevEl: '.btn-prevP1',
+            },
+      });
+      let productCks = document.querySelectorAll(".productTit");
+      let productTypes = document.querySelectorAll(".productList");
+      productCks.forEach((item,index)=>{
             item.addEventListener("click", (e) => {
                 
-                item.parentNode.querySelectorAll(".btn2").forEach(item=>{
-                    item.classList.remove("twoCk");
+                item.parentNode.querySelectorAll(".productTit").forEach(item2=>{
+                    item2.classList.remove("productCk");
                 });
-                item.classList.add("twoCk");
-                masterShow(index)
-            });
-        });
-        let twoRCks = document.querySelectorAll(".twoRCk");
-        let lconNames = document.querySelectorAll(".lconName");
-        function changeCon(name){
-            lconNames.forEach(item=>{
-                let dataName = item.getAttribute('data-name');
-                if(dataName==name){
-                    item.classList.add("lconShow");
-                }else{
-                    item.classList.remove("lconShow");
-                }
-            })
-        }
-        
-        twoRCks.forEach(item=>{
-            item.addEventListener("click", (e) => {
-                twoRCks.forEach(items=>{
-                    items.classList.remove("twoRCkShow");
-                });
-                item.classList.add("twoRCkShow");
-                let dataName = item.getAttribute('data-name');
-                changeCon(dataName)
-            });
-        });
-        if(isMob){
-            
-            let twoRCon = document.querySelector(".twoRChooseDiv");
-            let twoRCons = document.querySelectorAll(".twoRChooseDivCon");
-            let w=twoRCon.offsetWidth;
-            let sonW1=w*0.38;
-            twoRCons.forEach(item=>{
-                // 获取当前元素的所有子元素
-                let children = item.children;
-                let sonW=0;
-                for (let i = 0; i < children.length; i++) {
-                    children[i].style.width = sonW1 + 'px';
-                    sonW+=sonW1+10;
-                    if(i==children.length-1){
-                        sonW=sonW-10;
+                item.classList.add("productCk");
+                mySwiper.removeAllSlides();
+                productTypes.forEach((item2,index2)=>{
+                    if(index==index2){
+                        item2.querySelectorAll(".swiper-slide").forEach(item3=>{
+                            let divS=item3.cloneNode(true);;
+                            mySwiper.appendSlide(divS)
+                        });
                     }
-                }
-                item.style.width = sonW + 'px';
+                })
             });
-        }
-        
-    }
-    //four
-    four() {
-        let isMob=this.isMobile;
-        
-        let fourCon = document.querySelector(".fourCon");
-        let fourSons = document.querySelectorAll(".fourSon");
-        let fourR = document.querySelector(".fourR");
-        let fourRsons = document.querySelectorAll(".fourRson");
-        
-        let sonArr = [];
-        fourSons.forEach((item,index)=>{
-            let childHeight = item.offsetHeight;
-            if(index==3)childHeight=childHeight*0.5;
-            sonArr.push([childHeight,index]);
+
         });
-        fourRsons.forEach((item,index)=>{
-            item.style.width =(fourR.offsetWidth-fourCon.offsetWidth*0.064)+'px';
-            item.style.height =(fourR.offsetWidth-fourCon.offsetWidth*0.064)+'px';
-            item.style.zIndex =fourRsons.length-index;
+        let firstProductCk = productCks[0]; // 获取第一个元素
+
+        // 创建一个新的鼠标点击事件
+        let clickEvent = new MouseEvent('click', {
+        bubbles: true, // 确保事件会冒泡
+        cancelable: true // 事件可取消
         });
-        function changeDiv(num,val){
-            fourSons.forEach((item,index)=>{
-                if(index==num){
-                    let nvl=val*100;
-                    nvl=nvl>97?100:nvl<3?0:nvl;
-                    nvl=nvl.toFixed(2);
-                    if(index<fourSons.length-1)fourRsons[index].style.clipPath ='inset(0px 0px '+nvl+'%)';
-                    if(index<fourSons.length)fourSons[index+1].style.opacity  =0.3+(val>0.7?0.7:val);
-                }
-            })
-        }
-        
-        
-        // 获取元素的滚动条高度
-        let scrollHeight = fourCon.scrollHeight;
-        let conStart=0;
-        let conEnd=0;
-        function updateScrollChange1() {
-            try {
-                let hh=fourCon.getBoundingClientRect();
-                let scrollTop = hh.top;
-                let scrollBottom = hh.bottom;
-              let scrollY = window.scrollY;
 
-              
-              if (scrollTop<0&conStart==0) {
-                conStart=scrollY;
-                conEnd=scrollY+scrollHeight;
-                let startH=0;
-                sonArr.forEach((item,index)=>{
-                    let childH = scrollY+startH+item[0];
-                    let childHs = scrollY+startH;
-                    startH+=item[0];
-                    item.push(childH)
-                    item.push(childHs)
-                });
-              }else if(scrollTop<0&&scrollY>conStart&&scrollY<conEnd){
-                
-                
-                
-                sonArr.forEach((item,index)=>{
-                    let chazhi=item[2]-scrollY;
-                    if(chazhi>0&&scrollY<item[2]&&scrollY>item[3]){
-                        let bili=chazhi/item[0];
-                        bili=bili.toFixed(4);
-                        bili=parseFloat(bili);
-                        bili=1-bili;
-                        bili=bili.toFixed(4);
-                        bili=parseFloat(bili);
-                        changeDiv(index,bili)
-                    }
-                });
-              }
-            } catch (error) {}
-          }
-        
-            
-        // 添加滚动事件监听器
-        window.addEventListener('scroll', updateScrollChange1);
-        
+        // 触发点击事件
+        firstProductCk.dispatchEvent(clickEvent);
 
     }
 

src/pages/index/images/720d.svg

@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 750 1330" style="enable-background:new 0 0 750 1330;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;}
-	.st1{font-family:'SourceHanSansCN-Bold-GBpc-EUC-H';}
-	.st2{font-size:163.8541px;}
-</style>
-<path d="M554.1,356.6c-14.6,0-26.5,11.5-26.5,25.7v0.6c0.1,14,11.9,25.2,26.3,25.1h0.2c14.6,0,26.5-11.5,26.5-25.8
-	C580.5,368.1,568.7,356.6,554.1,356.6z M554.1,394.9L554.1,394.9c-7.1,0.1-12.8-5.4-12.9-12.3v-0.3c0-6.9,5.8-12.6,12.9-12.6
-	c7.1,0,12.9,5.6,12.9,12.6C567,389.3,561.2,394.9,554.1,394.9z"/>
-<path d="M402.6,587.2"/>
-<path d="M350.7,581c-109.2-5.2-193.3-38-193.3-77.7c0-25.7,35.3-48.5,89.9-62.8c-45.8,12.3-74.8,30.7-74.8,51.4
-	c0,33.6,77.3,61.5,178.2,66.2 M414.8,579.7c109-5.2,193.3-38,193.3-77.8c0-25.7-35.3-48.5-89.9-62.7c45.6,12.3,74.8,30.7,74.8,51.4
-	c0,33.6-77.3,61.5-178.1,66.2"/>
-<rect x="157.5" y="373.1" class="st0" width="450.6" height="259.3"/>
-<text transform="matrix(1 0 0 1 230.6735 488.2739)" class="st1 st2">720</text>
-<polygon points="402.6,570.5 350.5,525.9 350.5,615.2 402.6,570.4 "/>
-</svg>