修改链接

src/assets/css/index.css

@@ -10,3 +10,7 @@ i{
 .no_bill{
 .no_bill{
     color: #077AEC;
     color: #077AEC;
 }
 }
+
+.container{
+    padding-top:46px;
+}
\ No newline at end of file

src/components/Header.vue

@@ -49,10 +49,6 @@ export default {
   font-size: 16px !important;
   font-size: 16px !important;
 }
 }
 .van-nav-bar {
 .van-nav-bar {
-  background: linear-gradient(
-    135deg,
-    rgba(37, 141, 244, 1) 0%,
-    rgba(6, 115, 223, 1) 100%
-  );
+  background: #0978e7;
 }
 }
 </style>
 </style>

src/components/HeaderW.vue

+<template>
+  <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>
+
+<script>
+import { NavBar, Icon } from "vant";
+export default {
+  components: {
+    [NavBar.name]: NavBar,
+    [Icon.name]: Icon
+  },
+  props: {
+    title: String
+  },
+  data(){
+    return{
+      top:""
+    }
+  },
+  mounted() {
+    var u = navigator.userAgent;
+    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+    this.top = isiOS;
+  }
+};
+</script>
+
+<style scoped>
+
+.header-warp {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1100;
+  background-color: #ffffff;
+}
+.van-hairline--bottom::after {
+  border: 0 !important;
+}
+.van-nav-bar__title {
+  font-size: 18px;
+}
+.header /deep/ .van-nav-bar .van-icon {
+  color: #3D4047 !important;
+  font-size: 16px !important;
+}
+.van-nav-bar {
+  background: #fff;
+  font-size: 16px !important;
+  color: #3D4047;
+}
+</style>

src/components/index.js

 import Header from "./Header.vue";
 import Header from "./Header.vue";
+import HeaderW from "./HeaderW.vue";
 import TabHeader from "./TabHeader.vue";
 import TabHeader from "./TabHeader.vue";
 
 
 export {
 export {
     Header,
     Header,
+    HeaderW,
     TabHeader
     TabHeader
 };
 };
\ No newline at end of file

src/main.js

@@ -6,6 +6,12 @@ import 'lib-flexible/flexible'
 import './assets/css/index.css'
 import './assets/css/index.css'
 Vue.config.productionTip = false
 Vue.config.productionTip = false
 
 
