update

src/assets/css/index.css

@@ -2,4 +2,7 @@
     padding: 0;
     margin: 0;
     list-style: none;
+}
+i{
+    font-style: normal;
 }
\ No newline at end of file

src/views/More/index.vue

 <template>
   <div>
-    更多服务首页
-    <van-button type="primary" class="btn">主要按钮</van-button>
+    <div class="header">
+      <van-nav-bar title="更多服务" left-arrow @click-left="onClickLeft" />
+    </div>
+    <div class="contener">
+      <div class="header">
+        <div class="header_box">
+          <div class="title"></div>
+          <div class="header_content">
+            <div class="fund">
+              <span>账户余额</span>
+              <i>1,000.00</i>
+            </div>
+            <div class="paid">
+              <span>待付金额</span>
+              <i>200.00</i>
+            </div>
+          </div>
+          <div class="header_info">
+            <div class="left">
+              <img src="" alt="">
+              <span>充值</span>
+            </div>
+            <div class="right">
+              <img src="" alt="">
+              <span>资金记录</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="box">
+        <div class="list">
+          <div class="list_title">
+            <div class="title">吴天逸工商代理</div>
+            <van-icon name="arrow" class="arrow_right" />
+          </div>
+          <p>
+            <span>应付金额</span>
+            <i>600.00</i>
+          </p>
+          <p>
+            <span>待付金额</span>
+            <i>600.00</i>
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { Button } from "vant";
+import { NavBar, Icon } from "vant";
 export default {
   components: {
-        [Button.name]: Button
+    [NavBar.name]: NavBar,
+    [Icon.name]: Icon
+  },
+  methods: {
+    onClickLeft() {
+      console.log(1);
     }
+  }
 };
 </script>
 
 <style lang="less" scoped>
-.btn{
-  width: 100px;
+.contener {
+  .header {
+    height: 136px;
+    padding: 0 16px;
+    border-top: 1px solid rgba(15, 130, 245, 1);
+    background: linear-gradient(
+      135deg,
+      rgba(15, 130, 245, 1) 0%,
+      rgba(6, 115, 223, 1) 100%
+    );
+    .header_box {
+      height: 174px;
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
+      border-radius: 0px 0px 4px 4px;
+      margin-top: 20px;
+      .title {
+        height: 2px;
+        box-shadow: 0px 1px 6px 0px rgba(6, 105, 204, 0.6);
+      }
+      .header_content {
+        height: 122px;
+        .fund {
+          width: 50%;
+          float: left;
+        }
+        .paid {
+          width: 50%;
+          float: left;
+        }
+        span {
+          height: 20px;
+          font-size: 14px;
+          color: rgba(149, 152, 158, 1);
+          line-height: 20px;
+          display: block;
+          margin: 20px 0 0 20px;
+        }
+        i {
+          height: 32px;
+          font-size: 28px;
+          font-weight: bold;
+          color: rgba(61, 64, 71, 1);
+          line-height: 32px;
+          margin-top: 12px;
+          display: block;
+          margin-left: 20px;
+        }
+      }
+      .header_info {
+        height: 52px;
+        background: rgba(245, 247, 250, 1);
+        border-radius: 0px 0px 8px 8px;
+      }
+    }
+  }
+  .box {
+    padding: 0 16px;
+    .list {
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+      margin-top: 16px;
+      padding: 16px;
+      &:first-child {
+        margin-top: 74px;
+      }
+      .list_title {
+        display: flex;
+        align-items: center;
+        .title {
+          height: 22px;
+          font-size: 16px;
+          font-weight: 500;
+          color: rgba(61, 64, 71, 1);
+          line-height: 22px;
+        }
+        .arrow_right {
+          margin-left: auto;
+          color: #e4e4e6;
+        }
+      }
+      p {
+        display: flex;
+        align-items: center;
+        margin-top: 6px;
+        height: 18px;
+        font-size: 13px;
+        color: rgba(149, 152, 158, 1);
+        line-height: 18px;
+        i {
+          font-style: normal;
+          margin-left: auto;
+        }
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file