You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

194 lines
3.7 KiB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
  1. <style type="text/css">
  2. .beginIndex{
  3. width: 100%;
  4. height: 100%;
  5. }
  6. .beginIndex p.bgmImg {
  7. width: 100%;
  8. height: 100%;
  9. }
  10. .beginIndex p.bgmImg img {
  11. width: 100%;
  12. height: 100%;
  13. }
  14. .beginIndex .bgmImg{
  15. width: 100%;
  16. height: 100%;
  17. }
  18. .beginIndex .beginBtn img.btn {
  19. position: absolute;
  20. left: 50%;
  21. transform: translateX(-50%);
  22. bottom: 10%;
  23. width: 3.44rem;
  24. height: .83rem;
  25. }
  26. .guiz p.title{
  27. position: absolute;
  28. top: 15%;
  29. right: 5%;
  30. display: flex;
  31. align-items: center;
  32. }
  33. .guiz p.title img{
  34. width: .41rem;
  35. height: .23rem;
  36. }
  37. .guiz p.title span{
  38. color: #fff;
  39. font-size: .26rem;
  40. padding-left: .1rem;
  41. }
  42. /*遮罩*/
  43. .mask{
  44. /*display: none;*/
  45. width: 100%;
  46. height: 100%;
  47. position: fixed;
  48. top: 0;
  49. left: 0;
  50. background:url(img/begin.png) no-repeat;
  51. background-size: 100% 100%;
  52. filter: blur(.2rem);
  53. }
  54. /*活动规则*/
  55. .guizBox{
  56. /*display: none;*/
  57. position: absolute;
  58. left: 50%;
  59. top: 50%;
  60. transform: translate(-50%,-50%);
  61. z-index: 9999;
  62. }
  63. p.close{
  64. float: right;
  65. width: .546rem;
  66. height: .546rem;
  67. }
  68. p.close img{
  69. width: 100%;
  70. height: 100%;
  71. }
  72. .box_cont{
  73. margin-top: .65rem;
  74. background: url(img/guizeBgm.png) no-repeat;
  75. background-size: 100% 100%;
  76. width: 10.13rem;
  77. height: 5.78rem;
  78. overflow: hidden;
  79. }
  80. .box_cont ul{
  81. width: 8.7rem;
  82. margin: 1.5rem auto 0;
  83. }
  84. .box_cont li{
  85. display: flex;
  86. }
  87. .box_cont li div.contText{
  88. font-size: .28rem;
  89. color: #1F444B;
  90. width: 7.28rem;
  91. line-height: .46rem;
  92. }
  93. .box_cont li p.tips{
  94. color: #30584D;
  95. font-size: .28rem;
  96. font-weight: bold;
  97. min-width: 1.5rem;
  98. }
  99. .box_cont li:nth-child(2){
  100. margin-top: .35rem;
  101. }
  102. .box_cont li:nth-child(3){
  103. margin-top: .4rem;
  104. }
  105. .beginIndex .countDown{
  106. width: 2rem;
  107. height: .6rem;
  108. text-align: center;
  109. margin: .1rem auto 0;
  110. background: #377d92;
  111. border-radius: .2rem;
  112. color: #333;
  113. line-height: .6rem;
  114. color: #fff;
  115. }
  116. .beginIndex .countDown text{
  117. color: #fff;
  118. }
  119. .beginIndex .close{
  120. display: none;
  121. }
  122. </style>
  123. <div class="beginIndex">
  124. <!--<p class="bgmImg"><img src="img/begin.png" /></p>-->
  125. <!--游戏规则-->
  126. <div class="guiz">
  127. <p class="title">
  128. <!--<img src="img/icon.png"/> <span>查看游戏规则</span>-->
  129. </p>
  130. <div class="guizBox">
  131. <p class="close"><img src="img/close.png"/></p>
  132. <div class="box_cont">
  133. <ul>
  134. <li>
  135. <p class="tips">活动时间:</p>
  136. <div class="contText">
  137. 2021年7月1日 — 2021年7月15日
  138. </div>
  139. </li>
  140. <li>
  141. <p class="tips">活动规则:</p>
  142. <div class="contText">
  143. 每一关均取自于长征中的经典故事,画面中隐藏着该故事中所包含的线索道具,集齐道具即可通关。每一关所需搜集的线索道具数量会在当前闯关界面进行提示。举例:《飞夺泸定桥》需要找到线索道具为“木板”。
  144. </div>
  145. </li>
  146. <li>
  147. <p class="tips">参与方式:</p>
  148. <div class="contText">
  149. 用户可通过微信参与活动。
  150. </div>
  151. </li>
  152. </ul>
  153. </div>
  154. <div class="countDown">
  155. <text>5</text>(s)
  156. </div>
  157. </div>
  158. </div>
  159. <!--开始-->
  160. <div class="beginBtn">
  161. <img class="btn" src="img/beginBtn.png" />
  162. </div>
  163. <div class="mask"></div>
  164. </div>
  165. <script type="text/javascript">
  166. var allTime = 0;
  167. var timeSet ;
  168. $('.close').click(function(){
  169. $('.mask').fadeOut();
  170. $('.guizBox').fadeOut()
  171. })
  172. $('.title').click(function(){
  173. $('.mask').fadeIn();
  174. $('.guizBox').fadeIn()
  175. $('.beginIndex .close').fadeIn()
  176. })
  177. $('.beginBtn').click(function(){
  178. $('.begin').fadeOut(100)
  179. $('.loading').fadeOut(100)
  180. $('#game1').fadeIn(500)
  181. timeSet= setInterval(function(){
  182. allTime++
  183. },1000)
  184. })
  185. //倒计时
  186. </script>