Merge branch 'zjm'

dev/static/font/iconfont.css

@@ -1,17 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4790103 */
-  src: url('iconfont.woff2?t=1734834209256') format('woff2'),
-       url('iconfont.woff?t=1734834209256') format('woff'),
-       url('iconfont.ttf?t=1734834209256') format('truetype');
-}
-@font-face {
-  font-family: 'MyFont1'; /* 自定义字体名称 */
-  src: url('./BOLD.OTF') format('truetype');
-}
-
-@font-face {
-  font-family: 'MyFont2';
-  src: url('./REGULAR.OTF') format('truetype');
+  src: url('iconfont.woff2?t=1735227852987') format('woff2'),
+       url('iconfont.woff?t=1735227852987') format('woff'),
+       url('iconfont.ttf?t=1735227852987') format('truetype');
 }
 
 .iconfont {
@@ -22,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-youjian:before {
+  content: "\e804";
+}
+
+.icon-dianhua:before {
+  content: "\e67b";
+}
+
 .icon-right:before {
   content: "\e708";
 }

dev/static/font/iconfont.json

@@ -0,0 +1,86 @@
+{
+  "id": "4790103",
+  "name": "中泽",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "436015",
+      "name": "邮件",
+      "font_class": "youjian",
+      "unicode": "e804",
+      "unicode_decimal": 59396
+    },
+    {
+      "icon_id": "18931225",
+      "name": "电话",
+      "font_class": "dianhua",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "42896160",
+      "name": "右箭头",
+      "font_class": "right",
+      "unicode": "e708",
+      "unicode_decimal": 59144
+    },
+    {
+      "icon_id": "42896161",
+      "name": "左箭头",
+      "font_class": "left",
+      "unicode": "e709",
+      "unicode_decimal": 59145
+    },
+    {
+      "icon_id": "551962",
+      "name": "箭头",
+      "font_class": "arrow-right",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "826086",
+      "name": "微信",
+      "font_class": "weixin",
+      "unicode": "e707",
+      "unicode_decimal": 59143
+    },
+    {
+      "icon_id": "5077697",
+      "name": "箭头",
+      "font_class": "jiantou",
+      "unicode": "e63a",
+      "unicode_decimal": 58938
+    },
+    {
+      "icon_id": "17888027",
+      "name": "关闭",
+      "font_class": "guanbi",
+      "unicode": "e676",
+      "unicode_decimal": 58998
+    },
+    {
+      "icon_id": "20312935",
+      "name": "下载",
+      "font_class": "xiazai",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    },
+    {
+      "icon_id": "42730637",
+      "name": "下拉",
+      "font_class": "xiala",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "11726700",
+      "name": "搜索",
+      "font_class": "search",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    }
+  ]
+}

src/pages/common/css/common.less

