index.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <template>
  2. <view class="account">
  3. <view class="search flex aic">
  4. <u-search placeholder="请输入充值账户" searchIconColor="#2A200A" placeholderColor="#959AA3" bgColor="#F2F3F7" v-model="searchValue" :showAction="false" maxlength="30" height="60rpx" @search="searchMobile"></u-search>
  5. <view class="date flex aic">
  6. <text>日期</text>
  7. <re-icon name="icon-xiala" :customStyle="{ fontSize: '10rpx',marginLeft:'10rpx'}"></re-icon>
  8. </view>
  9. </view>
  10. <view class="tabulation">
  11. <mescroll-body height="100%" ref="mescrollRef" bottom="200" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
  12. <view class="list">
  13. <view class="list-item">
  14. <view class="top flex aic jcsb">
  15. <text class="word">充值游戏币</text>
  16. <text class="money">+3456</text>
  17. </view>
  18. <view class="btom flex-column">
  19. <text>充值账户:178 8394 2382</text>
  20. <text>充值账户:178 8394 2382</text>
  21. <text>充值账户:178 8394 2382</text>
  22. <text>充值账户:178 8394 2382</text>
  23. <text>充值账户:178 8394 2382</text>
  24. <text>充值账户:178 8394 2382</text>
  25. </view>
  26. </view>
  27. </view>
  28. <no-data :statusType="2" :top="0" tipsText="暂无数据"></no-data>
  29. </mescroll-body>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. import MescrollMixin from "@/plugins/mescroll/components/mescroll-uni/mescroll-mixins.js"
  35. import MescrollBody from '@/plugins/mescroll/components/mescroll-uni/mescroll-uni.vue'
  36. export default {
  37. components:{
  38. MescrollBody
  39. },
  40. data(){
  41. return{
  42. searchValue:''
  43. }
  44. },
  45. mixins: [MescrollMixin],
  46. }
  47. </script>
  48. <style lang="scss" scoped>
  49. .account{
  50. height: 100%;
  51. background: #fff;
  52. display: flex;
  53. flex-direction: column;
  54. .search{
  55. padding: 12rpx 24rpx;
  56. .date{
  57. width: 112rpx;
  58. height: 48rpx;
  59. display: flex;
  60. justify-content: center;
  61. align-items: center;
  62. }
  63. }
  64. .tabulation{
  65. // flex-grow: 1;
  66. width: 100%;
  67. height: calc(100% - 43.6rpx);
  68. overflow: hidden;
  69. background: linear-gradient(360deg,#FFFFFF 60%, #FF911A 100%);
  70. padding: 24rpx 20rpx;
  71. .list{
  72. height: 100%;
  73. background: #FFFFFF;
  74. border-radius: 16rpx;
  75. padding: 32rpx;
  76. .list-item{
  77. margin-bottom: 56rpx;
  78. .top{
  79. font-size: 32rpx;
  80. .word{
  81. font-weight: 500;
  82. color: #000000;
  83. }
  84. .money{
  85. font-weight: bold;
  86. color: #EF3B24;
  87. }
  88. }
  89. .btom{
  90. margin-top: 24rpx;
  91. text{
  92. font-weight: 400;
  93. font-size: 28rpx;
  94. color: #7a7a7a;
  95. margin-bottom: 16rpx;
  96. }
  97. text:nth-last-child(1){
  98. margin-bottom: 0;
  99. }
  100. }
  101. }
  102. .list-item:nth-last-child(1){
  103. margin-bottom: 0;
  104. }
  105. }
  106. }
  107. }
  108. </style>