头部导航移动端重写

assets/css/style.css

@@ -6810,4 +6810,48 @@
             }
 
 
+
+            /* 移动端导航样式 start */
+            .el-menu-item-group__title{
+                display:none
+            }
+
+            .mobileIcon{
+                display:none
+            }
+          
+            .mobileMenuBox{
+                top: 120px;
+                left:0;
+                height:0;
+                overflow:scroll;
+                position: absolute;width: 100%;z-index: 2;
+                opacity:none;
+                transition: .5s;
+
+            }
+            .mobileMenuBox.active{
+                height:calc(100vh - 80px);
+                transition: 1s;
+            }
+            .el-sub-menu__title a,.el-menu-item a{
+                color:#fff
+            }
+            @media(max-width:575px) {
+                .mobileMenuBox{
+                    top: 85px
+    
+                }
+            }
+            @media(max-width:992px) {
+                .mobileIcon{
+                    display:block
+                }
+                .mobileMenuBox{
+                    opacity:1
+                }
+            }
+            /* 移动端导航样式 end */
+
+
             

assets/js/commonVue.js

@@ -18,6 +18,8 @@ const App = {
       title: 'Hello Vue',
       count: 0,
       articalArray: [], //详情数组
+
+      mobileListBoolean:false,
       //公共
       id: null,
       columnList: [],
@@ -101,6 +103,10 @@ const App = {
     this.getColumnData()
   },
   methods: {
+
+    goMobileIconClick(){
+      this.mobileListBoolean=!this.mobileListBoolean
+    },
     handleOpen(){
 
     },

assets/js/component/headerCom.js

@@ -1,9 +1,10 @@
 export default {
-  props: {
-    todo: Object,
-    currentone: String
-  },
-  template: `
+    props: {
+        todo: Object,
+        currentone: String,
+        mobilelistboolean: Boolean
+    },
+    template: `
   <header class="header-absolute sticky-header">
             <div class="custom-container-one">
                 <div class="mainmenu-area  d-flex align-items-center justify-content-center">
@@ -22,7 +23,8 @@ export default {
                                         <a  v-if="item.sname" :href="item.categoryStyle==1?'/?dup='+item.sname:'/template'+item.categoryStyle+'/?dup='+item.sname">{{item.categoryName}}</a>
                                         <a  v-else :href="item.categoryStyle==1?'/':'/template'+item.categoryStyle+'/'">{{item.categoryName}}</a>
                                         <ul class="submenu">
-                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a
+                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id">
+                                            <a
                                                     :href="item.sname?'/template'+item.categoryStyle+'/?dup='+item.sname+'&categoryid='+aa.id+'&isUrlId=1'  : '/template'+item.categoryStyle+'/?categoryid='+aa.id+'&isUrlId=1'"> <span
                                                         style="font-weight:bold;margin-right:10px">·</span>
                                                     {{aa.categoryName}}</a></li>
@@ -32,20 +34,70 @@ export default {
                                 </ul>
                             </div>
                         </nav>
+
+
                         <div class="apply-expre" v-if="todo.length>0" @click="gogo()">申请体验
                         </div>
+
+
+                        <el-row class="tac mobileMenuBox"  :class="[mobilelistboolean?'active':'']" >
+                            <el-col :span="24">
+                                <el-menu active-text-color="#ffd04b" background-color="#0c1923" class="el-menu-vertical-demo"
+                                    default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
+
+                                    <template v-for="item in todo" :key="item.id">
+                                        <el-sub-menu :index="item.id" v-if="item.children.length>0">
+                                            <template #title>
+                                                <location />
+                                                <span> 
+                                                    <a  v-if="item.sname" :href="item.categoryStyle==1?'/?dup='+item.sname:'/template'+item.categoryStyle+'/?dup='+item.sname">{{item.categoryName}}</a>
+                                                    <a  v-else :href="item.categoryStyle==1?'/':'/template'+item.categoryStyle+'/'">{{item.categoryName}}</a>
+                                                
+                                                </span>
+                                            </template>
+                                            <el-menu-item-group title=""  v-for="aa in item.children" :key="aa.id">
+                                                <el-menu-item :index="item.id+'-'+aa.id">
+                                                <a
+                                                    :href="item.sname?'/template'+item.categoryStyle+'/?dup='+item.sname+'&categoryid='+aa.id+'&isUrlId=1'  : '/template'+item.categoryStyle+'/?categoryid='+aa.id+'&isUrlId=1'"> <span
+                                                        style="font-weight:bold;margin-right:10px">·</span>
+                                                    {{aa.categoryName}}</a></el-menu-item>
+                                            </el-menu-item-group>
+                                        </el-sub-menu>
+
+                                       <el-menu-item v-else :index="item.index" >
+                                            <icon-menu />
+                                            <span>
+                                                <a style="color:#fff" v-if="item.sname" :href="item.categoryStyle==1?'/?dup='+item.sname:'/template'+item.categoryStyle+'/?dup='+item.sname">{{item.categoryName}}</a>
+                                                <a style="color:#fff" v-else :href="item.categoryStyle==1?'/':'/template'+item.categoryStyle+'/'">{{item.categoryName}}</a>
+                                            </span>
+                                        </el-menu-item>
+                                    </template>
+                                </el-menu>
+                            </el-col>
+                        </el-row>
                     </div>
                 </div>
-                <div>
-                    <div class="mobile-menu"></div>
-                </div>
+
+                <div class="mobile-menu mean-container mobileIcon">
+                        <div class="mean-bar">
+                            <a href="#nav"  @click="mobileIconClick" class="meanmenu-reveal"
+                                style="right: 0px; left: auto; text-align: center; text-indent: 0px; font-size: 18px;">
+                                <span></span><span></span><span></span>
+                            </a>
+                        </div>
+                    </div>
+                
             </div>
+            
         </header>
   `,
-  methods:{
-    gogo(){
-      this.$emit('data-event'); 
+    methods: {
+        gogo() {
+            this.$emit('data-event');
+        },
+        mobileIconClick() {
+            this.$emit('mobile-icon-click');
+        }
     }
-  }
- 
-}
+
+}

index.html

@@ -26,33 +26,33 @@
     <!--====== home css ====== -->
     <link rel="stylesheet" href="assets/css/home.css" />
 
-     <!--====== jquery js ======-->
-     <script src="assets/js/vendor/jquery-1.12.4.min.js "></script>
-     <!--====== Bootstrap js ======-->
-     <script src="assets/js/bootstrap.min.js "></script>
-     <!--====== Vue js https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js ======-->
-     <script src="assets/js/vue.min.js"></script>
-     <!--====== Element js  https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.full.js ======-->
-     <script src="assets/js/element/index.js"></script>
-     <!--====== Mean Menu ======-->
-     <script src="assets/js/jquery.meanmenu.min.js "></script>
- 
-     <!--====== Setting Info js ======-->
-     <script src="assets/js/settinginfo.js"></script>
-     <!--====== Main js ======-->
-     <script src="assets/js/main.js "></script>
-     <!--====== commonVue js ======-->
-     <script type="module" src="assets/js/commonVue.js "></script>
- 
- 
-     <!-- //引入微信的js，以及写入以下js  (IOS解决方案)-->
-     <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
-     <script>
-         document.addEventListener("WeixinJSBridgeReady", function () {
-             document.getElementById("videoPlay").play();
-         }, false);
-     </script>
- 
+    <!--====== jquery js ======-->
+    <script src="assets/js/vendor/jquery-1.12.4.min.js "></script>
+    <!--====== Bootstrap js ======-->
+    <script src="assets/js/bootstrap.min.js "></script>
+    <!--====== Vue js https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js ======-->
+    <script src="assets/js/vue.min.js"></script>
+    <!--====== Element js  https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.full.js ======-->
+    <script src="assets/js/element/index.js"></script>
+    <!--====== Mean Menu ======-->
+    <script src="assets/js/jquery.meanmenu.min.js "></script>
+
+    <!--====== Setting Info js ======-->
+    <script src="assets/js/settinginfo.js"></script>
+    <!--====== Main js ======-->
+    <script src="assets/js/main.js "></script>
+    <!--====== commonVue js ======-->
+    <script type="module" src="assets/js/commonVue.js "></script>
+
+
+    <!-- //引入微信的js，以及写入以下js  (IOS解决方案)-->
+    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
+    <script>
+        document.addEventListener("WeixinJSBridgeReady", function () {
+            document.getElementById("videoPlay").play();
+        }, false);
+    </script>
+
 
 </head>
 
@@ -61,7 +61,7 @@
 		<p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
   <![endif]-->
 
-    <div id="app" >
+    <div id="app">
         <div class="appInner" :style="{'display':'block'}">
 
             <div>
@@ -70,83 +70,35 @@
                     <loading-com></loading-com>
                 </div>
                 <!-- LOADING END -->
-    
+
                 <!-- FEEDBACK START -->
                 <feed-fix></feed-fix>
                 <!-- FEEDBACK END -->
-    
+
                 <!-- DIALOG START-->
                 <dialog-com @data-event="handleChildEvent" :fatherdialogv="centerDialogVisible" :ruleform="ruleForm"
                     :fatherrules="rules" :fatherdialoga="dialogDataArray"></dialog-com>
                 <!-- DIALOG END -->
             </div>
-    
+
             <!--====== HEADER START ======-->
-            <header-com @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
-
-            <el-row class="tac mobile" style="  top: 85px;
-            position: absolute;
-            width: 100%;
-            z-index: 2;">
-                <el-col :span="24">
-                  <el-menu
-                    active-text-color="#ffd04b"
-                    background-color="#545c64"
-                    class="el-menu-vertical-demo"
-                    default-active="2"
-                    text-color="#fff"
-                    @open="handleOpen"
-                    @close="handleClose"
-                  >
-                    <el-menu-item index="1">
-                        <icon-menu />
-                        <span>Navigator 1</span>
-                    </el-menu-item>
-
-                    <el-sub-menu index="2">
-                      <template #title>
-                        <location />
-                        <span>Navigator 2</span>
-                      </template>
-                      <el-menu-item-group title="">
-                        <el-menu-item index="2-1">item one</el-menu-item>
-                        <el-menu-item index="2-2">item two</el-menu-item>
-                      </el-menu-item-group>
-                    </el-sub-menu>
-                    
-                    <el-sub-menu index="3">
-                        <template #title>
-                          <location />
-                          <span>Navigator 3</span>
-                        </template>
-                        <el-menu-item-group title="">
-                          <el-menu-item index="3-1">item one</el-menu-item>
-                          <el-menu-item index="3-2">item two</el-menu-item>
-                        </el-menu-item-group>
-                      </el-sub-menu>
-
-                    <el-menu-item index="4">
-                      <setting />
-                      <span>Navigator 4</span>
-                    </el-menu-item>
-                  </el-menu>
-                </el-col>
-              </el-row>
+            <header-com @data-event="goApply" @mobile-icon-click="goMobileIconClick" :todo="columnList" :currentone="currentPath" :mobilelistboolean="mobileListBoolean" ></header-com>
 
 
             <!--====== HEADER END ======-->
-    
+
             <div class="video-section">
-    
+
                 <div v-if="modelType==1"
                     style="width:100%;height:100%;background-size:cover;background-position:center center;background-repeat:no-repeat;"
                     v-bind:style="{backgroundImage:'url('+columnImage+')'}"></div>
-    
-                <video webkit-playsinline="webkit-playsinline" playsinline v-else id="videoPlay" autoplay loop muted preload="auto" poster="assets/img/banner/poster.jpg"
+
+                <video webkit-playsinline="webkit-playsinline" playsinline v-else id="videoPlay" autoplay loop muted
+                    preload="auto" poster="assets/img/banner/poster.jpg"
                     style="width:100%;height:100%;object-fit:fill;">
                     <source type="video/mp4">
                 </video>
-    
+
                 <div class="video-des">
                     <div class="des1">
                         <p class="animate__animated  animate__fadeInUp">公司成立<span class="num1">20年</span>，围绕行业细分，累计服务超过
@@ -156,7 +108,7 @@
                         style="top:43%; left:0;width:100%;text-align:center">
                         <p>核心价值观</p>
                         <span>一起梦想，一起成长，一起分享</span>
-    
+
                     </div>
                     <div class="des3 desCom animate__animated  animate__lightSpeedInLeft" style="top:65%; left:20%;">
                         <p>企业使命</p>
@@ -169,12 +121,12 @@
                 </div>
                 <span class="go_down" @click="goDown()" ref="scrollElement"></span>
             </div>
-    
+
             <section v-if="columnList.length>1&&contentBoolean">
-    
-    
-    
-    
+
+
+
+
                 <!--====== WHYUS SECTION START ======-->
                 <div class="whyUs-section pt-60 pb-60" v-for="(arr,index) in articalArray"
                     :style="{background:(index % 2 == 1?'#F4F8FD':'#fff')}">
@@ -199,20 +151,20 @@
                             <div class=" about-text-image" v-html="arr.content">
                             </div>
                         </div>
-    
+
                     </div>
                 </div>
                 <!--====== WHYUS SECTION END ======-->
-    
+
             </section>
-    
+
             <!--====== FOOTER PART START ======-->
             <footer-com v-if="columnList.length>1&&footerBoolean" :todo="columnList"></footer-com>
             <!--====== FOOTER PART END ======-->
         </div>
     </div>
 
-   
+
 
 </body>
 

template2/index.html

@@ -64,8 +64,7 @@
             </div>
             
             <!--====== HEADER START ======-->
-            <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
-            <!--====== HEADER END ======-->
+            <header-com @data-event="goApply" @mobile-icon-click="goMobileIconClick" :todo="columnList" :currentone="currentPath" :mobilelistboolean="mobileListBoolean" ></header-com>            <!--====== HEADER END ======-->
     
             <!--====== COMMON BREADCRUMB START ======-->
             <section class="common-bradcrumb-section" style="background-color:#aaa"   v-bind:style="{backgroundImage:'url('+columnImage+')'}">

template2/read.html

@@ -68,8 +68,7 @@
             </div>
             
             <!--====== HEADER START ======-->
-            <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
-            <!--====== HEADER END ======-->
+            <header-com @data-event="goApply" @mobile-icon-click="goMobileIconClick" :todo="columnList" :currentone="currentPath" :mobilelistboolean="mobileListBoolean" ></header-com>            <!--====== HEADER END ======-->
     
             <!--====== PRODUCT BREADCRUMB START ======-->
             <section class="common-bradcrumb-section" style="background-color:#aaa"   v-bind:style="{backgroundImage:'url('+columnImage+')'}">

template3/index.html

@@ -72,8 +72,7 @@
             </div>
             
             <!--====== HEADER START ======-->
-            <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
-            <!--====== HEADER END ======-->
+            <header-com @data-event="goApply" @mobile-icon-click="goMobileIconClick" :todo="columnList" :currentone="currentPath" :mobilelistboolean="mobileListBoolean" ></header-com>            <!--====== HEADER END ======-->
     
             <!--====== COMMON BREADCRUMB START ======-->
             <section class="common-bradcrumb-section" style="background-color:#aaa"  v-bind:style="{backgroundImage:'url('+columnImage+')'}">

template3/read.html

@@ -68,8 +68,7 @@
             </div>
             
             <!--====== HEADER START ======-->
-            <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
-            <!--====== HEADER END ======-->
+            <header-com @data-event="goApply" @mobile-icon-click="goMobileIconClick" :todo="columnList" :currentone="currentPath" :mobilelistboolean="mobileListBoolean" ></header-com>            <!--====== HEADER END ======-->
     
             <!--====== PRODUCT BREADCRUMB START ======-->
             <section class="common-bradcrumb-section" style="background-color:#aaa"  v-bind:style="{backgroundImage:'url('+columnImage+')'}">

template4/index.html

@@ -69,8 +69,7 @@
             </div>
             
             <!--====== HEADER START ======-->
-            <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
-            <!--====== HEADER END ======-->
+            <header-com @data-event="goApply" @mobile-icon-click="goMobileIconClick" :todo="columnList" :currentone="currentPath" :mobilelistboolean="mobileListBoolean" ></header-com>            <!--====== HEADER END ======-->
     
             <!--====== NEWS BREADCRUMB START ======-->
             <section class="common-bradcrumb-section" style="background-color:#aaa"   v-bind:style="{backgroundImage:'url('+columnImage+')'}">

template4/read.html

@@ -67,8 +67,7 @@
             </div>
             
             <!--====== HEADER START ======-->
-            <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
-            <!--====== HEADER END ======-->
+            <header-com @data-event="goApply" @mobile-icon-click="goMobileIconClick" :todo="columnList" :currentone="currentPath" :mobilelistboolean="mobileListBoolean" ></header-com>            <!--====== HEADER END ======-->
     
             <!--====== NEWS BREADCRUMB START ======-->
             <section class="common-bradcrumb-section" style="background-color:#aaa"   v-bind:style="{backgroundImage:'url('+columnImage+')'}">

template5/index.html

@@ -68,8 +68,7 @@
             </div>
     
             <!--====== HEADER START ======-->
-            <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
-            <!--====== HEADER END ======-->
+            <header-com @data-event="goApply" @mobile-icon-click="goMobileIconClick" :todo="columnList" :currentone="currentPath" :mobilelistboolean="mobileListBoolean" ></header-com>            <!--====== HEADER END ======-->
     
             <!--====== COMMON BREADCRUMB START ======-->
             <section class="common-bradcrumb-section" style="background-color:#aaa"   v-bind:style="{backgroundImage:'url('+columnImage+')'}">