帧视界壹通告,付费看视频的微信小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

221 lines
5.1 KiB

11 months ago
11 months ago
11 months ago
11 months ago
  1. <template>
  2. <view class="purse">
  3. <!--顶部导航栏-->
  4. <navbar leftClick @leftClick="$utils.navigateBack" title="我的钱包"/>
  5. <!--内容区-->
  6. <view class="content">
  7. <!--上部分-->
  8. <view class="content-top">
  9. <view class="aaa">
  10. <view class="top">1240,045</view>
  11. <view class="bottom">可提现金额</view>
  12. </view>
  13. <view class="b">
  14. <view class="bb">
  15. <view class="top">今日收益</view>
  16. <view class="bottom">1234</view>
  17. </view>
  18. <view class="bb">
  19. <view class="top">累计收益</view>
  20. <view class="bottom">1234</view>
  21. </view>
  22. <view class="bb">
  23. <view class="top">已提现</view>
  24. <view class="bottom">1234</view>
  25. </view>
  26. </view>
  27. </view>
  28. <!--下部分-->
  29. <view class="content-bottom">
  30. <view class="card-record">卡片记录</view>
  31. <!--具体银行卡-->
  32. <view class="cards" >
  33. <view class="cardItem" v-for="(item, index) in 5" :key="index">
  34. <view class="cardImage">
  35. <image src="/static/image/addBankCard/1.svg" style="width: 100%;height: 100%;"></image>
  36. </view>
  37. <view class="cardInfo">
  38. <view class="cardNum">
  39. 6222021000000000018
  40. </view>
  41. <view class="cardName">
  42. 工商银行
  43. </view>
  44. </view>
  45. <view class="cardIcon">
  46. <image src="/static/image/purse/1.svg" style="width: 70%;height: 70%;"></image>
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. <!--收益记录和去提现-->
  53. <span class="income-record" @click="gotoIncomeRecordPage">收益记录</span>
  54. <button class="withdraw-button" @click="gotoWithdrawPage">去提现</button>
  55. </view>
  56. </template>
  57. <script>
  58. export default {
  59. data() {
  60. return {};
  61. },
  62. methods: {
  63. // 跳转到收益记录页面
  64. gotoIncomeRecordPage() {
  65. this.$utils.navigateTo('/pages/mine/incomeRecord');
  66. },
  67. // 跳转到提现页面
  68. gotoWithdrawPage() {
  69. this.$utils.navigateTo('/pages/mine/withdraw');
  70. }
  71. }
  72. }
  73. </script>
  74. <style lang="scss" scoped>
  75. .purse {
  76. .content {
  77. .content-top {
  78. display: flex;
  79. flex-direction: column;
  80. align-items: center;
  81. padding-top: 60rpx;
  82. background-color: #f8faff;
  83. height: 18vh;
  84. .aaa {
  85. color: #000000;
  86. .top {
  87. font-size: 50rpx;
  88. }
  89. .bottom {
  90. font-size: 14px;
  91. display: flex;
  92. justify-content: center;
  93. align-items: center;
  94. }
  95. }
  96. .b {
  97. display: flex;
  98. justify-content: center;
  99. align-items: center;
  100. gap: 100rpx;
  101. width: 100%;
  102. margin: 30rpx 40rpx 0 40rpx;
  103. color: #4b4b4d;
  104. .bb {
  105. display: flex;
  106. flex-direction: column;
  107. align-items: center;
  108. justify-content: center;
  109. gap: 10px;
  110. }
  111. }
  112. }
  113. .content-bottom {
  114. border-radius: 50rpx 50rpx 0 0;
  115. box-shadow: 0 -10rpx 10rpx rgba(0, 0, 0, 0.2); /* 仅上边的阴影效果 */
  116. background-color: #fff;
  117. height: calc(82vh - 240rpx);
  118. width: 100vw;
  119. .card-record {
  120. font-size: 34rpx;
  121. padding: 40rpx 0 0 40rpx;
  122. }
  123. .cards {
  124. display: flex;
  125. flex-direction: column;
  126. gap: 20rpx;
  127. //width: 100vw;
  128. padding: 40rpx;
  129. .cardItem {
  130. display: flex;
  131. gap: 20rpx;
  132. height: 100rpx;
  133. //border: 1px solid red;
  134. //width: 100vw;
  135. .cardImage {
  136. width: 30%;
  137. //height: 100%;
  138. }
  139. .cardInfo {
  140. display: flex;
  141. flex-direction: column;
  142. justify-content: space-evenly;
  143. gap: 6rpx;
  144. width: 60%;
  145. .cardName {
  146. font-size: 28rpx;
  147. color: #8f92a1;
  148. }
  149. .cardNum {
  150. font-size: 24rpx;
  151. color: #000000;
  152. }
  153. }
  154. .cardIcon {
  155. width: 10%;
  156. }
  157. }
  158. }
  159. }
  160. }
  161. .withdraw-button {
  162. position: fixed;
  163. bottom: 80rpx;
  164. left: 16px; // 与页面左边保持一定距离
  165. right: 16px; // 与页面右边保持一定距离
  166. background: $uni-linear-gradient-btn-color; // 按钮背景渐变
  167. color: white; // 按钮文字颜色
  168. text-align: center; // 文字居中
  169. padding: 10px 0; // 内边距,增加按钮的高度
  170. font-size: 18px; // 按钮文字大小
  171. z-index: 1000; // 确保按钮位于其他内容的上方
  172. display: flex;
  173. justify-content: center;
  174. align-items: center;
  175. width: 50%;
  176. height: 80rpx;
  177. border-radius: 10rpx;
  178. }
  179. .income-record {
  180. position: fixed;
  181. bottom: 160rpx;
  182. right: 40%;
  183. margin-bottom: 40rpx;
  184. background: $uni-linear-gradient-color;
  185. -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
  186. -webkit-text-fill-color: transparent; /*给文字设置成透明*/
  187. }
  188. }
  189. </style>