cps：提现

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

@@ -1,13 +1,167 @@
 <template>
-  <div>提现</div>
+  <div class="withdraw-cash-container">
+    <div class="w-343">
+      <p class="btn-rule">
+        <a href="javascript:;">提现规则</a>
+      </p>
+      <h2>提现</h2>
+      <p class="explain">每日可提现一次，最低提现金额1元</p>
+      <van-field
+        class="fbt-van-cell"
+        v-model="amount"
+        :border="false"
+        label="￥"
+        placeholder="请输入"
+        @input="amount = amount.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1').replace(/^0\d*/, '0').replace(/^\./, '0.')">
+      </van-field>
+      <p class="help">
+        <span>可提现金额 736.28元</span>
+        <a href="javascript:;">全部提现></a>
+      </p>
+      <van-button
+        class="btn-withdraw-cash"
+        type="default">提现
+      </van-button>
+    </div>
+  </div>
 </template>
 
 <script>
+import { Field, Button } from 'vant'
+
 export default {
-  name: 'index'
+  name: 'index',
+  components: {
+    'van-field': Field,
+    'van-button': Button
+  },
+  data () {
+    return {
+      amount: ''
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.withdraw-cash-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  padding-top: 12px;
+  background: #fff;
+}
+
+.w-343 {
+  display: flex;
+  flex-direction: column;
+  width: 343px;
+  margin: 0 auto;
+}
+
+.btn-rule {
+  display: flex;
+  justify-content: flex-end;
+
+  a {
+    font-size: 12px;
+    color: #FA4A4A;
+    line-height: 17px;
+  }
+}
+
+h2 {
+  font-size: 24px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #333333;
+  line-height: 33px;
+}
+
+.explain {
+  margin-top: 4px;
+  font-size: 14px;
+  color: #333333;
+  line-height: 20px;
+}
+
+.fbt-van-cell {
+  width: 100%;
+  padding: 0 0 7px 0;
+  margin-top: 31px;
+  border-bottom: 1px solid rgba(31, 49, 74, 0.1);
 
+  ::v-deep .van-field__label {
+    width: 30px;
+    padding: 0;
+
+    span {
+      font-size: 30px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 42px;
+    }
+  }
+
+  ::v-deep .van-cell__value {
+    padding: 11px 0;
+
+    input {
+      height: 20px;
+      font-size: 14px;
+      color: #333;
+      -webkit-text-fill-color: #333;
+      opacity: 1;
+      background: transparent;
+
+      &::-webkit-input-placeholder {
+        -webkit-text-fill-color: #999;
+        opacity: 1;
+        color: #999;
+      }
+    }
+  }
+}
+
+.help {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-top: 13px;
+
+  span {
+    font-size: 14px;
+    color: #999999;
+    line-height: 20px;
+  }
+
+  a {
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #007AFF;
+    line-height: 20px;
+  }
+}
+
+.btn-withdraw-cash {
+  width: 343px;
+  height: 48px;
+  background: #FA4A4A;
+  border-radius: 24px;
+  border: none;
+  margin-top: 44px;
+
+  .van-button__text {
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+  }
+}
 </style>