withdraw.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <view class="withdraw">
  3. <view class="content">
  4. <view class="top-box">
  5. <view class="left-box">
  6. <view class="title">
  7. 提现金额
  8. </view>
  9. <input class="money" type="text" :value="money" />
  10. </view>
  11. <view class="btn">
  12. 提现
  13. </view>
  14. </view>
  15. <view class="notice">
  16. 可提现金额¥3000
  17. </view>
  18. </view>
  19. <view class="content">
  20. <view class="item">
  21. <view class="label">
  22. 提现至
  23. </view>
  24. <view class="value" @click="jump">
  25. <view class="card-num">
  26. {{cardName}}(2345)
  27. </view>
  28. <view class="iconfont icon-xiangyou"></view>
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. </template>
  34. <script>
  35. export default {
  36. data() {
  37. return {
  38. money: 0,
  39. cardName:'中国银行'
  40. }
  41. },
  42. methods: {
  43. jump() {
  44. uni.navigateTo({
  45. url:'./bankCard'
  46. })
  47. }
  48. },
  49. created() {
  50. this.cardName = uni.getStorageSync('cardType')
  51. }
  52. }
  53. </script>
  54. <style lang="scss" scoped>
  55. .withdraw{
  56. background: #f5f5f5;
  57. padding: 20rpx 30rpx;
  58. .content{
  59. margin: 20rpx 0;
  60. background: #fff;
  61. border-radius: 16rpx;
  62. }
  63. .top-box{
  64. padding: 28rpx 24rpx;
  65. display: flex;
  66. align-items: center;
  67. justify-content: space-between;
  68. border-bottom: 2rpx solid #F3F3F3;
  69. .left-box{
  70. .title{
  71. color: #181818;
  72. font-size: 28rpx;
  73. }
  74. .money{
  75. color: #222222;
  76. font-weight: bold;
  77. font-size: 36rpx;
  78. margin-top: 16rpx;
  79. }
  80. }
  81. .btn{
  82. width: 140rpx;
  83. height: 60rpx;
  84. line-height: 60rpx;
  85. text-align: center;
  86. color: #fff;
  87. font-size: 28rpx;
  88. background: #2836FE;
  89. box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255,255,255,0.16);
  90. border-radius: 46rpx ;
  91. }
  92. }
  93. .notice{
  94. color: #999999;
  95. font-size: 24rpx;
  96. padding: 28rpx 24rpx;
  97. }
  98. .item{
  99. display: flex;
  100. align-items: center;
  101. justify-content: space-between;
  102. padding: 28rpx 24rpx;
  103. .label{
  104. color: #181818;
  105. font-size: 28rpx;
  106. }
  107. .value{
  108. font-size: 28rpx;
  109. color: #222222;
  110. display: flex;
  111. align-items: center;
  112. .card-num{
  113. }
  114. .iconfont{
  115. color: #999;
  116. }
  117. }
  118. }
  119. }
  120. </style>