share.wxss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. .pinStatus {
  2. padding: 30rpx;
  3. text-align: center;
  4. }
  5. .pinStatus .title {
  6. color: #6fc667;
  7. font-size: 35rpx;
  8. margin-bottom: 20rpx;
  9. }
  10. .pinStatus .title .iconfont {
  11. font-size: 35rpx;
  12. }
  13. .pinStatus .tip {
  14. font-size: 24rpx;
  15. color: #bbb;
  16. }
  17. .pinStatus .tip text {
  18. color: #93bdee;
  19. }
  20. .pinMember {
  21. padding: 30rpx;
  22. text-align: center;
  23. }
  24. .pinMember .title {
  25. margin-bottom: 15rpx;
  26. }
  27. .pinMember .count-down {
  28. display: flex;
  29. align-items: center;
  30. justify-content: center;
  31. }
  32. .count-down-left-text {
  33. margin-right: 10rpx;
  34. }
  35. .pinMember .item-time {
  36. color: #fff;
  37. background-color: #333;
  38. font-size: 20rpx;
  39. padding: 2rpx 4rpx;
  40. border-radius: 5rpx;
  41. width: 28rpx;
  42. }
  43. .pinMember .status .failTit {
  44. font-size: 28rpx;
  45. }
  46. .pinMember .status .tip {
  47. color: #999;
  48. font-size: 24rpx;
  49. margin-top: 10rpx;
  50. }
  51. .pinMemberList {
  52. display: flex;
  53. flex-wrap: wrap;
  54. margin: 30rpx 0 20rpx;
  55. justify-content: center;
  56. }
  57. .pinMemberList .item {
  58. position: relative;
  59. padding-left: 53rpx;
  60. margin-bottom: 20rpx;
  61. }
  62. .pinMemberList .item:nth-child(5n+1) {
  63. padding-left: 0;
  64. }
  65. .pinMemberList .avatar {
  66. width: 85rpx;
  67. height: 85rpx;
  68. border-radius: 50%;
  69. overflow: hidden;
  70. left: 0;
  71. }
  72. .pinMemberList .iconfont {
  73. display: inline-block;
  74. color: #e4e4e4;
  75. font-size: 85rpx;
  76. text-align: center;
  77. }
  78. .pinMemberList .item .name {
  79. position: absolute;
  80. display: inline-block;
  81. background: #fb9135;
  82. color: #fff;
  83. border-radius: 15rpx;
  84. font-size: 20rpx;
  85. padding: 5rpx 8rpx;
  86. bottom: 8rpx;
  87. right: -20rpx;
  88. line-height: 1;
  89. border: .1rpx solid #fff;
  90. }
  91. .btn {
  92. background: linear-gradient(90deg, #ff5041 0%, #ff695c 100%);
  93. color: #fff;
  94. margin: 0 30rpx 10rpx;
  95. height: 84rpx;
  96. line-height: 84rpx;
  97. font-size: 32rpx;
  98. border-radius: 42rpx;
  99. }
  100. button.btn::after {
  101. border: 0;
  102. }
  103. .goodsInfo {
  104. position: relative;
  105. }
  106. .goodsInfo .iconfont {
  107. position: absolute;
  108. right: 50rpx;
  109. top: 50rpx;
  110. font-size: 120rpx;
  111. color: #ccc;
  112. z-index: 1;
  113. }
  114. .guessLike {
  115. margin-top: 30rpx;
  116. padding-bottom: 30rpx;
  117. }
  118. .guessLikeTitle {
  119. padding: 30rpx;
  120. font-size: 32rpx;
  121. text-align: center;
  122. font-weight: bold;
  123. color: #666;
  124. }
  125. /* 规则 */
  126. .pinIntro {
  127. color: #333;
  128. font-size: 26rpx;
  129. }
  130. .pinIntro .pinIntro-top {
  131. padding: 30rpx;
  132. border-bottom: 0.1rpx solid #efefef;
  133. }
  134. .pinIntro .pinIntro-title {
  135. font-weight: bold;
  136. color: #000;
  137. }
  138. .pinIntro .iconfont {
  139. font-size: 24rpx;
  140. margin-top: 2rpx;
  141. }
  142. .pinIntro-bot {
  143. padding: 30rpx;
  144. }
  145. .pinIntro .rule-item {
  146. position: relative;
  147. text-align: center;
  148. z-index: 1;
  149. }
  150. .pinIntro .rule-item::before {
  151. content: "";
  152. position: absolute;
  153. left: 80rpx;
  154. right: -100%;
  155. top: 42rpx;
  156. border-bottom: 4rpx dotted #ccc;
  157. z-index: -1;
  158. }
  159. .pinIntro .rule-item:last-child:before {
  160. content: none;
  161. }
  162. .pinIntro .rule-item .step {
  163. background-color: #ededed;
  164. font-size: 36rpx;
  165. width: 80rpx;
  166. height: 80rpx;
  167. border-radius: 50%;
  168. color: #666;
  169. line-height: 80rpx;
  170. margin: 0 auto 10rpx;
  171. }
  172. .pinIntro .rule-item .p {
  173. font-size: 26rpx;
  174. color: #333;
  175. line-height: 1.2;
  176. }
  177. /* 团长信息 */
  178. .group {
  179. padding: 20rpx 30rpx;
  180. display: flex;
  181. align-items: center;
  182. margin-top: 20rpx;
  183. }
  184. .group-avatar image {
  185. width: 94rpx;
  186. height: 94rpx;
  187. border-radius: 10rpx;
  188. }
  189. .group-m {
  190. flex: 1;
  191. margin: 0 15rpx;
  192. width: 0;
  193. }
  194. .group-btn {
  195. background: #ff5344;
  196. color: #fff;
  197. padding: 10rpx 30rpx;
  198. border-radius: 60rpx;
  199. }
  200. .group-title {
  201. font-size: 28rpx;
  202. color: #333;
  203. overflow: hidden;
  204. text-overflow:ellipsis;
  205. white-space: nowrap;
  206. }
  207. .group-desc {
  208. font-size: 24rpx;
  209. color: #999;
  210. margin-top: 6rpx;
  211. display: -webkit-box;
  212. -webkit-box-orient: vertical;
  213. -webkit-line-clamp: 2;
  214. overflow: hidden;
  215. }
  216. .group-r-icon {
  217. width: 20rpx;
  218. height: 36rpx;
  219. vertical-align: middle;
  220. }
  221. .pin-more {
  222. text-align: center;
  223. padding-bottom: 20rpx;
  224. font-size: 24rpx;
  225. display: flex;
  226. align-items: center;
  227. justify-content: center;
  228. color: #ff5344;
  229. }
  230. .pin-more .iconfont {
  231. color: #ff5344;
  232. }