index.less 4.0 KB

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