index.wxss 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. .rankingBox {
  2. width: 100vw;
  3. height: 100vh;
  4. display: flex;
  5. flex-direction: column;
  6. }
  7. .rankingBox .podiumBox {
  8. position: relative;
  9. height: 510rpx;
  10. background-size: cover;
  11. }
  12. .rankingBox .podiumBox .dateBox {
  13. position: relative;
  14. margin-top: 56rpx;
  15. font-size: 28rpx;
  16. text-align: center;
  17. color: white;
  18. }
  19. .rankingBox .podiumBox .dateBox .dataTitle {
  20. position: absolute;
  21. left: 194rpx;
  22. }
  23. .rankingBox .podiumBox .dateBox .interval {
  24. position: absolute;
  25. left: 314rpx;
  26. }
  27. .rankingBox .podiumBox .podiumContent {
  28. position: absolute;
  29. top: 222rpx;
  30. width: 100%;
  31. }
  32. .rankingBox .podiumBox .podiumContent .user {
  33. position: absolute;
  34. width: 150rpx;
  35. display: flex;
  36. flex-direction: column;
  37. align-items: center;
  38. }
  39. .rankingBox .podiumBox .podiumContent .user .avatar {
  40. width: 92rpx;
  41. height: 92rpx;
  42. border-radius: 50%;
  43. }
  44. .rankingBox .podiumBox .podiumContent .user .iconBox {
  45. margin: 8rpx 0rpx 4rpx;
  46. display: flex;
  47. align-items: center;
  48. }
  49. .rankingBox .podiumBox .podiumContent .user .iconBox .icon {
  50. width: 30rpx;
  51. height: 30rpx;
  52. }
  53. .rankingBox .podiumBox .podiumContent .user .iconBox .num {
  54. margin-left: 6rpx;
  55. color: white;
  56. font-size: 28rpx;
  57. }
  58. .rankingBox .podiumBox .podiumContent .user .nickName {
  59. text-align: center;
  60. font-size: 24rpx;
  61. color: white;
  62. width: 100%;
  63. }
  64. .rankingBox .podiumBox .podiumContent .first {
  65. top: 0rpx;
  66. left: 304rpx;
  67. }
  68. .rankingBox .podiumBox .podiumContent .second {
  69. top: 53rpx;
  70. left: 114rpx;
  71. }
  72. .rankingBox .podiumBox .podiumContent .second .avatar {
  73. width: 84rpx;
  74. height: 84rpx;
  75. }
  76. .rankingBox .podiumBox .podiumContent .third {
  77. top: 72rpx;
  78. right: 112rpx;
  79. }
  80. .rankingBox .podiumBox .podiumContent .third .avatar {
  81. width: 84rpx;
  82. height: 84rpx;
  83. }
  84. .rankingBox .podiumList {
  85. flex: 1;
  86. overflow: hidden;
  87. }
  88. .rankingBox .podiumList .scrollBox {
  89. height: 100%;
  90. padding: 0rpx 30rpx;
  91. box-sizing: border-box;
  92. }
  93. .rankingBox .podiumList .scrollBox .row {
  94. display: flex;
  95. align-items: center;
  96. justify-content: space-between;
  97. padding: 23rpx 0rpx;
  98. border-bottom: 1rpx solid #ddd;
  99. }
  100. .rankingBox .podiumList .scrollBox .row .left {
  101. display: flex;
  102. align-items: center;
  103. justify-content: space-between;
  104. }
  105. .rankingBox .podiumList .scrollBox .row .left .num {
  106. font-size: 37rpx;
  107. width: 28rpx;
  108. }
  109. .rankingBox .podiumList .scrollBox .row .left .avatar {
  110. margin: 0rpx 28rpx 0rpx 44rpx;
  111. width: 78rpx;
  112. height: 78rpx;
  113. background-color: #EBEBEB;
  114. border-radius: 50%;
  115. }
  116. .rankingBox .podiumList .scrollBox .row .left .nickName {
  117. font-size: 34rpx;
  118. width: 240rpx;
  119. }
  120. .rankingBox .podiumList .scrollBox .row .right {
  121. text-align: center;
  122. }
  123. .rankingBox .podiumList .scrollBox .row .right .icon {
  124. width: 30rpx;
  125. height: 30rpx;
  126. }
  127. .rankingBox .podiumList .scrollBox .row .right .num {
  128. font-size: 32rpx;
  129. color: #666;
  130. }
  131. .rankingBox .footer {
  132. width: 100%;
  133. padding: 26rpx 60rpx 30rpx 90rpx;
  134. box-sizing: border-box;
  135. display: flex;
  136. justify-content: space-between;
  137. align-items: center;
  138. background-color: white;
  139. box-shadow: 0 2rpx 24rpx 0 rgba(0, 0, 0, 0.5);
  140. }
  141. .rankingBox .footer .left {
  142. font-size: 26rpx;
  143. font-weight: bold;
  144. }
  145. .rankingBox .footer .left text {
  146. color: #4AC4FF;
  147. font-size: 38rpx;
  148. margin-left: 10rpx;
  149. }
  150. .rankingBox .footer .rigth {
  151. padding: 12rpx 34rpx;
  152. padding-left: 26rpx;
  153. border-radius: 50rpx;
  154. background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
  155. box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
  156. color: white;
  157. font-size: 26rpx;
  158. }
  159. .rankingBox .footer .rigth .share {
  160. width: 26rpx;
  161. height: 24rpx;
  162. margin-right: 14rpx;
  163. }
  164. .invitation {
  165. background: url('http://reader-wx.ai160.com/images/reader/v3/podium-5.jpg') no-repeat;
  166. }
  167. .invitation .tips2 {
  168. color: #2DCE66;
  169. }
  170. .hot {
  171. background: url('http://reader-wx.ai160.com/images/reader/v3/podium-4.jpg') no-repeat;
  172. }
  173. .hot .tips2 {
  174. color: #FF7F6C;
  175. }
  176. .pk {
  177. background: url('http://reader-wx.ai160.com/images/reader/v3/podium-6.jpg') no-repeat;
  178. }
  179. .pk .tips2 {
  180. color: #967DFF;
  181. }
  182. .iconPk {
  183. width: 42rpx !important;
  184. }