头部导航组件化

about/index.html

@@ -53,40 +53,7 @@
         </div>
 
         <!--====== HEADER START ======-->
-        <header class="header-absolute sticky-header">
-            <div class="custom-container-one">
-                <div class="mainmenu-area  d-flex align-items-center justify-content-center">
-                    <div class="logo">
-                        <a href="/index.html"><img src="../assets/img/logo-white.png" alt="uskylogo"></a>
-                    </div>
-                    <div class="d-flex align-items-center ">
-                        <nav class="main-menu">
-
-                            <div class="menu-items">
-                                <ul v-if="columnList">
-                                    <li v-for="item in columnList" :key="item.id" :class="
-                                currentPath==item.sname? 'active':''">
-                                        <a :href="`${item.sname}?id=${item.id}&isUrlId=0`">{{item.categoryName}}</a>
-                                        <ul class="submenu">
-                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a
-                                                    :href="`${item.sname}?id=${aa.id}&isUrlId=1`"> <span
-                                                        style="font-weight:bold;margin-right:10px">·</span>
-                                                    {{aa.sname}}</a></li>
-                                        </ul>
-                                    </li>
-
-                                </ul>
-                            </div>
-                        </nav>
-                        <div class="apply-expre" v-if="columnList.length>0" @click="centerDialogVisible=true">申请体验
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <div class="mobile-menu"></div>
-                </div>
-            </div>
-        </header>
+        <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
         <!--====== HEADER END ======-->
 
         <!--====== COMMON BREADCRUMB START ======-->

assets/js/commonVue.js

@@ -2,6 +2,7 @@ import footerCom from '/assets/js/component/footerCom.js'
 import feedFix from '/assets/js/component/feedFix.js'
 import dialogCom from '/assets/js/component/dialogCom.js'
 import loadingCom from '/assets/js/component/loadingCom.js'
