update

src/router/more-router.js

@@ -7,6 +7,24 @@ export default[
             requiresAuth: true,
             title: "更多服务"
         }
+    },
+    {
+        path: "/more/details",
+        name: "more",
+        component: () => import("@/views/More/detail.vue"),
+        meta: {
+            requiresAuth: true,
+            title: "详情"
+        }
+    },
+    {
+        path: "/more/record",
+        name: "more",
+        component: () => import("@/views/More/record.vue"),
+        meta: {
+            requiresAuth: true,
+            title: "资金记录"
+        }
     }
 ]
     

src/views/More/detail.vue

 <template>
-  <div class="container">{{message}}</div>
+  <div>
+    <div class="header">
+      <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
+    </div>
+    <div class="container">
+      <div class="list">
+        <div class="title">
+          <div class="title_info">吴天逸工商代理工本费</div>
+          <i>400.00</i>
+        </div>
+        <p>
+          <span>截止扣费日期2019-12-20</span>
+          <i>已扣费</i>
+        </p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { NavBar, Icon } from "vant";
 export default {
+  components: {
+    [NavBar.name]: NavBar,
+    [Icon.name]: Icon
+  },
   data() {
     return {
-      message: "更多服务详情"
+      title: "详情"
     };
+  },
+  methods: {
+    onClickLeft() {
+      console.log(1);
+    }
   }
 };
 </script>
 
-<style>
+<style lang="less" scoped>
+.container {
+  padding: 0 16px;
+  .list {
+    padding: 16px 0;
+    border-bottom: 1px solid #ECECEE;
+    &:last-child{
+        border: 0;
+    }
+    .title {
+      display: flex;
+      align-items: center;
+      height: 22px;
+      font-size: 16px;
+      font-weight: 500;
+      color: rgba(61, 64, 71, 1);
+      line-height: 22px;
+      i {
+        margin-left: auto;
+      }
+    }
+    p {
+      display: flex;
+      align-items: center;
+      height: 18px;
+      font-size: 13px;
+      color: rgba(149, 152, 158, 1);
+      line-height: 18px;
+      margin-top: 6px;
+      i {
+        margin-left: auto;
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file

src/views/More/index.vue

@@ -19,11 +19,11 @@
           </div>
           <div class="header_info">
             <div class="left">
-              <img src="" alt="">
+              <img src alt />
               <span>充值</span>
             </div>
             <div class="right">
-              <img src="" alt="">
+              <img src alt />
               <span>资金记录</span>
             </div>
           </div>
@@ -118,6 +118,24 @@ export default {
         height: 52px;
         background: rgba(245, 247, 250, 1);
         border-radius: 0px 0px 8px 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        .left {
+          width: 50%;
+        }
+        .right {
+          width: 50%;
+        }
+        span {
+          height: 20px;
+          font-size: 14px;
+          font-weight: 500;
+          color: rgba(7, 122, 236, 1);
+          line-height: 20px;
+          letter-spacing: 1px;
+        }
       }
     }
   }

src/views/More/record.vue

+<template>
+  <div>
+    <div class="header">
+      <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
+    </div>
+    <div class="container">
+      <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>
+</template>
+
+<script>
+import { NavBar, Icon } from "vant";
+export default {
+  components: {
+    [NavBar.name]: NavBar,
+    [Icon.name]: Icon
+  },
+  data() {
+    return {
+      title: "资金记录"
+    };
+  },
+  methods: {
+    onClickLeft() {
+      console.log(1);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.container {
+  padding: 0 16px;
+  .list {
+    padding: 16px 0;
+    border-bottom: 1px solid #ECECEE;
+    &:last-child{
+        border: 0;
+    }
+    .title {
+      display: flex;
+      align-items: center;
+      height: 22px;
+      font-size: 16px;
+      font-weight: 500;
+      color: rgba(61, 64, 71, 1);
+      line-height: 22px;
+      i {
+        margin-left: auto;
+      }
+    }
+    p {
+      display: flex;
+      align-items: center;
+      height: 18px;
+      font-size: 13px;
+      color: rgba(149, 152, 158, 1);
+      line-height: 18px;
+      margin-top: 6px;
+      i {
+        margin-left: auto;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file