社会责任页面

dev/static/font/cavan.css

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

src/pages/common/css/common.less

@@ -14,7 +14,6 @@ pc端：
 
 */
 @import "/dev/static/font/iconfont.css";
-@import "/dev/static/font/cavan.css";
 
 html,
 body,
@@ -40,7 +39,6 @@ html,
 body {
     width: 100%;
     height: 100%;
-    font-family: 'MyFont2',sans-serif;
     font-size: 16px;
     color: #231f20;
 }

src/pages/common/js/Common.js

@@ -93,7 +93,7 @@ export default class Common {
 
     let logo = document.querySelector(".headerPC .logo");
     logo.addEventListener("click", (e) => {
-      window.location.href ="/index.html"
+      window.location.href ="./index.html"
     });
     
     //设置一级菜单高亮

src/pages/common/js/utils.js

@@ -1,3 +1,34 @@
+const BASEURL = '/api';
+
+async function fetchRequest(url, method = 'GET', data = null) {
+    const options = {
+        method: method,
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    };
+
+    // 如果是 POST 请求，并且有数据要发送
+    if (method.toUpperCase() === 'POST' && data) {
+        options.body = JSON.stringify(data);
+    }
+
+    try {
+        const response = await fetch(BASEURL + url, options);
+
+        // 检查响应是否正常
+        if (!response.ok) {
+            throw new Error(`网络响应不是 OK: ${response.status}`);
+        }
+
+        // 尝试解析 JSON 数据
+        const responseData = await response.json();
+        return responseData;
+    } catch (error) {
+        console.error('请求失败:', error);
+        throw error; // 重新抛出错误以便调用者处理
+    }
+}
 function isMobile() {
     
     let isMobile =  /Android|webOS|iPhone|iPad|iPod|BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test(
@@ -110,4 +141,17 @@ function debounce(fn, wait) {
     }
 }
 
-export { isMobile, scrollFun, scrollFun2 }
+// 节流函数定义
+function throttle(func, wait) {
+    let timeout = null;
+    return function () {
+        if (!timeout) {
+            timeout = setTimeout(() => {
+                func.apply(this, arguments);
+                timeout = null;
+            }, wait);
+        }
+    };
+}
+
+export { isMobile, scrollFun, scrollFun2,throttle,fetchRequest }

src/pages/common/tpl/footer.tpl

@@ -95,21 +95,4 @@
         </div>
     </div>
     <div class="footerText"><a href="">法律声明</a><span></span><a href="">隐私政策</a><br>中泽集团版权所有 ZHONGZE GROUP COPYRIGHT <br>@ 2014-2024 <a href="https://beian.miit.gov.cn/#/Integrated/index">辽ICP备14015583号</a></div>
-    <!--<div class="goTop">
-        <div class="btn goTopBtn">
-                  <a href="javascript:void(0);">
-                    <div class="btnShow">
-                          <div class="btnMove">
-                            <div class="btnIcon"></div>
-                            <div class="btnIcon"></div>
-                          </div>
-                        </div>
-                  </a>
-                </div>
-    </div> -->
-</footer>
-<!--<div class="chooseM">
-    <a href="">购车咨询</a>
-    <span></span>
-    <a href="./serveBooking.html">门店预约体验</a>
-</div> -->
+</footer>

src/pages/common/tpl/header.tpl

@@ -4,67 +4,25 @@
         <div class="menu">
             <div class="menuOne">
                 <a href="">走进中泽</a>
-                <!--<div class="menuSon">
-                    <div class="menuUp"></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="">产业布局</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 class="menuOne">
                 <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 class="menuOne">
-                <a href="">党建工作</a>
-                <!--<div class="menuSon">
-                    <div class="menuUp"></div>
-                    <a href="./news.html">公司新闻</a>
-                    <a href="./news.html">行业新闻</a>
-                </div>-->
+                <a href="./partyBuilding.html">党建工作</a>
             </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 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="./serveMap.html" class="btn2 btnW"><span class="iconfont icon-search"></span></a>
+            <a class="btn2 btnW"><span class="iconfont icon-search"></span></a>
             <span class="line"></span>
             <a href="./serveBooking.html" class="aborder">联系我们</a>
         </div>

src/pages/enterprisePartyBuilding/App.js

@@ -10,7 +10,7 @@ const pageSize = 5;
 
 export default class App {
     constructor() {
-        let common = new Common(document.querySelector('.main'),4)   //导航菜单高亮，0是首页，后面的按顺序添加
+        let common = new Common(document.querySelector('.main'),3)   //导航菜单高亮，0是首页，后面的按顺序添加
         this.isMobile = isMobile()
         let lazyDoms = document.querySelectorAll(".lazy");
         let Time = null;
@@ -39,7 +39,7 @@ export default class App {
         
             let menuChange=true;
             let menuType = document.querySelector(".headCon");
-            menuType.classList.add("menuType");
+            // menuType.classList.add("menuType");
             let mySwiper = new Swiper('.bannerSwiper1', {
                 autoplay: true,//可选选项，自动滑动
                 // 如果需要分页器
@@ -112,9 +112,9 @@ export default class App {
             
                 
             // 添加滚动事件监听器
-            window.addEventListener('scroll', updateScrollInfo);
+            // window.addEventListener('scroll', updateScrollInfo);
             // 初始化显示
-            updateScrollInfo();
+            // updateScrollInfo();
             
         }
 

src/pages/enterprisePartyBuilding/index.html

@@ -26,37 +26,47 @@
             </div>
             <div class="article_list">
                 <a class="article_li">
-                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <img src="./static/images/partyBuilding/default.png" alt="">
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
                 <a class="article_li">
-                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <img src="./static/images/partyBuilding/03.png" alt="">
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
                 <a class="article_li">
-                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <img src="./static/images/partyBuilding/04.png" alt="">
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
                 <a class="article_li">
-                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <img src="./static/images/partyBuilding/05.png" alt="">
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
                 <a class="article_li">
-                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <img src="./static/images/partyBuilding/06.png" alt="">
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
                 <a class="article_li">
-                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <img src="./static/images/partyBuilding/07.png" alt="">
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
                 <a class="article_li">
-                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <img src="./static/images/partyBuilding/08.png" alt="">
+                    <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="">
+                    <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="">
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
@@ -76,32 +86,7 @@
                     <span class="icon iconfont icon-jiantou"></span>
                 </a>
             </div>
-            <div class="study_box">
-                <div class="study_head">
-                    <div class="txt">学习文件</div>
-                    <a href="">查看学习文件</a>
-                </div>
-                <div class="wow domInUp banner">
-                    <div class="swiper bannerSwiper bannerSwiper2">
-                      <div class="swiper-wrapper">
-                        <div class="swiper-slide">
-                          <img
-                            class="lazy"
-                            data-src="./static/images/index/banner1.jpg"
-                            data-srcM="./static/images/index/banner1.jpg"
-                            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>
+          
         </div>
         <%= require('../common/tpl/footer.tpl') %>
             <%= require('../common/tpl/bottomBar.tpl') %>

src/pages/enterprisePartyBuilding/index.less

@@ -198,7 +198,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 100px 0 120p x;
+        padding: 100px 0 120px;
         .previousPage{
             width: 40px;
             height: 40px;
@@ -283,42 +283,7 @@
             // }
         }
     }
-    .study_box{
-        width: 100%;
-        background-color: #F6F6F6;
-        padding-top: 122px;
-        padding-bottom: 130px;
-
-        .study_head{
-            width: 1498px;
-            margin: 0 auto;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 81px;
-            .txt{
-                font-weight: bold;
-                font-size: 48px;
-                color: #231F20;
-                margin-left: 100px;
-            }
-            a{
-                width: 200px;
-                height: 45px;
-                background: #B81C25;
-                border-radius: 8px;
-                font-size: 14px;
-                color: #FFFFFF;
-                text-align: center;
-                line-height: 45px;
-                margin-right: 100px;
-            }
-        }
-        .bannerSwiper2{
-            width: 1498px;
-            margin: 0 auto;
-        }
-    }
+    
 }
 a{
     display: inline-block;
@@ -523,31 +488,6 @@ a{
                 // }
             }
         }
-        .study_box{
-            padding-top: 13.75vw;
-            padding-bottom: 35.875vw;
-            position: relative;
-
-            .study_head{
-                width: 92.125vw;
-                margin-bottom: 10.5vw;
-                .txt{
-                    width: 100%;
-                    font-size: 4.75vw;
-                    margin-left: 0;
-                    text-align: center;
-                }
-                a{
-                    position: absolute;
-                    bottom:15vw;
-                    left: 50%;
-                    margin-left: -25%;
-                }
-            }
-            .bannerSwiper2{
-                width: 92.125vw;
-                margin: 0 auto;
-            }
-        }
+        
     }
 }

src/pages/index/index.html

@@ -478,25 +478,6 @@
                   </div>
                 </a>
               </div>
-<<<<<<< HEAD
-              <!-- 如果需要导航按钮 -->
-              <div class="btn-prev btn-prevP2"><span class="icon iconfont icon-jiantou"></span></div>
-              <div class="btn-next btn-nextP2"><span class="icon iconfont icon-jiantou"></span></div>
-            </div>
-            <a href="" class="btn btnBlack">查看更多</a>
-          </div>
-          <div class="masterDiv">
-            <div class="swiper masterSwiper3">
-              <div class="swiper-wrapper">
-                <div class="swiper-slide"> 
-                  <img class="lazy" data-src="./static/images/index/car1.png" data-srcM="./static/images/index/car1.png" alt="" />
-                </div>
-                <!-- 多个直接复制添加swiper-slide -->
-                <div class="swiper-slide">
-                  <img class="lazy"
-                    data-src="./static/images/index/car1.png" data-srcM="./static/images/index/car1.png" alt="" />
-                </div>
-=======
               <div class="swiper-slide">
                 <img
                   class="lazy"
@@ -511,7 +492,6 @@
                       <div class="more">了解更多</div>
                   </div>
                 </a>
->>>>>>> f443212389e95f663b807c016a02212b36406cfb
               </div>
               <div class="swiper-slide">
                 <img
@@ -1065,6 +1045,6 @@
       </div>
     </div>
     <%= require('../common/tpl/footer.tpl') %>
-    <%= require('../common/tpl/bottomBar.tpl') %>
+    <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->
   </body>
 </html>

src/pages/news/App.js

@@ -10,7 +10,7 @@ const pageSize = 5;
 
 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()
         
         bindDom();

src/pages/news/index.html

@@ -23,7 +23,7 @@
 
                     <div class="news_banner">
                         <img
-                        src="./static/images/news/news1.png"
+                        src="./static/images/news/01.png"
                         alt=""
                         />
                         <a class="news_content" href="../articleDetails.html">
@@ -32,7 +32,7 @@
                         </a> 
                     </div>
                     <div class="news_banner2">
-                        <img src="./static/images/news/news1.png" alt="">
+                        <img src="./static/images/news/02.png" alt="">
                         <div class="banner2_cont">
                             <div class="txt1">交通运输部、国家发展改革委联合印发
                                 《交通物流降本提质增效行动计化》</div>
@@ -45,7 +45,7 @@
                         </div>
                     </div>
                     <div class="news_banner2">
-                        <img src="./static/images/news/news1.png" alt="">
+                        <img src="./static/images/news/03.png" alt="">
                         <div class="banner2_cont">
                             <div class="txt1">交通运输部、国家发展改革委联合印发
                                 《交通物流降本提质增效行动计化》</div>
@@ -99,9 +99,9 @@
                         </a>
                     </div>
                 </div>
+                
             </div>
             <div class="news_paging">
-                <!-- 锚点：#tab -->
                 <a id="previousPage" class="previousPage">
                    <span class="icon iconfont icon-jiantou"></span>
                 </a>

src/pages/news/index.less

@@ -188,7 +188,17 @@
                         font-family: Source Han Sans CN;
                         font-weight: 500;
                         font-size: 13px;
-                        color: #231F20
+                        color: #231F20;
+                        position: relative;
+                        &::after{
+                            content: '';
+                            position: absolute;
+                            top: -1px;
+                            left: -8%;
+                            height: 1px;
+                            width: 120%;
+                            background-color: #B81C25;
+                        }
                     }
                     a{
                         cursor: pointer;
@@ -232,6 +242,8 @@
             }
         }
     }
