index.less 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. /* nova-werun/pages/home/ranking/index.wxss */
  2. .all{
  3. width: 100vw;
  4. display: flex;
  5. align-items: center;
  6. flex-direction: column;
  7. overflow-y: scroll;
  8. .textbox{
  9. width: 100%;
  10. height: 240rpx;
  11. display: flex;
  12. position: relative;
  13. border-bottom: black solid 2px;
  14. border-radius: 25%;
  15. margin-bottom: 75rpx;
  16. .textobx2{
  17. width:100%;
  18. display: flex;
  19. height: 150rpx;
  20. margin-top: 40rpx;
  21. justify-content: center;
  22. .text{
  23. font-size: 48rpx;
  24. margin-left: 40rpx;
  25. }
  26. .switch{
  27. width: 130rpx;
  28. height: 60rpx;
  29. display: flex;
  30. justify-content: center;
  31. align-items: center;
  32. border-radius: 45rpx;
  33. border: gray solid 1px;
  34. margin-left: auto;
  35. margin-right: 20rpx;
  36. image{
  37. width: 40rpx;
  38. height: 40rpx;
  39. }
  40. .switch-text{
  41. width: 60rpx;
  42. height: 40rpx;
  43. font-size: 30rpx;
  44. }
  45. }
  46. }
  47. .cardbox{
  48. width: 86%;
  49. height: 130rpx;
  50. display: flex;
  51. align-items: center;
  52. position: absolute;
  53. justify-content: center;
  54. bottom: -75rpx;
  55. border: black solid 1px;
  56. border-radius: 10rpx;
  57. background-color: white;
  58. left: 7%;
  59. .paiming{
  60. width: 60rpx;
  61. height: 60rpx;
  62. margin-right: 10rpx;
  63. font-size: 36rpx;
  64. display: flex;
  65. justify-content: center;
  66. align-items: center;
  67. color: red;
  68. }
  69. image{
  70. width: 60rpx;
  71. height: 60rpx;
  72. margin-right: 10rpx;
  73. }
  74. .avarter{
  75. width: 90rpx;
  76. height: 90rpx;
  77. border-radius: 50%;
  78. }
  79. .name{
  80. width: 225rpx;
  81. font-size: 30rpx;
  82. margin-left: 20rpx;
  83. white-space: nowrap;
  84. overflow: hidden;
  85. text-overflow: ellipsis;
  86. }
  87. .num{
  88. font-size: 30rpx;
  89. color: red;
  90. margin-left: 20rpx;
  91. }
  92. .good{
  93. width: 50rpx;
  94. color: gray;
  95. margin-left: 20rpx;
  96. .good-num{
  97. font-size: 28rpx;
  98. }
  99. }
  100. }
  101. }
  102. .rankbox{
  103. width: 86%;
  104. margin-top:40rpx;
  105. display: flex;
  106. align-items: center;
  107. flex-direction: column;
  108. border: black solid 1px;
  109. border-radius: 10rpx;
  110. margin-bottom: 40rpx;
  111. .cardbox{
  112. width: 100%;
  113. height: 130rpx;
  114. display: flex;
  115. align-items: center;
  116. justify-content: center;
  117. border-bottom: gray solid 1px;
  118. border-radius: 10rpx;
  119. background-color: white;
  120. .paiming{
  121. width: 60rpx;
  122. height: 60rpx;
  123. margin-right: 10rpx;
  124. font-size: 36rpx;
  125. display: flex;
  126. justify-content: center;
  127. align-items: center;
  128. color: red;
  129. }
  130. image{
  131. width: 60rpx;
  132. height: 60rpx;
  133. margin-right: 10rpx;
  134. }
  135. .avarter{
  136. width: 90rpx;
  137. height: 90rpx;
  138. border-radius: 50%;
  139. }
  140. .name{
  141. width: 225rpx;
  142. font-size: 30rpx;
  143. margin-left: 20rpx;
  144. white-space: nowrap;
  145. overflow: hidden;
  146. text-overflow: ellipsis;
  147. }
  148. .num{
  149. font-size: 30rpx;
  150. color: red;
  151. margin-left: 20rpx;
  152. }
  153. .good{
  154. width: 50rpx;
  155. color: gray;
  156. margin-left: 20rpx;
  157. .good-num{
  158. font-size: 28rpx;
  159. }
  160. }
  161. }
  162. }
  163. }