payList.wxss 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. .mine {
  2. width: 100%;
  3. min-height: 100vh;
  4. background-image: url("https://video-h5.fyshark.com/total_picture/1665728333105.png");
  5. background-repeat: repeat;
  6. background-size: 100% 100%;
  7. padding-top: 88rpx;
  8. }
  9. .my-pay-list-div {
  10. background-color: #fff;
  11. border-radius: 32rpx;
  12. margin-left: 32rpx;
  13. margin-right: 32rpx;
  14. padding: 24rpx 24rpx;
  15. }
  16. .my-pay-list-hint {
  17. margin-top: 24rpx;
  18. font-size: 24rpx;
  19. margin-left: 32rpx;
  20. margin-right: 32rpx;
  21. line-height: 48rpx;
  22. }
  23. .my-pay-list-hint-text {
  24. color: rgba(0, 0, 0, 0.4);
  25. font-weight: bold;
  26. }
  27. .title {
  28. display: flex;
  29. align-items: center;
  30. }
  31. .weixin-icon {
  32. width: 52rpx;
  33. height: 52rpx;
  34. }
  35. .type-name {
  36. margin-left: 6rpx;
  37. font-size: 28rpx;
  38. font-family: PingFang SC;
  39. font-weight: 400;
  40. color: rgba(0, 0, 0, 0.4);
  41. line-height: 54rpx;
  42. }
  43. .my-money-coin {
  44. position: absolute;
  45. right: 60rpx;
  46. height: 26rpx;
  47. line-height: 26rpx;
  48. }
  49. .my-money-coin text {
  50. font-size: 28rpx;
  51. font-weight: bold;
  52. color: rgba(0, 0, 0, 0.4);
  53. }
  54. .my-money-coin-text {
  55. color: #E3B03D !important;
  56. }
  57. .recharge-list {
  58. display: flex;
  59. justify-content: space-between;
  60. flex-wrap: wrap;
  61. }
  62. .recharge-info {
  63. width: 45%;
  64. background-color: aliceblue;
  65. margin-bottom: 60rpx;
  66. }
  67. .bottom {
  68. display: flex;
  69. justify-content: space-between;
  70. }
  71. .active {
  72. border: 4rpx solid rgba(255, 166, 0, 0.87);
  73. }
  74. .pay-item-div {
  75. margin-top: 28rpx;
  76. width: 300rpx;
  77. height: 208rpx;
  78. background-image: url('https://video-h5.fyshark.com/total_picture/1665728895447.png');
  79. background-size: 300rpx 208rpx;
  80. display: flex;
  81. position: relative;
  82. flex-direction: column;
  83. }
  84. .pay-item-tag {
  85. display: flex;
  86. position: absolute;
  87. right: 0rpx;
  88. width: 80rpx;
  89. height: 80rpx;
  90. background-image: url('https://video-h5.fyshark.com/total_picture/1665729016043.png');
  91. background-size: 80rpx 80rpx;
  92. }
  93. .pay-item-tag-txt {
  94. position: absolute;
  95. right: 4rpx;
  96. top: 12rpx;
  97. font-size: 22rpx;
  98. color: #FFFFFF;
  99. transform: rotate(45deg);
  100. }
  101. .pay-item-money {
  102. width: 100%;
  103. text-align: center;
  104. bottom: 120rpx;
  105. font-weight: bold;
  106. height: 60rpx;
  107. position: absolute;
  108. font-size: 60rpx;
  109. }
  110. .pay-item-money text {
  111. font-size: 60rpx;
  112. color: #E3B03D;
  113. }
  114. .pay-item-money-txt {
  115. font-size: 32rpx !important;
  116. }
  117. .pay-item-line {
  118. position: absolute;
  119. top: 106rpx;
  120. width: 252rpx;
  121. height: 2rpx;
  122. left: 24rpx;
  123. background-image: url('https://video-h5.fyshark.com/total_picture/1665729545211.png');
  124. background-size: 252rpx 2rpx;
  125. }
  126. .pay-item-coin text {
  127. width: 300rpx;
  128. height: 26rpx;
  129. line-height: 26rpx;
  130. font-size: 28rpx;
  131. opacity: 0.9;
  132. position: absolute;
  133. bottom: 62rpx;
  134. text-align: center;
  135. }
  136. .pay-item-pin {
  137. position: absolute;
  138. left: 0rpx;
  139. bottom: 16rpx;
  140. width: 176rpx;
  141. height: 36rpx;
  142. background-image: url("https://video-h5.fyshark.com/total_picture/1665729591666.png");
  143. background-size: 176rpx 36rpx;
  144. background-repeat: no-repeat;
  145. padding-left: 24rpx;
  146. font-size: 20rpx;
  147. font-family: PingFang SC;
  148. font-weight: bold;
  149. color: #1A1003;
  150. line-height: 38rpx;
  151. font-weight: 400;
  152. }
  153. .pay-item-div:active {
  154. background-image: url('https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1663313681801.png');
  155. }
  156. .recharge-tips {
  157. font-size: 36rpx;
  158. font-family: PingFang SC;
  159. font-weight: 400;
  160. text-align: center;
  161. margin-top: 40rpx;
  162. color: rgba(0, 0, 0, 0.4);
  163. }
  164. .open-unlock {
  165. margin-top: 42rpx;
  166. position: relative;
  167. left: 50%;
  168. transform: translateX(-50%);
  169. width: 400rpx;
  170. height: 60rpx;
  171. text-align: center;
  172. line-height: 60rpx;
  173. background: #FF5819;
  174. border-radius: 30rpx;
  175. font-size: 28rpx;
  176. font-family: PingFang SC;
  177. font-weight: bold;
  178. color: rgba(255, 255, 255, .8);
  179. }
  180. .tabble {
  181. width: 100%;
  182. z-index: 100000;
  183. position: relative;
  184. display: flex;
  185. align-items: center;
  186. left: 0;
  187. top: 0;
  188. }
  189. .back {
  190. display: flex;
  191. align-items: center;
  192. font-size: 28rpx;
  193. font-family: PingFang SC;
  194. font-weight: 400;
  195. color: #FFFFFF;
  196. }
  197. .back-icon {
  198. width: 40rpx;
  199. height: 40rpx;
  200. margin-right: 16rpx;
  201. }