index.scss 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. .TopicPage {
  2. width: 100%;
  3. min-height: 100vh;
  4. background-color: rgba(35, 211, 33, 1);
  5. font-family: PingFangSC-Regular, PingFang SC;
  6. .bg {
  7. width: 100vw;
  8. height: 250px;
  9. }
  10. }
  11. .TimeCom {
  12. position: absolute;
  13. top: 9.2vh;
  14. left: 2.4vw;
  15. width: 95.2vw;
  16. height: 7.39vh;
  17. background: #FFFFFF;
  18. box-shadow: 0px 4px 8px 0px #33B519;
  19. border-radius: 6px;
  20. padding: 0 38px 0px 22px;
  21. box-sizing: border-box;
  22. display: flex;
  23. align-items: center;
  24. .watch {
  25. width: 38px;
  26. height: 38px;
  27. }
  28. .second {
  29. width: 102px;
  30. height: 52px;
  31. background: url('../../assets/TopicPage/second.png') no-repeat;
  32. background-size: 100% 100%;
  33. display: flex;
  34. justify-content: center;
  35. align-items: center;
  36. font-size: 28px;
  37. font-weight: 600;
  38. color: #FFFFFF;
  39. margin-left: 20px;
  40. }
  41. .logo {
  42. width: 240px;
  43. height: 70px;
  44. position: absolute;
  45. right: 22px;
  46. }
  47. }
  48. .BgPanel {
  49. width: 100%;
  50. height: 21.7%;
  51. .dog {
  52. width: 114px;
  53. height: 150px;
  54. position: absolute;
  55. top: 3%;
  56. left: 3.3vw;
  57. }
  58. .trumpet {
  59. width: 106px;
  60. height: 82px;
  61. position: absolute;
  62. top: 1.8%;
  63. right: 3.6%;
  64. }
  65. .tip {
  66. width: 70.3vw;
  67. min-height: 6.16vh;
  68. background: rgba(198, 199, 211, 0.09);
  69. border-radius: 8px;
  70. position: absolute;
  71. right: 4.26%;
  72. top: 7.23%;
  73. padding: 6px;
  74. box-sizing: border-box;
  75. font-size: 24px;
  76. font-weight: 400;
  77. color: #6A719E;
  78. }
  79. }
  80. .Course {
  81. width: 714px;
  82. height: 80vh;
  83. background-color: #fff;
  84. margin: 0 auto;
  85. position: absolute;
  86. top: 17.59vh;
  87. left: 2.4vw;
  88. }
  89. .show-panel {
  90. position: relative;
  91. width: 470px;
  92. height: 810px;
  93. .round {
  94. border-radius: 50%;
  95. position: absolute;
  96. z-index: 2;
  97. }
  98. .game-item {
  99. position: absolute;
  100. }
  101. // 闪烁动画
  102. .ficker {
  103. animation: fickerAni 2s infinite;
  104. }
  105. @keyframes fickerAni {
  106. 0% {
  107. transform: scale(1);
  108. }
  109. 50% {
  110. transform: scale(1.4);
  111. }
  112. 100% {
  113. transform: scale(0.8);
  114. }
  115. }
  116. .show-image {
  117. // width: 140px;
  118. // height: 222px;
  119. position: absolute;
  120. }
  121. }
  122. .opra-panel {
  123. width: 23vw;
  124. height: 49.56vh;
  125. border: 2px solid #23D321;
  126. border-top-right-radius: 20rpx;
  127. border-bottom-right-radius: 20rpx;
  128. display: flex;
  129. flex-direction: column;
  130. justify-content: space-between;
  131. align-items: center;
  132. position: absolute;
  133. top: 20.5%;
  134. right: 6vw;
  135. .answer-item {
  136. width: 70%;
  137. height: 192px;
  138. border-bottom: 2px solid #23D321;
  139. display: flex;
  140. justify-content: center;
  141. align-items: center;
  142. position: relative;
  143. .answer-round {
  144. width: 36px;
  145. height: 36px;
  146. border-radius: 50%;
  147. position: absolute;
  148. top: 5px;
  149. right: 5px;
  150. }
  151. image {
  152. width: 100%;
  153. height: 62.5%;
  154. }
  155. }
  156. .answer-item:last-child {
  157. border: none;
  158. }
  159. }