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.

230 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
  1. .game1Index{
  2. width: 100%;
  3. height: 100%;
  4. }
  5. .game1Index p.bgm img{
  6. width: 100%;
  7. height: 100%;
  8. }
  9. .game1Index p.bgm img:nth-child(1){
  10. opacity: 1;
  11. }
  12. .game1Index p.bgm img:nth-child(2){
  13. opacity: 0;
  14. position: absolute;
  15. left: 0;
  16. top: 0;
  17. }
  18. .game1Index .imgList li{
  19. width: 1.21rem;
  20. height: 1.2rem;
  21. background: url(../img/game1/kuang.png) no-repeat;
  22. background-size: 100% 100%;
  23. position: absolute;
  24. left: 0;
  25. top: 0;
  26. }
  27. .game1Index .imgList li img{
  28. position: absolute;
  29. z-index: 9999;
  30. top: 50%;
  31. left: 50%;
  32. transform: translate(-50%,-50%);
  33. }
  34. .game1Index .imgList li:nth-child(1){
  35. left: 1%;
  36. }
  37. .game1Index .imgList li:nth-child(2){
  38. left: 11%;
  39. }
  40. .game1Index .imgList li:nth-child(3){
  41. left: 21%;
  42. }
  43. .game1Index .clickIcon li{
  44. width: 1rem;
  45. height: 1rem;
  46. position: absolute;
  47. left: 0;
  48. top: 0;
  49. /*background: #000000;
  50. opacity: .5;*/
  51. }
  52. .game1Index .clickIcon li.click1{
  53. top: 40%;
  54. left: 60%;
  55. }
  56. .game1Index .clickIcon li.click2{
  57. top: 16%;
  58. left: 46%;
  59. width: .5rem;
  60. height: .5rem;
  61. }
  62. .game1Index .clickIcon img{
  63. width: .92rem;
  64. display: none;
  65. }
  66. .game1Index .clickIcon li.click3{
  67. top: 43%;
  68. left: 15%;
  69. width: 3rem;
  70. height: 1.3rem;
  71. transform: rotate(33deg);
  72. }
  73. /*书*/
  74. .game1Index .maskBgm{
  75. display: none;
  76. width: 100%;
  77. height: 100%;
  78. position: absolute;
  79. left: 0;
  80. top: 0;
  81. background: url(../img/game1/successBgm.png) no-repeat;
  82. background-size: 100% 100%;
  83. z-index: 99;
  84. }
  85. .game1Index .maskBgm:after {
  86. content: "";
  87. width: 100%;
  88. height: 100%;
  89. position: absolute;
  90. left: 0;
  91. top: 0;
  92. background: inherit;
  93. filter: blur(10px);
  94. z-index: 2;
  95. }
  96. .game1Index .book_box{
  97. display: none;
  98. width: 100%;
  99. height: 100%;
  100. position: absolute;
  101. left: 0;
  102. top: 0;
  103. z-index: 999;
  104. }
  105. .game1Index div.line{
  106. position: absolute;
  107. left: 0;
  108. top: 50%;
  109. transform: translateY(-50%);
  110. background: rgba(61, 117, 122,.5);
  111. width: 100%;
  112. height: 1.66rem;
  113. z-index:-1 ;
  114. }
  115. .game1Index div.line div{
  116. margin: 0 auto;
  117. width: 11rem;
  118. height: 100%;
  119. display: flex;
  120. justify-content: space-between;
  121. align-items: center;
  122. }
  123. .game1Index div.line p{
  124. box-sizing: border-box;
  125. font-size: .44rem;
  126. font-weight: 400;
  127. color: #C9C6BA;
  128. }
  129. div.line p{
  130. width: .42rem;
  131. height: .4rem;
  132. font-size: 0;
  133. }
  134. div.line p img{
  135. width: 100%;
  136. height: 100%;
  137. }
  138. .game1Index div.closeIcon{
  139. display: flex;
  140. justify-content: flex-end;
  141. margin-right: 1.2rem;
  142. margin-top: .55rem;
  143. }
  144. .game1Index div.closeIcon img{
  145. width: .546rem;
  146. height: .546rem;
  147. }
  148. .game1Index .bookCont{
  149. width: 9.93rem;
  150. height: 5.89rem;
  151. background: url(../img/bookBgm.png) no-repeat;
  152. background-size: 100% 100%;
  153. margin: 0 auto;
  154. z-index: 999;
  155. display: flex;
  156. }
  157. .game1Index .leftImg {
  158. width: 3.58rem;
  159. margin-left: .9rem;
  160. }
  161. .game1Index .leftImg .titleTip{
  162. display: flex;
  163. justify-content: space-between;
  164. align-items: center;
  165. margin-top: .42rem;
  166. }
  167. .game1Index .leftImg .titleTip p{
  168. color: #1F444B;
  169. font-size: .22rem;
  170. }
  171. .game1Index .leftImg .img{
  172. width: 1.18rem;
  173. height: .91rem;
  174. }
  175. .game1Index .leftImg .imgList{
  176. width: 3.58rem;
  177. height: 4.14rem;
  178. margin-top: .1rem;
  179. }
  180. .game1Index .leftImg img{
  181. width: 100%;
  182. height: 100%;
  183. }
  184. .game1Index .rightCont{
  185. width: 3.8rem;
  186. margin-left: 1.05rem;
  187. position: relative;
  188. }
  189. .game1Index .rightCont .titleTip{
  190. display: flex;
  191. margin-top: .7rem;
  192. justify-content: space-between;
  193. }
  194. .game1Index .rightCont .titleTip h2,
  195. .game1Index .rightCont .titleTip h5{
  196. color: #1F444B;
  197. font-size: .3rem;
  198. }
  199. .game1Index .rightCont .titleTip h5{
  200. font-weight: normal;
  201. font-size: .22rem;
  202. }
  203. .game1Index .rightCont ul{
  204. margin-top: .12rem;
  205. }
  206. .game1Index .rightCont li{
  207. font-size:.2rem ;
  208. color: #1F444B;
  209. line-height: .36rem;
  210. }
  211. .game1Index .rightCont .pageNum{
  212. position: absolute;
  213. bottom:5%;
  214. left: 40%;
  215. transform: translateX(-50%);
  216. text-align: center;
  217. font-size: .2rem;
  218. color: #1F444B;
  219. }