@@ -131,6 +131,7 @@ img:not([src]) {
     bottom: 360px;
     right:140px;
     transform: rotate(-90deg);
+    display: none;
     .goTopBtn{
         width: 84px;
         height: 84px;
@@ -1149,19 +1150,6 @@ footer{
             }
 
         }
-        .goTop {
-            position: absolute;
-            bottom: auto;
-            top: -47px;
-            right: 50%;
-            transform: translateX(50%) rotate(-90deg);
-            .goTopBtn{
-                width: 42px;
-                height: 42px;
-                border-radius: 21px;
-                left: 0px;
-            }
-        }
     }
     .chooseM{
         display: flex;

src/pages/common/tpl/footer.tpl

@@ -52,11 +52,11 @@
                 <a class="h7R" href=""><span>绿色转型</span></a></div>
             </div>
             <div class="footerClick">
-                <a class="h7" href=""><span>加入中泽</span></a>
+                <a class="h7" href="./join.html"><span>加入中泽</span></a>
                 <span class="icon iconfont icon-arrow-right"></span>
-                <div class="footerShow show2"><a class="h7R" href=""><span>招聘信息</span></a>
-                <a class="h7R" href=""><span>招标信息</span></a>
-                <a class="h7R" href=""><span>联系我们</span></a></div>
+                <div class="footerShow show2"><a class="h7R" href="./join.html#careersInfo"><span>招聘信息</span></a>
+                <a class="h7R" href="./join.html?type=b#careersInfo"><span>招标信息</span></a>
+                <a class="h7R" href="./join.html#contactUs"><span>联系我们</span></a></div>
             </div>
         </div>
         <div class="footerCenterM">
@@ -69,7 +69,7 @@
             <a class="h7" href="">党建工作</a>
             <a class="h7" href="">社会责任</a>
             <div></div>
-            <a class="h7" href="">加入中泽</a>
+            <a class="h7" href="./join.html">加入中泽</a>
         </div>
         <div class="footerRight">
             <div class="btnUp">旗下企业：</div>

src/pages/common/tpl/header.tpl

@@ -55,12 +55,12 @@
                 </div>
             </div>
             <div class="menuOne">
-                <a href="">加入中泽</a>
+                <a href="./join.html">加入中泽</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="./join.html#careersInfo"><span>招聘信息</span></a>
+                    <a href="./join.html?type=b#careersInfo"><span>招标信息</span></a>
+                    <a href="./join.html#contactUs"><span>联系我们</span></a>
                 </div>
             </div>
         </div>
@@ -133,11 +133,11 @@
                     </div>
                 </div>
                 <div>
-                    <div class="title"><a href="">加入中泽</a><span class="iconfont icon-xiala"></span></div>
+                    <div class="title"><a href="./join.html">加入中泽</a><span class="iconfont icon-xiala"></span></div>
                     <div class="menuSon">
-                        <a href=""><span>招聘信息</span></a>
-                        <a href=""><span>招标信息</span></a>
-                        <a href=""><span>联系我们</span></a>
+                        <a href="./join.html#careersInfo"><span>招聘信息</span></a>
+                        <a href="./join.html?type=b#careersInfo"><span>招标信息</span></a>
+                        <a href="./join.html#contactUs"><span>联系我们</span></a>
                     </div>
                 </div>
             </div>

src/pages/join/App.js

@@ -0,0 +1,146 @@
+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'),5)   //导航菜单高亮，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.fold();
+    }
+    
+    fold(){
+        let isMobile=this.isMobile;
+        let liTitleArray = document.querySelectorAll('.liTitle');
+        liTitleArray.forEach((child )=>{
+            child.addEventListener('click', (event) => {
+                // 获取被点击元素的父元素
+                let parentElement = event.currentTarget.parentNode;
+                let isShow=false;
+                if (parentElement.classList.contains("infoLiShow")) {
+                    parentElement.classList.remove('infoLiShow');
+                    isShow=true;
+                }else{
+                    parentElement.classList.add('infoLiShow');
+                    isShow=false;
+                }
+                let infoSonLis = parentElement.querySelectorAll('.infoSonLi');
+                infoSonLis.forEach((infoSonLi )=>{
+                    if(!infoSonLi) return;
+                    let actualHeight = infoSonLi.offsetHeight;
+                    // 初始化子元素总高度
+                    let childrenTotalHeight = 0;
+                    // 遍历所有子元素，累加它们的高度
+                    Array.from(infoSonLi.children).forEach(child => {
+                        childrenTotalHeight += child.offsetHeight;
+                    });
+                    let totalHeight = actualHeight + childrenTotalHeight;
+                    if(isShow){
+                        infoSonLi.style.height = totalHeight+'px';
+                        gsap.to(infoSonLi,{height:0,duration:1})
+                    }else{
+                        gsap.to(infoSonLi,{height:totalHeight,duration:1,onComplete: () => infoSonLi.style.height = 'auto'})
+                    }
+                    
+                })
+                
+                
+
+                
+                // if (parentElement.classList.contains("infoLiShow")) {
+                //     parentElement.classList.remove('infoLiShow');
+                //     gsap.to(infoSonLi,{height:0,duration:1})
+                // }else{
+                //     parentElement.classList.add('infoLiShow');
+                //     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');
+        let infoSonLiss = document.querySelectorAll('.infoSonLi');
+        let typeCons=document.querySelectorAll('.typeCon');
+        function addClassType(num) {
+            infoLiArray.forEach((val)=>{
+                val.classList.remove('infoLiShow');
+            })
+            typeTitCkArray.forEach((child )=>{
+                child.classList.remove('ck');
+            });
+            
+            infoSonLiss.forEach((child )=>{
+                child.style.height="0px"
+            });
+            typeCons.forEach((child,index )=>{
+                if(index==num){
+                    child.classList.add('typeConShow');
+                }else{
+                    child.classList.remove('typeConShow');
+                }
+            });
+
+        }
+        //
+        typeTitCkArray.forEach((child,index )=>{
+            child.addEventListener('click', (event) => {
+                addClassType(index);
+                let domElement = event.target;
+                domElement.classList.add('ck');
+            });
+        });
+
+        //
+        // 解析 URL 参数
+        function getQueryParam(param) {
+            let urlParams = new URLSearchParams(window.location.search);
+            return urlParams.get(param);
+        }
+
+        // 获取 type 参数的值
+        let typeParam = getQueryParam('type');
+
+        // 检查 type 参数的值是否为 'b'
+        if (typeParam === 'b') {
+            // 触发选中的第二个点击事件
+            if (typeTitCkArray.length > 1) {
+                typeTitCkArray[1].click();
+            }
+        }
+        let goTop = document.querySelector(".goUp");
+        let scroll = new LocomotiveScroll();
+        goTop.addEventListener("click", (e) => {
+            scroll.scrollTo(0);
+        });
+    }
+
+}

src/pages/join/index.html

@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title>加入中泽</title>
+    <meta name="description" content=""/>
+    <meta name="Keywords" content=""/>
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
+    <%= require('../common/tpl/headerLink.tpl') %>
+  </head>
+
+  <body>
+    <%= require('../common/tpl/header.tpl') %>
+    
+    <div class="main">
+      <div class="desCon">
+        <div class="wow fadeInUp desTop">
+          <div class="title">加入中泽</div>
+          <div class="text">中泽控股集团股份有限公司（简称中泽集团）是以投资并购和企业运营为核心业务的大型民营集团，创建于1995年，总部位于北京。中泽控股集团股份有限公司（简称中泽集团）是以投资并购和企业运营为核心业务的大型民营集团，创建于1995年，总部位于北京。</div>
+        </div>
+        <div class="wow fadeInUp desTopImg">
+          <img class="lazy" data-src="./static/images/join/banner.jpg" data-srcM="./static/images/join/banner.jpg" alt="" />
+        </div>
+        <!--  -->
+        <div class="careersType" id="careersInfo">
+          <div class="titleBg">
+            <div class="wow moveRight bgMove"></div>
+            <div class="typeTitle">
+              <div class="h5 typeTitCk ck" data-type="all">招聘信息</div>
+              <div class="h5 typeTitCk" data-type="type1">招标信息</div>
+            </div>
+          </div>
+          <div class="typeCon typeConShow">
+              <div class="infoul all">
+                <div class="infoLi">
+                  <div class="liTitle">
+                    <div class="h3 liTit">
+                      <div class="">
+                        <div>招聘岗位类别1</div>
+                      </div>
+                    </div>
+                    <div class="btn"><div class="btnjbg"></div></div>
+                  </div>
+                  <div class="infoSonLi">
+                    <div class="h4">1.岗位名称：律师（知识产权方向)</div>
+                    <div class="h4">2.工作地点：北京</div>
+                    <div class="h4">3.发布日期：2024.06.08</div>
+                    <div class="h4">4.任职资质:</div>
+                    <div class="h5R">教育背景：</div>
+                    <div class="text">
+                      <div>法律专业本科及以上学历，具有法学学位；具备律师执业资格证书，具备相关法律职业资格优先。</div>
+                    </div>
+                    <div class="h5R">专业资格认证：</div>
+                    <div class="text"><div>律师资格证</div></div>
+                    <div class="h5R">工作经验：</div>
+                    <div class="text">
+                      <div>3年以上企业法务工作经验，或在律师事务所有一定经验，熟悉企业常见法律事务处理流程，具备企业法务、合同管理知识产权保护等方面的经验。</div>
+                    </div>
+                    <div class="h5R">专业技能：</div>
+                    <div class="text">
+                      <div>熟悉公司法、合同法、劳动法、知识产权法等相关法律法规，能够独立处理常见法律问题；熟悉公司合规管理、风险控制、企业并购重组等法律事务；良好的法律文书写作能力，能独立起草和审查合同、协议及其他法律文件。</div>
+                      <div>熟悉公司法、合同法、劳动法、知识产权法等相关法律法规，能够独立处理常见法律问题；熟悉公司合规管理、风险控制、企业并购重组等法律事务；良好的法律文书写作能力，能独立起草和审查合同、协议及其他法律文件。</div>
+                      <div>熟悉公司法、合同法、劳动法、知识产权法等相关法律法规，能够独立处理常见法律问题；熟悉公司合规管理、风险控制、企业并购重组等法律事务；良好的法律文书写作能力，能独立起草和审查合同、协议及其他法律文件。  </div>
+                    </div>
+                    <div class="h4">5.公司名称：中泽控股集团有限公司</div>
+                    <div class="h4">6.简历投递：hr@lnzzgroup.com</div>
+                    <a href="" class="btn"><span>申请加入</span></a>
+                  </div>
+                  <div class="infoSonLi">
+                    <div class="h4">1.岗位名称：律师（公司法务方向)</div>
+                    <div class="h4">2.工作地点：北京</div>
+                    <div class="h4">3.发布日期：2024.06.08</div>
+                    <div class="h4">4.任职资质:</div>
+                    <div class="h5R">教育背景：</div>
+                    <div class="text">
+                      <div>法律专业本科及以上学历，具有法学学位；具备律师执业资格证书，具备相关法律职业资格优先。</div>
+                    </div>
+                    <div class="h5R">专业资格认证：</div>
+                    <div class="text"><div>律师资格证</div></div>
+                    <div class="h5R">工作经验：</div>
+                    <div class="text">
+                      <div>3年以上企业法务工作经验，或在律师事务所有一定经验，熟悉企业常见法律事务处理流程，具备企业法务、合同管理知识产权保护等方面的经验。</div>
+                    </div>
+                    <div class="h5R">专业技能：</div>
+                    <div class="text">
+                      <div>熟悉公司法、合同法、劳动法、知识产权法等相关法律法规，能够独立处理常见法律问题；熟悉公司合规管理、风险控制、企业并购重组等法律事务；良好的法律文书写作能力，能独立起草和审查合同、协议及其他法律文件。</div>
+                      <div>熟悉公司法、合同法、劳动法、知识产权法等相关法律法规，能够独立处理常见法律问题；熟悉公司合规管理、风险控制、企业并购重组等法律事务；良好的法律文书写作能力，能独立起草和审查合同、协议及其他法律文件。</div>
+                      <div>熟悉公司法、合同法、劳动法、知识产权法等相关法律法规，能够独立处理常见法律问题；熟悉公司合规管理、风险控制、企业并购重组等法律事务；良好的法律文书写作能力，能独立起草和审查合同、协议及其他法律文件。  </div>
+                    </div>
+                    <div class="h4">5.公司名称：中泽控股集团有限公司</div>
+                    <div class="h4">6.简历投递：hr@lnzzgroup.com</div>
+                    <a href="" class="btn"><span>申请加入</span></a>
+                  </div>
+                </div>
+                <div class="infoLi">
+                  <div class="liTitle">
+                    <div class="h3 liTit">
+                      <div class="">
+                        <div>招聘岗位类别2</div>
+                      </div>
+                    </div>
+                    <div class="btn"><div class="btnjbg"></div></div>
+                  </div>
+                  <div class="infoSonLi">
+                    <div class="h4">1.岗位名称：律师（知识产权方向)</div>
+                    <div class="h4">2.工作地点：北京</div>
+                    <div class="h4">3.发布日期：2024.06.08</div>
+                    <div class="h4">4.任职资质:</div>
+                    <div class="h5R">教育背景：</div>
+                    <div class="text">
+                      <div>法律专业本科及以上学历，具有法学学位；具备律师执业资格证书，具备相关法律职业资格优先。</div>
+                    </div>
+                    <div class="h5R">专业资格认证：</div>
+                    <div class="text"><div>律师资格证</div></div>
+                    <div class="h5R">工作经验：</div>
+                    <div class="text">
+                      <div>3年以上企业法务工作经验，或在律师事务所有一定经验，熟悉企业常见法律事务处理流程，具备企业法务、合同管理知识产权保护等方面的经验。</div>
+                    </div>
+                    <div class="h5R">专业技能：</div>
+                    <div class="text">
+                      <div>熟悉公司法、合同法、劳动法、知识产权法等相关法律法规，能够独立处理常见法律问题；熟悉公司合规管理、风险控制、企业并购重组等法律事务；良好的法律文书写作能力，能独立起草和审查合同、协议及其他法律文件。</div>
+                      <div>熟悉公司法、合同法、劳动法、知识产权法等相关法律法规，能够独立处理常见法律问题；熟悉公司合规管理、风险控制、企业并购重组等法律事务；良好的法律文书写作能力，能独立起草和审查合同、协议及其他法律文件。</div>
+                      <div>熟悉公司法、合同法、劳动法、知识产权法等相关法律法规，能够独立处理常见法律问题；熟悉公司合规管理、风险控制、企业并购重组等法律事务；良好的法律文书写作能力，能独立起草和审查合同、协议及其他法律文件。  </div>
+                    </div>
+                    <div class="h4">5.公司名称：中泽控股集团有限公司</div>
+                    <div class="h4">6.简历投递：hr@lnzzgroup.com</div>
+                    <a href="" class="btn"><span>申请加入</span></a>
+                  </div>
+                  <div class="infoSonLi">
+                    <div class="h4">1.岗位名称：律师（公司法务方向)</div>
+                    <div class="h4">2.工作地点：北京</div>
+                    <div class="h4">3.发布日期：2024.06.08</div>
+                    <div class="h4">4.任职资质:</div>
+                    <div class="h5R">教育背景：</div>
+                    <div class="text">
+                      <div>法律专业本科及以上学历，具有法学学位；具备律师执业资格证书，具备相关法律职业资格优先。</div>
+                    </div>
+                    <div class="h5R">专业资格认证：</div>
+                    <div class="text"><div>律师资格证</div></div>
+                    <div class="h5R">工作经验：</div>
+                    <div class="text">
+                      <div>3年以上企业法务工作经验，或在律师事务所有一定经验，熟悉企业常见法律事务处理流程，具备企业法务、合同管理知识产权保护等方面的经验。</div>
+                    </div>
+                    <div class="h5R">专业技能：</div>
+                    <div class="text">
+                      <div>熟悉公司法、合同法、劳动法、知识产权法等相关法律法规，能够独立处理常见法律问题；熟悉公司合规管理、风险控制、企业并购重组等法律事务；良好的法律文书写作能力，能独立起草和审查合同、协议及其他法律文件。</div>
+                      <div>熟悉公司法、合同法、劳动法、知识产权法等相关法律法规，能够独立处理常见法律问题；熟悉公司合规管理、风险控制、企业并购重组等法律事务；良好的法律文书写作能力，能独立起草和审查合同、协议及其他法律文件。</div>
+                      <div>熟悉公司法、合同法、劳动法、知识产权法等相关法律法规，能够独立处理常见法律问题；熟悉公司合规管理、风险控制、企业并购重组等法律事务；良好的法律文书写作能力，能独立起草和审查合同、协议及其他法律文件。  </div>
+                    </div>
+                    <div class="h4">5.公司名称：中泽控股集团有限公司</div>
+                    <div class="h4">6.简历投递：hr@lnzzgroup.com</div>
+                    <a href="" class="btn"><span>申请加入</span></a>
+                  </div>
+                </div>
+              </div>
+          </div>
+          <div class="typeCon typeCon2">
+            <div class="infoul">
+              <div class="title">招标信息</div>
+              <div class="newsType">
+                <a class="newsLi" href="">
+                  <div class="timer">
+                    <div class="timerData">10</div>
+                    <div>24-12</div>
+                  </div>
+                    <div class="newsLiCon">
+                      <div class="liTitle">2024年集团科技人机对抗项目比选公告</div>
+                      <div class="licon">为深化城市安全韧性提升行动，推进数字化、网络化、智能化新型城市基础设施建设，打造承受适应能力强、恢复速度快的韧性城市，增强城市</div>
+                    </div>
+                </a>
+                <a class="newsLi" href="">
+                  <div class="timer">
+                    <div class="timerData">06</div>
+                    <div>24-12</div>
+                  </div>
+                  <div class="newsLiCon">
+                    <div class="liTitle">2024年集团品牌 75周年国庆串烧歌曲项目比选公告</div>
+                    <div class="licon">国家能源局近期发布《关于支持电力领域新型经营主体创新发展的指导意见》（以下简称《指导意见》），国家能源局有关负责同志接受采访，</div>
+                  </div>
+                </a>
+                <a class="newsLi" href="">
+                  <div class="timer">
+                    <div class="timerData">06</div>
+                    <div>24-12</div>
+                  </div>
+                  <div class="newsLiCon">
+                    <div class="liTitle">2024年集团科技项目管理工具(PPM)-文档模块采购事项项目比选公告</div>
+                    <div class="licon">2022年3月，国家发改委、能源局联合印发了《氢能产业发展中长期规划2021-2035》，从国家层面为氢能产业制定了顶层设计。</div>
+                  </div>
+                </a>
+                <a class="newsLi" href="">
+                  <div class="timer">
+                    <div class="timerData">06</div>
+                    <div>24-12</div>
+                  </div>
+                  <div class="newsLiCon">
+                    <div class="liTitle">2024年集团品牌绩优IP打造项目比选公告</div>
+                    <div class="licon">国家能源局关于印发《电网安全风险管控办法》的通知  各省（自治区、直辖市）能源局，有关省（自治区、直辖市）及新疆生产建设兵团发</div>
+                  </div>
+                </a>
+              </div>
+              <a href="" class="btn"><span>更多</span></a>
+              <div class="inLiCon">
+                <div class="title">反舞弊举报通道</div>
+                <div class="liLine"></div>
+                <div><span class="iconfont icon-dianhua"></span>举报热线：024-31875997</div>
+                <div class="liLine"></div>
+                <div><span class="iconfont icon-youjian"></span>举报邮箱：hr@lnzzgroup.com</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--  -->
+        <div class="contactUs" id="contactUs">
+          <div class="contactCon">
+            <div>
+              <div class="title contactUsTit">联系我们</div>
+              <div class="text text1">如您有任何疑问或想了解更多关于我们的服务，请联系我们。</div>
+              <div class="title contactType">联系方式</div>
+              <div class="text">总机:024-31875997</div>
+              <div class="text">传真:024-31875999</div>
+              <div class="text">邮箱:hr@lnzzgroup.com</div>
+              <div class="text">总部地址:辽宁省沈阳市皇姑区北陵大街56号</div>
+            </div>
+            <div><img class="lazy" data-src="./static/images/join/joinC.jpg" data-srcM="./static/images/join/joinC.jpg" alt="" /></div>
+          </div>
+        </div>
+      </div>
+      <div class="goUp">
+        <img src="./static/images/join/jt.png" alt=""/>
+      </div>
+    </div>
+    <%= require('../common/tpl/footer.tpl') %>
+    <!-- <%= require('../common/tpl/bottomBar.tpl') %> -->
+  </body>
+</html>

