tabheader新增

src/components/TabHeader.vue

 <template>
   <div id="showheader" :class="this.top?'iosStyle header-warp':'header-warp'">
-    <van-nav-bar id="nav" :title="title" left-text left-arrow />
-    <van-nav-bar id="nav" :title="title" left-text left-arrow />
+    <van-nav-bar id="nav" :title="title" left-text left-arrow>
+      <template #title>
+        <a class="header-title title-active" href="/bill">人事服务</a>
+
+        <a class="header-title" href="./more">更多服务</a>
+      </template>
+    </van-nav-bar>
   </div>
 </template>
 
@@ -9,7 +14,7 @@
 import { NavBar, Icon } from "vant";
 export default {
   components: {
-    [NavBar.name]: NavBar,
+    [NavBar.name]: NavBar
   },
   props: {
     title: String
@@ -36,16 +41,23 @@ export default {
   top: 0;
   width: 100%;
   z-index: 1100;
-  background-color: #ffffff;
-}
-.van-hairline--bottom::after {
-  border: 0 !important;
-}
-.van-nav-bar__title {
-  font-size: 18px;
 }
 .van-nav-bar .van-icon {
   color: #333333 !important;
   font-size: 25px !important;
 }
+.van-nav-bar {
+  background: linear-gradient(
+    135deg,
+    rgba(37, 141, 244, 1) 0%,
+    rgba(6, 115, 223, 1) 100%
+  );
+}
+
+.header-title {
+  color: #fff;
+  font-size: 16px;
+  margin-right: 30px;
+}
+
 </style>

src/views/Bill/test.vue

@@ -13,7 +13,7 @@ export default {
   },
   data() {
     return {
-      title: "test123"
+      title: "TAB页面"
     };
   }
 };

src/views/More/index.vue

@@ -51,9 +51,10 @@
 
 <script>
 
-import {  Icon } from "vant";
+import { NavBar, Icon } from "vant";
 export default {
   components: {
+    [NavBar.name]: NavBar,
     [Icon.name]: Icon
   },
   methods: {