+import headerCom from '/assets/js/component/headerCom.js'
 
 
 var app = new Vue({
@@ -12,6 +13,7 @@ var app = new Vue({
     feedFix,
     dialogCom,
     loadingCom,
+    headerCom
 
   },
   data: {

assets/js/component/headerCom.js

@@ -0,0 +1,48 @@
+export default {
+  props: {
+    todo: Object,
+    currentone: String
+  },
+  template: `
+  <header class="header-absolute sticky-header">
+            <div class="custom-container-one">
+                <div class="mainmenu-area  d-flex align-items-center justify-content-center">
+                    <div class="logo">
+                        <a href="/index.html"><img src="../assets/img/logo-white.png" alt="uskylogo"></a>
+                    </div>
+                    <div class="d-flex align-items-center ">
+                        <nav class="main-menu">
+
+                            <div class="menu-items">
+                                <ul v-if="todo">
+                                    <li v-for="item in todo" :key="item.id" :class="
+                                    currentone==item.sname? 'active':''">
+                                        <a :href="item.sname+'?id='+'item.id}&isUrlId=0'">{{item.categoryName}}</a>
+                                        <ul class="submenu">
+                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a
+                                                    :href="item.sname+'?id='+'aa.id}&isUrlId=1'"> <span
+                                                        style="font-weight:bold;margin-right:10px">·</span>
+                                                    {{aa.sname}}</a></li>
+                                        </ul>
+                                    </li>
+
+                                </ul>
+                            </div>
+                        </nav>
+                        <div class="apply-expre" v-if="todo.length>0" @click="gogo()">申请体验
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="mobile-menu"></div>
+                </div>
+            </div>
+        </header>
+  `,
+  methods:{
+    gogo(){
+      this.$emit('data-event'); 
+    }
+  }
+ 
+}

index.html

@@ -53,42 +53,8 @@
             <!-- DIALOG END -->
         </div>
 
-
         <!--====== HEADER START ======-->
-        <header class="header-absolute sticky-header">
-            <div class="custom-container-one">
-                <div class="mainmenu-area  d-flex align-items-center justify-content-center">
-                    <div class="logo">
-                        <a href="/index.html"><img src="../assets/img/logo-white.png" alt="uskylogo"></a>
-                    </div>
-                    <div class="d-flex align-items-center ">
-                        <nav class="main-menu">
-
-                            <div class="menu-items">
-                                <ul v-if="columnList">
-                                    <li v-for="item in columnList" :key="item.id" :class="
-                                    currentPath==item.sname? 'active':''">
-                                        <a :href="`${item.sname}?id=${item.id}&isUrlId=0`">{{item.categoryName}}</a>
-                                        <ul class="submenu">
-                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a
-                                                    :href="`${item.sname}?id=${aa.id}&isUrlId=1`"> <span
-                                                        style="font-weight:bold;margin-right:10px">·</span>
-                                                    {{aa.sname}}</a></li>
-                                        </ul>
-                                    </li>
-
-                                </ul>
-                            </div>
-                        </nav>
-                        <div class="apply-expre" v-if="columnList.length>0" @click="goApply()">申请体验
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <div class="mobile-menu"></div>
-                </div>
-            </div>
-        </header>
+        <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
         <!--====== HEADER END ======-->
 
         <div class="video-section">

news/index.html

@@ -49,38 +49,7 @@
         </div>
         
         <!--====== HEADER START ======-->
-        <header class="header-absolute sticky-header">
-            <div class="custom-container-one">
-                <div class="mainmenu-area  d-flex align-items-center justify-content-center">
-                    <div class="logo">
-                        <a href="/index.html"><img src="../assets/img/logo-white.png" alt="uskylogo"></a>
-                    </div>
-                    <div class="d-flex align-items-center ">
-                        <nav class="main-menu">
-
-                            <div class="menu-items">
-                                <ul v-if="columnList">
-                                    <li v-for="item in columnList" :key="item.id" :class="
-                                    currentPath==item.sname? 'active':''">
-                                        <a :href="`${item.sname}?id=${item.id}&isUrlId=0`">{{item.categoryName}}</a>
-                                        <ul class="submenu">
-                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a
-                                                    :href="`${item.sname}?id=${aa.id}&isUrlId=1`"> <span
-                                                        style="font-weight:bold;margin-right:10px">·</span>
-                                                    {{aa.sname}}</a></li>
-                                        </ul>
-                                    </li>
-                                </ul>
-                            </div>
-                        </nav>
-                        <div class="apply-expre" v-if="columnList.length>0" @click="centerDialogVisible=true">申请体验</div>
-                    </div>
-                </div>
-                <div>
-                    <div class="mobile-menu"></div>
-                </div>
-            </div>
-        </header>
+        <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
         <!--====== HEADER END ======-->
 
         <!--====== NEWS BREADCRUMB START ======-->

news/read.html

@@ -48,39 +48,7 @@
         </div>
         
         <!--====== HEADER START ======-->
-        <header class="header-absolute sticky-header">
-            <div class="custom-container-one">
-                <div class="mainmenu-area  d-flex align-items-center justify-content-center">
-                    <div class="logo">
-                        <a href="/index.html"><img src="../assets/img/logo-white.png" alt="uskylogo"></a>
-                    </div>
-                    <div class="d-flex align-items-center ">
-                        <nav class="main-menu">
-
-                            <div class="menu-items">
-                                <ul v-if="columnList">
-                                    <li v-for="item in columnList" :key="item.id" :class="
-                                    currentPath==item.sname? 'active':''">
-                                        <a :href="`${item.sname}?id=${item.id}&isUrlId=0`">{{item.categoryName}}</a>
-                                        <ul class="submenu">
-                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a
-                                                    :href="`${item.sname}?id=${aa.id}&isUrlId=1`"> <span
-                                                        style="font-weight:bold;margin-right:10px">·</span>
-                                                    {{aa.sname}}</a></li>
-                                        </ul>
-                                    </li>
-
-                                </ul>
-                            </div>
-                        </nav>
-                        <div class="apply-expre" v-if="columnList.length>0" @click="centerDialogVisible=true">申请体验</div>
-                    </div>
-                </div>
-                <div>
-                    <div class="mobile-menu"></div>
-                </div>
-            </div>
-        </header>
+        <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
         <!--====== HEADER END ======-->
 
         <!--====== NEWS BREADCRUMB START ======-->

product/index.html

@@ -54,39 +54,7 @@
         </div>
         
         <!--====== HEADER START ======-->
-        <header class="header-absolute sticky-header">
-            <div class="custom-container-one">
-                <div class="mainmenu-area  d-flex align-items-center justify-content-center">
-                    <div class="logo">
-                        <a href="/index.html"><img src="../assets/img/logo-white.png" alt="uskylogo"></a>
-                    </div>
-                    <div class="d-flex align-items-center ">
-                        <nav class="main-menu">
-
-                            <div class="menu-items">
-                                <ul v-if="columnList">
-                                    <li v-for="item in columnList" :key="item.id" :class="
-                                    currentPath==item.sname? 'active':''">
-                                        <a :href="`${item.sname}?id=${item.id}&isUrlId=0`">{{item.categoryName}}</a>
-                                        <ul class="submenu">
-                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a
-                                                    :href="`${item.sname}?id=${aa.id}&isUrlId=1`"> <span
-                                                        style="font-weight:bold;margin-right:10px">·</span>
-                                                    {{aa.sname}}</a></li>
-                                        </ul>
-                                    </li>
-                                    
-                                </ul>
-                            </div>
-                        </nav>
-                        <div class="apply-expre" v-if="columnList.length>0" @click="centerDialogVisible=true">申请体验</div>
-                    </div>
-                </div>
-                <div>
-                    <div class="mobile-menu"></div>
-                </div>
-            </div>
-        </header>
+        <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
         <!--====== HEADER END ======-->
 
         <!--====== COMMON BREADCRUMB START ======-->

product/read.html

@@ -49,39 +49,7 @@
         </div>
         
         <!--====== HEADER START ======-->
-        <header class="header-absolute sticky-header">
-            <div class="custom-container-one">
-                <div class="mainmenu-area  d-flex align-items-center justify-content-center">
-                    <div class="logo">
-                        <a href="/index.html"><img src="../assets/img/logo-white.png" alt="uskylogo"></a>
-                    </div>
-                    <div class="d-flex align-items-center ">
-                        <nav class="main-menu">
-
-                            <div class="menu-items">
-                                <ul v-if="columnList">
-                                    <li v-for="item in columnList" :key="item.id" :class="
-                                    currentPath==item.sname? 'active':''">
-                                        <a :href="`${item.sname}?id=${item.id}&isUrlId=0`">{{item.categoryName}}</a>
-                                        <ul class="submenu">
-                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a
-                                                    :href="`${item.sname}?id=${aa.id}&isUrlId=1`"> <span
-                                                        style="font-weight:bold;margin-right:10px">·</span>
-                                                    {{aa.sname}}</a></li>
-                                        </ul>
-                                    </li>
-
-                                </ul>
-                            </div>
-                        </nav>
-                        <div class="apply-expre" v-if="columnList.length>0" @click="centerDialogVisible=true">申请体验</div>
-                    </div>
-                </div>
-                <div>
-                    <div class="mobile-menu"></div>
-                </div>
-            </div>
-        </header>
+        <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
         <!--====== HEADER END ======-->
 
         <!--====== PRODUCT BREADCRUMB START ======-->

solution/index.html

@@ -52,39 +52,7 @@
         </div>
         
         <!--====== HEADER START ======-->
-        <header class="header-absolute sticky-header">
-            <div class="custom-container-one">
-                <div class="mainmenu-area  d-flex align-items-center justify-content-center">
-                    <div class="logo">
-                        <a href="/index.html"><img src="../assets/img/logo-white.png" alt="uskylogo"></a>
-                    </div>
-                    <div class="d-flex align-items-center ">
-                        <nav class="main-menu">
-
-                            <div class="menu-items">
-                                <ul v-if="columnList">
-                                    <li v-for="item in columnList" :key="item.id" :class="
-                                    currentPath==item.sname? 'active':''">
-                                        <a :href="`${item.sname}?id=${item.id}&isUrlId=0`">{{item.categoryName}}</a>
-                                        <ul class="submenu">
-                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a
-                                                    :href="`${item.sname}?id=${aa.id}&isUrlId=1`"> <span
-                                                        style="font-weight:bold;margin-right:10px">·</span>
-                                                    {{aa.sname}}</a></li>
-                                        </ul>
-                                    </li>
-
-                                </ul>
-                            </div>
-                        </nav>
-                        <div class="apply-expre" v-if="columnList.length>0" @click="centerDialogVisible=true">申请体验</div>
-                    </div>
-                </div>
-                <div>
-                    <div class="mobile-menu"></div>
-                </div>
-            </div>
-        </header>
+        <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
         <!--====== HEADER END ======-->
 
         <!--====== COMMON BREADCRUMB START ======-->

solution/read.html

@@ -49,39 +49,7 @@
         </div>
         
         <!--====== HEADER START ======-->
-        <header class="header-absolute sticky-header">
-            <div class="custom-container-one">
-                <div class="mainmenu-area  d-flex align-items-center justify-content-center">
-                    <div class="logo">
-                        <a href="/index.html"><img src="../assets/img/logo-white.png" alt="uskylogo"></a>
-                    </div>
-                    <div class="d-flex align-items-center ">
-                        <nav class="main-menu">
-
-                            <div class="menu-items">
-                                <ul v-if="columnList">
-                                    <li v-for="item in columnList" :key="item.id" :class="
-                                    currentPath==item.sname? 'active':''">
-                                        <a :href="`${item.sname}?id=${item.id}&isUrlId=0`">{{item.categoryName}}</a>
-                                        <ul class="submenu">
-                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a
-                                                    :href="`${item.sname}?id=${aa.id}&isUrlId=1`"> <span
-                                                        style="font-weight:bold;margin-right:10px">·</span>
-                                                    {{aa.sname}}</a></li>
-                                        </ul>
-                                    </li>
-
-                                </ul>
-                            </div>
-                        </nav>
-                        <div class="apply-expre" v-if="columnList.length>0" @click="centerDialogVisible=true">申请体验</div>
-                    </div>
-                </div>
-                <div>
-                    <div class="mobile-menu"></div>
-                </div>
-            </div>
-        </header>
+        <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
         <!--====== HEADER END ======-->
 
         <!--====== PRODUCT BREADCRUMB START ======-->