整理代码

src/components/Header.vue

 <template>
-  <div id="showheader" :class="this.top?'iosStyle header-warp':'header-warp'">
+  <div id="showheader"  class="header" :class="this.top?'iosStyle header-warp':'header-warp'">
     <van-nav-bar id="nav" :title="title" left-text left-arrow />
   </div>
 </template>
@@ -44,8 +44,15 @@ export default {
 .van-nav-bar__title {
   font-size: 18px;
 }
-.van-nav-bar .van-icon {
-  color: #333333 !important;
-  font-size: 25px !important;
+.header /deep/ .van-nav-bar .van-icon {
+  color: #fff !important;
+  font-size: 16px !important;
+}
+.van-nav-bar {
+  background: linear-gradient(
+    135deg,
+    rgba(37, 141, 244, 1) 0%,
+    rgba(6, 115, 223, 1) 100%
+  );
 }
 </style>

src/router/bill-router.js

@@ -9,6 +9,15 @@ export default [
         }
     },
     {
+        path: "/trusteeship",
+        name: "trusteeship",
+        component: () => import("@/views/Trusteeship/index.vue"),
+        meta: {
+            requiresAuth: true,
+            title: "人事托管 "
+        }
+    },
+    {
         path: "/index/record",
         name: "index",
         component: () => import("@/views/Bill/record.vue"),

src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import moreRouters from './more-router.js'
-import trusteeship from './trusteeship.js'
-import personRouters from './bill-router.js'
+import billRouters from './bill-router.js'
 
 Vue.use(VueRouter)
 
-
-
 const router = new VueRouter({
   mode: 'history',
   base: process.env.BASE_URL,
   routes:[
-    ...personRouters,
+    ...billRouters,
     ...moreRouters,
-    ...trusteeship
   ],
   scrollBehavior(to, from, savedPosition) {
     return { x: 0, y: 0 }

src/router/trusteeship.js

-export default [
-    {
-        path: "/trusteeship",
-        name: "trusteeship",
-        component: () => import("@/views/Trusteeship/index.vue"),
-        meta: {
-            requiresAuth: true,
-            title: "人事托管 "
-        }
-    }
-]
\ No newline at end of file

src/views/Bill/index.vue

 <template>
   <div>
     <div class="header">
-      <van-nav-bar title="更多服务" left-arrow @click-left="onClickLeft" />
+      <tab-header :title="title" />
     </div>
     <div class="contener">
       <div class="header">
@@ -143,10 +143,17 @@
 
 <script>
 import { NavBar, Icon } from "vant";
+import {TabHeader} from '@/components'
 export default {
   components: {
     [NavBar.name]: NavBar,
-    [Icon.name]: Icon
+    [Icon.name]: Icon,
+    TabHeader
+  },
+  data(){
+    return{
+      title:'人事服务'
+    }
   },
   methods: {
     onClickLeft() {