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.

212 lines
3.5 KiB

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