cps：我的钱包

htmldev/cps/src/views/wallet/index.vue

@@ -1,13 +1,197 @@
 <template>
-  <div>我的钱包</div>
+  <div>
+    <h2>我的钱包</h2>
+    <ul>
+      <li>
+        <p class="left">
+          <span class="label">钱包余额</span>
+          <span class="amount">52.8</span>
+        </p>
+        <p class="right withdraw-cash-wrap">
+          <van-button
+            class="withdraw-cash"
+            type="default"
+            @click="$router.push({name: 'WithdrawCash'})">去提现
+          </van-button>
+        </p>
+      </li>
+      <li>
+        <p class="left">
+          <span class="label">累计提现(元)</span>
+          <span class="value">52.8</span>
+        </p>
+        <p class="right">
+          <span class="label">待结算佣金(元)</span>
+          <span class="value">52.8</span>
+        </p>
+      </li>
+    </ul>
+    <router-link
+      class="jump-bill"
+      :to="{name: 'Bill'}">
+      <span class="label">收支明细</span>
+      <span class="value">
+        <span>查看</span>
+        <i></i>
+      </span>
+    </router-link>
+  </div>
 </template>
 
 <script>
+import { Button } from 'vant'
+
 export default {
-  name: 'index'
+  name: 'index',
+  components: {
+    'van-button': Button
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+h2 {
+  width: 336px;
+  padding: 16px 0;
+  margin: 0 auto;
+  padding-left: 5px;
+  font-size: 24px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #333333;
+  line-height: 33px;
+}
+
+ul {
+  width: 336px;
+  background: #FFFFFF;
+  box-shadow: 0 2px 4px 0 rgba(31, 49, 74, 0.12);
+  border-radius: 8px;
+  margin: 0 auto;
+
+  li {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    padding-top: 20px;
+
+    &:after {
+      position: absolute;
+      left: 3px;
+      right: 3px;
+      bottom: 0;
+      content: '';
+      border-top: 1px solid rgba(31, 49, 74, 0.1);
+    }
+
+    &:nth-of-type(1) {
+      padding-bottom: 4px;
+    }
+
+    &:nth-of-type(2) {
+      padding-bottom: 18px;
+    }
+
+    &:nth-last-child(1) {
+      &:after {
+        border-top: none;
+      }
+    }
+  }
+
+  .left,
+  .right {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+  }
+
+  .left {
+    padding-left: 20px;
+  }
+
+  .right {
+    padding-right: 20px;
+
+    &.withdraw-cash-wrap {
+      align-items: flex-end;
+    }
+  }
 
+  .label {
+    font-size: 14px;
+    color: #999999;
+    line-height: 20px;
+  }
+
+  .amount {
+    font-size: 30px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FA4A4A;
+    line-height: 42px;
+  }
+
+  .withdraw-cash {
+    width: 106px;
+    height: 48px;
+    background: #FA4A4A;
+    border-radius: 24px;
+    border: none;
+
+    .van-button__text {
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFFFFF;
+    }
+  }
+
+  .value {
+    font-size: 24px;
+    color: #333333;
+    line-height: 33px;
+  }
+}
+
+.jump-bill {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 335px;
+  height: 56px;
+  background: #FFFFFF;
+  box-shadow: 0 2px 4px 0 rgba(31, 49, 74, 0.12);
+  border-radius: 10px;
+  margin: 16px auto 0;
+
+  .label {
+    padding-left: 20px;
+    font-size: 14px;
+    color: #333333;
+    line-height: 20px;
+  }
+
+  .value {
+    display: flex;
+    align-items: center;
+    padding-right: 14px;
+
+    span {
+      font-size: 12px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FA4A4A;
+      line-height: 17px;
+    }
+
+    i {
+      width: 24px;
+      height: 24px;
+      background: url("./image/ic_arrow@2x.png") center center/24px 24px no-repeat;
+    }
+  }
+}
 </style>