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.

478 lines
5.6 KiB

  1. #wrap {
  2. background: url(../img/game1/bgm1.png) no-repeat;
  3. background-size: 100% 100%;
  4. overflow: hidden;
  5. position: relative;
  6. }
  7. .tipsNum {
  8. width: 1.45rem;
  9. height: 3.2rem;
  10. position: absolute;
  11. left: 0;
  12. top: 50%;
  13. transform: translateY(-50%);
  14. }
  15. .tipText {
  16. position: absolute;
  17. top: 40%;
  18. transform: translateY(-40%);
  19. right: .65rem;
  20. width: .8rem;
  21. height: 4.32rem;
  22. }
  23. .tipText ul {
  24. display: flex;
  25. }
  26. .tipText ul li {
  27. flex: 1;
  28. text-align: center;
  29. color: #333;
  30. font-size: .26rem;
  31. }
  32. .tipsNum img {
  33. width: 100%;
  34. height: 100%;
  35. }
  36. .titleIcon {
  37. margin-top: .1rem;
  38. margin-left: .1rem;
  39. }
  40. .titleIcon ul {
  41. display: flex;
  42. justify-content: flex-end;
  43. }
  44. .titleIcon ul li {
  45. width: .98rem;
  46. height: 1.24rem;
  47. }
  48. .titleIcon ul li img {
  49. width: 100%;
  50. height: 100%;
  51. }
  52. /*箭头部分*/
  53. .mapList {
  54. /*position: relative;*/
  55. width: 100%;
  56. height: 100%;
  57. }
  58. .mapList ul {
  59. width: 100%;
  60. height: 100%;
  61. /*display: flex;*/
  62. }
  63. .mapList li {
  64. /*float: right;*/
  65. position: absolute;
  66. transform: translate(-50%, -50%);
  67. }
  68. .mapList p.dian {
  69. width: .1rem;
  70. height: .1rem;
  71. background: #FE1010;
  72. border-radius: 50%;
  73. border: 1px solid #333;
  74. margin-right: .05rem;
  75. margin-top: .25rem;
  76. }
  77. .mapList p.kuang {
  78. width: 2.22rem;
  79. height: 1.25rem;
  80. }
  81. .mapList p.contText {
  82. font-size: .18rem;
  83. position: absolute;
  84. width: 3rem;
  85. background: #F4BA78;
  86. border: 1px solid #D01217;
  87. border-radius: 7px;
  88. box-sizing: border-box;
  89. padding: .1rem;
  90. display: none;
  91. }
  92. .mapList p.kuang img {
  93. width: 100%;
  94. height: 100%;
  95. }
  96. .mapList p.text {
  97. font-size: .31rem;
  98. color: #333;
  99. }
  100. .adr1 {
  101. top: 65%;
  102. left: 69%;
  103. display: flex;
  104. align-items: center;
  105. }
  106. .adr1 p.jt1 {
  107. /*display: none;*/
  108. /*margin-top: .4rem;*/
  109. position: absolute;
  110. left: -2.42rem;
  111. top: -.22rem;
  112. /* width: 0;
  113. white-space: nowrap;
  114. overflow: hidden;
  115. text-overflow: clip; */
  116. /*display: none;*/
  117. }
  118. .adr1 p.jt1 img {
  119. width: 2.48rem;
  120. height: 1.05rem;
  121. }
  122. .adr2 p.contText {
  123. left: 100%;
  124. top: -60%;
  125. /*display: none;*/
  126. }
  127. .adr4 p.contText {
  128. left: 0%;
  129. top: -60%;
  130. }
  131. .adr5 p.contText {
  132. left: 10%;
  133. bottom: 87%;
  134. }
  135. .adr6 p.contText {
  136. left: 100%;
  137. bottom: 10%;
  138. }
  139. .adr7 p.contText {
  140. right: -2.25rem;
  141. top: -.44rem;
  142. }
  143. .adr2 {
  144. top: 50%;
  145. left: 58%;
  146. display: flex;
  147. align-items: center;
  148. }
  149. .adr2 p {
  150. /*float: right;*/
  151. }
  152. .adr2 .text {
  153. margin-top: 1rem;
  154. margin-right: .05rem;
  155. }
  156. .adr2 p.dian {
  157. margin-top: 1.4rem;
  158. }
  159. .adr2 p.jt2 {
  160. position: absolute;
  161. left: -.64rem;
  162. top: -.58rem;
  163. /* width: 0;
  164. overflow: hidden; */
  165. }
  166. .adr2 p.jt2 img {
  167. margin-top: 2rem;
  168. width: .66rem;
  169. height: .32rem;
  170. }
  171. .adr3 {
  172. top: 57%;
  173. left: 40.5%;
  174. }
  175. .adr3 .text {
  176. text-align: center;
  177. }
  178. .adr3 p.dian {
  179. margin-left: 56%;
  180. margin-top: 0.1rem;
  181. }
  182. .adr3 p.jt3 {
  183. /*margin-left: .2rem;*/
  184. margin-top: -.1rem;
  185. /* width: 0;
  186. overflow: hidden; */
  187. }
  188. .adr3 p.jt3 img {
  189. margin-left: 0.2rem;
  190. margin-top: -.2rem;
  191. width: 1.05rem;
  192. height: .76rem;
  193. }
  194. .adr4 {
  195. top: 56%;
  196. left: 35%;
  197. position: relative;
  198. }
  199. .adr4 p.text {
  200. position: relative;
  201. right: .6rem;
  202. top: 1.2rem;
  203. }
  204. .adr4 p.dian {
  205. position: absolute;
  206. left: 0.2rem;
  207. bottom: -.7rem;
  208. }
  209. .adr4 p.jt4 {
  210. position: absolute;
  211. right: 86%;
  212. top: -25%;
  213. /* width: 0;
  214. overflow: hidden; */
  215. }
  216. .adr4 p.jt4 img {
  217. width: .48rem;
  218. height: .83rem;
  219. margin-left: 2rem;
  220. margin-top: -2rem;
  221. }
  222. .adr4 .kuang {
  223. position: absolute;
  224. top: .5rem;
  225. left: -2.9rem;
  226. font-size: 0;
  227. }
  228. .adr5 {
  229. top: 45%;
  230. /*top: 20%;*/
  231. left: 25%;
  232. position: relative;
  233. }
  234. .adr5 .text {
  235. margin-top: 1rem;
  236. margin-left: -.5rem;
  237. }
  238. .adr5 p.dian {
  239. /*margin-top: 2rem;*/
  240. margin-left: 1.4rem;
  241. position: absolute;
  242. left: -.8rem;
  243. top: 1rem;
  244. }
  245. .adr5 p.jt5 {
  246. position: absolute;
  247. left: -.05rem;
  248. top: .2rem;
  249. /* width: 0;
  250. overflow: hidden; */
  251. }
  252. .adr5 p.jt5 img {
  253. width: .22rem;
  254. height: .68rem;
  255. margin-left: .5rem;
  256. margin-top: 0rem;
  257. }
  258. .adr5 .kuang {
  259. position: absolute;
  260. right: -2.9rem;
  261. top: 0rem;
  262. }
  263. .adr6 {
  264. top: 40%;
  265. left: 24%;
  266. }
  267. .adr6 .kuang {
  268. position: absolute;
  269. left: -1.8rem;
  270. top: -1.2rem;
  271. }
  272. .adr6 p.dian {
  273. position: absolute;
  274. right: -.35rem;
  275. bottom: 0.13rem;
  276. }
  277. .adr6 p.jt6 {
  278. position: absolute;
  279. left: .9rem;
  280. bottom: 0rem;
  281. /* width: 0;
  282. overflow: hidden; */
  283. }
  284. .adr6 p.jt6 img {
  285. width: 0.86rem;
  286. height: 1.02rem;
  287. }
  288. .adr7 {
  289. top: 10%;
  290. left: 30%;
  291. }
  292. .adr7 p.kuang {
  293. position: absolute;
  294. right: -1.4rem;
  295. top: -.6rem;
  296. }
  297. .adr7 p.jt7 {
  298. position: absolute;
  299. left: 1rem;
  300. top: .08rem;
  301. /* width: 0;
  302. overflow: hidden; */
  303. }
  304. .adr7 p.jt7 img {
  305. width: 1.78rem;
  306. height: .97rem;
  307. }
  308. .adr7 p.text {
  309. width: 2rem;
  310. position: absolute;
  311. left: -.6rem;
  312. top: .65rem;
  313. }
  314. .adr7 p.dian {
  315. position: absolute;
  316. left: .72rem;
  317. top: .8rem;
  318. }
  319. .adr8 {
  320. top: 12%;
  321. left: 52%;
  322. display: flex;
  323. }
  324. .adr8 p.start {
  325. width: .4rem;
  326. height: .4rem;
  327. font-size: 0;
  328. }
  329. .adr8 p.start img {
  330. width: 100%;
  331. height: 100%;
  332. }
  333. /*底部图片*/
  334. .imgList {}
  335. .imgList ul {
  336. width: 100%;
  337. height: 1.6rem;
  338. float: right;
  339. display: flex;
  340. justify-content: flex-end;
  341. box-sizing: border-box;
  342. position: absolute;
  343. left: 0;
  344. bottom: -10rem;
  345. width: 100%;
  346. /*z-index: 0;*/
  347. /*margin: 0 .1rem;*/
  348. }
  349. .imgList ul li {
  350. height: 1.25rem;
  351. /*flex: 1;*/
  352. width: 17%;
  353. margin-right: .1rem;
  354. position: absolute;
  355. left: 0;
  356. top: 0;
  357. /*z-index: 999;*/
  358. }
  359. .imgList li img {
  360. width: 100%;
  361. height: 100%;
  362. }
  363. /**/
  364. /*p.dian{
  365. display: none;
  366. }*/
  367. /*雪花*/
  368. @font-face {
  369. font-family: icon;
  370. src: url("font/icon.ttf"), url("font/icon.eot");
  371. }
  372. .snowList {
  373. display: none;
  374. }
  375. .snow {
  376. font-family: icon;
  377. color: #fff;
  378. position: absolute;
  379. top: -100px;
  380. -webkit-transform: rotate(90deg);
  381. transform: rotate(90deg);
  382. }
  383. /*手势*/
  384. .mask {
  385. display: block;
  386. }
  387. .shoushi {
  388. position: absolute;
  389. right: -.66rem;
  390. bottom: 20px;
  391. }
  392. .shoushi img {
  393. width: 50%;
  394. height: 50%;
  395. }