score.wxss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. /* pages/contest/score/score.wxss */
  2. page {
  3. background: #fff;
  4. }
  5. .page-title {
  6. position: absolute;
  7. z-index: 1;
  8. width: 100%;
  9. font-size: 32rpx;
  10. font-weight: 400;
  11. color: #FFFFFF;
  12. top: 68rpx;
  13. text-align: center;
  14. }
  15. .bg {
  16. position: fixed;
  17. background: transparent;
  18. width: 100%;
  19. height: 100vh;
  20. top: 0;
  21. z-index: 0;
  22. }
  23. .content {
  24. width: 100%;
  25. height: 100vh;
  26. position: relative;
  27. z-index: 9;
  28. display: flex;
  29. justify-content: center;
  30. align-items: center;
  31. }
  32. .kuang {
  33. width: 730rpx;
  34. position: absolute;
  35. background: transparent;
  36. z-index: 9;
  37. }
  38. .detail {
  39. position: relative;
  40. z-index: 9;
  41. display: flex;
  42. flex-direction: column;
  43. align-items: center;
  44. height: 970rpx;
  45. }
  46. .title {
  47. font-weight: bold;
  48. font-size: 36rpx;
  49. color: #161616;
  50. margin-top: 54rpx;
  51. }
  52. .score {
  53. margin-top: 52rpx;
  54. position: relative;
  55. width: 670rpx;
  56. height: 266rpx;
  57. }
  58. .score-bg {
  59. width: 670rpx;
  60. height: 266rpx;
  61. position: absolute;
  62. background: transparent;
  63. z-index: 1;
  64. }
  65. .score-text {
  66. position: relative;
  67. z-index: 9;
  68. display: flex;
  69. justify-content: center;
  70. align-items: flex-end;
  71. margin-top: 70rpx;
  72. font-size: 28rpx;
  73. font-weight: 500;
  74. color: #FFFFFF;
  75. }
  76. .score-num {
  77. font-size: 72rpx;
  78. font-weight: 500;
  79. color: #FFBD92;
  80. line-height: 60rpx;
  81. }
  82. .text {
  83. font-size: 32rpx;
  84. font-weight: 400;
  85. color: #59598D;
  86. margin-top: -20rpx;
  87. }
  88. .ranking {
  89. position: relative;
  90. display: flex;
  91. justify-content: center;
  92. margin-top: 12rpx;
  93. font-size: 52rpx;
  94. font-weight: 500;
  95. color: #FFFFFF;
  96. height: 102rpx;
  97. }
  98. .icon{
  99. position: absolute;
  100. width: 112rpx;
  101. z-index: 1;
  102. }
  103. .ranking > view {
  104. position: relative;
  105. z-index: 10;
  106. margin-top: 10rpx;
  107. }
  108. .button-group {
  109. margin-top: 36rpx;
  110. /* display: flex; */
  111. /* justify-content: center; */
  112. }
  113. .button-group .button-icon {
  114. width: 44rpx;
  115. height: 44rpx;
  116. margin: 0 28rpx 0 40rpx;
  117. }
  118. .share-icon {
  119. width: 34rpx;
  120. height: 34rpx;
  121. margin: 0 32rpx 0 45rpx;
  122. }
  123. .arrow-icon {
  124. width: 20rpx;
  125. height: 20rpx;
  126. border-bottom: 4rpx solid #9BA4A6;
  127. border-right: 4rpx solid #9BA4A6;
  128. transform: rotate(-45deg);
  129. position: absolute;
  130. right: 40rpx;
  131. }
  132. .button-group button {
  133. width: 650rpx;
  134. height: 120rpx;
  135. display: flex;
  136. align-items: center;
  137. font-weight: 400;
  138. color: #000000;
  139. font-size: 32rpx;
  140. position: relative;
  141. }
  142. button {
  143. background-color: transparent;
  144. padding-left: 0;
  145. padding-right: 0;
  146. border-radius: 0;
  147. line-height:inherit;
  148. }
  149. button::after {
  150. border: 0;
  151. border-bottom: 2rpx solid #EAEFF2;
  152. }
  153. /* .button-group > button {
  154. width: 284rpx;
  155. height: 96rpx;
  156. border-radius: 50rpx;
  157. border: 2rpx solid #C7CCF9;
  158. font-weight: 500;
  159. color: #59598D;
  160. font-size: 28rpx;
  161. box-sizing: border-box;
  162. display: flex;
  163. align-items: center;
  164. justify-content: center;
  165. margin: 0 5rpx;
  166. } */