使用uniapp 生成一个跟微信的零钱提现一样的页面代码 顶部一样显示到账银行卡 并且可以切换银行卡 中间是提现金额 再提现金额下方显示 当前余额 还有一个全部提现的蓝色字体 要美观一点 最下方就是键盘输入提现的金额 生成跟微信一样一样的提现 uniapp页面代码

<template>
  <view>
    <!-- 顶部显示到账银行卡 -->
    <view class="top">
      <text class="bank">到账银行卡</text>
      <text class="card">**** **** **** 1234</text>
      <text class="switch">切换银行卡</text>
    </view>
    <!-- 中间是提现金额 -->
    <view class="middle">
      <text class="title">提现金额</text>
      <view class="input-wrapper">
        <text class="symbol">¥</text>
        <input type="number" class="input" placeholder="0.00" />
      </view>
      <text class="balance">当前余额：¥888.88</text>
      <text class="all">全部提现</text>
    </view>
    <!-- 下方是键盘输入提现金额 -->
    <view class="keyboard-wrapper">
      <view class="keyboard-row">
        <text class="keyboard-btn">1</text>
        <text class="keyboard-btn">2</text>
        <text class="keyboard-btn">3</text>
      </view>
      <view class="keyboard-row">
        <text class="keyboard-btn">4</text>
        <text class="keyboard-btn">5</text>
        <text class="keyboard-btn">6</text>
      </view>
      <view class="keyboard-row">
        <text class="keyboard-btn">7</text>
        <text class="keyboard-btn">8</text>
        <text class="keyboard-btn">9</text>
      </view>
      <view class="keyboard-row">
        <text class="keyboard-btn"></text>
        <text class="keyboard-btn">0</text>
        <text class="keyboard-btn">.</text>
      </view>
    </view>
  </view>
</template>
<style>
  /* 样式可以根据需要自行修改 */
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
  }
  .bank {
    font-size: 16px;
    font-weight: bold;
  }
  .card {
    font-size: 20px;
    font-weight: bold;
  }
  .switch {
    color: #007aff;
  }
  .middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .input-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .symbol {
    font-size: 24px;
    margin-right: 10px;
  }
  .input {
    font-size: 32px;
    font-weight: bold;
    border: none;
    text-align: center;
    width: 100%;
  }
  .balance {
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
  }
  .all {
    color: #007aff;
    font-size: 16px;
    font-weight: bold;
  }
  .keyboard-wrapper {
    background-color: #f2f2f2;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
  }
  .keyboard-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .keyboard-btn {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 20px;
    font-weight: bold;
    padding: 12px 20px;
    text-align: center;
    width: calc(33.33% - 8px);
  }
</style