purse.wxss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. /* pages/user/purse.wxss */
  2. Page {
  3. background-color: #D13829;
  4. padding-top: 1rpx;
  5. }
  6. .purse__detail {
  7. background-image: linear-gradient(-90deg, #F1472E 3%, #F8923E 97%);
  8. border: 14rpx solid #FFB38F;
  9. border-radius: 20rpx;
  10. box-shadow: 0 4rpx 8rpx 0 rgba(120, 47, 47, 0.5), inset 2rpx 2rpx 12rpx 0 rgba(125, 61, 37, 0.2);
  11. height: 374rpx;
  12. margin: 32rpx 32rpx 52rpx;
  13. padding: 16rpx 32rpx 32rpx;
  14. width: 686rpx;
  15. }
  16. .purse__text {
  17. color: #fff;
  18. font-size: 24rpx;
  19. }
  20. .purse__text_right {
  21. float: right;
  22. text-decoration: underline;
  23. }
  24. .purse__withdraw {
  25. color: #fff;
  26. font-size: 64rpx;
  27. font-weight: bold;
  28. height: 82rpx;
  29. margin-top: 32rpx;
  30. }
  31. .purse__withdraw_btn {
  32. background-color: transparent;
  33. background-image: linear-gradient(180deg, #FFFFFF 0%, #FFD0B7 100%);
  34. box-shadow: 0 10rpx 40rpx 0 rgba(142, 40, 19, 0.36);
  35. border-radius: 30rpx;
  36. color: #F14A2F;
  37. float: right;
  38. font-size: 30rpx;
  39. font-weight: bold;
  40. height: 60rpx;
  41. line-height: 60rpx;
  42. margin: 15rpx 32rpx 0 0;
  43. width: 132rpx;
  44. }
  45. .reward::after {
  46. height: 120%;
  47. left: 10rpx;
  48. top: 30%;
  49. }
  50. .purse__money {
  51. display: flex;
  52. flex-direction: row;
  53. margin: 40rpx -16rpx 0;
  54. }
  55. .purse__money_item {
  56. color: #fff;
  57. flex: 1;
  58. font-size: 24rpx;
  59. height: 118rpx;
  60. margin: 0 16rpx;
  61. padding: 12rpx 0 0;
  62. position: relative;
  63. text-align: center;
  64. }
  65. .purse__money_item::before {
  66. background: #FFFFFF;
  67. border-radius: 4rpx;
  68. content: '';
  69. height: 100%;
  70. left: 0;
  71. opacity: 0.18;
  72. position: absolute;
  73. top: 0;
  74. width: 100%;
  75. }
  76. .purse__money_item text {
  77. display: block;
  78. font-size: 44rpx;
  79. font-weight: bold;
  80. margin-top: 10rpx;
  81. }
  82. .purse__rule {
  83. height: 472rpx;
  84. margin-bottom: 52rpx;
  85. position: relative;
  86. }
  87. .purse__rule_head {
  88. height: 98rpx;
  89. left: 50%;
  90. margin-left: -232rpx;
  91. position: absolute;
  92. top: 0;
  93. width: 464rpx;
  94. z-index: 1;
  95. }
  96. .purse__rule_bg {
  97. height: 430rpx;
  98. left: 32rpx;
  99. position: absolute;
  100. top: 48rpx;
  101. width: 686rpx;
  102. }
  103. .purse__rule_detail {
  104. font-size: 24rpx;
  105. font-weight: bold;
  106. height: 260rpx;
  107. left: 100rpx;
  108. position: absolute;
  109. top: 144rpx;
  110. width: 550rpx;
  111. }
  112. .purse__rule_detail label {
  113. display: block;
  114. margin: 10rpx 10rpx 10rpx 20rpx;
  115. padding-left: 25rpx;
  116. position: relative;
  117. }
  118. .purse__rule_detail label::before {
  119. background-color: #333;
  120. content: '';
  121. height: 10rpx;
  122. left: 0;
  123. position: absolute;
  124. top: 18rpx;
  125. transform: rotate(45deg);
  126. width: 10rpx;
  127. }
  128. .purse__rule_detail text {
  129. color: #FF1A19;
  130. line-height: 44rpx;
  131. }
  132. .purse__rule_detail .tag {
  133. background-color: #FF1A19;
  134. border-radius: 28rpx 24rpx 24rpx 0;
  135. color: #fff;
  136. display: inline-block;
  137. font-size: 16rpx;
  138. font-weight: normal;
  139. line-height: 32rpx;
  140. margin: 0 5rpx;
  141. padding: 0 20rpx;
  142. }
  143. .purse__btn_group {
  144. margin: 0 32rpx;
  145. }
  146. .purse__share {
  147. background-image: linear-gradient(-180deg, #E01CFF 0%, #7D08F9 100%);
  148. border-radius: 50rpx;
  149. float: left;
  150. font-size: 32rpx;
  151. height: 100rpx;
  152. line-height: 100rpx;
  153. width: 456rpx;
  154. }
  155. .purse__rank {
  156. background-image: linear-gradient(-180deg, #FFF42C 0%, #FF9F2C 100%);
  157. border-radius: 50rpx;
  158. color: #FF2017;
  159. float: left;
  160. font-size: 32rpx;
  161. font-weight: bold;
  162. height: 100rpx;
  163. line-height: 100rpx;
  164. margin-right: 20rpx;
  165. width: 210rpx;
  166. }