rank.wxss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. /* pages/rank/rank.wxss */
  2. page{
  3. background: #F7F7F7;
  4. }
  5. @keyframes around {
  6. from {
  7. margin-left: 90%;
  8. }
  9. to {
  10. /* var接受传入的变量 */
  11. margin-left: -100%;
  12. }
  13. }
  14. .zd{
  15. width: 40px;
  16. height: 100%;
  17. position: absolute;
  18. left: 0;
  19. top: 0;
  20. background: rgba(255, 244.8, 244.8, 1);
  21. }
  22. .marquee_container{
  23. width: 100%;
  24. background: rgba(255, 244.8, 244.8, 1);
  25. /* box-shadow:0px 4px 12px 0px rgba(0,0,0,0.08); */
  26. border-radius:4px;
  27. padding: 12.5px 12px;
  28. position: relative;
  29. overflow: hidden;
  30. height: 90rpx;
  31. }
  32. .marquee_container:hover{
  33. /* 不起作用 */
  34. animation-play-state: paused;
  35. }
  36. .marquee_text{
  37. color:#333;
  38. font-size: 28rpx;
  39. display: flex;
  40. white-space: nowrap;
  41. animation-name: around;
  42. animation-duration: 15s; /*过渡时间*/
  43. animation-iteration-count: infinite;
  44. animation-timing-function:linear;
  45. }
  46. .marquee_text navigator{
  47. margin-right: 20px;
  48. }
  49. .marquee_container image{
  50. width: 34rpx;
  51. height: 34rpx;
  52. position: absolute;
  53. left: 10px;
  54. top: 30rpx;
  55. }
  56. ._top{
  57. background: #D94B24;
  58. text-align: center;
  59. color: #fff;
  60. font-size: 32rpx;
  61. position: relative;
  62. line-height: 80rpx;
  63. }
  64. .date-picker{
  65. margin-top: 20rpx;
  66. }
  67. .date-picker image{
  68. height: 30rpx;
  69. position: relative;
  70. top: 4rpx;
  71. }
  72. .search{
  73. height: 45rpx;
  74. position: absolute;
  75. right: 30rpx;
  76. bottom: 0rpx;
  77. }
  78. .search image{
  79. height: 45rpx;
  80. }
  81. .game_info{
  82. position: relative;
  83. padding: 20rpx 20rpx 0;
  84. /* padding-left: 150rpx; */
  85. background: #fff;
  86. color: #333;
  87. font-size: 28rpx;
  88. text-align: center;
  89. }
  90. /* .game_info image{ */
  91. /* width: 80rpx;
  92. position: absolute;
  93. left: 50rpx;
  94. top: 0;
  95. bottom: 0;
  96. margin: auto; */
  97. /* } */
  98. .game_info .picker{
  99. display: block;
  100. font-size: 36rpx;
  101. font-weight: 500;
  102. color: #333;
  103. line-height: 50rpx;
  104. }
  105. .top{
  106. display: flex;
  107. font-size: 28rpx;
  108. padding: 24rpx 32rpx;
  109. background: #fff;
  110. margin-bottom: 20rpx;
  111. justify-content: space-between;
  112. }
  113. .item{
  114. display: flex;
  115. justify-content: space-between;
  116. font-size: 28rpx;
  117. padding: 16rpx 32rpx;
  118. }
  119. .item text{
  120. color: #333;
  121. width: 21%;
  122. text-align: right;
  123. }
  124. .item .red{
  125. color: #FF5151;
  126. }
  127. .top text{
  128. color: #999;
  129. }
  130. .item image{
  131. width: 36rpx;
  132. }
  133. .title image{
  134. width: 32rpx;
  135. position: relative;
  136. top: 7rpx;
  137. }
  138. .list{
  139. background: #fff;
  140. padding: 30rpx 0;
  141. margin-bottom: 20rpx;
  142. }
  143. .list .note{
  144. font-size:28rpx;
  145. padding-top: 30rpx;
  146. color:#666;
  147. display: block;
  148. border-top: 1px solid #F5F5F5;
  149. }
  150. .title{
  151. /* border-left: 4px solid #FF5151; */
  152. color: #333;
  153. font-size: 36rpx;
  154. font-weight: 500;
  155. padding-left: 20rpx;
  156. padding-right: 40rpx;
  157. margin-bottom: 20rpx;
  158. }
  159. .title text{
  160. font-weight: 400;
  161. color: #666;
  162. font-size: 28rpx;
  163. }
  164. .title navigator{
  165. float: right;
  166. color: #999;
  167. font-size: 28rpx;
  168. }
  169. .item text{
  170. display: block;
  171. }
  172. .item .name{
  173. width: 25%;
  174. overflow: hidden;
  175. text-overflow: ellipsis;
  176. white-space: nowrap;
  177. text-align: left;
  178. margin-left: 5%;
  179. }
  180. .assess{
  181. display: inline-block;
  182. font-size: 28rpx;
  183. color: #666;
  184. border: 1px solid #666;
  185. line-height: 64rpx;
  186. height: 64rpx;
  187. padding: 0 20rpx;
  188. border-radius: 8rpx;
  189. position: absolute;
  190. right: 30rpx;
  191. top: 30rpx;
  192. }
  193. .date-picker{
  194. color: #666;
  195. }