index.scss 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. .withdrawal {
  2. width: 100vw;
  3. min-height: 100vh;
  4. background-color: rgb(247, 247, 247);
  5. padding: 32rpx;
  6. padding-bottom: 50rpx;
  7. box-sizing: border-box;
  8. .withdrawal-box {
  9. width: 100%;
  10. height: 192rpx;
  11. background-color: #ffffff;
  12. border-radius: 16rpx;
  13. padding: 32rpx;
  14. box-sizing: border-box;
  15. position: relative;
  16. .box-text {
  17. height: 100%;
  18. @include flex(space-between, column);
  19. align-items: flex-start;
  20. text {
  21. &:nth-of-type(1) {
  22. color: rgba(0, 0, 0, 0.4);
  23. font-size: 32rpx;
  24. font-weight: 600;
  25. }
  26. &:nth-of-type(2) {
  27. color: #ea5c1e;
  28. font-size: 48rpx;
  29. font-weight: 900;
  30. }
  31. }
  32. }
  33. .goWithd {
  34. position: absolute;
  35. top: 50%;
  36. transform: translateY(-50%);
  37. right: 38rpx;
  38. width: 148rpx;
  39. height: 60rpx;
  40. border-radius: 30rpx;
  41. text-align: center;
  42. line-height: 60rpx;
  43. background: linear-gradient(180deg, #fe4b1e 0%, #fb8857 100%);
  44. color: #ffffff;
  45. font-size: 28rpx;
  46. }
  47. }
  48. .prompt {
  49. margin-top: 8rpx;
  50. margin-bottom: 32rpx;
  51. font-size: 20rpx;
  52. color: rgba(0, 0, 0, 0.4);
  53. }
  54. .withdrawal-container {
  55. .withdrawal-title {
  56. margin-bottom: 16rpx;
  57. text {
  58. color: rgba(0, 0, 0, 0.9);
  59. font-size: 32rpx;
  60. font-weight: 600;
  61. }
  62. }
  63. .withdrawal-list {
  64. padding: 0 32rpx;
  65. background-color: #ffffff;
  66. border-radius: 16rpx;
  67. .list-item {
  68. width: 100%;
  69. height: 168rpx;
  70. padding: 32rpx 0;
  71. @include flex(space-between, null);
  72. border-bottom: 2rpx solid #e7e7e7;
  73. box-sizing: border-box;
  74. .item-text {
  75. height: 100%;
  76. @include flex(space-between, column);
  77. align-items: flex-start;
  78. text {
  79. &:nth-of-type(1) {
  80. color: rgba(0, 0, 0, 0.9);
  81. font-size: 32rpx;
  82. font-weight: 600;
  83. }
  84. &:nth-of-type(2) {
  85. color: rgba(0, 0, 0, 0.4);
  86. font-size: 28rpx;
  87. }
  88. }
  89. }
  90. .item-price {
  91. color: #ea5c1e;
  92. font-weight: 900;
  93. font-size: 28rpx;
  94. }
  95. }
  96. }
  97. }
  98. .popup-container {
  99. width: 100%;
  100. padding: 0 32rpx;
  101. box-sizing: border-box;
  102. padding-bottom: 50rpx;
  103. .popup-title {
  104. margin-top: 48rpx;
  105. text-align: center;
  106. color: rgba(0, 0, 0, 0.9);
  107. font-size: 32rpx;
  108. font-weight: 600;
  109. }
  110. .popup-type {
  111. margin-top: 32rpx;
  112. .type-title {
  113. color: rgba(0, 0, 0, 0.9);
  114. font-size: 28rpx;
  115. font-weight: 600;
  116. margin-bottom: 16rpx;
  117. }
  118. .type-btn {
  119. @include flex(flex-start, null, 32rpx);
  120. flex-wrap: wrap;
  121. .btn-box {
  122. padding: 16rpx 32rpx;
  123. font-size: 24rpx;
  124. color: #444444;
  125. border: 2rpx solid #c9c9c9;
  126. box-sizing: border-box;
  127. border-radius: 8rpx;
  128. }
  129. .active {
  130. background-color: rgba(254, 75, 30, 0.1);
  131. border-color: #fe4b1e;
  132. color: #fe4b1e;
  133. }
  134. }
  135. }
  136. .popup-amount {
  137. @include flex(flex-start, null, 16rpx);
  138. margin-top: 40rpx;
  139. margin-bottom: 32rpx;
  140. text {
  141. &:nth-of-type(1) {
  142. color: rgba(0, 0, 0, 0.9);
  143. font-size: 28rpx;
  144. font-weight: 600;
  145. }
  146. &:nth-of-type(2) {
  147. color: rgba(0, 0, 0, 0.4);
  148. font-size: 24rpx;
  149. }
  150. }
  151. }
  152. .popup-ipt {
  153. .ipt-left {
  154. color: rgba(0, 0, 0, 0.9);
  155. font-weight: 600;
  156. font-size: 64rpx;
  157. }
  158. .ipt-right {
  159. color: #ea5c1e;
  160. font-size: 28rpx;
  161. }
  162. }
  163. .popup-to {
  164. margin-top: 32rpx;
  165. margin-bottom: 48rpx;
  166. @include flex(space-between, null, null);
  167. text {
  168. color: rgba(0, 0, 0, 0.9);
  169. font-size: 28rpx;
  170. }
  171. }
  172. .popup-btn {
  173. width: 100%;
  174. height: 96rpx;
  175. background-color: #fe4b1e;
  176. text-align: center;
  177. line-height: 96rpx;
  178. color: #ffffff;
  179. font-size: 32rpx;
  180. font-weight: 500;
  181. border-radius: 16rpx;
  182. }
  183. }
  184. ::v-deep .tui-input__self {
  185. height: 72rpx;
  186. caret-color: #ea5c1e;
  187. }
  188. }