index.wxss 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. /*使屏幕变暗 */
  2. .background_screen {
  3. width: 100%;
  4. height: 100%;
  5. position: fixed;
  6. top: 0;
  7. left: 0;
  8. background: #000;
  9. opacity: 0.4;
  10. overflow: hidden;
  11. z-index: 99;
  12. color: #fff;
  13. }
  14. /*对话框 */
  15. .attr_box {
  16. width: 100%;
  17. position: fixed;
  18. bottom: 0;
  19. left: 0;
  20. z-index: 99;
  21. background-image: linear-gradient(180deg, #FFEBC1 1%, #FEEFCD 54%, #FFFCF0 100%);
  22. border-radius: 40px 40px 0 0;
  23. border-radius: 40px 40px 0px 0px;
  24. border-top-left-radius: 30rpx;
  25. border-top-right-radius: 30rpx;
  26. padding: 29rpx 18rpx;
  27. box-sizing: border-box;
  28. /*兼容 IOS<11.2*/
  29. padding-bottom: constant(safe-area-inset-bottom);
  30. /*兼容 IOS>11.2*/
  31. padding-bottom: env(safe-area-inset-bottom);
  32. }
  33. .attr_box .payBox {
  34. margin-top: 20rpx;
  35. padding: 13rpx 30rpx;
  36. background-color: white;
  37. border-radius: 20rpx;
  38. }
  39. .attr_box .payBox .title {
  40. font-size: 34rpx;
  41. font-weight: bold;
  42. color: #000;
  43. }
  44. .attr_box .payBox .pay {
  45. margin: 20rpx 0rpx;
  46. display: flex;
  47. align-items: center;
  48. justify-content: space-between;
  49. padding: 0rpx 30rpx;
  50. border-radius: 22rpx;
  51. overflow: hidden;
  52. }
  53. .attr_box .payBox .pay .payLeft .pLTitle {
  54. font-size: 36rpx;
  55. font-weight: bold;
  56. }
  57. .attr_box .payBox .pay .payLeft .pLcontent {
  58. font-size: 22rpx;
  59. }
  60. .attr_box .payBox .pay .payRight {
  61. margin: 24rpx 0rpx;
  62. padding: 12rpx 28rpx;
  63. border-radius: 40rpx;
  64. font-size: 24rpx;
  65. font-weight: bold;
  66. }
  67. .attr_box .payBox .vipPay {
  68. background: url('http://reader-wx.ai160.com/images/reader/v3/year.png') no-repeat;
  69. background-size: cover;
  70. }
  71. .attr_box .payBox .vipPay .vipTitle {
  72. color: #FFE6B9;
  73. }
  74. .attr_box .payBox .vipPay .vipContent {
  75. margin-top: 4rpx;
  76. color: #FFE6B9;
  77. }
  78. .attr_box .payBox .vipPay .vipBtn {
  79. background-image: linear-gradient(to bottom, #F4E7A8, #F9EDCF);
  80. color: #211501;
  81. }
  82. .attr_box .payBox .buyPay {
  83. background: url('http://reader-wx.ai160.com/images/reader/v3/10yuan.png') no-repeat;
  84. background-size: cover;
  85. }
  86. .attr_box .payBox .buyPay .payLeft {
  87. color: #7D320A;
  88. font-size: 36rpx;
  89. font-weight: bold;
  90. }
  91. .attr_box .payBox .buyPay .buyBtn {
  92. border: 1rpx solid white;
  93. color: white;
  94. background-color: #7D320A;
  95. }
  96. .attr_box .bindNumber {
  97. padding: 22rpx 30rpx;
  98. margin-top: 20rpx;
  99. display: flex;
  100. align-items: center;
  101. background: url('http://reader-wx.ai160.com/images/reader/v3/year.png') no-repeat;
  102. background-size: cover;
  103. border-radius: 20rpx;
  104. }
  105. .attr_box .bindNumber .desc {
  106. color: white;
  107. }
  108. .attr_box .surplus {
  109. margin-top: 20rpx;
  110. padding: 22rpx 30rpx;
  111. background-color: white;
  112. border-radius: 20rpx;
  113. display: flex;
  114. align-items: center;
  115. justify-content: space-between;
  116. font-size: 32rpx;
  117. }
  118. .attr_box .surplus .title {
  119. font-size: 34rpx;
  120. font-weight: bold;
  121. color: #000;
  122. }
  123. .attr_box .surplus .num {
  124. color: #F97419;
  125. font-weight: bold;
  126. margin-right: 10rpx;
  127. }
  128. .attr_box .taskBox {
  129. margin-top: 20rpx;
  130. padding: 20rpx 10rpx 0rpx;
  131. background-color: white;
  132. border-radius: 20rpx;
  133. }
  134. .attr_box .taskBox .title {
  135. padding: 0rpx 20rpx;
  136. font-size: 34rpx;
  137. font-weight: bold;
  138. color: #000;
  139. }
  140. .attr_box .taskBox .task {
  141. display: flex;
  142. align-items: center;
  143. justify-content: space-between;
  144. padding: 30rpx 22rpx;
  145. border-bottom: 1px solid #EAEAEA;
  146. }
  147. .attr_box .taskBox .task .taskLeft {
  148. display: flex;
  149. align-items: center;
  150. justify-content: space-between;
  151. }
  152. .attr_box .taskBox .task .taskLeft .img {
  153. width: 76rpx;
  154. height: 76rpx;
  155. border-radius: 50%;
  156. }
  157. .attr_box .taskBox .task .taskLeft .taskContent {
  158. margin-left: 40rpx;
  159. }
  160. .attr_box .taskBox .task .taskLeft .taskContent .tcTitle {
  161. font-size: 30rpx;
  162. font-weight: bold;
  163. color: #333;
  164. }
  165. .attr_box .taskBox .task .taskLeft .taskContent .tcNum {
  166. color: #FF6259;
  167. font-size: 26rpx;
  168. }
  169. .attr_box .taskBox .task .taskRight {
  170. width: 138rpx;
  171. text-align: center;
  172. padding: 10rpx 0rpx;
  173. border-radius: 40rpx;
  174. color: white;
  175. background-color: #FC614E;
  176. font-size: 30rpx;
  177. }
  178. .attr_box .taskBox .task .taskRight-close {
  179. color: #6C6C6C;
  180. background: #D0D0D0;
  181. box-shadow: 0 2px 2px 0 #AEABAB;
  182. }
  183. .attr_box .taskBox .task .taskSurplus {
  184. text-align: center;
  185. margin-top: 4rpx;
  186. color: #686868;
  187. font-size: 20rpx;
  188. }
  189. .attr_box .taskBox .advert {
  190. border: none;
  191. }
  192. .attr_box .share_cancel {
  193. position: absolute;
  194. left: 0px;
  195. right: 0px;
  196. margin: auto;
  197. top: -64rpx;
  198. width: 60rpx;
  199. height: 60rpx;
  200. }