src/pages/join/index.js

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

src/pages/join/index.less

@@ -0,0 +1,678 @@
+
+//pc端样式
+.main {
+    width: 100%;
+    max-width: 1920px;
+    margin: 0 auto;
+    padding-top: 71px;
+    position: relative;
+    .text{
+      text-align: justify;
+    }
+    .goUp{
+        width: 84px;
+        height: 84px;
+        cursor: pointer;
+        position: absolute;
+        bottom: 20px;
+        right: 140px;
+        img{
+            width: 100%;
+            display: block;
+        }
+    }
+}
+.desCon{
+  width: 100%;
+  text-align: center;
+  padding-top: 120px;
+  .desTop{
+    width: 100%;
+    max-width: 1300px;
+    margin: 0px auto;
+    display: flex;
+    text-align: left;
+    padding-bottom: 46px;
+    &>div{
+      width: 50%;
+    }
+  }
+  .desTopImg{
+    width: 100%;
+    max-width: 1500px;
+    margin: 0px auto;
+    padding-bottom: 100px;
+    img{
+      width: 100%;
+      display: block;
+    }
+  }
+  .careersType{
+    width: 100%;
+    .titleBg{
+        width: 100%;
+        position: sticky;
+        top: 0;
+        background: #ffffff;
+        transition: all .3s ease-in-out;
+        z-index: 4;
+        .bgMove{
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            right: 0;
+            top: 0;
+            background-color: #f6f6f6;
+        }
+    }
+    .topType{
+        top:70px;
+    }
+    .typeTitle{
+        width: 100%;
+        height: 90px;
+        display: flex;
+        max-width: 1300px;
+        margin: 0 auto;
+        position: relative;
+        font-size: 24px;
+        .typeTitCk{
+            height: 90px;
+            padding-top: 20px;
+            box-sizing: border-box;
+            margin-right: 80px;
+            cursor: pointer;
+            &:hover{
+                color: #B81C25;
+            }
+        }
+        .ck{
+            border-bottom: 1px solid #B81C25;
+            color: #B81C25;
+            .h5R{
+                font-weight: bold;
+            }
+        }
+    }
+    .typeCon{
+        width: 100%;
+        background: #f6f6f6;
+        padding-bottom: 120px;
+        display: none;
+        .infoul{
+            width: 100%;
+            max-width: 1300px;
+            margin: 0 auto;
+            .infoLi{
+                padding: 90px 0;
+                border-bottom:1px solid #9FA3A5;
+                width: 100%;
+                display: none;
+                .liTitle{
+                    display: flex;
+                    width: 100%;
+                    justify-content: space-between;
+                    cursor: pointer;
+                    font-size: 40px;
+                    font-weight: bold;
+                    font-family: "MyFont1";
+                    .liTit{
+                        width: calc(100% - 220px);
+                        // height: 84px;
+                        line-height: 84px;
+                        overflow: hidden;
+                        display: flex;
+                        flex-wrap: wrap;
+                    }
+                    .btn{
+                        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);
+                        min-width: 84px;
+                        &::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 1.5s cubic-bezier(.19,1,.22,1);
+                            transition: clip-path 1.5s cubic-bezier(.19,1,.22,1);
+                            transition: clip-path 1.5s cubic-bezier(.19,1,.22,1), -webkit-clip-path 1.5s cubic-bezier(.19,1,.22,1);
+                            transition: clip-path 1.5s cubic-bezier(.19,1,.22,1), -webkit-clip-path 1.5s cubic-bezier(.19,1,.22,1);
+                        }
+                    }
+                }
+                
+                .infoSonLi{
+                    
+                    width: 100%;
+                    height: 0px;
+                    box-sizing: border-box;
+                    overflow: hidden;
+                    // display: none;
+                    border-bottom: 0px dashed #000000;
+                    margin-bottom: 0px;
+                    padding-top: 0px;
+                    transition: padding 1s ease-in-out;
+                    text-align: left;
+                    &:last-child{
+                        border-bottom: 0px;
+                        margin-bottom: 0px;
+                        .btn{
+                            margin-bottom: 0;
+                        }
+                    }
+                    .h4{
+                        margin-top: 50px;
+                        font-size: 24px;
+                        &:first-child{
+                            margin-top: 0;
+                            color: #B81C25;
+                        }
+                    }
+                    .h5R{
+                        margin-top: 30px;
+                        font-size: 20px;
+                        line-height: 44px;
+                    }
+                    .text{
+                        margin-top: 10px;
+                        margin-bottom: 40px;
+                        color: #9fa3a5;
+                        font-size: 20px;
+                        line-height: 44px;
+                    }
+                    .btn{
+                        margin: 80px 0 120px;
+                    }
+                }
+            }
+            .infoLiShow{
+                .liTitle{
+                    .btn{
+                        // background-color: #0054A7;
+                        
+                        &::after{
+                            display: none;
+                        }
+                        .btnjbg{
+                            -webkit-clip-path: circle(50% at 50% 50%);
+                            clip-path: circle(50% at 50% 50%);
+                        }
+                    }
+                }
+                .infoSonLi{
+                    border-bottom: 1px dashed #000000;
+                    margin-bottom: 95px;
+                    padding-top: 45px;
+                }
+            }
+        }
+        .all{
+            .infoLi{
+                display: block;
+            }
+        }
+    }
+    .typeConShow{
+        display: block;
+    }
+    .typeCon2{
+        text-align: left;
+        .infoul{
+            &>.title{
+                font-size: 40px;
+                padding: 70px 0px 43px;
+            }
+            .newsType{
+                width: 100%;
+                height: 100%;
+                .newsLi{
+                  width: 100%;
+                  display: flex;
+                  justify-content: space-between;
+                  padding-bottom: 27px;
+                  border-bottom: 1px solid #acacac5e;
+                  margin-top: 27px;
+                  &:last-child{
+                    border-bottom: 0px solid #ACACAC;
+                  }
+                  .timer{
+                    width: 65px;
+                    height: 66px;
+                    border-radius: 8px;
+                    border: 1px solid #A7A5A5;
+                    text-align: center;
+                    font-size: 12px;
+                    padding: 0px 12px 0;
+                    box-sizing: border-box;
+                    .timerData{
+                      font-size: 26px;
+                      color: #b81c25;
+                      border-bottom: 1px solid #b81c25;
+                      padding-bottom: 3px;
+                      margin-bottom: 3px;
+                      line-height: 30px;
+                      padding-top: 4px;
+                    }
+                  }
+                  .newsLiCon{
+                    width: calc(100% - 80px);
+                    font-size: 18px;
+                    text-align: left;
+                    &>div{
+                      overflow: hidden;
+                      white-space: nowrap;
+                      width: 100%;
+                      height: 24px;
+                      text-overflow: ellipsis;
+                    }
+                    .liTitle{
+                      color: #231F20;
+                      font-weight: 500;
+                      margin-bottom: 8px;
+                      padding-top: 6px;
+                    }
+                    .licon{
+                      font-weight: 400;
+                      color: #999999;
+                      font-size: 16px;
+                    }
+                  }
+                }
+            }
+            .btn{
+                margin: 59px auto 0px;
+                position: relative;
+                left: 50%;
+                transform: translateX(-50%);
+            }
+            .inLiCon{
+                width: 100%;
+                display: flex;
+                box-sizing: border-box;
+                padding: 38px 47px;
+                background: #B81C25;
+                color: #ffffff;
+                justify-content: space-between;
+                align-items: center;
+                border-radius: 8px;
+                margin-top: 80px;
+                font-size: 24px;
+                .title{
+                    font-size: 28px;
+                }
+                .liLine{
+                    width: 1px;
+                    height: 55px;
+                    background: #ffffff;
+                    opacity: 0.5;
+                }
+                .iconfont{
+                    display: inline-block;
+                    width: 31px;
+                    height: 31px;
+                    background: #ffffff;
+                    border-radius: 20px;
+                    color: #B81C25;
+                    font-size: 16px;
+                    text-align: center;
+                    line-height: 31px;
+                    margin-right: 12px;
+                    position: relative;
+                    top: -3px;
+                }
+            }
+        }
+        
+    }
+   }
+   .contactUs{
+    width: 100%;
+    text-align: center;
+    .contactCon{
+        width: 100%;
+        max-width: 1300px;
+        height: 750px;
+        margin: 0px auto;
+        padding: 120px 0px 180px;
+        display: flex;
+        text-align: left;
+        &>div{
+            width: 50%;
+            box-sizing: border-box;
+            .contactUsTit{
+                font-size: 60px;
+                margin-bottom: 50px;
+            }
+            .text{
+                font-size: 24px;
+                color: #9FA3A5;
+                margin-bottom: 8px;
+            }
+            .text1{
+                font-size: 20px;
+                color: #231F20;
+            }
+            .contactType{
+                font-size: 40px;
+                margin-top: 200px;
+                margin-bottom: 20px;
+            }
+            img{
+                width: 750px;
+                height: 750px;
+                display: block;
+            }
+        }
+    }
+   }
+}
+
+
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+  .careersType{
+      .typeCon,.titleBg{
+          padding-left: 20px;
+      padding-right: 20px;
+      box-sizing: border-box;
+      }
+  }
+}
+@media screen and (min-width:800px){
+  
+}
+.mTxt{
+  display: none;
+}
+//移动端样式
+@media screen and (max-width:800px) {
+  .pcTxt{
+    display: none;
+  }
+  .mTxt{
+    display: block;
+  }
+  .main{
+    padding-top: 61px;
+    .goUp{
+        width: 42px;
+        height: 42px;
+        bottom: 30px;
+        right: 50%;
+        transform: translateX(21px);
+    }
+  }
+  .desCon{
+    padding-top: 80px;
+    box-sizing: border-box;
+    // .text{
+    //   font-size: 14px;
+    //   line-height: 22px;
+    // }
+    .desTop{
+      padding-bottom: 30px;
+      padding-left: 15px;
+      padding-right: 15px;
+      box-sizing: border-box;
+      flex-wrap: wrap;
+      .title{
+        text-align: center;
+        margin-bottom: 30px;
+        font-size: 24px;
+      }
+      &>div{
+        width: 100%;
+      }
+    }
+    .desTopImg{
+      padding-bottom: 40px;
+      padding-left: 15px;
+      padding-right: 15px;
+      box-sizing: border-box;
+    }
+    .careersType{
+        
+        .titleBg{
+            top: 60px;
+            padding-left: 15px;
+            padding-right: 15px;
+            box-sizing: border-box;
+        }
+        .typeTitle{
+            width: 100%;
+            height: 50px;
+            margin: 0px 0px;
+            box-sizing: border-box;
+            overflow: hidden;
+            overflow-x: auto;
+            font-size: 14px;
+            .typeTitCk{
+                height: 50px;
+                margin-right: 30px;
+                line-height: 10px;
+                white-space: nowrap;
+                &:last-child{
+                    margin-right: 0;
+                }
+            }
+            .ck{
+                border-bottom: 2px solid #B81C25;
+            }
+        }
+        .typeCon{
+            padding: 0px 15px 110px;
+            box-sizing: border-box;
+            .infoul{
+                .infoLi{
+                    padding: 45px 0;
+                    .liTitle{
+                        align-items: center;
+                        font-size: 24px;
+                        .liTit{
+                            height: auto;
+                            line-height: 30px;
+                            width: calc(100% - 60px);
+                            overflow: initial;
+                        }
+                        .btn{
+                            width: 40px;
+                            height: 40px;
+                            left: 0px;
+                            min-width: 40px;
+                            .btnjbg{
+                                left: 0px;
+                            }
+                            &::before{
+                                content: '';
+                                width: 8px;
+                                height: 2px;
+                            }
+                            &::after{
+                                content: '';
+                                width: 2px;
+                                height: 8px;
+                            }
+                        }
+                    }
+                    .infoSonLi{
+                        
+                        .h4{
+                            font-size: 16px;
+                            line-height: 30px;
+                            margin-top: 30px;
+                            font-weight: bold;
+                        }
+                        .h5R{
+                            margin-top: 10px;
+                            font-size: 16px;
+                            line-height: 30px;
+                        }
+                        .text{
+                            margin-bottom: 40px;
+                            font-size: 16px;
+                            line-height: 30px;
+
+                        }
+                        .btn{
+                            margin: 50px 0 60px;
+                        }
+                    }
+                }
+                .infoLiShow{
+                    .liTitle{
+                        .btn{
+                            &::before {
+                                width: 8px;
+                                height: 2px;
+                            }
+                            .btnjbg{
+                                -webkit-clip-path: circle(19px at 20px 20.5px);
+                                clip-path: circle(19px at 20px 20.5px);
+                            }
+                        }
+                    }
+                    .infoSonLi{
+                        margin-bottom: 15px;
+                        border-bottom: 1px solid #231F20;
+                    }
+                }
+            }
+        }
+        .typeCon2 {
+            .infoul{
+                &>.title{
+                    font-size: 25px;
+                    padding: 40px 0px 15px;
+                }
+                .newsType {
+                    .newsLi {
+                        padding-bottom: 20px;
+                        margin-top: 20px;
+                        .newsLiCon{
+                            font-size: 16px;
+                            padding-top: 4px;
+                            &>div{
+                                height: 20px;
+                            }
+                            .liTitle{
+                                margin-bottom: 8px;
+                            }
+                            }
+                    }
+                }
+                .btn{
+                    margin: 20px auto 0px;
+                }
+                .inLiCon{
+                    justify-content: center;
+                    flex-wrap: wrap;
+                    font-size: 14px;
+                    padding: 30px 23px;
+                    border-radius: 4px;
+                    margin-top: 47px;
+                    .liLine{
+                        display: none;
+                    }
+                    &>div{
+                        width: 100%;
+                        height: 20px;
+                        margin-bottom: 15px;
+                        line-height: normal;
+                        padding-left: 38px;
+                        box-sizing: border-box;
+                    }
+                    .title{
+                        width: 100%;
+                        text-align: center;
+                        padding-bottom: 14px;
+                        height: auto;
+                        font-size: 16px;
+                        padding-left: 0px;
+                        line-height: normal;
+                        border-bottom: 1px solid #ffffff81;
+                        margin-bottom: 20px;
+                    }
+                    .iconfont{
+                        width: 20px;
+                        height: 20px;
+                        border-radius: 10px;
+                        font-size: 12px;
+                        line-height: 20px;
+                        margin-right: 12px;
+                        top: 0px;
+                    }
+                }
+            }
+        }
+    }
+    .contactUs{
+        .contactCon{
+            height: auto;
+            margin: 0px auto;
+            padding: 105px 15px 115px;
+            box-sizing: border-box;
+            flex-wrap: wrap;
+            &>div{
+                width: 100%;
+                .contactUsTit{
+                    font-size: 60px;
+                    margin-bottom: 38px;
+                    font-size: 24px;
+                    line-height: normal;
+                }
+                .text{
+                    font-size: 14px;
+                    line-height: normal;
+                    margin-bottom: 15px;
+                }
+                .text1{
+                    font-size: 14px;
+                    line-height: 28px;
+                }
+                .contactType{
+                    font-size: 18px;
+                    margin-top: 70px;
+                    margin-bottom: 30px;
+                    line-height: normal;
+                }
+                img{
+                    width: 100%;
+                    height: auto;
+                    margin-top: 15px;
+                }
+            }
+        }
+    }
+  }
+  
+}