header

new/order.html

@@ -8,23 +8,8 @@
     <link rel="stylesheet" href="./static/css/order.css">
 </head>
 <body>
-    <div id='app'>
-        <div class="header">
-            <div class="header-content">
-                <div class="header-logo">
-                    <img src="./static/images/dog.jpeg" alt="" width="42px" height="42px">
-                    <p class='header-title'>Hi!隔壁老王</p>
-                </div>
-                <div class="header-side">
-                    <el-menu  mode="horizontal"  :router="false"  :unique-opened="true"  @select='selectRoute'  :default-active="onRoutes" background-color="#708DF1" text-color="#ffffff"  active-text-color="#708DF1"  class='mian_side'>
-                        
-                        <el-menu-item :index="item.value" :key='index'  v-for='(item,index) in headmenus' >
-                            <i :class="item.icon"></i>{{item.name}}
-                        </el-menu-item>
-                    </el-menu>
-                </div>
-            </div>
-        </div>
+    <div id="app">
+       <common-header></common-header>
         <div class="content">
             <div class="order">
                 <div class='order-left'>
@@ -97,7 +82,7 @@
                                     </div>
                                 </div>
                             </div>
-                            
+
                         </div>
                         <div class="table_bottm">
                             <!-- <el-pagination @current-change="handleCurrentChange" background :current-page="table.current_page"  layout="total, prev, pager, next" :page-size="15" :pager-count="table.page_count" :total="table.total">
@@ -114,11 +99,13 @@
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
   <!-- 引入组件库 -->
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
+  <script src="./static/js/common.js"></script>
   <script>
     new Vue({
       el: '#app',
+      components: {commonHeader},
       data: function() {
-        return { 
+        return {
                 onRoutes:'./order.html',
                 headmenus:[
                     {name:'首页',value:'./main.html',icon:'el-icon-menu'},
@@ -169,4 +156,4 @@
       }
     })
   </script>
-</html>
\ No newline at end of file
+</html>

new/static/js/common.js

+
+var commonHeader={
+  template: '<div class="header"><div class="header-content"><div class="header-logo"><img src="./static/images/dog.jpeg" alt="" width="42px" height="42px"><p class="header-title">Hi!隔壁老王</p></div><div class="header-side"><el-menu  mode="horizontal"  :router="false"  :unique-opened="true"  @select="selectRoute"  :default-active="onRoutes" background-color="#708DF1" text-color="#ffffff"  active-text-color="#708DF1"  class="mian_side"> <el-menu-item :index="item.value" :key="index"  v-for="(item,index) in headmenus"><i :class="item.icon"></i>{{item.name}}</el-menu-item> </el-menu></div></div></div>'
+}