index.wxss 3.8 KB

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