+    .btn{
+    }
     .news_paging{
         display: flex;
         align-items: center;

src/pages/partyBuilding/App.js

@@ -10,7 +10,7 @@ const pageSize = 5;
 
 export default class App {
     constructor() {
-        let common = new Common(document.querySelector('.main'),4)   //导航菜单高亮，0是首页，后面的按顺序添加
+        let common = new Common(document.querySelector('.main'),3)   //导航菜单高亮，0是首页，后面的按顺序添加
         this.isMobile = isMobile()
         let lazyDoms = document.querySelectorAll(".lazy");
         let Time = null;
@@ -39,7 +39,7 @@ export default class App {
         
             let menuChange=true;
             let menuType = document.querySelector(".headCon");
-            menuType.classList.add("menuType");
+            // menuType.classList.add("menuType");
             let mySwiper = new Swiper('.bannerSwiper1', {
                 autoplay: true,//可选选项，自动滑动
                 // 如果需要分页器
@@ -112,9 +112,9 @@ export default class App {
             
                 
             // 添加滚动事件监听器
-            window.addEventListener('scroll', updateScrollInfo);
+            // window.addEventListener('scroll', updateScrollInfo);
             // 初始化显示
-            updateScrollInfo();
+            // updateScrollInfo();
             
         }
 

src/pages/partyBuilding/index.html

@@ -24,8 +24,8 @@
                     <div class="swiper-slide">
                       <img
                         class="lazy"
-                        data-src="./static/images/index/banner1.jpg"
-                        data-srcM="./static/images/index/banner1.jpg"
+                        data-src="./static/images/partyBuilding/01.png"
+                        data-srcM="./static/images/partyBuilding/01.png"
                         alt=""
                       />
                     </div>
@@ -49,43 +49,55 @@
             </div>
             <div class="article_list">
                 <a class="article_li">
-                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <img src="./static/images/partyBuilding/default.png" alt="">
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
                 <a class="article_li">
-                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <img src="./static/images/partyBuilding/03.png" alt="">
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
                 <a class="article_li">
-                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <img src="./static/images/partyBuilding/04.png" alt="">
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
                 <a class="article_li">
-                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <img src="./static/images/partyBuilding/05.png" alt="">
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
                 <a class="article_li">
-                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <img src="./static/images/partyBuilding/06.png" alt="">
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
                 <a class="article_li">
-                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <img src="./static/images/partyBuilding/07.png" alt="">
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
                 <a class="article_li">
-                    <img src="./static/images/index/twor4.jpg" alt="">
+                    <img src="./static/images/partyBuilding/08.png" alt="">
+                    <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="">
+                    <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="">
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
                     <div class="txt2">2024-12-13</div>
                 </a>
             </div> 
-            <div class="news_paging">
-                <!-- 锚点：#tab -->
+            <div style="width: 100%;display: flex;justify-content: center;padding: 30px 0 50px;">
+                    <a href="./enterprisePartyBuilding.html" class="btn newsHref">查看更多</a>
+                </div>
+            <!-- <div class="news_paging">
                 <a id="previousPage" class="previousPage">
                    <span class="icon iconfont icon-jiantou"></span>
                 </a>
@@ -98,7 +110,7 @@
                 <a id="nextPage" class="nextPage">
                     <span class="icon iconfont icon-jiantou"></span>
                 </a>
-            </div>
+            </div> -->
             <div class="study_box">
                 <div class="study_head">
                     <div class="txt">学习文件</div>
@@ -110,8 +122,8 @@
                         <div class="swiper-slide">
                           <img
                             class="lazy"
-                            data-src="./static/images/index/banner1.jpg"
-                            data-srcM="./static/images/index/banner1.jpg"
+                            data-src="./static/images/partyBuilding/11.png"
+                            data-srcM="./static/images/partyBuilding/11.png"
                             alt=""
                           />
                         </div>

src/pages/partyBuilding/index.less

@@ -37,7 +37,6 @@
           height: 100%;
           img{
             width: 100%;
-              height: 100%;
               object-fit: cover;
           }
           .btn-prev,.btn-next{

src/pages/product/App.js

@@ -1,66 +0,0 @@
-import Swiper from 'swiper/bundle'
-import gsap from 'gsap'
-import LocomotiveScroll from 'locomotive-scroll';
-import Common from '../common/js/Common'
-import {
-    isMobile
-} from '../common/js/utils'
-
-export default class App {
-    constructor() {
-        let common = new Common(document.querySelector('.main'),1)   //导航菜单高亮，0是首页，后面的按顺序添加
-        this.isMobile = isMobile()
-        // this.tabChange()
-        // this.scroll = new LocomotiveScroll();
-
-        // 图片及视频资源懒加载。防止阻塞js执行
-        let lazyDoms = document.querySelectorAll(".lazy");
-        let Time = null;
-        let isMob=this.isMobile;
-        lazyDoms.forEach((item) => {
-            if (item.nodeName == "PICTURE") {
-                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
-                item.children[1].setAttribute("src", item.children[1].dataset.src);
-            }
-            if (item.nodeName == "IMG") {
-                if(isMob){item.setAttribute("src", item.dataset.srcm);}
-                else{
-                    item.setAttribute("src", item.dataset.src);
-                }
-                
-            }
-            if (item.nodeName == "VIDEO") {
-                item.setAttribute("src", item.dataset.src);
-                // item.load();
-            }
-        });
-        //横屏滚动数组值
-        this.busGrouds=[];
-        this.banner();
-    
-    }
-    banner() {
-        const classification_list = document.querySelectorAll(".classification_li");
-        const truck_box = document.querySelectorAll(".truck_box");
-
-        classification_list.forEach((item,index)=>{
-            
-            item.addEventListener('click',()=>{
-                classification_list.forEach((li) => {
-                    li.classList.remove('classification_li_active');
-                });
-                truck_box.forEach((li) => {
-                    li.style.display = 'none';
-                });
-        
-                // 给当前点击的元素添加 classification_li_active 类名
-                item.classList.add('classification_li_active');
-                truck_box[index].style.display = 'block';
-            })
-        })
-        
-    }
-
-
-   
-}

src/pages/product/index.html

@@ -1,227 +0,0 @@
-<!DOCTYPE html>
-<html lang="cn">
-
-<head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <title>产品</title>
-    <meta name="description" content="" />
-    <meta name="Keywords" content="" />
-    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
-    <link href="./static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
-    <%= require('../common/tpl/headerLink.tpl') %>
-</head>
-
-<body>
-    <%= require('../common/tpl/header.tpl') %>
-        <div class="main">
-            <div class="content">
-                <div class="product_title">新能源整车</div>
-               
-                <div class="product_classification">
-                    <div class="classification_li classification_li_active">Master-V</div>
-                    <span class="dividingLine">/</span>
-                    <div class="classification_li">Master-L</div>
-                    <span class="dividingLine">/</span>
-                    <div class="classification_li">Master-H</div>
-                </div>  
-            </div>
-            <div class="truck_box">
-              <div class="truck_li">
-                <div class="li_left">
-                  <div class="li_tit">科委 氢 FQ45</div>
-                  <div class="li_cont">新能源重卡的电机动力输出特性使得其在爬坡、起步等需要较大动力的场景下表现出色，加速性能优异</div>
-                  <div class="li_parameter">
-                    <div>
-                      <div class="txt1">重量</div>
-                      <div class="txt2">4495kg</div>
-                    </div>
-                    <div class="line"></div>
-                    <div>
-                      <div class="txt1">续航</div>
-                      <div class="txt2">200km</div>
-                    </div>
-                    <div class="line"></div>
-                    <div> 
-                      <div class="txt1">电池容量</div>
-                      <div class="txt2">100kwh</div>
-                    </div>
-                    <div class="line"></div> 
-                    <div>
-                      <div class="txt1">模式</div>
-                      <div class="txt2">纯电动</div>
-                    </div>
-                  </div>
-                  <a class="view_more" href="../truckDetail.html">查看更多</a>
-                </div>
-                <div class="li_banner">
-                  <img src="" alt="">
-                </div>
-              </div>
-              <div class="truck_li">
-                <div class="li_left">
-                  <div class="li_tit">科委2 氢 FR</div>
-                  <div class="li_cont">新能源重卡的电机动力输出特性使得其在爬坡、起步等需要较大动力的场景下表现出色，加速性能优异</div>
-                  <div class="li_parameter">
-                    <div>
-                      <div class="txt1">重量</div>
-                      <div class="txt2">4495kg</div>
-                    </div>
-                    <div class="line"></div>
-                    <div>
-                      <div class="txt1">续航</div>
-                      <div class="txt2">200km</div>
-                    </div>
-                    <div class="line"></div>
-                    <div> 
-                      <div class="txt1">电池容量</div>
-                      <div class="txt2">100kwh</div>
-                    </div>
-                    <div class="line"></div> 
-                    <div>
-                      <div class="txt1">模式</div>
-                      <div class="txt2">纯电动</div>
-                    </div>
-                  </div>
-                  <div class="view_more">查看更多</div>
-                </div>
-                <div class="li_banner">
-                  <img src="" alt="">
-                </div>
-              </div>
-              <div class="truck_li">
-                <div class="li_left">
-                  <div class="li_tit">科委2 氢 FR</div>
-                  <div class="li_cont">新能源重卡的电机动力输出特性使得其在爬坡、起步等需要较大动力的场景下表现出色，加速性能优异</div>
-                  <div class="li_parameter">
-                    <div>
-                      <div class="txt1">重量</div>
-                      <div class="txt2">4495kg</div>
-                    </div>
-                    <div class="line"></div>
-                    <div>
-                      <div class="txt1">续航</div>
-                      <div class="txt2">200km</div>
-                    </div>
-                    <div class="line"></div>
-                    <div> 
-                      <div class="txt1">电池容量</div>
-                      <div class="txt2">100kwh</div>
-                    </div>
-                    <div class="line"></div> 
-                    <div>
-                      <div class="txt1">模式</div>
-                      <div class="txt2">纯电动</div>
-                    </div>
-                  </div>
-                  <div class="view_more">查看更多</div>
-                </div>
-                <div class="li_banner">
-                  <img src="" alt="">
-                </div>
-              </div>
-              <div class="truck_li">
-                <div class="li_left">
-                  <div class="li_tit">科委 氢 FQ45 BOX</div>
-                  <div class="li_cont">新能源重卡的电机动力输出特性使得其在爬坡、起步等需要较大动力的场景下表现出色，加速性能优异</div>
-                  <div class="li_parameter">
-                    <div>
-                      <div class="txt1">重量</div>
-                      <div class="txt2">4495kg</div>
-                    </div>
-                    <div class="line"></div>
-                    <div>
-                      <div class="txt1">续航</div>
-                      <div class="txt2">200km</div>
-                    </div>
-                    <div class="line"></div>
-                    <div> 
-                      <div class="txt1">电池容量</div>
-                      <div class="txt2">100kwh</div>
-                    </div>
-                    <div class="line"></div> 
-                    <div>
-                      <div class="txt1">模式</div>
-                      <div class="txt2">纯电动</div>
-                    </div>
-                  </div>
-                  <div class="view_more">查看更多</div>
-                </div>
-                <div class="li_banner">
-                  <img src="" alt="">
-                </div>
-              </div>
-            </div>
-            <div class="truck_box">
-              <div class="truck_li">
-                <div class="li_left">
-                  <div class="li_tit">科委 氢 FQ45222</div>
-                  <div class="li_cont">新能源重卡的电机动力输出特性使得其在爬坡、起步等需要较大动力的场景下表现出色，加速性能优异</div>
-                  <div class="li_parameter">
-                    <div>
-                      <div class="txt1">重量</div>
-                      <div class="txt2">4495kg</div>
-                    </div>
-                    <div class="line"></div>
-                    <div>
-                      <div class="txt1">续航</div>
-                      <div class="txt2">200km</div>
-                    </div>
-                    <div class="line"></div>
-                    <div> 
-                      <div class="txt1">电池容量</div>
-                      <div class="txt2">100kwh</div>
-                    </div>
-                    <div class="line"></div> 
-                    <div>
-                      <div class="txt1">模式</div>
-                      <div class="txt2">纯电动</div>
-                    </div>
-                  </div>
-                  <div class="view_more">查看更多</div>
-                </div>
-                <div class="li_banner">
-                  <img src="" alt="">
-                </div>
-              </div>
-            </div>
-            <div class="truck_box">
-              <div class="truck_li">
-                <div class="li_left">
-                  <div class="li_tit">科委 氢 333333</div>
-                  <div class="li_cont">新能源重卡的电机动力输出特性使得其在爬坡、起步等需要较大动力的场景下表现出色，加速性能优异</div>
-                  <div class="li_parameter">
-                    <div>
-                      <div class="txt1">重量</div>
-                      <div class="txt2">4495kg</div>
-                    </div>
-                    <div class="line"></div>
-                    <div>
-                      <div class="txt1">续航</div>
-                      <div class="txt2">200km</div>
-                    </div>
-                    <div class="line"></div>
-                    <div> 
-                      <div class="txt1">电池容量</div>
-                      <div class="txt2">100kwh</div>
-                    </div>
-                    <div class="line"></div> 
-                    <div>
-                      <div class="txt1">模式</div>
-                      <div class="txt2">纯电动</div>
-                    </div>
-                  </div>
-                  <div class="view_more">查看更多</div>
-                </div>
-                <div class="li_banner">
-                  <img src="" alt="">
-                </div>
-              </div>
-            </div>
-
-        </div>
-        <%= require('../common/tpl/footer.tpl') %>
-            <%= require('../common/tpl/bottomBar.tpl') %>
-</body>
-
-</html>

src/pages/product/index.less

@@ -1,243 +0,0 @@
-// pc端：
-// 设计稿1440*900 所有尺寸基本按px来即可;
-// 正文 16px;
-
-
-// 移动端：
-// 设计稿宽800px，按逻辑尺寸的两倍制作。因此真实尺寸需要除2；
-// 如设计稿字体大小28px,则实真字体大小为28px/2=14px;
-// 或使用vw 字体大小：28/800*10 = 3.5vw 
-// 正文 14px 或 3.5vw
-
-//pc端样式
-.main {
-    width: 100%;
-    max-width: 1920px;
-    margin: 0 auto;
-    padding-top: 70px;
-    padding-bottom: 110px;
-    .content{
-        width: 1300px;
-        margin: 0 auto;
-        .product_title{
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 40px;
-            color: #333333;
-            text-align: center;
-            padding-top: 120px;
-            margin-bottom: 50px;
-        }
-        .product_classification{
-            font-family: Source Han Sans CN;
-            font-size: 18px;
-            color: #333333;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-bottom: 40px;
-            .classification_li{
-                cursor: pointer;
-                transition: all .2s;
-                &:hover{
-                    color: #48A038;
-                }
-            }
-            .classification_li_active{
-                color: #48A038;
-            }
-            .dividingLine{
-                margin: 0 38px;
-                display: inline-block;
-            }
-        }
-    }
-    .truck_li{
-        width: 1720px;
-        height: 306px;
-        margin: 0 auto 180px;
-        box-sizing: border-box;
-        background: rgb(249, 249, 249);
-        padding:0 0 0 210px;
-        display: flex;
-        justify-content: space-between;
-        position: relative;
-        font-family: Source Han Sans CN;
-        cursor: default;
-
-        .li_tit{
-            padding-top: 50px;
-            font-weight: bold;
-            font-size: 24px;
-            color: #333333;
-            margin-bottom: 20px;
-            transition: all .2s;
-        }
-        
-        .li_cont{
-            font-size: 14px;
-            color: #333333;
-            margin-bottom: 30px;
-            transition: all .2s;
-        }
-
-        .li_parameter{
-            display: flex;
-            align-items: center;
-            color: #333333;
-            transition: all .2s;
-
-            .txt1{
-                font-size: 14px;
-                margin-bottom: 10px;
-            }
-            .txt2{
-                font-weight: bold;
-                font-size: 18px;
-            }
-            .line{
-                width: 1px;
-                height: 45px;
-                background: #C9C9C9;
-                margin:0 45px;
-                transition: all .2s;
-            }
-        }
-
-        .view_more{ 
-            width: 200px;
-            height: 40px;
-            border: 1px solid #333333;
-            font-size: 14px;
-            color: #333333;
-            text-align: center;
-            line-height: 40px;
-            margin-top: 40px;
-            cursor: pointer;
-            transition: all .2s;
-            img{
-                width: 100%;
-                height: 100%;
-            }
-        }
-        &:hover{
-            .li_tit,.li_cont,.li_parameter{
-                color: #48A038;
-            }
-            .line{
-                background-color: #48A038;
-            }
-            .view_more{
-                color: #fff;
-                background: #48A038;
-                border: 1px solid #48A038;
-            }
-        }
-
-        .li_banner{
-            width: 520px;
-            height: 390px;
-            background-color: aqua;
-            position: absolute;
-            right: 125px;
-            top: 30px;
-        }
-    }
-}
-a{
-    display: inline-block;
-}
-
-@media screen and (min-width: 801px) and (max-width: 1400px) {
-    .main{
-        
-    }
-}
-
-//移动端样式
-@media screen and (max-width:800px) {
-   
-    .main {
-        width: 100%;
-        padding-top: 11vw;
-        padding-bottom: 16vw;
-        .content{
-            width: 92vw;
-            margin: 0 auto;
-            .product_title{
-                font-family: Source Han Sans CN;
-                font-weight: bold;
-                font-size: 6.375vw;
-                color: #333333;
-                text-align: center;
-                padding-top: 15vw;
-            }
-
-            .product_classification{
-                font-size: 3.75vw;
-                .dividingLine{
-                    margin: 0 5.5vw;
-                    display: inline-block;
-                }
-            }
-
-            
-
-        }
-        .truck_li{
-            width: 92vw;
-            height: 91.5vw;
-            margin: 0 auto;
-            padding:0 5.25vw;
-            box-sizing: border-box;
-            margin-bottom: 51.125vw;
-            display: block;
-
-            .li_tit{
-                padding-top: 10.625vw;
-                font-size: 4.75vw;
-                margin-bottom: 5.25vw;
-            }
-            .li_cont{
-                font-size: 3.75vw;
-                line-height: 6.375vw;
-                margin-bottom: 7.5vw;
-            }
-            .li_parameter{
-                flex-wrap: wrap;
-                .txt1{
-                    font-size: 3.75vw;
-                    margin-bottom: 10px;
-                }
-                .txt2{
-                    font-weight: bold;
-                    font-size: 3.75vw;
-                }
-                .line{
-                    margin: 0 9.5vw;
-                }
-                .line:nth-last-child(2){
-                    display: none;
-                }
-
-                > div:last-child {
-                    margin-top: 10vw;
-                }
-            }
-            .view_more{
-                width: 92vw;
-                position: absolute;
-                bottom: -27.125vw;
-                left: 0;
-            }
-            .li_banner{
-                width: 62.625vw;
-                height: 40.125vw;
-                position: absolute;
-                top: inherit;
-                right: 3.125vw;
-                bottom: -12.5vw;
-            }
-        }
-    }
-}

src/pages/serve/App.js

@@ -1,263 +0,0 @@
-import Swiper from 'swiper/bundle'
-import gsap from 'gsap'
-import LocomotiveScroll from 'locomotive-scroll';
-import Common from '../common/js/Common'
-import {
-    isMobile
-} from '../common/js/utils'
-
-export default class App {
-    constructor() {
-        let common = new Common(document.querySelector('.main'),3)   //导航菜单高亮，0是首页，后面的按顺序添加
-        this.isMobile = isMobile()
-        
-        this.scroll = new LocomotiveScroll();
-
-        // 图片及视频资源懒加载。防止阻塞js执行
-        let lazyDoms = document.querySelectorAll(".lazy");
-        let isMob=this.isMobile;
-        lazyDoms.forEach((item) => {
-            if (item.nodeName == "PICTURE") {
-                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
-                item.children[1].setAttribute("src", item.children[1].dataset.src);
-            }
-            if (item.nodeName == "IMG") {
-                if(isMob){item.setAttribute("src", item.dataset.srcm);}
-                else{
-                    item.setAttribute("src", item.dataset.src);
-                }
-                
-            }
-            if (item.nodeName == "VIDEO") {
-                console.log(item, 'item---2')
-                item.setAttribute("src", item.dataset.src);
-                // item.load();
-            }
-        });
-        this.init();
-        
-    }
-    init() {
-        let isMob=this.isMobile;
-        if(!isMob){
-            let fourCon = document.querySelector(".fourCon");
-            let fourSons = document.querySelectorAll(".fourSon");
-            let fourR = document.querySelector(".fourR");
-            let fourRsons = document.querySelectorAll(".fourRson");
-            
-            let sonArr = [];
-            fourSons.forEach((item,index)=>{
-                let childHeight = item.offsetHeight;
-                if(index==3)childHeight=childHeight*0.5;
-                sonArr.push([childHeight,index]);
-            });
-            fourRsons.forEach((item,index)=>{
-                item.style.width =fourR.offsetWidth+'px';
-                item.style.height =fourR.offsetWidth+'px';
-                item.style.zIndex =fourRsons.length-index;
-            });
-            function changeDiv(num,val){
-                fourSons.forEach((item,index)=>{
-                    if(index==num){
-                        let nvl=val*100;
-                        nvl=nvl>97?100:nvl<3?0:nvl;
-                        nvl=nvl.toFixed(2);
-                        if(index<fourSons.length-1)fourRsons[index].style.clipPath ='inset(0px 0px '+nvl+'%)';
-                        if(index<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);
-        }
-        
-        let twoSwiper = new Swiper('.twoSwiper', {
-            autoplay: false,//可选选项，自动滑动
-            // 如果需要前进后退按钮
-            navigation: {
-                nextEl: '.btn-nextP4',
-                prevEl: '.btn-prevP4',
-            }
-        });
-        //留言提交
-        let messCk = document.querySelector(".chooseBuy");
-        let messCks = document.querySelectorAll(".chooseTDiv div");
-
-        let buyType = document.querySelector('input[name="buyType"]');
-
-        messCk.addEventListener("click", (e) => {
-                
-            if(messCk.classList.contains("showChooseTDiv")){
-                messCk.classList.remove("showChooseTDiv");
-            }else{
-                messCk.classList.add("showChooseTDiv");
-            }
-            
-        });
-        messCks.forEach((item,index)=>{
-            item.addEventListener("click", (e) => {
-                let typeVal = item.getAttribute('data-type');
-                buyType.value = typeVal;
-                let txtShow=e.target.innerText;
-                item.parentNode.parentNode.querySelector(".showTxt").innerText=txtShow;
-                if(item.parentNode.parentNode.querySelector(".chooseTshow").classList.contains("errorMessage")){
-                    item.parentNode.parentNode.querySelector(".chooseTshow").classList.remove("errorMessage");
-                }
-            });
-        })
-        //表单提交
-        // 获取表单元素
-        this.form = document.querySelector('.messageCon');
-        if (this.form) {
-            this.form.addEventListener('submit', this.handleFormSubmit.bind(this));
-        }
-    }
-    handleFormSubmit(event) {
-        event.preventDefault(); // 阻止默认的表单提交行为
-
-        // 获取所有必填输入字段
-        let nameInput = document.querySelector('input[name="name"]');
-        let phoneInput = document.querySelector('input[name="phone"]');
-        let mailInput = document.querySelector('input[name="mail"]');
-        let buyTypeInput = document.querySelector('input[name="buyType"]');
-        // 获取 textarea 元素
-        let textarea = this.form.querySelector('.searchInput');
-        if (!textarea) {
-            console.error('textarea 元素未找到');
-            return;
-        }
-
-        // 获取 textarea 的值
-        let message = textarea.value.trim();
-        if (message === '') {
-            textarea.classList.add("errorMessage");
-            alert('请输入留言');
-            return;
-        }else{
-            textarea.classList.remove("errorMessage");
-        }
-
-        // 校验逻辑
-        if (!this.validateInput(nameInput)) {
-            nameInput.classList.add("errorMessage");
-            alert('请输入名字');
-            return;
-        }else{
-            nameInput.classList.remove("errorMessage");
-        }
-        if (!this.validatePhone(phoneInput)) {
-            phoneInput.classList.add("errorMessage");
-            alert('请输入有效的电话号码');
-            return;
-        }else{
-            phoneInput.classList.remove("errorMessage");
-        }
-        if (!this.validateEmail(mailInput)) {
-            mailInput.classList.add("errorMessage");
-            alert('请输入有效的邮箱地址');
-            return;
-        }else{
-            mailInput.classList.remove("errorMessage");
-        }
-        if (!this.validateInput(buyTypeInput)) {
-            buyTypeInput.classList.add("errorMessage");
-            alert('请选择购买类型');
-            return;
-        }else{
-            buyTypeInput.classList.remove("errorMessage");
-        }
-        
-        // 如果校验通过，可以继续提交表单或执行其他操作
-        // 例如，使用 AJAX 提交表单数据
-        this.submitFormData(this.form);
-    }
-
-    validateInput(input) {
-        // 检查输入字段是否为空
-        return input && input.value.trim() !== '';
-    }
-    validatePhone(input) {
-        // 定义电话号码的正则表达式
-        let phoneRegex = /^(\+?\d{1,3}[-.\s]?)?(\(?\d{1,4}\)?[-.\s]?)?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9}$/;
-        return phoneRegex.test(input.value.trim());
-    }
-
-    validateEmail(input) {
-        // 定义邮箱地址的正则表达式
-        let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        return emailRegex.test(input.value.trim());
-    }
-
-    submitFormData(form) {
-        // 使用 AJAX 提交表单数据
-        let isMobile = this.isMobile;
-        let formData = new FormData(form);
-        let nameInput = isMobile?document.querySelector('.messSubM'):document.querySelector('.messSubPc');
-        nameInput.classList.add("messSuccess");
-        fetch(form.action, {
-            method: form.method,
-            body: formData
-        })
-        .then(response => response.json())
-        .then(data => {
-            console.log('Success:', data);
-            nameInput.classList.add("messSuccess");
-            // 处理成功响应
-            alert('提交成功');
-            form.reset(); // 重置表单
-        })
-        .catch((error) => {
-            console.error('Error:', error);
-            // 处理错误
-            alert('提交失败，请稍后再试');
-        });
-    }
-
-
-}

src/pages/serve/index.html

@@ -1,233 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <title>服务</title>
-    <meta name="description" content=""/>
-    <meta name="Keywords" content=""/>
-    <meta
-      content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"
-      name="viewport"
-    />
-    <link
-      href="./static/css/swiper-bundle.min.css"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <%= require('../common/tpl/headerLink.tpl') %>
-  </head>
-
-  <body>
-    <%= require('../common/tpl/header.tpl') %>
-    
-    <div class="main">
-      <div class="four">
-        <div class="h3">购车流程</div>
-        <div class="fourCon">
-          <div class="fourL">
-            <div>
-              <div class="fourHide">
-                <div class="fourSon">
-                  <div class="fourLine"></div>
-                  <div class="fourIcon">
-                    <div class="fourdiv"></div>
-                  </div>
-                  <div class="fourText">
-                    <div class="h6">01</div>
-                    <div class="h4">预约试驾</div>
-                    <div class="h6R">
-                      在官网找到预约试驾入口，填写相关信息，提交申请后，等待工作人员与您联系，确认试驾时间和地点。
-                    </div>
-                    <div class="fourLimg"><img src="./static/images/index/four1.jpg" alt=""></div>
-                    <a class="btn btnBlack" href="">查看更多</a>
-                  </div>
-                </div>
-                <div class="fourSon">
-                  <div class="fourLine"></div>
-                  <div class="fourIcon">
-                    <div class="fourdiv"></div>
-                  </div>
-                  <div class="fourText">
-                    <div class="h6">02</div>
-                    <div class="h4">销售回访</div>
-                    <div class="h6R">
-                      我们将安排销售经理与您接洽，以电话访问的方式进一步确认您的购车需求，为您推荐适合的产品与方。
-                    </div>
-                    <div class="fourLimg"><img src="./static/images/index/four2.jpg" alt=""></div>
-                    <a class="btn btnBlack" href="">查看更多</a>
-                  </div>
-                </div>
-                <div class="fourSon">
-                  <div class="fourLine"></div>
-                  <div class="fourIcon">
-                    <div class="fourdiv"></div>
-                  </div>
-                  <div class="fourText">
-                    <div class="h6">03</div>
-                    <div class="h4">签订合同</div>
-                    <div class="h6R">
-                      在官网找到预约试驾入口，填写相关信息，提交申请后，等待工作人员与您联系，确认试驾时间和地点。
-                    </div>
-                    <div class="fourLimg"><img src="./static/images/index/four3.jpg" alt=""></div>
-                    <a class="btn btnBlack" href="">查看更多</a>
-                  </div>
-                </div>
-                <div class="fourSon">
-                  <div class="fourLine"></div>
-                  <div class="fourIcon">
-                    <div class="fourdiv"></div>
-                  </div>
-                  <div class="fourText">
-                    <div class="h6">04</div>
-                    <div class="h4">厂家生产</div>
-                    <div class="h6R">
-                      合同签订后，我们将开始为您打造高品质的产品，保质、保量、按时完成产品生产。
-                    </div>
-                    <div class="fourLimg"><img src="./static/images/index/four4.jpg" alt=""></div>
-                    <a class="btn btnBlack" href="">查看更多</a>
-                  </div>
-                </div>
-              </div>
-              <!-- <div class="fourZ"></div> -->
-            </div>
-          </div>
-          <div class="fourR">
-            <div class="fourRson"><img src="./static/images/index/four1.jpg" alt=""></div>
-            <div class="fourRson"><img src="./static/images/index/four2.jpg" alt=""></div>
-            <div class="fourRson"><img src="./static/images/index/four3.jpg" alt=""></div>
-            <div class="fourRson"><img src="./static/images/index/four4.jpg" alt=""></div>
-            <div class="fourRson"><img src="./static/images/index/four5.jpg" alt=""></div>
-          </div>
-        </div>
-      </div>
-      <div class="three" id="serve2">
-        <div class="threeTit">
-          <div class="h3">无论您在何方，皆可轻松踏入，<br class="mTxt">领略同质优享</div>
-          <a class="btn btnBlack" href="./serveMap.html">查看全国门店分布</a>
-        </div>
-        <div class="threeDiv">
-          <div>
-            <img src="./static/images/serve/two1.jpg" alt="">
-            <div class="h4">门店名称</div>
-            <div class="h6R">在官网找到预约试驾入口，填写相关信息，提交申请后，等待工作人员与您联系，确认试驾时间和地点。</div>
-          </div>
-          <div>
-            <img src="./static/images/serve/two2.jpg" alt="">
-            <div class="h4">门店名称</div>
-            <div class="h6R">在官网找到预约试驾入口，填写相关信息，提交申请后，等待工作人员与您联系，确认试驾时间和地点。</div>
-          </div>
-          <div>
-            <img src="./static/images/serve/two2.jpg" alt="">
-            <div class="h4">门店名称</div>
-            <div class="h6R">在官网找到预约试驾入口，填写相关信息，提交申请后，等待工作人员与您联系，确认试驾时间和地点。</div>
-          </div>
-        </div>
-      </div>
-      <div class="three" id="serve3">
-        <div class="threeTit">
-          <div class="h3">在这里，<br>每一刻都是独特体验</div>
-          <a class="btn btnBlack" href="./serveBooking.html">门店预约体验</a>
-        </div>
-        <img src="./static/images/index/three.jpg" alt="">
-      </div>
-      <div class="six" id="serve4">
-        <div class="h3">服务体系</div>
-        <div class="h6R">时刻守护您的每一次出行，让您尽享无忧驾驶之旅</div>
-        <div class="sixCon">
-          <div>
-            <div class="sixIcon"><span class="iconfont icon-dianhua"></span></div>
-            <div class="h5">全球物流配件中心</div>
-            <div class="h6R">福田汽车2010年于北京建立服务培训中心，培训中心设置了发动机实训区、整车电器实训区、整车底盘实训区和集理论教学、模拟演示为一体的电教教室等，为服务商提供技术培训，为客户服务提供坚实的技术保障。</div>
-          </div>
-          <div>
-            <div class="sixIcon"><span class="iconfont icon-dianhua"></span></div>
-            <div class="h5">全球客户互动中心</div>
-            <div class="h6R">福田汽车在华北、华中地区建立了两大配件物流中心，占地近400亩，投资总额超过15亿元。通过采用国际先进的仓储管理信息系统，条形码读取技术结合PDA移动终端等，实现仓储作业的高度信息化管理，形成了配件总库、代理库、服务站（专卖店）三级配件供应体系。</div>
-          </div>
-          <div>
-            <div class="sixIcon"><span class="iconfont icon-dianhua"></span></div>
-            <div class="h5">全球服务培训中心</div>
-            <div class="h6R">福田汽车客户互动中心成立于2002年，业务团队达240人，年信息处理能力达600万条以上。通过微信、官网、WEB等多媒体渠道、7*24小时面向客户提供汽车专业知识、服务政策咨询、维修与保养预约、车辆救援、故障预警等服务项目，努力践行提升客户满意度与客户体验。</div>
-          </div>
-        </div>
-      </div>
-      <div class="two">
-        <div class="h4">为您的安心出行保驾护航</div>
-        <div class="swiper twoSwiper">
-          <div class="swiper-wrapper">
-            <div class="swiper-slide">
-              <img class="lazy" data-src="./static/images/serve/twos1.jpg" data-srcM="./static/images/serve/twos1.jpg" alt="" />
-              <div class="swTxt">
-                <div class="h5">质量保证</div>
-                <div class="h6R">福田新能源汽车承诺依据国家有关要求，针对动力电池拆装、贮存、包装、运输及梯度利用、报废建立完整的管理流程，并进行动力电池溯源信息实时上传国家监测与管理平台，承诺所有动力电池最终能够在相关法律、法规框架下进行无害化处理。新能源商用车质保标准 5年或20万公里，以先到达为准;新能源乘用车质保标准 8年</div>
-              </div>
-            </div>
-            <div class="swiper-slide">
-              <img class="lazy" data-src="./static/images/serve/twos1.jpg" data-srcM="./static/images/serve/twos1.jpg" alt="" />
-              <div class="swTxt">
-                <div class="h5">科技卡文</div>
-                <div class="h6R">福田新能源汽车承诺依据国家有关要求，针对动力电池拆装、贮存、包装、运输及梯度利用、报废建立完整的管理流程，并进行动力电池溯源信息实时上传国家监测与管理平台，承诺所有动力电池最终能够在相关法律、法规框架下进行无害化处理。新能源商用车质保标准 5年或20万公里，以先到达为准;新能源乘用车质保标准 8年</div>
-              </div>
-            </div>
-            <div class="swiper-slide">
-              <img class="lazy" data-src="./static/images/serve/twos1.jpg" data-srcM="./static/images/serve/twos1.jpg" alt="" />
-              <div class="swTxt">
-                <div class="h5">生态卡文</div>
-                <div class="h6R">我们与合作伙伴是一体，共同打造具有革新意义的商业模式。</div>
-              </div>
-            </div>
-            <div class="swiper-slide">
-              <img class="lazy" data-src="./static/images/serve/twos1.jpg" data-srcM="./static/images/serve/twos1.jpg" alt="" />
-              <div class="swTxt">
-                <div class="h5">零碳卡文</div>
-                <div class="h6R">我们专注打造零碳产品和方案，让低碳惠及每一个人。</div>
-              </div>
-            </div>
-          </div>
-          <!-- 如果需要导航按钮 -->
-          <div class="btn-prev btn-prevP4"><span class="icon iconfont icon-jiantou"></span></div>
-          <div class="btn-next btn-nextP4"><span class="icon iconfont icon-jiantou"></span></div>
-        </div>
-      </div>
-      <div class="five">
-        <div class="fiveText">
-          <div class="h4">构建便捷的服务网络</div>
-          <div class="h6R">专业守候，全方位服务，为爱车保驾护航</div>
-          <div class="btn">查看售后服务网点地图</div>
-        </div>
-        <img class="lazy" data-src="./static/images/serve/five.jpg" data-srcM="./static/images/serve/five.jpg" alt="" />
-        
-      </div>
-      <div class="message" id="serve5">
-        <div class="h3">用户留言</div>
-        <div class="h6R">欢迎来到我们的网站留言区！这里是一个开放、包容的交流空间，您的声音对我们至关重要。</div>
-          <form class="messageCon" action="/webback/bottom/search" method="post">
-            <div class="messL">
-              <input type="text" value="" name="name" placeholder="名字*" />
-              <input type="text" value="" name="phone" placeholder="电话*" />
-              <input type="text" value="" name="mail" placeholder="邮箱*" />
-              <div class="chooseBuy">
-                <input type="text" value="1" name="buyType" />
-                <div class="chooseTshow"><span class="showTxt">购车</span><span class="iconfont icon-arrow-right"></span></div>
-                <div class="chooseTDiv">
-                  <div data-type="1">购车</div>
-                  <div data-type="2">咨询</div>
-                  <div data-type="3">售后</div>
-                </div>
-              </div>
-              
-            </div>
-            <div class="messR">
-              <textarea class="searchInput" name="text" placeholder="留言*"></textarea>
-              <div class="h7R messSubM">已收到您的留言，此问题正在解决中</div>
-              <div class="submitDiv"><input type="submit" class="submit" value="确认提交" /></div>
-            </div>
-					</form>
-          <div class="h7R messSubPc">已收到您的留言，此问题正在解决中</div>
-      </div>
-    </div>
-    <%= require('../common/tpl/footer.tpl') %>
-    <%= require('../common/tpl/bottomBar.tpl') %>
-  </body>
-</html>

src/pages/serve/index.js

@@ -1,15 +0,0 @@
-import "./../common/css/common.less";
-import "./index.less";
-import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
-import App from './App.js';
-
-// swiper的css目前环境解析不出来，放static下，不走webpack 
-//import 'swiper/swiper-bundle.css';
-
-vhCheck();
-//禁止浏览器刷新后回到上一个页面滚动位置
-if ('scrollRestoration' in history) {
-    history.scrollRestoration = 'manual';
-}
-
-new App();

src/pages/serve/index.less

@@ -1,717 +0,0 @@
-//pc端样式
-.main {
-  width: 100%;
-  max-width: 1920px;
-  margin: 0 auto;
-}
-
-.three{
-  width: 100%;
-  padding-top: 120px;
-  .threeTit{
-    width: 100%;
-    max-width: 1300px;
-    margin: 0 auto;
-    display: flex;
-    justify-content: space-between;
-    br{
-      display: none;
-    }
-  }
-  &>img{
-    width: 100%;
-    display: block;
-    margin-top: 60px;
-  }
-  .threeDiv{
-    width: 100%;
-    max-width: 1300px;
-    display: flex;
-    margin: 0 auto;
-    margin-top: 50px;
-    justify-content: space-between;
-    &>div{
-      width: 406px;
-      .h4{
-        margin-top: 30px;
-        margin-bottom: 10px;
-      }
-    }
-  }
-}
-.four{
-  width: 100%;
-  max-width: 1300px;
-  margin: 0 auto;
-  padding-top: 190px;
-  box-sizing: border-box;
-  .h3{
-    text-align: center;
-    margin-bottom: 50px;
-  }
-  .fourCon{
-    display: flex;
-    width: 100%;
-    &>div{
-      width: 50%;
-    }
-    .fourL{
-      box-sizing: border-box;
-      &>div{
-        width: 100%;
-        // height: 100%;
-        position: relative;
-        .fourHide{
-          // position: absolute;
-          width: 100%;
-          // height: 100%;
-          // top: 0px;
-          // left: 0px;
-          // overflow-y: auto;
-          .fourSon{
-            opacity: 0.3;
-            &:first-child{
-              opacity: 1;
-            }
-            
-          }
-          &>div{
-            width: 100%;
-            height: 88%;
-            display: flex;
-            position: relative;
-            .fourLine{
-              width: 1px;
-              height: 100%;
-              background: #48a038;
-              position: absolute;
-              top: 0;
-              left: 15px;
-              // transform: translateX(-50%);
-            }
-            .fourIcon{
-              width: 30px;
-              height: 30px;
-              position: relative;
-              
-              .fourdiv{
-                width: 30px;
-                height: 30px;
-                background: #48a038;
-                position: absolute;
-                top: 0;
-                left: 0;
-                &::before{
-                  content: '';
-                  position: absolute;
-                  left: 50%;
-                  top: 50%;
-                  transform: translate(-50%,-5px);
-                  width: 10px;
-                  height: 10px;
-                  background: #ffffff;
-                  border-radius: 50%;
-                }
-              }
-            }
-            .fourText{
-              width: calc(100% - 30px);
-              box-sizing: border-box;
-              padding: 0 18% 270px 40px;
-              .h4{
-                margin-top: 10px;
-                margin-bottom: 10px;
-              }
-              .h6R{
-                margin-bottom: 36px;
-              }
-              .fourLimg{
-                width: 100%;
-                display: none;
-                img{
-                  width: 100%;
-                }
-              }
-            }
-            &:last-child{
-              .fourText{
-                padding: 0 18% 100px 40px;
-              }
-            }
-          }
-        }
-        .fourZ{
-          width: 100%;
-          height: 12.2%;
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          background: #ffffff;
-          opacity: 0.8;
-        }
-      }
-    }
-    .fourR{
-      box-sizing: border-box;
-      position: -webkit-sticky;
-      position: sticky;
-      top: 80px;
-      overflow: hidden;
-      max-height: 650px;
-      .fourRson{
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        img{
-          object-fit: cover;
-          display: block;
-        }
-      }
-    }
-    
-  }
-  
-}
-.five{
-  width: 100%;
-  text-align: center;
-  position: relative;
-  color: #ffffff;
-  img{
-    width: 100%;
-    display: block;
-  }
-  .fiveText{
-    position: absolute;
-    width: 100%;
-    top: 0px;
-    left: 0px;
-    padding-top: 142px;
-    .h6R{
-      margin-top: 20px;
-      margin-bottom: 49px;
-      br{
-        display: none;
-      }
-    }
-    .h4R{
-      span{
-        font-size: 24px;
-        margin-right: 10px;
-      }
-    }
-    
-  }
-}
-.six{
-  width: 100%;
-  max-width: 1300px;
-  margin: 0 auto;
-  text-align: center;
-  padding-top: 120px;
-  .h3{
-    margin-bottom: 30px;
-  }
-  .h5{
-    margin-top: 50px;
-    margin-bottom: 30px;
-  }
-  
-  .sixCon{
-    display: flex;
-    width: 100%;
-    justify-content: space-around;
-    margin-top: 60px;
-    &>div{
-      width: 350px;
-    }
-    .sixIcon{
-      width: 116px;
-      height: 116px;
-      background: #FAFAFA url(./images/sixIcon.jpg) no-repeat;
-      background-size: contain;
-      border-radius: 50%;
-      text-align: center;
-      line-height: 116px;
-      margin: 0 auto;
-    }
-    .h6R{
-      text-align: left;
-    }
-    
-  }
-}
-.two{
-  width: 100%;
-  max-width: 1300px;
-  margin: 0 auto;
-  text-align: center;
-  padding-top: 110px;
-  padding-bottom: 180px;
-  .swiper{
-    margin-top: 30px;
-  }
-  .swiper-slide{
-    
-    img{
-      width: 100%;
-      display: block;
-    }
-    .swTxt{
-      position: absolute;
-      bottom: 0px;
-      left: 0px;
-      width: 100%;
-      padding: 18px 88px;
-      width: 100%;
-      box-sizing: border-box;
-      text-align: left;
-      color: #fff;
-      .h5{
-        margin-bottom: 12px;
-      }
-    }
-  }
-  .btn-prev,.btn-next{
-    position: absolute;
-    top: 50%;
-    margin-top: -22px;
-    width: 44px;
-    height: 44px;
-    border: 1px solid #fff;
-    z-index: 2;
-    text-align: center;
-    color: #fff;
-    background: transparent;
-    transition: all .3s ease-in-out;
-    cursor: pointer;
-    span{
-      font-size: 36px;
-      display: inline-block;
-      transform: rotate(90deg);
-      line-height: 44px;
-
-    }
-    &:hover{
-      background: #48a038;
-      border-color: #48a038;
-      color: #fff;
-    }
-  }
-  .btn-prev{
-    left: 40px;
-    transform: rotate(-180deg);
-  }
-  .btn-next{
-    right: 40px;
-  }
-  .swiper-button-disabled{
-    cursor: no-drop;
-    background: transparent;
-    color: #979292;
-    border-color: #979292;
-    &:hover{
-      background: transparent;
-      border-color: #979292;
-      color: #979292;
-    }
-  }
-}
-
-.message{
-  width: 100%;
-  max-width: 1300px;
-  margin: 0 auto;
-  padding-top: 120px;
-  padding-bottom: 120px;
-  text-align: center;
-  .h6R{
-    margin-top: 30px;
-    margin-bottom: 40px;
-  }
-  .messageCon{
-    display: flex;
-    justify-content: space-between;
-    text-align: left;
-    color: #979292;
-    .messL{
-      width: 300px;
-      &>input{
-        width: 100%;
-        border: 1px solid #BBBEC0;
-        box-sizing: border-box;
-        height: 50px;
-        line-height: 50px;
-        font-size: 14px;
-        padding: 0px 20px;
-        margin-top: 15px;
-        &:first-child{
-          margin-top: 0px;
-        }
-      }
-      .chooseBuy{
-        width: 100%;
-        height: 50px;
-        position: relative;
-        border: 1px solid #BBBEC0;
-        box-sizing: border-box;
-        margin-top: 15px;
-        color: #333333;
-        &>input{
-          display: none;
-        }
-        .chooseTshow{
-          width: 100%;
-          height: 100%;
-          line-height: 50px;
-          box-sizing: border-box;
-          padding: 0px 17px 0px 20px;
-          cursor: pointer;
-          .iconfont{
-            font-size: 18px;
-            float: right;
-            transform: rotate(90deg);
-          }
-        }
-        .chooseTDiv{
-          width: 100%;
-          position: absolute;
-          top: 50px;
-          left: 0px;
-          background: #F5F5F5;
-          box-shadow: 0px 9px 34px 9px rgba(0, 0, 0, 0.1);
-          box-sizing: border-box;
-          padding: 10px 20px;
-          font-size: 14px;
-          z-index: 2;
-          clip-path: inset(0px 0px 100% 0px);
-          // display: none;
-          transition: all 0.6s ease-in-out;
-          &>div{
-            padding: 10px 0px;
-            cursor: pointer;
-            transition: all .3s ease-in-out;
-            &:hover{
-              color: #48a038;
-            }
-          }
-        }
-      }
-      .showChooseTDiv{
-        .chooseTDiv{
-          clip-path: inset(0px 0px 0% 0px);
-        }
-      }
-    }
-    .messR{
-      width: calc(100% - 315px);
-      height: 245px;
-      position: relative;
-      textarea{
-        width: 100%;
-        height: 100%;
-        border: 1px solid #BBBEC0;
-        box-sizing: border-box;
-        padding: 18px 20px;
-      }
-      .submitDiv{
-        position: absolute;
-        bottom: 20px;
-        right: 20px;
-        input{
-          cursor: pointer;
-          font-size: 14px;
-          color: #333333;
-          font-weight: bold;
-          padding: 10px;
-          background: transparent;
-          border: 0px;
-          position: relative;
-          z-index: 2;
-          transition: all .3s ease-in-out;
-        }
-        &::before{
-          content: '';
-          position: absolute;
-          left: 0px;
-          top: 0px;
-          width: 100%;
-          height: 100%;
-          background: #48a038;
-          clip-path: inset(0px 0px 0px 100%);
-          transition: all .3s ease-in-out;
-          opacity: 0;
-        }
-        &:hover{
-          input{color: #ffffff;}
-          &::before{
-            clip-path: inset(0px 0px 0px 0px);
-            opacity: 1;
-          }
-        }
-      }
-      .h7R{
-        display: none;
-      }
-    }
-    &>div{.errorMessage{
-      border-color: red;
-    }}
-  }
-  .h7R{
-    text-align: right;
-    margin-top: 20px;
-    color: #48a038;
-    display: none;
-  }
-  .messSuccess{
-    display: block;
-  }
-}
-
-.pcTxt{
-  display: block;
-}
-.mTxt{
-  display: none;
-}
-@media screen and (min-width: 801px) and (max-width: 1400px) {
-  .main{
-    padding: 0px 20px;
-    box-sizing: border-box;
-  }
-}
-
-//移动端样式
-@media screen and (max-width:800px) {
-  .pcTxt{
-    display: none;
-  }
-  .mTxt{
-    display: block;
-  }
-  .three{
-    padding: 0 15px;
-    padding-top: 110px;
-    box-sizing: border-box;
-    .threeTit{
-      flex-wrap: wrap;
-      justify-content: center;
-      text-align: center;
-      br{
-        display: block;
-      }
-      .btn{
-        margin-top: 30px;
-      }
-    }
-    .threeDiv{
-      margin-top: 40px;
-      flex-wrap: wrap;
-      &>div{
-        width: 100%;
-        margin-bottom: 40px;
-        &:last-child{margin-bottom: 0px;}
-        .h4{
-          margin-top: 30px;
-        }
-      }
-    }
-  }
-  .four{
-    padding: 110px 15px 0px;
-    .h3{
-      margin-bottom: 40px;
-    }
-    .fourCon{
-      flex-wrap: wrap;
-      &>div{
-        width: 100%;
-      }
-      .fourL{
-        padding-left: 0;
-        &>div{
-          .fourHide{
-            position: relative;
-            overflow-y: inherit;
-            
-            &>div{
-              height: auto;
-              margin-bottom: 50px;
-              .fourLine{
-                display: none;
-              }
-              .fourIcon{
-                display: none;
-              }
-              .fourText{
-                width: 100%;
-                padding: 0px;
-                .fourLimg{
-                  display: block;
-                  margin-bottom: 40px;
-                }
-                .btn{
-                  position: relative;
-                  left: 50%;
-                  transform: translateX(-50%);
-                }
-              }
-              &:last-child{
-                margin-bottom: 0px;
-                .fourText{
-                  padding: 0px;
-                }
-              }
-            }
-            .fourSon{
-              opacity: 1;
-            }
-          }
-        }
-      }
-      .fourR{
-        padding-right: 0;
-      }
-    }
-  }
-  .five{
-    color: #333333;
-    padding: 0px 15px;
-    box-sizing: border-box;
-    .fiveText{
-      padding-top: 0px;
-      position: relative;
-      margin-bottom: 40px;
-      .h6R{
-        margin-top: 9px;
-        margin-bottom: 30px;
-        line-height: 27px;
-      }
-      .h4{
-        font-size: 24px;
-        line-height: 48px;
-      }
-      .btn {
-        color: #003A40;
-        border-color: #003A40;
-    }
-    }
-  }
-  .six{
-    padding: 110px 15px;
-    box-sizing: border-box;
-    .h3{
-      margin-bottom: 20px;
-    }
-    .sixCon{
-      justify-content: flex-start;
-      flex-wrap: wrap;
-      flex-direction: column;
-      align-items: center;
-      margin-top: 50px;
-      &>div{
-        margin-top: 75px;
-        width: 100%;
-        &:first-child{margin-top: 0px;}
-      }
-      span{
-        font-size: 19px;
-      }
-      .sixIcon{
-        width: 58px;
-        height: 58px;
-        line-height: 58px;
-      }
-      .h5{
-        margin-top: 10px;
-        margin-bottom: 10px;
-      }
-    }
-  }
-  .two{
-    padding: 0px 15px 110px;
-    box-sizing: border-box;
-    .swiper{
-      margin-top: 10px;
-      padding-bottom: 80px;
-      .swiper-slide{
-        .swTxt{
-          position: relative;
-          padding: 20px 0px 0px;
-          color: #333333;
-          .h5{
-            margin-bottom: 5px;
-          }
-        }
-      }
-    }
-    .btn-prev,.btn-next{
-      margin-top: -26px;
-      top: 100%;
-      width: 24px;
-      height: 24px;
-      border: 1px solid #000;
-      color: #333333;
-      span{
-        font-size: 22px;
-        line-height: 24px;
-      }
-    }
-    .btn-prev{
-      left: 100px;
-    }
-    .btn-next{
-      right: 100px;
-    }
-  }
-  .message{
-    padding: 110px 15px 60px;
-    box-sizing: border-box;
-    &>.h6R{
-      text-align: left;
-    }
-    .messageCon{
-      flex-wrap: wrap;
-      flex-direction: column;
-      .messL{
-        width: 100%;
-        margin-bottom: 15px;
-      }
-      .messR{
-        width: 100%;
-        height: auto;
-        .submitDiv{
-          position: relative;
-          bottom: 0px;
-          right: 0px;
-          width: 175px;
-          height: 35px;
-          border: 1px solid #003A40;
-          margin: 0 auto;
-          text-align: center;
-          line-height: 35px;
-          margin-top: 37px;
-          input{
-            font-size: 11px;
-            color: #003A40;
-            font-weight: bold;
-            padding: 0px;
-          }
-          &:hover{
-            border-color: #48a038;
-          }
-        }
-        .messSuccess{
-          display: block;
-        }
-      }
-    }
-    .h7R{
-      text-align: left;
-    }
-    .messSuccess{
-      display: none;
-    }
-  }
-}

src/pages/serveBooking/App.js

@@ -1,225 +0,0 @@
-import Swiper from 'swiper/bundle'
-import gsap from 'gsap'
-import LocomotiveScroll from 'locomotive-scroll';
-import Common from '../common/js/Common'
-import {
-    isMobile
-} from '../common/js/utils'
-
-export default class App {
-    constructor() {
-        let common = new Common(document.querySelector('.main'),3)   //导航菜单高亮，0是首页，后面的按顺序添加
-        this.isMobile = isMobile()
-        
-        this.scroll = new LocomotiveScroll();
-
-        // 图片及视频资源懒加载。防止阻塞js执行
-        let lazyDoms = document.querySelectorAll(".lazy");
-        let isMob=this.isMobile;
-        lazyDoms.forEach((item) => {
-            if (item.nodeName == "PICTURE") {
-                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
-                item.children[1].setAttribute("src", item.children[1].dataset.src);
-            }
-            if (item.nodeName == "IMG") {
-                if(isMob){item.setAttribute("src", item.dataset.srcm);}
-                else{
-                    item.setAttribute("src", item.dataset.src);
-                }
-                
-            }
-            if (item.nodeName == "VIDEO") {
-                console.log(item, 'item---2')
-                item.setAttribute("src", item.dataset.src);
-                // item.load();
-            }
-        });
-        this.init();
-        
-    }
-    init() {
-        let isMob=this.isMobile;
-        
-        //留言提交
-        let messCkTs = document.querySelectorAll(".chooseBuy");
-        let messCks1 = document.querySelectorAll(".chooseTDiv1 div");
-        let messCks2 = document.querySelectorAll(".chooseTDiv2 div");
-
-        let buyType1 = document.querySelector('input[name="buyType1"]');
-        let buyType2 = document.querySelector('input[name="buyType2"]');
-
-        messCkTs.forEach((item,index)=>{
-            item.addEventListener("click", (e) => {
-                
-                if(item.classList.contains("showChooseTDiv")){
-                    item.classList.remove("showChooseTDiv");
-                }else{
-                    item.classList.add("showChooseTDiv");
-                }
-                
-            });
-        })
-        
-        messCks1.forEach((item,index)=>{
-            item.addEventListener("click", (e) => {
-                let typeVal = item.getAttribute('data-type');
-                buyType1.value = typeVal;
-                let txtShow=e.target.innerText;
-                item.parentNode.parentNode.querySelector(".showTxt").innerText=txtShow;
-                if(item.parentNode.parentNode.querySelector(".chooseTshow").classList.contains("errorMessage")){
-                    item.parentNode.parentNode.querySelector(".chooseTshow").classList.remove("errorMessage");
-                }
-            });
-        })
-        messCks2.forEach((item,index)=>{
-            item.addEventListener("click", (e) => {
-                let typeVal = item.getAttribute('data-type');
-                buyType2.value = typeVal;
-                let txtShow=e.target.innerText;
-                item.parentNode.parentNode.querySelector(".showTxt").innerText=txtShow;
-                if(item.parentNode.parentNode.querySelector(".chooseTshow").classList.contains("errorMessage")){
-                    item.parentNode.parentNode.querySelector(".chooseTshow").classList.remove("errorMessage");
-                }
-            });
-        })
-        
-        let kuang = document.querySelector(".kuang");
-        kuang.addEventListener("click", (e) => {
-            if(kuang.classList.contains("isOk")){
-                kuang.classList.remove("isOk");
-            }else{
-                kuang.classList.add("isOk");
-            }
-        });
-        let getCode = document.querySelector(".getCodeck");
-        getCode.addEventListener("click", (e) => {
-            if(getCode.classList.contains("getC")){
-                return;
-            }else{
-                
-                fetch("/webback/bottom/search", {
-                    method: "get",
-                })
-                .then(data => {
-                    console.log('Success:', data);
-                    // 处理成功响应
-                    getCode.classList.add("getC");
-                    alert('验证码已发送，请填写验证码！');
-                    setTimeout(function(){
-                        getCode.classList.remove("getC");
-                    },60000);
-                })
-                .catch((error) => {
-                    console.error('Error:', error);
-                    // 处理错误
-                    alert('提交失败，请稍后再试');
-                });
-            }
-        });
-        
-        //表单提交
-        // 获取表单元素
-        this.form = document.querySelector('.messageCon');
-        if (this.form) {
-            this.form.addEventListener('submit', this.handleFormSubmit.bind(this));
-        }
-    }
-    handleFormSubmit(event) {
-        event.preventDefault(); // 阻止默认的表单提交行为
-        let kuang = document.querySelector(".kuang");
-        if(!kuang.classList.contains("isOk")){
-            alert('请先同意隐私政策！');
-            return;
-        }
-
-        // 获取所有必填输入字段
-        let nameInput = document.querySelector('input[name="name"]');
-        let phoneInput = document.querySelector('input[name="phone"]');
-        let mailInput = document.querySelector('input[name="mail"]');
-        let buyTypeInput1 = document.querySelector('input[name="buyType1"]');
-        let buyTypeInput2 = document.querySelector('input[name="buyType2"]');
-        
-        // 校验逻辑
-        if (!this.validateInput(buyTypeInput1)) {
-            buyTypeInput1.parentNode.querySelector(".chooseTshow").classList.add("errorMessage");
-            alert('请选择购买类型');
-            return;
-        }else{
-            buyTypeInput1.classList.remove("errorMessage");
-        }
-        if (!this.validateInput(buyTypeInput2)) {
-            buyTypeInput2.parentNode.querySelector(".chooseTshow").classList.add("errorMessage");
-            alert('请选择购买类型');
-            return;
-        }else{
-            buyTypeInput2.classList.remove("errorMessage");
-        }
-        if (!this.validateInput(nameInput)) {
-            nameInput.classList.add("errorMessage");
-            alert('请填写您的姓名');
-            return;
-        }else{
-            nameInput.classList.remove("errorMessage");
-        }
-        if (!this.validatePhone(phoneInput)) {
-            phoneInput.classList.add("errorMessage");
-            alert('请输入有效的电话号码');
-            return;
-        }else{
-            phoneInput.classList.remove("errorMessage");
-        }
-        if (!this.validateEmail(mailInput)) {
-            mailInput.classList.add("errorMessage");
-            alert('请输入验证码');
-            return;
-        }else{
-            mailInput.classList.remove("errorMessage");
-        }
-        
-        // 如果校验通过，可以继续提交表单或执行其他操作
-        // 例如，使用 AJAX 提交表单数据
-        this.submitFormData(this.form);
-    }
-
-    validateInput(input) {
-        // 检查输入字段是否为空
-        return input && input.value.trim() !== '';
-    }
-    validatePhone(input) {
-        // 定义电话号码的正则表达式
-        let phoneRegex = /^(\+?\d{1,3}[-.\s]?)?(\(?\d{1,4}\)?[-.\s]?)?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9}$/;
-        return phoneRegex.test(input.value.trim());
-    }
-
-    validateEmail(input) {
-        // 定义邮箱地址的正则表达式
-        let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        return emailRegex.test(input.value.trim());
-    }
-
-    submitFormData(form) {
-        // 使用 AJAX 提交表单数据
-        let isMobile = this.isMobile;
-        let formData = new FormData(form);
-        let nameInput = isMobile?document.querySelector('.messSubM'):document.querySelector('.messSubPc');
-        fetch(form.action, {
-            method: form.method,
-            body: formData
-        })
-        .then(response => response.json())
-        .then(data => {
-            console.log('Success:', data);
-            nameInput.classList.add("messSuccess");
-            // 处理成功响应
-            alert('提交成功');
-            form.reset(); // 重置表单
-        })
-        .catch((error) => {
-            console.error('Error:', error);
-            // 处理错误
-            alert('提交失败，请稍后再试');
-        });
-    }
-
-
-}

src/pages/serveBooking/index.html

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <title>门店预约体验-服务</title>
-    <meta name="description" content=""/>
-    <meta name="Keywords" content=""/>
-    <meta
-      content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"
-      name="viewport"
-    />
-    <link
-      href="./static/css/swiper-bundle.min.css"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <%= require('../common/tpl/headerLink.tpl') %>
-  </head>
-
-  <body>
-    <%= require('../common/tpl/header.tpl') %>
-    
-    <div class="main">
-      <div class="serveBg">
-        <img class="lazy" data-src="./static/images/serve/servebk.jpg" data-srcM="./static/images/serve/servebkm.jpg" alt=""/>
-        <div>
-        <form class="messageCon" action="/webback/bottom/search" method="post">
-            <div class="h3">门店预约体验</div>
-            <div class="chooseBuy">
-              <input type="text" value="" name="buyType1" />
-              <div class="chooseTshow"><span class="showTxt">请选择意向车型</span><span class="iconfont icon-arrow-right"></span></div>
-              <div class="chooseTDiv chooseTDiv1">
-                <div data-type="1">车型1</div>
-                <div data-type="2">车型2</div>
-                <div data-type="3">车型3</div>
-              </div>
-            </div>
-            <div class="chooseBuy">
-              <input type="text" value="" name="buyType2" />
-              <div class="chooseTshow"><span class="showTxt">请选择试驾地点</span><span class="iconfont icon-arrow-right"></span></div>
-              <div class="chooseTDiv chooseTDiv2">
-                <div data-type="1">地点1</div>
-                <div data-type="2">地点2</div>
-                <div data-type="3">地点3</div>
-              </div>
-            </div>
-            <input type="text" value="" name="name" placeholder="请填写您的姓名" />
-            <input type="text" value="" name="phone" placeholder="请填写您的电话" />
-            <div class="getCode">
-              <input type="text" value="" name="mail" placeholder="请输入验证码" />
-              <span class="getCodeck">获取验证码</span>
-            </div>
-            
-            
-            <div class="isTrue"><span class="kuang"></span>同意<a href="">隐私政策</a></div>
-            <div class="submitDiv"><input type="submit" class="submit" value="即刻预约" /></div>
-        </form></div>
-      </div>
-    </div>
-    <%= require('../common/tpl/footer.tpl') %>
-    <%= require('../common/tpl/bottomBar.tpl') %>
-  </body>
-</html>

src/pages/serveBooking/index.js

@@ -1,15 +0,0 @@
-import "./../common/css/common.less";
-import "./index.less";
-import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
-import App from './App.js';
-
-// swiper的css目前环境解析不出来，放static下，不走webpack 
-//import 'swiper/swiper-bundle.css';
-
-vhCheck();
-//禁止浏览器刷新后回到上一个页面滚动位置
-if ('scrollRestoration' in history) {
-    history.scrollRestoration = 'manual';
-}
-
-new App();

src/pages/serveBooking/index.less

@@ -1,303 +0,0 @@
-//pc端样式
-.main {
-  width: 100%;
-  max-width: 1920px;
-  margin: 0 auto;
-  padding-top: 70px;
-}
-.serveBg{
-  width: 100%;
-  position: relative;
-  &>img{
-    position: absolute;
-    top: 0px;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-  &>div{
-    width: 100%;
-    display: flex;
-    padding: 80px 100px 70px;
-    box-sizing: border-box;
-    flex-direction: row-reverse;
-  }
-  
-  .messageCon{
-    
-    width: 572px;
-    background: #ffffff;
-    text-align: left;
-    color: #707271;
-    padding: 110px 36px;
-    box-sizing: border-box;
-    position: relative;
-    z-index: 2;
-    .h3{
-      color: #333333;
-      text-align: center;
-      margin-bottom: 30px;
-    }
-    &>input{
-      width: 100%;
-      border:0px;
-      border-bottom: 1px solid #BBBEC0;
-      box-sizing: border-box;
-      height: 76px;
-      line-height: 76px;
-      font-size: 14px;
-      padding: 0px 14px;
-      &:first-child{
-        margin-top: 0px;
-      }
-    }
-    .chooseBuy{
-      width: 100%;
-      height: 76px;
-      position: relative;
-      border-bottom: 1px solid #BBBEC0;
-      box-sizing: border-box;
-      color: #707271;
-      &>input{
-        display: none;
-      }
-      .chooseTshow{
-        width: 100%;
-        height: 100%;
-        line-height: 76px;
-        box-sizing: border-box;
-        padding: 0px 14px;
-        cursor: pointer;
-        .iconfont{
-          font-size: 18px;
-          float: right;
-          transform: rotate(90deg);
-        }
-      }
-      .chooseTDiv{
-        width: 100%;
-        position: absolute;
-        top: 76px;
-        left: 0px;
-        background: #F5F5F5;
-        box-shadow: 0px 9px 34px 9px rgba(0, 0, 0, 0.1);
-        box-sizing: border-box;
-        padding: 10px 20px;
-        font-size: 14px;
-        z-index: 2;
-        clip-path: inset(0px 0px 100% 0px);
-        // display: none;
-        transition: all 0.6s ease-in-out;
-        &>div{
-          padding: 10px 0px;
-          cursor: pointer;
-          transition: all .3s ease-in-out;
-          &:hover{
-            color: #48a038;
-          }
-        }
-      }
-    }
-    .showChooseTDiv{
-      .chooseTDiv{
-        clip-path: inset(0px 0px 0% 0px);
-      }
-    }
-    .isTrue{
-      color: #333333;
-      font-size: 16px;
-      margin-top: 30px;
-      display: flex;
-      align-items: center;
-      .kuang{
-        display: inline-block;
-        width: 14px;
-        height: 14px;
-        background: #ffffff;
-        border: 1px solid #333333;
-        margin-right: 20px;
-        cursor: pointer;
-        position: relative;
-        &::before{
-          content: '';
-          width: 10px;
-          height: 10px;
-          background: #48a038;
-          position: absolute;
-          top: 2px;
-          left: 2px;
-          display: none;
-        }
-      }
-      .isOk{
-        &::before{
-          display: block;
-        }
-      }
-      a{
-        color: #48a038;
-      }
-    }
-    .submitDiv{
-      position: relative;
-      width: 100%;
-      height: 40px;
-      text-align: center;
-      border: #333333 1px solid;
-      box-sizing: border-box;
-      margin-top: 60px;
-      input{
-        width: 100%;
-        cursor: pointer;
-        font-size: 14px;
-        color: #333333;
-        font-weight: bold;
-        padding: 10px;
-        background: transparent;
-        border: 0px;
-        position: relative;
-        z-index: 2;
-        transition: all .3s ease-in-out;
-      }
-      &::before{
-        content: '';
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        width: 100%;
-        height: 100%;
-        background: #48a038;
-        clip-path: inset(0px 0px 0px 100%);
-        transition: all .3s ease-in-out;
-        opacity: 0;
-      }
-      &:hover{
-        input{color: #ffffff;}
-        border-color: #48a038;
-        &::before{
-          clip-path: inset(0px 0px 0px 0px);
-          opacity: 1;
-        }
-      }
-    }
-    .getCode{
-      width: 100%;
-      height: 76px;
-      position: relative;
-      input{
-        width: 100%;
-        border:0px;
-        border-bottom: 1px solid #BBBEC0;
-        box-sizing: border-box;
-        height: 76px;
-        line-height: 76px;
-        font-size: 14px;
-        padding: 0px 14px;
-      }
-      .getCodeck{
-        display: inline-block;
-        position: absolute;
-        top: 0px;
-        right: 0px;
-        font-size: 16px;
-        cursor: pointer;
-        color: #C9C9C9;line-height: 76px;
-      }
-      .getC{
-        cursor: no-drop;
-      }
-    }
-    .errorMessage{
-      color: #FB1313;
-      .showTxt{
-        color: #FB1313;
-      }
-      &::-webkit-input-placeholder{
-        color: #FB1313;
-      }
-      &:-moz-placeholder{
-        color: #FB1313;
-      }
-      &::-moz-placeholder{
-        color: #FB1313;
-      }
-      &::-ms-input-placeholder{
-        color: #FB1313;
-      }
-  }
-  }
-}
-
-
-.pcTxt{
-  display: block;
-}
-.mTxt{
-  display: none;
-}
-@media screen and (min-width: 801px) and (max-width: 1400px) {
-  
-}
-
-//移动端样式
-@media screen and (max-width:800px) {
-  .pcTxt{
-    display: none;
-  }
-  .mTxt{
-    display: block;
-  }
-  .serveBg{ 
-    &>img{
-      position: relative;
-    }
-    &>div{
-      padding: 70px 15px 60px;
-    }
-    .messageCon{
-      padding: 0px;
-      width: 100%;
-      .h3{
-        margin-bottom: 20px;
-      }
-      .chooseBuy{
-        height: 50px;
-        font-size: 14px;
-        .chooseTshow{
-          line-height: 50px;
-        }
-        .chooseTDiv{
-          top: 50px;
-          padding: 10px 14px;
-        }
-      }
-      &>input{
-        height: 50px;
-        line-height: 76px;
-      }
-      .getCode{
-        height: 50px;
-        input{
-          height: 50px;
-          line-height: 50px;
-        }
-        .getCodeck{
-          font-size: 14px;
-          line-height: 50px;
-        }
-      }
-      .isTrue{
-        font-size: 14px;
-        margin-top: 25px;
-        .kuang{
-          margin-right: 12px;
-        }
-      }
-      .submitDiv{
-        margin-top: 50px;
-      }
-    }
-  }
-}

src/pages/serveMap/App.js

@@ -1,135 +0,0 @@
-import Swiper from 'swiper/bundle'
-import gsap from 'gsap'
-import LocomotiveScroll from 'locomotive-scroll';
-import Common from '../common/js/Common'
-import {
-    isMobile
-} from '../common/js/utils'
-
-export default class App {
-    constructor() {
-        let common = new Common(document.querySelector('.main'),3)   //导航菜单高亮，0是首页，后面的按顺序添加
-        this.isMobile = isMobile()
-        
-        this.scroll = new LocomotiveScroll();
-
-        // 图片及视频资源懒加载。防止阻塞js执行
-        let lazyDoms = document.querySelectorAll(".lazy");
-        let isMob=this.isMobile;
-        lazyDoms.forEach((item) => {
-            if (item.nodeName == "PICTURE") {
-                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
-                item.children[1].setAttribute("src", item.children[1].dataset.src);
-            }
-            if (item.nodeName == "IMG") {
-                if(isMob){item.setAttribute("src", item.dataset.srcm);}
-                else{
-                    item.setAttribute("src", item.dataset.src);
-                }
-                
-            }
-            if (item.nodeName == "VIDEO") {
-                console.log(item, 'item---2')
-                item.setAttribute("src", item.dataset.src);
-                // item.load();
-            }
-        });
-        this.init();
-        
-    }
-    init() {
-        let isMob=this.isMobile;
-        //切换选项
-        let messCkTs = document.querySelectorAll(".chooseBuy");
-        let messCks1 = document.querySelectorAll(".chooseTDiv1 div");
-        let messCks2 = document.querySelectorAll(".chooseTDiv2 div");
-        let messCks3 = document.querySelectorAll(".chooseTDiv3 div");
-
-        let buyType1 = '';
-        let buyType2 = '';
-        let buyType3 = '';
-        function findS() {
-            if(buyType1!=''&&buyType2!=''&&buyType3!=''){
-                console.log('调用接口');
-            }
-        }
-
-        messCkTs.forEach((item,index)=>{
-            item.addEventListener("click", (e) => {
-                
-                if(item.classList.contains("showChooseTDiv")){
-                    item.classList.remove("showChooseTDiv");
-                    findS();
-                }else{
-                    item.classList.add("showChooseTDiv");
-                }
-                
-            });
-        })
-        
-        messCks1.forEach((item,index)=>{
-            item.addEventListener("click", (e) => {
-                let typeVal = item.getAttribute('data-type');
-                buyType1 = typeVal;
-                buyType2 = '';
-                buyType3 = '';
-                let txtShow=e.target.innerText;
-                item.parentNode.parentNode.querySelector(".showTxt").innerText=txtShow;
-                document.querySelector(".chooseBuy2 .showTxt").innerText='省份';
-                document.querySelector(".chooseBuy3 .showTxt").innerText='城市';
-            });
-        })
-        messCks2.forEach((item,index)=>{
-            item.addEventListener("click", (e) => {
-                let typeVal = item.getAttribute('data-type');
-                buyType2 = typeVal;
-                buyType3 = '';
-                let txtShow=e.target.innerText;
-                item.parentNode.parentNode.querySelector(".showTxt").innerText=txtShow;
-                document.querySelector(".chooseBuy3 .showTxt").innerText='城市';
-            });
-        })
-        messCks3.forEach((item,index)=>{
-            item.addEventListener("click", (e) => {
-                let typeVal = item.getAttribute('data-type');
-                buyType3 = typeVal;
-                let txtShow=e.target.innerText;
-                item.parentNode.parentNode.querySelector(".showTxt").innerText=txtShow;
-                
-            });
-        })
-        //地图
-        let map = new BMapGL.Map("container");
-        let point = new BMapGL.Point(100.331398, 38.897445);
-        map.centerAndZoom(point, 6);
-        let zoomCtrl = new BMapGL.ZoomControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT,offset: new window.BMapGL.Size(18, 18)});
-        map.addControl(zoomCtrl) 
-        // map.enableScrollWheelZoom(false);
-        let mapJson=[
-            {
-                "dealerName": "北京正万通汽车销售服务有限公司",
-                "dealerAddress": "丰台区南四环西路107号",
-                "dealerTel": "13810010302",
-                "longitudeLatitude": "116.319807_39.806025"
-            },
-            {
-                "dealerName": "北京兴芳伟业汽车贸易有限公司",
-                "dealerAddress": "北京市怀柔区怀丰路三公里铁路桥北",
-                "dealerTel": "13911288875",
-                "longitudeLatitude": "116.634235_40.319042"
-            },
-            {
-                "dealerName": "北京佳和创世工贸有限公司",
-                "dealerAddress": "庙城镇高两河村西100米",
-                "dealerTel": "13370137888",
-                "longitudeLatitude": "116.663497_40.296867"
-            },
-            {
-                "dealerName": "北京圣茂汽车销售有限公司",
-                "dealerAddress": "北京市大兴区南中轴路北京圣茂汽车销售公司",
-                "dealerTel": "13611222072",
-                "longitudeLatitude": "116.411303_39.91488908"
-            }
-        ];
-    }
-}

src/pages/serveMap/images/pos.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679477787694" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1759" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1024 0l-447.7952 1024-118.016-458.1888L0 448.2048z" fill="#9A9DAE" p-id="1760"></path></svg>

src/pages/serveMap/index.html

@@ -1,91 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <title>门店地图-服务</title>
-    <meta name="description" content=""/>
-    <meta name="Keywords" content=""/>
-    <meta
-      content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"
-      name="viewport"
-    />
-    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&&type=webgl&ak=1i0EYhgKbfLEtSM8AqgNe4ITvctfRMGI"></script>
-    <link
-      href="./static/css/swiper-bundle.min.css"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <%= require('../common/tpl/headerLink.tpl') %>
-  </head>
-
-  <body>
-    <%= require('../common/tpl/header.tpl') %>
-    
-    <div class="main">
-      <div class="container" id="container"></div>
-      <div class="mapCon">
-        <div class="mapDiv">
-          <div class="mapChoose">
-            <div class="chooseBuy chooseBuy1">
-              <div class="chooseTshow"><span class="showTxt">卡文门店</span><span class="iconfont icon-arrow-right"></span></div>
-              <div class="chooseTDiv chooseTDiv1">
-                <div data-type="1">车型1</div>
-                <div data-type="2">车型2</div>
-                <div data-type="3">车型3</div>
-              </div>
-            </div>
-            <div class="chooseR">
-              <div class="chooseBuy chooseBuy2">
-                <div class="chooseTshow"><span class="showTxt">省份</span><span class="iconfont icon-arrow-right"></span></div>
-                <div class="chooseTDiv chooseTDiv2">
-                  <div data-type="1">车型1</div>
-                  <div data-type="2">车型2</div>
-                  <div data-type="3">车型3</div>
-                  <div data-type="1">车型1</div>
-                  <div data-type="2">车型2</div>
-                  <div data-type="3">车型3</div>
-                  <div data-type="1">车型1</div>
-                  <div data-type="2">车型2</div>
-                  <div data-type="3">车型3</div>
-                </div>
-              </div>
-              <div class="chooseBuy chooseBuy3">
-                <div class="chooseTshow"><span class="showTxt">城市</span><span class="iconfont icon-arrow-right"></span></div>
-                <div class="chooseTDiv chooseTDiv3">
-                  <div data-type="1">车型1</div>
-                  <div data-type="2">车型2</div>
-                  <div data-type="3">车型3</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="mapList">
-            <div class="mapUl">
-              <div class="mapLi">
-                <div class="h6R"><span class="addr">卡文汽车**********销售门店</span><span class="iconB">14.14km</span></div>
-                <div class="h7R">河北省唐山市路南区建设南路与南新东道交叉口东侧(卡文汽车4S店)</div>
-                <div class="h7R">销售热线:0315-2285888       服务热线:0315-2285888</div>
-                <a class="btn btnBlack" href="./serveBooking.html">门店预约体验</a>
-              </div>
-              <div class="mapLi">
-                <div class="h6R">卡文汽车**********销售门店</div>
-                <div class="h7R">河北省唐山市路南区建设南路与南新东道交叉口东侧(卡文汽车4S店)</div>
-                <div class="h7R">销售热线:0315-2285888       服务热线:0315-2285888</div>
-                <a class="btn btnBlack" href="./serveBooking.html">门店预约体验</a>
-              </div>
-              <div class="mapLi">
-                <div class="h6R">卡文汽车**********销售门店</div>
-                <div class="h7R">河北省唐山市路南区建设南路与南新东道交叉口东侧(卡文汽车4S店)</div>
-                <div class="h7R">销售热线:0315-2285888       服务热线:0315-2285888</div>
-                <a class="btn btnBlack" href="./serveBooking.html">门店预约体验</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <%= require('../common/tpl/footer.tpl') %>
-    <%= require('../common/tpl/bottomBar.tpl') %>
-  </body>
-</html>

src/pages/serveMap/index.js

@@ -1,15 +0,0 @@
-import "./../common/css/common.less";
-import "./index.less";
-import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
-import App from './App.js';
-
-// swiper的css目前环境解析不出来，放static下，不走webpack 
-//import 'swiper/swiper-bundle.css';
-
-vhCheck();
-//禁止浏览器刷新后回到上一个页面滚动位置
-if ('scrollRestoration' in history) {
-    history.scrollRestoration = 'manual';
-}
-
-new App();

src/pages/serveMap/index.less

@@ -1,191 +0,0 @@
-//pc端样式
-.main {
-  width: 100%;
-  max-width: 1920px;
-  margin: 0 auto;
-  height: 100%;
-  position: relative;
-}
-
-.container{
-  width: 100%;
-  height: 100%;
-  position: relative;
-  z-index: 2;
-}
-.mapCon{
-  position: absolute;
-  top: 0px;
-  left: 100px;
-  width: 460px;
-  height: 100%;
-  box-sizing: border-box;
-  padding-top: 120px;
-  padding-bottom: 80px;
-  z-index: 2;
-  .mapDiv{
-    width: 100%;
-    height: 100%;
-    .mapChoose{
-      display: flex;
-      justify-content: space-between;
-      height: 40px;
-      margin-bottom: 5px;
-      position: relative;
-      z-index: 3;
-      .chooseBuy{
-        width: 150px;
-        height: 40px;
-        position: relative;
-        box-sizing: border-box;
-        color: #707271;
-        .chooseTshow{
-          width: 100%;
-          height: 100%;
-          line-height: 38px;
-          box-sizing: border-box;
-          cursor: pointer;
-          text-align: center;
-          .iconfont{
-            font-size: 18px;
-            display: inline-block;
-            transform: rotate(90deg);
-            position: relative;
-            top: 2px;
-            margin-left: 10px;
-          }
-        }
-        .chooseTDiv{
-          width: 100%;
-          max-height: 371px;
-          overflow-y: auto;
-          position: absolute;
-          top: 40px;
-          left: 0px;
-          background: #F5F5F5;
-          box-shadow: 0px 9px 34px 9px rgba(0, 0, 0, 0.1);
-          box-sizing: border-box;
-          padding: 10px 20px;
-          font-size: 14px;
-          z-index: 2;
-          clip-path: inset(0px 0px 100% 0px);
-          // display: none;
-          transition: all 0.6s ease-in-out;
-          &::-webkit-scrollbar {
-            width: 3px;
-          }
-          &::-webkit-scrollbar-thumb {
-            background-color: #b5b5b5;
-          }
-          &>div{
-            padding: 10px 0px;
-            cursor: pointer;
-            transition: all .3s ease-in-out;
-            &:hover{
-              color: #48a038;
-            }
-          }
-        }
-      }
-      .showChooseTDiv{
-        .chooseTDiv{
-          clip-path: inset(0px 0px 0% 0px);
-        }
-      }
-      .chooseBuy1{
-        border: 1px solid #BBBEC0;
-        background: #fff;
-      }
-      .chooseBuy2{
-        &::before{
-          content: '';
-          position: absolute;
-          top: 25%;
-          right: 0px;
-          width: 1px;
-          height: 50%;
-          background: #BBBEC0;
-        }
-      }
-      .chooseR{
-        border: 1px solid #BBBEC0;
-        display: flex;
-        background: #fff;
-      }
-    }
-    .mapList{
-      width: 100%;
-      height: calc(100% - 45px);
-      overflow: hidden;
-      box-sizing: border-box;
-      padding: 50px 10px 50px 20px;
-      background: #fff;
-      position: relative;
-      z-index: 2;
-      .mapUl{
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-        padding-right: 10px;
-        box-sizing: border-box;
-        &::-webkit-scrollbar {
-          width: 3px;
-        }
-        &::-webkit-scrollbar-thumb {
-          background-color: #b5b5b5;
-        }
-        .mapLi{
-          padding-bottom: 50px;
-          border-bottom: 1px solid #E5E5E5;
-          margin-bottom: 50px;
-          .h6R{
-            margin-bottom: 10px;
-            line-height: 24px;
-            .addr{
-              display: inline-block;
-              max-width: calc(100% - 120px);
-            }
-            .iconB{
-              padding-left: 30px;
-              background: url(./images/pos.svg) no-repeat left center;
-              background-size: 16px 16px;
-              float: right;
-            }
-          }
-          .h7R{
-            margin-bottom: 10px;
-            line-height:20px;
-          }
-          .btn{
-            margin-top: 20px;
-            height: 40px;
-            line-height: 40px;
-            width: 100%;
-          }
-        }
-      }
-    }
-    
-  }
-}
-
-.pcTxt{
-  display: block;
-}
-.mTxt{
-  display: none;
-}
-@media screen and (min-width: 801px) and (max-width: 1400px) {
-  
-}
-
-//移动端样式
-@media screen and (max-width:800px) {
-  .pcTxt{
-    display: none;
-  }
-  .mTxt{
-    display: block;
-  }
-  
-}

src/pages/socialResponsibility/App.js

@@ -0,0 +1,188 @@
+import Swiper from 'swiper/bundle'
+import gsap from 'gsap'
+import Common from '../common/js/Common'
+import {
+    isMobile
+} from '../common/js/utils'
+// const BASEURL = 'http://192.168.1.33:9100';
+const BASEURL = 'http://localhost:3002/api';
+const pageSize = 5;
+
+export default class App {
+    constructor() {
+        let common = new Common(document.querySelector('.main'),2)   //导航菜单高亮，0是首页，后面的按顺序添加
+        this.isMobile = isMobile()
+        this.num = 0;
+        this.bindDom();
+        // this.fold()
+        
+    }
+
+    bindDom(){
+        const tabs_ul =  document.querySelectorAll(".tabs_li");
+        const news_ul =  document.querySelector(".news_ul");
+        const typeCon =  document.querySelector(".typeCon");
+        
+        tabs_ul.forEach((item,index)=>{
+        
+            item.addEventListener('click',()=>{
+                tabs_ul.forEach((li) => {
+                    li.classList.remove('tabs_lis');
+                });
+                if(index == 0){
+                    news_ul.style.display = 'block';
+                    typeCon.style.display = 'none';
+                    
+                }else{
+                    news_ul.style.display = 'none';
+                    typeCon.style.display = 'block';
+                    this.fold()
+                }
+                // 给当前点击的元素添加 tabs_lis 类名
+                item.classList.add('tabs_lis');
+            })
+        })
+    }
+    clearEvents(){
+        
+    }
+    fold(){
+        let isMobile=this.isMobile;
+
+        let liTitleArray = document.querySelectorAll('.liTitle');
+        liTitleArray.forEach((child )=>{
+            child.addEventListener('click', (event) => {
+                // 获取被点击元素的父元素
+                let parentElement = event.currentTarget.parentNode;
+                let infoSonLi = parentElement.querySelector('.infoSonLi');
+                let actualHeight = infoSonLi.offsetHeight;
+                // 初始化子元素总高度
+                let childrenTotalHeight = isMobile?30:0;
+
+                // 遍历所有子元素，累加它们的高度
+                Array.from(infoSonLi.children).forEach(child => {
+                    childrenTotalHeight += child.offsetHeight;
+                });
+                let totalHeight = actualHeight + childrenTotalHeight;
+                if (parentElement.classList.contains("infoLiShow")) {
+                    parentElement.classList.remove('infoLiShow');
+                    gsap.to(infoSonLi,{height:0,duration:0.5})
+                }else{
+                    parentElement.classList.add('infoLiShow');
+                    gsap.to(infoSonLi,{height:totalHeight,duration:0.5})
+                    // gsap.to(infoSonLi,{height:totalHeight,duration:1,onComplete: () => infoSonLi.style.height = 'auto'})
+                }
+            });
+        });
+        let typeTitCkArray = document.querySelectorAll('.typeTitCk');
+        let inFoul = document.querySelector('.infoul');
+        
+        let infoLiArray = document.querySelectorAll('.infoLi');
+        function addClassType() {
+            infoLiArray.forEach((val)=>{
+                val.classList.remove('infoLiShow');
+            })
+            typeTitCkArray.forEach((child )=>{
+                child.classList.remove('ck');
+            });
+        }
+        //
+        let typeOld="all";
+        let element=document.querySelector('.typeTitle');
+        typeTitCkArray.forEach((child )=>{
+            child.addEventListener('click', (event) => {
+                addClassType();
+                let domElement = event.target;
+                domElement.classList.add('ck');
+                let typeName = domElement.dataset.type;
+                inFoul.className = 'infoul '+ typeName;
+                if(isMobile){
+                    if(typeName=='type2'&&typeOld!='type3'){
+                        element.scrollLeft = element.scrollWidth - element.clientWidth;
+                    }else if(typeName=='type2'&&typeOld=='type3'){
+                        element.scrollLeft = 0;
+                    }
+                }
+            });
+        });
+
+        // if(this.num == 0){
+            //添加表单动画
+            let liTits = document.querySelectorAll('.liTit');
+            liTits.forEach((val)=>{
+                val.style.height = val.offsetHeight+'px';
+                let liTitMove = val.querySelector('.liTitMove');
+                if(isMobile){
+                    liTitMove.classList.remove("moveUp");
+                    liTitMove.classList.add("fadeInUp");
+                }else{
+                    // 获取 liTit 下的所有 div 元素
+                    let divs = liTitMove.querySelector('div');
+                    if(divs){
+                        // 克隆 div 元素
+                        let clonedDiv = divs.cloneNode(true);
+                        
+                        // 将克隆的 div 插入到 liTit 的后面
+                        divs.parentElement.appendChild(clonedDiv);;
+                    }
+                }
+                
+            })
+            this.num = 1;
+        // }
+       
+    }
+    hotNews(){
+        const news_banner = document.querySelector('.news_banner');
+        const img = news_banner.querySelector('img')
+        const cont1 = news_banner.querySelector('.cont1')
+        const cont2 = news_banner.querySelector('.cont2')
+        const cont3 = news_banner.querySelector('.cont3')
+        fetch(BASEURL+'/system/news/top')
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('网络响应不是 OK');
+            }
+            return response.json();
+        })
+        .then(response => {
+            if (response.surfaceUrl) img.src = response.surfaceUrl
+            cont1.textContent = response.title
+            cont2.textContent = response.digest
+            cont3.textContent = response.date
+            news_banner.addEventListener('click',() => {
+                window.open('/articleDetails.html?id='+response.uuid)
+            })
+
+        })
+        .catch(error => {
+            console.error('请求失败:', error); // 处理错误
+        });
+    }
+
+    pageTurningClickEvent (){
+        // 上一页
+        const previousPage = document.querySelector('#previousPage');
+        previousPage.addEventListener('click', function(event) {
+            event.preventDefault()
+            const currentPage = sessionStorage.getItem('news_currentPage');
+            if(currentPage && parseInt(currentPage) > 1){
+                initList(parseInt(currentPage) - 1)
+            }
+            
+        })
+        //下一页
+        const nextPage = document.querySelector('#nextPage');
+        nextPage.addEventListener('click', function(event) {
+            event.preventDefault()
+            const currentPage = sessionStorage.getItem('news_currentPage');
+            const pageCount = Math.ceil(parseInt(sessionStorage.getItem('news_total')) / pageSize)
+            if(currentPage && parseInt(currentPage) < pageCount){
+                initList(parseInt(currentPage) + 1)
+            }
+        })
+    }
+    
+
+   
+}

src/pages/socialResponsibility/index.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="cn">
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title>社会责任</title>
+    <meta name="description" content="" />
+    <meta name="Keywords" content="" />
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
+    <link href="./static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
+    <%= require('../common/tpl/headerLink.tpl') %>
+</head>
+
+<body>
+    <%= require('../common/tpl/header.tpl') %>
+        <div class="main">
+            <div class="content">
+                <div class="banner_box">
+                    <div class="news_banner">
+                        <div class="news_content">
+                            <div class="cont1">社会责任</div>
+                            <div class="cont2">
+                                中泽控股集团股份有限公司（简称中泽集团）是以投资并购和企业运营为
+                                核心业务的大型民营集团，创建于1995年，总部位于北京。
+                                中泽控股集团股份有限公司（简称中泽集团）是以投资并购和企业运营为
+                                核心业务的大型民营集团，创建于1995年，总部位于北京。
+                            </div>
+                        </div> 
+                        <img
+                            src="./static/images/index/banner1.jpg"
+                            alt=""
+                        />
+                    </div>
+                </div>
+                <div class="tabs_box" id="tab">
+                    <div class="tabs_li tabs_lis">社会公益</div>
+                    <div class="tabs_li">绿色转型</div>
+                </div>
+            </div>
+            <div class="news_ul">
+                <div class="news_list">
+                    <div class="news_li">
+                        <div class="li_left">
+                            <span>19</span>
+                            <span>24-12</span>
+                        </div> 
+                        <a class="li_cont" href="./articleDetails.html">
+                            <div>中共中央办公厅 国务院办公厅关于推进新型城市基础设施建设打造韧性城市的意见</div>
+                            <div>为深化城市安全韧性提升行动，推进数字化、网络化、智能化新型城市基础设施建设，打造承受适应能力强、恢复速度快的韧性城市，增强城市风险防控和治理能力，经党...</div>
+                        </a>
+                    </div>
+                    <div class="news_li">
+                        <div class="li_left">
+                            <span>09</span>
+                            <span>24-12</span>
+                        </div>
+                        <a class="li_cont" href="#">
+                            <div>中共中央办公厅 国务院办公厅关于推进新型城市基础设施建设打造韧性城市的意见</div>
+                            <div>为深化城市安全韧性提升行动，推进数字化、网络化、智能化新型城市基础设施建设，打造承受适应能力强、恢复速度快的韧性城市，增强城市风险防控和治理能力，经党...</div>
+                        </a>
+                    </div>
+                    <div class="news_li">
+                        <div class="li_left">
+                            <span>10</span>
+                            <span>24-12</span> 
+                        </div>
+                        <a class="li_cont" href="#">
+                            <div>中共中央办公厅 国务院办公厅关于推进新型城市基础设施建设打造韧性城市的意见</div>
+                            <div>为深化城市安全韧性提升行动，推进数字化、网络化、智能化新型城市基础设施建设，打造承受适应能力强、恢复速度快的韧性城市，增强城市风险防控和治理能力，经党...</div>
+                        </a>
+                    </div>
+                </div>
+                <div class="news_paging">
+                    <a id="previousPage" class="previousPage">
+                       <span class="icon iconfont icon-jiantou"></span>
+                    </a>
+                    <div id="paging" style="display: flex;align-items: center;">
+                        <a class="pageNum">1</a>
+                        <a class="pageNum">2</a>
+                        <a class="pageNum">3</a>
+                        <a class="pageNum pageNums">...</a>
+                    </div>
+                    <a id="nextPage" class="nextPage">
+                        <span class="icon iconfont icon-jiantou"></span>
+                    </a>
+                </div>
+            </div>
+            <div class="typeCon">
+                <div class="infoul">
+                  <div class="infoLi">
+                          <div class="liTitle">
+                            <div class="h3 liTit">
+                              <div class="liTitMove">
+                                <div>社会责任战略规划</div>
+                              </div>
+                            </div>
+                            <div class="button"><div class="btnjbg"></div></div>
+                          </div>
+                          <div class="infoSonLi">
+                            <div class="text">
+                              <div>《投资集团党建工作考核办法》中设置“社会价值”一级考核指标，细化为“社会责任认可度”二级指标，“强化社会担当”和“将社会责任融入生产经营过程”三级指标，以及 4 个四级指标，督导企业形成履行社会责任特色做法、形成品牌，社会责任履行情况得到外界认可。</div>
+                            </div>
+                        </div>
+                  </div>
+                  <div class="infoLi">
+                          <div class="liTitle">
+                            <div class="h3 liTit">
+                              <div class="liTitMove">
+                                <div>社会责任价值观</div>
+                              </div>
+                            </div>
+                            <div class="button"><div class="btnjbg"></div></div>
+                          </div>
+                          <div class="infoSonLi">
+                            <div class="text">
+                              <div>贯彻落实创新、协调、绿色、开放、共享的发展理念，统筹推进“五位一体”总体布局要求，强化投资集团及控股企业社会责任管理，促进经济、社会、环境的和谐与可持续发展。</div>
+                            </div>
+                        </div>
+                  </div>
+                  <div class="infoLi">
+                          <div class="liTitle">
+                            <div class="h3 liTit">
+                              <div class="liTitMove">
+                                <div>制定《社会责任管理指引》</div>
+                              </div>
+                            </div>
+                            <div class="button"><div class="btnjbg"></div></div>
+                          </div>
+                          <div class="infoSonLi">
+                            <div class="text">
+                              <div>根据公司法等相关法律法规以及投资集团实际，参考国际国内各类标准，于 2012 年制定并印发了《社会责任管理指引》；结合十八大以来党和国家的新思想、新论断，以及省十次党代会提出的我省五年发展目标，对照《中国企业社会责任报告指南基础框架》4.0 版，于 2020 年对《社会责任管理指引》进行修订。《社会责任管理指引》明确了投资集团及控股企业对国民经济和社会发展，资源节约和环境保护，以及股东、债权人、员工、客户、合作者、政府和社区等利益相关者所应承担的经济、法律、道德与慈善等责任。 </div>
+                            </div>
+                        </div>
+                  </div>
+                </div>
+            </div>
+           
+        </div>
+        <%= require('../common/tpl/footer.tpl') %>
+            <%= require('../common/tpl/bottomBar.tpl') %>
+</body>
+
+</html>

src/pages/socialResponsibility/index.less

@@ -0,0 +1,612 @@
+// pc端：
+// 设计稿1440*900 所有尺寸基本按px来即可;
+// 正文 16px;
+
+
+// 移动端：
+// 设计稿宽800px，按逻辑尺寸的两倍制作。因此真实尺寸需要除2；
+// 如设计稿字体大小28px,则实真字体大小为28px/2=14px;
+// 或使用vw 字体大小：28/800*10 = 3.5vw 
+// 正文 14px 或 3.5vw
+
+//pc端样式
+.main {
+    width: 100%;
+    max-width: 1920px;
+    margin: 0 auto;
+    padding-top: 70px;
+    .content{
+        width: 1500px;
+        margin: 0 auto;
+       
+        .banner_box{
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 120px;
+            .news_banner{
+                width: 100%;
+                max-width: 1500px;
+                position: relative;
+                img{
+                    width: 100%;
+                    height: 750px;
+                    object-fit: cover;
+                }
+
+                .news_content{
+                    width: 100%;
+                    color: #231F20;
+                    padding: 190px 30px 40px;
+                    box-sizing: border-box;
+                    display: flex;
+                    justify-content: space-between;
+                    .cont1{
+                        font-weight: bold;
+                        font-size: 60px;
+                        color: #231F20;
+                        margin-left: 100px;
+                    }
+                    .cont2{
+                        width: 640px;
+                        font-size: 20px;
+                        color: #231F20;
+                        margin-right: 110px;
+                        line-height: 35px;
+                    }
+                }
+                
+            }
+           
+        }
+        .tabs_box{
+            width: 1300px;
+            margin: 0 auto;
+            font-weight: 400;
+            font-size: 24px;
+            display: flex;
+            align-items: center;
+
+            .tabs_li{
+                color: #231F20;
+                margin-right: 80px;
+                cursor: pointer;
+                padding-bottom: 48px;
+                transition: all .2s;
+                border-bottom: 2px solid #fff;
+                &:hover{
+                    color: #B81C25;
+                }
+            }   
+            .tabs_lis{
+                color: #B81C25;
+                border-bottom: 2px solid #B81C25;
+            }   
+        }
+
+      
+    }
+    .news_ul{
+        width: 100%;
+        max-width: 1920px;
+        margin: 0 auto;
+        background: #F6F6F6;
+
+        .news_list{
+            width: 1300px;
+            margin: 0 auto;
+            .news_li{
+                display: flex;
+                align-items: center;
+                padding: 40px 0;
+                border-bottom:1px solid #DADADA;
+                transition: all .2s;
+                .li_left{
+                    width: 66px;
+                    height: 66px;
+                    background: #F6F6F6;
+                    border: 1px solid #A7A5A5;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: column;
+                    margin-right: 30px;
+                    transition: all .5s;
+                    border-radius: 8px;
+                    span:nth-child(1){
+                        font-family: Source Han Sans CN;
+                        font-weight: 500;
+                        font-size: 30px;
+                        color: #B81C25;
+                    }
+                    span:nth-child(2){
+                        font-family: Source Han Sans CN;
+                        font-weight: 500;
+                        font-size: 13px;
+                        color: #231F20;
+                        position: relative;
+                        &::after{
+                            content: '';
+                            position: absolute;
+                            top: -1px;
+                            left: -8%;
+                            height: 1px;
+                            width: 120%;
+                            background-color: #B81C25;
+                        }
+                    }
+                    a{
+                        cursor: pointer;
+                    }
+                }
+                .li_cont{
+                    font-family: Source Han Sans CN;
+                    font-weight: 400;
+                    transition: all .2s;
+
+                    div:nth-child(1){
+                        font-weight: 500;
+                        font-size: 20px;
+                        color: #231F20;
+                        line-height: 30px;
+                        margin-bottom: 10px;
+                        transition: all .2s;
+                    }
+                    div:nth-child(2){
+                        font-weight: 500;
+                        font-size: 16px;
+                        color: #A7A5A5;
+                        line-height: 30px;
+                        display: -webkit-box;        /* 使用 Flexbox 布局 */
+                        -webkit-box-orient: vertical; /* 垂直方向排列 */
+                        -webkit-line-clamp: 1;      /* 限制显示的行数，这里是3行 */
+                        overflow: hidden;            /* 隐藏超出部分 */
+                    }
+                }
+                &:hover{
+                    background: #EFEFEF;
+                    .li_cont{
+                        div:nth-child(1){
+                            color: #B81C25;
+                        }
+                    }
+                }
+                &:last-child{
+                    border: none;
+                }
+            }
+        }
+    }
+
+    .news_paging{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 100px 0 120px;
+        background: #F6F6F6;
+        .previousPage{
+            width: 40px;
+            height: 40px;
+            color: #041954;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid #041954;
+            margin-right: 20px;
+            cursor: pointer;
+            transition: all 0.2s;
+            span{
+                font-size: 26px;
+                transform: rotate(-90deg);
+            }
+            &:hover{
+                background: #B81C25;
+                border: 1px solid #B81C25;
+                color: #fff;
+            }
+        }
+        .nextPage{
+            width: 40px;
+            height: 40px;
+            color: #041954;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid #041954;
+            margin-left: 20px;
+            cursor: pointer;
+            transition: all 0.2s;
+            span{
+                font-size: 26px;
+                transform: rotate(90deg);
+            }
+            &:hover{
+                background: #B81C25;
+                border: 1px solid #B81C25;
+                color: #fff;
+            }
+        }
+        .pageNum{
+            min-width: 40px;
+            height: 40px;
+            line-height: 40px;
+            font-family: Source Han Sans CN;
+            font-size: 18px;
+            color: #000;
+            transition: all 0.2s;
+            padding: 0 5px;
+            box-sizing: border-box;
+            cursor: pointer;
+            text-align: center;
+            border: 1px solid #DDE2E6;
+            border-radius: 2px;
+            &:hover{
+                background: #B81C25;
+                border: 1px solid #B81C25;
+                color: #fff;
+            }
+        }
+        .pageNums{
+            pointer-events: none;
+        }
+        .pageNum+.pageNum{
+            margin-left: 10px;
+        }
+        .pageNumActive{
+            color: #041954;
+        }
+        .ellipsis{
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 22px;
+            padding: 10px 15px;
+            color: #333333;
+            // cursor: pointer;
+            transition: all 0.2s;
+            // &:hover{
+            //     color:#48A038
+            // }
+        }
+    }
+
+    .typeCon{
+        width: 100%;
+        background: #F6F6F6;
+        padding-bottom: 250px;
+        display: none;
+        .infoul{
+            width: 100%;
+            max-width: 1300px;
+            margin: 0 auto;
+            .infoLi{
+                padding: 70px 0;
+                border-bottom:1px solid #9FA3A5;
+                width: 100%;
+                .liTitle{
+                    display: flex;
+                    width: 100%;
+                    justify-content: space-between;
+                    cursor: pointer;
+                    .liTit{
+                        width: calc(100% - 220px);
+                        line-height: 84px;
+                        overflow: hidden;
+                        display: flex;
+                        flex-wrap: wrap;
+                        font-size: 40px;
+                        font-weight: bold;
+                        &>div{
+                            width: 100%;
+                        }
+                    }
+                    .button{
+                        width: 84px;
+                        height: 84px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        background-color: #B2B5B7;
+                        border-radius: 50%;
+                        color: #fff;
+                        cursor: pointer;
+                        transition: all .2s;
+                        position: relative;
+                        transform: scale(1);
+                        &::before{
+                            content: '';
+                            width: 17px;
+                            height: 3px;
+                            background-color: #fff;
+                            z-index: 2;
+                        }
+                        &::after{
+                            content: '';
+                            width: 3px;
+                            height: 17px;
+                            background-color: #fff;
+                            left: 50%;
+                            position: absolute;
+                            top: 50%;
+                            transform: translate(-50%, -50%);
+                        }
+                        .btnjbg{
+                            position: absolute;
+                            bottom: 0px;
+                            left: -1px;
+                            right: 0px;
+                            top: 0px;
+                            background-color: #B81C25;
+                            -webkit-clip-path: circle(0 at 50% 50%);
+                            clip-path: circle(0 at 50% 50%);
+                            transition: -webkit-clip-path .65s cubic-bezier(.19,1,.22,1);
+                            transition: clip-path .65s cubic-bezier(.19,1,.22,1);
+                            transition: clip-path .65s cubic-bezier(.19,1,.22,1), -webkit-clip-path .65s cubic-bezier(.19,1,.22,1);
+                            transition: clip-path .65s cubic-bezier(.19,1,.22,1), -webkit-clip-path .65s cubic-bezier(.19,1,.22,1);
+                        }
+                    }
+                }
+                
+                .infoSonLi{
+                    padding-top: 30px;
+                    width: 100%;
+                    height: 0px;
+                    box-sizing: border-box;
+                    overflow: hidden;
+                    border-bottom: 1px dashed #000000;
+                    margin-bottom: 95px;
+                    // transition: all 1s ease-in-out;
+                    &:last-child{
+                        border-bottom: 0px;
+                        margin-bottom: 0px;
+                        
+                    }
+                    .h4{
+                        margin-top: 80px;
+                        font-size: 28px;
+                        &:first-child{
+                            margin-top: 0;
+                            color: #0056a7;
+                        }
+                    }
+                    .h5R{
+                        margin-top: 40px;
+                    }
+                    .text{
+                        color: #9fa3a5;
+                    }
+                    .btn2{
+                        margin: 130px 0 140px;
+                    }
+                }
+            }
+            .infoLiShow{
+                .liTitle{
+                    .button{
+                        // background-color: #0054A7;
+                        &::before{
+                            content: '';
+                            width: 17px;
+                            height: 3px;
+                            background-color: #fff;  
+                        }
+                        &::after{
+                            display: none;
+                        }
+                        .btnjbg{
+                            -webkit-clip-path: circle(50% at 50% 50%);
+                            clip-path: circle(50% at 50% 50%);
+                        }
+                    }
+                }
+                // @-webkit-keyframes textDown{
+                //     0%{height: 0%;}
+                //     100%{height: 100%;}
+                // }
+                // @keyframes textDown{
+                //     0%{height: 0%;}
+                //     100%{height: 100%;}
+                // }
+                
+                // .infoSonLi{
+                //     display: block;
+                //     animation: textDown 1s ease-in-out 0 forwards;
+                // }
+            }
+        }
+    }
+}
+a{
+    display: inline-block;
+}
+
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    .main{
+        
+    }
+}
+
+//移动端样式
+@media screen and (max-width:800px) {
+   
+    .main {
+        width: 100%;
+        padding-top: 30vw;
+        .content{
+            width: 92vw;
+            margin: 0 auto;
+            .banner_box{
+                display: block;
+                margin-bottom: 15vw;
+                .news_banner{
+                    width: 100%;
+                    height: auto;
+                    margin-bottom: 8vw;
+                    img{
+                        width: 100%;
+                        height: 62.75vw;
+                        border-radius: 1.625vw;
+                        object-fit: cover;
+                    }
+                    
+                    .news_content{
+                        padding: 3.75vw;
+                        flex-direction: column;
+                        .cont1{
+                            font-size: 6.375vw;
+                            margin: 0;
+                            margin-bottom: 10.625vw;
+                            width: 100%;
+                            text-align: center;
+                        }
+                        .cont2{
+                            width: 100%;
+                            line-height: 24px;
+                        //     font-family: Source Han Sans CN;
+                            font-size: 3.75vw;
+                            text-align: justify;
+                        //     color: #fff;
+                        //     margin-top: 2.5vw;
+                        }
+                        // .cont3{
+                        //     font-family: Source Han Sans CN;
+                        //     font-size: 3.25vw;
+                        //     color: #fff;
+                        // }
+                    }
+                    
+                }
+            }
+            .tabs_box{
+                width: 100%;
+                font-size: 3.75vw;
+                .tabs_li{
+                    margin-right: 4.9vw;
+                    padding-bottom: 5.625vw;
+                }
+            }
+        }
+        .news_ul{
+            width: 100%;
+            .news_list{
+                margin-top: 0;
+                width: 100%;
+                box-sizing: border-box;
+                padding: 0 3.75vw;
+                .news_li{
+                    padding:5.625vw 0;
+                    .li_left{
+                        width: 16.25vw;
+                    }
+                    .li_cont{
+                        width: 71.5vw;
+                        div:nth-child(1){
+                            font-family: Source Han Sans CN;
+                            font-size: 3.75vw;
+                            color: #282828;
+                            line-height: 7.5vw;
+                            display: -webkit-box;        /* 使用 Flexbox 布局 */
+                            -webkit-box-orient: vertical; /* 垂直方向排列 */
+                            -webkit-line-clamp: 1;      /* 限制显示的行数，这里是3行 */
+                            overflow: hidden;     
+                            font-weight: bold;
+                        }
+                        div:nth-child(2){
+                            width: auto;
+                            height: auto;
+                            overflow: unset;
+                            line-height: 1.5;
+                            font-family: Source Han Sans CN;
+                            font-size: 3.25vw;
+                            color: #A7A5A5;
+                            padding: 0;
+                            display: -webkit-box;        /* 使用 Flexbox 布局 */
+                            -webkit-box-orient: vertical; /* 垂直方向排列 */
+                            -webkit-line-clamp: 2;      /* 限制显示的行数，这里是3行 */
+                            overflow: hidden;     
+                        }
+                      
+                    }
+                }
+            }
+        }
+        .news_paging{
+            padding-top: 16vw;
+            .previousPage{
+                width: 40px;
+                height: 40px;
+                margin-right: 20px;
+                box-sizing: border-box;
+            }
+            .nextPage{
+                width: 40px;
+                height: 40px;
+                margin-left: 3.25vw;
+                transition: all 0.2s;
+                box-sizing: border-box;
+            }
+            .pageNum{
+                font-size: 3.5vw;
+            }
+            .ellipsis{
+                font-size: 3.5vw;
+                padding: 1.875vw 2.5vw;
+                // &:hover{
+                //     color:#48A038
+                // }
+            }
+        }
+        .typeCon{
+            padding: 0px 4vw 150px;
+            box-sizing: border-box;
+            .infoul{
+                .infoLi{
+                    padding: 40px 0;
+                    .liTitle{
+                        align-items: center;
+                        .liTit{
+                            height: auto;
+                            line-height: 40px;
+                            width: calc(100% - 60px);
+                            overflow: initial;
+                            font-size: 24px;
+                        }
+                        .button{
+                            width: 40px;
+                            height: 40px;
+                            left: 0px;
+                            .btnjbg{
+                                left: 0px;
+                            }
+                            &::before{
+                                content: '';
+                                width: 8px;
+                                height: 2px;
+                            }
+                            &::after{
+                                content: '';
+                                width: 2px;
+                                height: 8px;
+                            }
+                        }
+                    }
+                    .infoSonLi{
+                        margin-bottom: 75px;
+                        padding-top: 0px;
+                        transition: padding 0.5s ease-in-out;
+                        .text{
+                            margin-bottom: 0px;
+                        }
+                    }
+                }
+                .infoLiShow{
+                    .infoSonLi{
+                        padding-top: 30px;
+                    }
+                    .liTitle .btn .btnjbg{
+                        -webkit-clip-path: circle(19px at 20px 20px);
+                        clip-path: circle(19px at 20px 20px);
+                    }
+                }
+            }
+        }
+    }
+}