+Vue.prototype.globalNavLeftArrowClick = function (callback) {
+  document.getElementsByClassName("van-nav-bar__left")[0].onclick = function () {
+    callback();
+  };
+};
+
 new Vue({
 new Vue({
   router,
   router,
   store,
   store,

src/views/Bill/index.vue

@@ -23,7 +23,7 @@
               <img src alt />
               <img src alt />
               <span>充值</span>
               <span>充值</span>
             </div>
             </div>
-            <div class="right">
+            <div class="right" @click="toPage(2)">
               <img src alt />
               <img src alt />
               <span>资金记录</span>
               <span>资金记录</span>
             </div>
             </div>
@@ -134,7 +134,6 @@
               <i>600.00</i>
               <i>600.00</i>
             </p>
             </p>
           </div>
           </div>
-
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>
@@ -143,20 +142,25 @@
 
 
 <script>
 <script>
 import { Icon } from "vant";
 import { Icon } from "vant";
-import {TabHeader} from '@/components'
+import { TabHeader } from "@/components";
 export default {
 export default {
   components: {
   components: {
     [Icon.name]: Icon,
     [Icon.name]: Icon,
     TabHeader
     TabHeader
   },
   },
-  data(){
-    return{
-      title:'人事服务'
-    }
+  data() {
+    return {
+      title: "人事服务"
+    };
   },
   },
   methods: {
   methods: {
     onClickLeft() {
     onClickLeft() {
       console.log(1);
       console.log(1);
+    },
+    toPage(flag) {
+      if (flag === 2) {
+        this.$router.push({ name: "billrecord" });
+      }
     }
     }
   }
   }
 };
 };
@@ -283,10 +287,10 @@ export default {
       box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
       box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
       border-radius: 4px;
       border-radius: 4px;
       margin: 16px 0 30px;
       margin: 16px 0 30px;
-      .list{
+      .list {
         box-shadow: none;
         box-shadow: none;
         margin: 0;
         margin: 0;
-        border-bottom: 1px solid #ECECEE;
+        border-bottom: 1px solid #ececee;
         border-radius: 0;
         border-radius: 0;
       }
       }
     }
     }

src/views/Bill/record.vue

 <template>
 <template>
-  <div>
+  <div class="container">
     <div class="header">
     <div class="header">
-      <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
+      <HeaderW :title="title" />
     </div>
     </div>
-    <div class="container">
+    <div class="container-wrap">
       <!--公积金扣费-->
       <!--公积金扣费-->
       <div class="list">
       <div class="list">
         <div class="title">
         <div class="title">
@@ -54,16 +54,107 @@
           <span>11-20 12:20</span>
           <span>11-20 12:20</span>
         </p>
         </p>
       </div>
       </div>
+      <div class="list">
+        <div class="title">
+          <div class="title_info">企业会员费</div>
+          <i>-160.00</i>
+        </div>
+        <p>
+          <span>11-20 12:20</span>
+        </p>
+      </div>
+      <div class="list">
+        <div class="title">
+          <div class="title_info">企业会员费</div>
+          <i>-160.00</i>
+        </div>
+        <p>
+          <span>11-20 12:20</span>
+        </p>
+      </div>
+      <div class="list">
+        <div class="title">
+          <div class="title_info">企业会员费</div>
+          <i>-160.00</i>
+        </div>
+        <p>
+          <span>11-20 12:20</span>
+        </p>
+      </div>
+      <div class="list">
+        <div class="title">
+          <div class="title_info">企业会员费</div>
+          <i>-160.00</i>
+        </div>
+        <p>
+          <span>11-20 12:20</span>
+        </p>
+      </div>
+      <div class="list">
+        <div class="title">
+          <div class="title_info">企业会员费</div>
+          <i>-160.00</i>
+        </div>
+        <p>
+          <span>11-20 12:20</span>
+        </p>
+      </div>
+      <div class="list">
+        <div class="title">
+          <div class="title_info">企业会员费</div>
+          <i>-160.00</i>
+        </div>
+        <p>
+          <span>11-20 12:20</span>
+        </p>
+      </div>
+      <div class="list">
+        <div class="title">
+          <div class="title_info">企业会员费</div>
+          <i>-160.00</i>
+        </div>
+        <p>
+          <span>11-20 12:20</span>
+        </p>
+      </div>
+      <div class="list">
+        <div class="title">
+          <div class="title_info">企业会员费</div>
+          <i>-160.00</i>
+        </div>
+        <p>
+          <span>11-20 12:20</span>
+        </p>
+      </div>
+      <div class="list">
+        <div class="title">
+          <div class="title_info">企业会员费</div>
+          <i>-160.00</i>
+        </div>
+        <p>
+          <span>11-20 12:20</span>
+        </p>
+      </div>
+      <div class="list">
+        <div class="title">
+          <div class="title_info">企业会员费</div>
+          <i>-160.00</i>
+        </div>
+        <p>
+          <span>11-20 12:20</span>
+        </p>
+      </div>
 
 
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <script>
-import { NavBar, Icon } from "vant";
+import { Icon } from "vant";
+import {HeaderW} from "@/components"
 export default {
 export default {
   components: {
   components: {
-    [NavBar.name]: NavBar,
+    HeaderW,
     [Icon.name]: Icon
     [Icon.name]: Icon
   },
   },
   data() {
   data() {
@@ -74,13 +165,20 @@ export default {
   methods: {
   methods: {
     onClickLeft() {
     onClickLeft() {
       console.log(1);
       console.log(1);
+    },
+    navLeftArrowClick() {
+      this.$router.go(-1);
     }
     }
+  },
+  mounted() {
+    this.globalNavLeftArrowClick(this.navLeftArrowClick);
   }
   }
 };
 };
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
-.container {
+@import url('../../assets/css/index.css');
+.container-wrap {
   padding: 0 16px;
   padding: 0 16px;
   .list {
   .list {
     padding: 16px 0;
     padding: 16px 0;