<template>
  <view class="container">
    <view class="draw-box">
      <span class="title">提现金额</span>
      <view class="draw">
        <span class="draw-span">￥</span>
        <u--input type="number " placeholder="请输入提现金额" border="bottom" clearable></u--input>
      </view>
      <view class="draw-footer">
        <view class="footer-l">可提现余额￥0.00</view>
        <view class="footer-r" @click="handlerWidthDrawBtn">全部提现</view>
      </view>
    </view>

    <view class="draw-box margin-box item-box2">
      <view class="item-l">
        <view class="l-title">预估收益</view>
        <view class="l-text">2021年4月1日 - 2021年4月30日</view>
      </view>
      <view class="item-t">234.56</view>
    </view>

    <view class="draw-box margin-box item-box2">
      <view class="item-l">
        <view class="l-title">已提现收益</view>
        <view class="l-text">2021年1月1日 - 2021年3月30日</view>
      </view>
      <view class="item-t">500.56</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 点击提现
    handlerWidthDrawBtn() {
      uni.showToast({
        title: '没钱',
        icon: 'none',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #efefef;
  padding: 20rpx;
  min-height: calc(100vh - 40rpx);
  .draw-box {
    padding: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .title {
      font-size: 36rpx;
      font-weight: bold;
    }
    .draw {
      display: flex;
      align-items: center;
      margin: 40rpx 0 20rpx;
      .draw-span {
        font-size: 36rpx;
        font-weight: bold;
      }
    }
    .draw-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .footer-l {
        font-size: 40rpx;
        color: #9ca3af;
      }
      .footer-r {
        color: #000;
        font-size: 28rpx;
      }
    }
  }

  .margin-box {
    margin: 20rpx 0;
  }

  .item-box2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item-l {
      font-size: 28rpx;
      .l-title {
        color: #000;
      }
      .l-text {
        color: #9ca3af;
        margin-top: 20rpx;
      }
    }
    .item-t {
      font-size: 28rpx;
      font-weight: bold;
      color: #9ca3af;
    }
  }
}
</style>
