index.less 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  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. image{
  60. width: 60rpx;
  61. height: 60rpx;
  62. margin-right: 10rpx;
  63. }
  64. .avarter{
  65. width: 90rpx;
  66. height: 90rpx;
  67. border-radius: 50%;
  68. }
  69. .name{
  70. width: 225rpx;
  71. font-size: 30rpx;
  72. margin-left: 20rpx;
  73. white-space: nowrap;
  74. overflow: hidden;
  75. text-overflow: ellipsis;
  76. }
  77. .num{
  78. font-size: 30rpx;
  79. color: red;
  80. margin-left: 20rpx;
  81. }
  82. .good{
  83. width: 50rpx;
  84. color: gray;
  85. margin-left: 20rpx;
  86. .good-num{
  87. font-size: 28rpx;
  88. }
  89. }
  90. }
  91. }
  92. .rankbox{
  93. width: 86%;
  94. margin-top:40rpx;
  95. display: flex;
  96. align-items: center;
  97. flex-direction: column;
  98. border: black solid 1px;
  99. border-radius: 10rpx;
  100. margin-bottom: 40rpx;
  101. .cardbox{
  102. width: 100%;
  103. height: 130rpx;
  104. display: flex;
  105. align-items: center;
  106. justify-content: center;
  107. border-bottom: gray solid 1px;
  108. border-radius: 10rpx;
  109. background-color: white;
  110. .paiming{
  111. width: 60rpx;
  112. height: 60rpx;
  113. margin-right: 10rpx;
  114. font-size: 36rpx;
  115. display: flex;
  116. justify-content: center;
  117. align-items: center;
  118. color: red;
  119. }
  120. image{
  121. width: 60rpx;
  122. height: 60rpx;
  123. margin-right: 10rpx;
  124. }
  125. .avarter{
  126. width: 90rpx;
  127. height: 90rpx;
  128. border-radius: 50%;
  129. }
  130. .name{
  131. width: 225rpx;
  132. font-size: 30rpx;
  133. margin-left: 20rpx;
  134. white-space: nowrap;
  135. overflow: hidden;
  136. text-overflow: ellipsis;
  137. }
  138. .num{
  139. font-size: 30rpx;
  140. color: red;
  141. margin-left: 20rpx;
  142. }
  143. .good{
  144. width: 50rpx;
  145. color: gray;
  146. margin-left: 20rpx;
  147. .good-num{
  148. font-size: 28rpx;
  149. }
  150. }
  151. }
  152. }
  153. }