invite_users.wxss 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. .box{
  2. display: flex;
  3. flex-direction: column;
  4. align-items: center;
  5. position: relative;
  6. height: 100%;
  7. background: #19D6B9;
  8. padding-bottom: 50rpx;
  9. }
  10. .top{
  11. width: 100%;
  12. height: 630rpx;
  13. background-image: url('http://resource.bike.hanyiyun.com/weapp/yaoqing.png');
  14. background-size: 100% 100%;
  15. margin-bottom: -100rpx;
  16. }
  17. .strategy{
  18. width: 95%;
  19. background: white;
  20. border-radius: 20rpx;
  21. display: flex;
  22. flex-direction: column;
  23. align-items: center;
  24. margin-top: 20rpx;
  25. padding-bottom: 30rpx;
  26. min-height: 330rpx;
  27. }
  28. .title{
  29. display: flex;
  30. align-items: center;
  31. justify-content: center;
  32. padding: 20rpx 0rpx;
  33. }
  34. .title text:nth-of-type(1){
  35. width: 30rpx;
  36. height: 6rpx;
  37. background:linear-gradient(42deg,rgb(240, 238, 238) 0%,rgb(103, 225, 233) 50%,rgb(58, 220, 211) 100%);
  38. }
  39. .title text:nth-of-type(2){
  40. padding: 0rpx 16rpx;
  41. font-size: 32rpx;
  42. font-weight: 800;
  43. }
  44. .title text:nth-of-type(3){
  45. width: 30rpx;
  46. height: 6rpx;
  47. background:linear-gradient(42deg,rgb(58, 220, 211) 0%,rgb(103, 225, 233) 50%,rgb(240, 238, 238) 100%);
  48. }
  49. .strategy .jindu{
  50. display: flex;
  51. flex-direction: column;
  52. align-items: center;
  53. }
  54. .strategy .jindu view{
  55. width: 600rpx;
  56. display: flex;
  57. justify-content: space-between;
  58. font-size: 26rpx;
  59. color: #BABCBC;
  60. padding-top: 6rpx;
  61. }
  62. .strategy .jindu view text{
  63. width: 134rpx;
  64. text-align: center;
  65. }
  66. .strategy .reward{
  67. width: 690rpx;
  68. }
  69. .strategy .reward .card{
  70. width: 100%;
  71. display: flex;
  72. align-items: center;
  73. height: 180rpx;
  74. justify-content: space-around;
  75. margin-top: 20rpx;
  76. /* background: #A5A3A3; */
  77. border-radius: 20rpx;
  78. background-image: url('http://resource.bike.hanyiyun.com/weapp/coupon_card1.png');
  79. background-size: 100% 100%;
  80. }
  81. .strategy .reward .card .detail{
  82. display: flex;
  83. flex-direction: column;
  84. }
  85. .strategy .reward .card .detail text:nth-of-type(1){
  86. font-size:42rpx;
  87. font-family:Source Han Sans SC;
  88. font-weight:800;
  89. color:rgba(255,102,88,1);
  90. }
  91. .strategy .reward .card .detail text:nth-of-type(2){
  92. font-size:24rpx;
  93. font-family:PingFang SC;
  94. font-weight:500;
  95. color:rgba(153,153,153,1);
  96. padding-top: 12rpx;
  97. }
  98. .strategy .reward .card .lingqu{
  99. display: flex;
  100. align-items: center;
  101. justify-content: center;
  102. color: white;
  103. width:88rpx;
  104. height:88rpx;
  105. background:linear-gradient(130deg,rgba(255,143,143,1),rgba(255,39,39,1));
  106. box-shadow:0px 7rpx 35rpx 0px rgba(169,0,0,0.57);
  107. border-radius:50%;
  108. font-size:30rpx;
  109. font-family:Source Han Sans SC;
  110. font-weight:800;
  111. color:rgba(255,255,255,1);
  112. }
  113. .strategy .reward .card .money{
  114. font-size:46rpx;
  115. font-family:PingFang SC;
  116. font-weight:bold;
  117. color:rgba(254,86,31,1);
  118. }
  119. .box .btn{
  120. display: flex;
  121. align-items: center;
  122. justify-content: center;
  123. width:609rpx;
  124. height:68rpx;
  125. background:linear-gradient(42deg,rgba(255,166,55,1) 0%,rgba(255,166,4,1) 50%,rgba(255,114,4,1) 100%);
  126. border-radius:34rpx;
  127. font-size:32rpx;
  128. font-family:PingFang SC;
  129. font-weight:500;
  130. color:rgba(255,255,255,1);
  131. margin-top: 54rpx;
  132. }
  133. .box .onShare{
  134. width:750rpx;
  135. height:350rpx;
  136. background:rgba(255,255,255,1);
  137. border-radius:20rpx 20rpx 0px 0px;
  138. display: flex;
  139. flex-direction: column;
  140. align-items: center;
  141. position: fixed;
  142. bottom: 0;
  143. left: 0;
  144. z-index: 99;
  145. justify-content: space-between;
  146. }
  147. .box .onShare .view{
  148. height: 100rpx;
  149. display: flex;
  150. align-items: center;
  151. width: 100%;
  152. justify-content: center;
  153. }
  154. .box .back{
  155. width: 100%;
  156. height: 100%;
  157. position: fixed;
  158. z-index: 88;
  159. background: #000000;
  160. opacity: 0.7;
  161. }
  162. .box .onShare .list{
  163. width: 40%;
  164. display: flex;
  165. /* align-items: center; */
  166. justify-content: space-between;
  167. }
  168. .box .list view{
  169. display: flex;
  170. flex-direction: column;
  171. align-items: center;
  172. font-size:26rpx;
  173. font-family:PingFang SC;
  174. font-weight:400;
  175. color:rgba(101,103,103,1);
  176. /* padding-left: 100rpx; */
  177. }
  178. .box .list button{
  179. display: flex;
  180. flex-direction: column;
  181. align-items: center;
  182. font-size:26rpx;
  183. font-family:PingFang SC;
  184. font-weight:400;
  185. color:rgba(101,103,103,1);
  186. /* padding-left: 100rpx; */
  187. line-height: normal;
  188. }
  189. .button-hover{
  190. background-color: transparent;
  191. }
  192. .list_none{
  193. height: 230rpx;
  194. display: flex;
  195. flex-direction: column;
  196. align-items: center;
  197. justify-content: center;
  198. font-size:28rpx;
  199. font-family:PingFang SC;
  200. font-weight:500;
  201. color:rgba(101,103,103,1);
  202. }
  203. .user_list{
  204. display: flex;
  205. flex-direction: column;
  206. align-items: center;
  207. width: 95%;
  208. }
  209. .user_list .view{
  210. display: flex;
  211. align-items: center;
  212. width: 100%;
  213. justify-content: space-around;
  214. padding: 20rpx 0rpx;
  215. }
  216. .user_list .user{
  217. display: flex;
  218. flex-direction: column;
  219. align-items: center;
  220. width: 20%;
  221. }
  222. .user_list .user text{
  223. padding-top: 10rpx;
  224. font-size: 26rpx;
  225. color: #363632;
  226. display: -webkit-box;
  227. overflow: hidden;
  228. white-space: normal;
  229. text-overflow: ellipsis;
  230. word-wrap: break-word;
  231. -webkit-line-clamp:1;
  232. -webkit-box-orient: vertical;
  233. width: 100%;
  234. text-align: center;
  235. }
  236. .user_list .status{
  237. display: flex;
  238. flex-direction: column;
  239. align-items: center;
  240. }
  241. .user_list .text{
  242. font-size: 26rpx;
  243. color: #272b2b;
  244. }
  245. .user_list .status{
  246. font-size: 26rpx;
  247. color: #656767;
  248. }