钱包

src/main/nine-space/src/assets/svgs/icon_jiage.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="15px" viewBox="0 0 14 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_jiage</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="钱包" transform="translate(-125.000000, -144.000000)" fill="#FDFB60" fill-rule="nonzero">
+            <g id="icon/价格" transform="translate(125.000000, 144.000000)">
+                <g transform="translate(0.000000, 0.157895)" id="¥">
+                    <path d="M7.89807021,14.4736842 L7.89807021,11.8427477 L11.5216311,11.8427477 L11.5216311,9.71294202 L7.89807021,9.71294202 L7.89807021,8.55648643 L11.5216311,8.55648643 L11.5216311,6.42668072 L8.96779163,6.42668072 L12.0142887,0.846031192 L9.04605263,0.846031192 C7.46264576,3.87259085 6.63025223,5.52721525 6.54887202,5.8099044 C6.48034132,5.5486311 5.66799801,3.8940067 4.11184211,0.846031192 L1.14360609,0.846031192 L4.12995241,6.42668072 L1.61466149,6.42668072 L1.61466149,8.55648643 L5.1900367,8.55648643 L5.1900367,9.71294202 L1.61466149,9.71294202 L1.61466149,11.8427477 L5.1900367,11.8427477 L5.1900367,14.4736842 L7.89807021,14.4736842 Z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/main/nine-space/src/assets/svgs/topBg.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="375px" height="27px" viewBox="0 0 375 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>矩形</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-3" transform="translate(0.000000, -242.000000)" fill="#19191B">
+            <path d="M0,242 C62,251.922427 124.333333,256.883641 187,256.883641 C249.666667,256.883641 312.333333,251.922427 375,242 L375,269 L0,269 L0,242 Z" id="矩形"></path>
+        </g>
+    </g>
+</svg>

src/main/nine-space/src/router/index.js

@@ -172,6 +172,14 @@ const routes = [
       title: "第九空间",
     },
   },
+  {
+    path: "/mineWallet",
+    name: "mineWallet",
+    component: () => import("../views/user/Wallet.vue"),
+    meta: {
+      title: "第九空间",
+    },
+  },
 ];
 
 const router = createRouter({

src/main/nine-space/src/styles/font.less

@@ -8,6 +8,13 @@
   src: url(https://zhirongip.oss-cn-hangzhou.aliyuncs.com/fonts/OSP-DIN.ttf);
 }
 
+@font-face {
+  font-family: 'DIN';
+  src: url(http://zhirongip.oss-cn-hangzhou.aliyuncs.com/fonts/OSP-DIN.ttf);
+}
+
+
+
 @font-face {
   font-family: 'font_family'; /* Project id 2852142 */
   src: url('https://at.alicdn.com/t/font_2852142_ucu46yrsoc.woff2?t=1633658351572')

src/main/nine-space/src/views/Mine.vue

@@ -134,7 +134,7 @@
     <van-cell class="title" title="我的服务" :border="false" />
 
     <van-cell-group :border="false" class="menu">
-      <van-cell title="钱包" is-link>
+      <van-cell title="钱包" is-link :to="{ path: '/mineWallet' }">
         <template #icon>
           <van-icon
             :name="require('../assets/svgs/icon-qiabao.svg')"

src/main/nine-space/src/views/user/Wallet.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="wallet">
+    <div class="top">
+      <div class="text1">个人账户余额</div>
+      <div class="text2">
+        <img src="../../assets/svgs/icon_jiage.svg" alt="" />
+        <span>465.26</span>
+      </div>
+      <div class="btns">
+        <van-button plain round color="#939599" size="mini">提现</van-button>
+        <van-button plain round type="primary" size="mini">充值</van-button>
+      </div>
+      <img src="../../assets/svgs/topBg.svg" class="top-img" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.top {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 50px 16px 53px;
+  background-color: @bg3;
+  position: relative;
+  .text1 {
+    font-size: 13px;
+    color: #939599;
+    line-height: 18px;
+  }
+  .text2 {
+    span {
+      font-size: 36px;
+      font-family: DIN;
+      font-weight: bold;
+      color: #fdfb60;
+      line-height: 44px;
+      background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .btns {
+    margin-top: 20px;
+    .van-button {
+      width: 90px;
+
+      &.van-button--primary {
+        border: solid 0px transparent;
+        padding: 1px;
+        background-image: linear-gradient(@bg, @bg),
+          linear-gradient(135deg, #fdfb60, #ff8f3e);
+        background-origin: border-box;
+        box-sizing: border-box;
+        background-clip: content-box, border-box;
+      }
+    }
+
+    .van-button + .van-button {
+      margin-left: 32px;
+    }
+  }
+}
+
+.top-img {
+  display: block;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+</style>