index.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="renderer" content="webkit">
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  8. <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  9. <title><%= webpackConfig.name %></title>
  10. <meta name="buildUser" content="<%= htmlWebpackPlugin.options.buildUser %>">
  11. <meta name="buildTime" content="<%= htmlWebpackPlugin.options.buildTime %>">
  12. <meta name="buildEdition" content="<%= htmlWebpackPlugin.options.buildEdition %>">
  13. <meta name="renewalEncoding" content="<%= htmlWebpackPlugin.options.renewalEncoding %>">
  14. <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
  15. <style>
  16. html,
  17. body,
  18. #app {
  19. /*width: 10400px;*/
  20. /*height: 2808px;*/
  21. width: 11520px;
  22. height: 2160px;
  23. margin: 0px;
  24. padding: 0px;
  25. }
  26. .chromeframe {
  27. margin: 0.2em 0;
  28. background: #ccc;
  29. color: #000;
  30. padding: 0.2em 0;
  31. }
  32. #loader-wrapper {
  33. position: fixed;
  34. top: 0;
  35. left: 0;
  36. width: 100%;
  37. height: 100%;
  38. z-index: 999999;
  39. }
  40. #loader {
  41. display: block;
  42. position: relative;
  43. left: 50%;
  44. top: 50%;
  45. width: 150px;
  46. height: 150px;
  47. margin: -75px 0 0 -75px;
  48. border-radius: 50%;
  49. border: 3px solid transparent;
  50. border-top-color: #FFF;
  51. -webkit-animation: spin 2s linear infinite;
  52. -ms-animation: spin 2s linear infinite;
  53. -moz-animation: spin 2s linear infinite;
  54. -o-animation: spin 2s linear infinite;
  55. animation: spin 2s linear infinite;
  56. z-index: 1001;
  57. }
  58. #loader:before {
  59. content: "";
  60. position: absolute;
  61. top: 5px;
  62. left: 5px;
  63. right: 5px;
  64. bottom: 5px;
  65. border-radius: 50%;
  66. border: 3px solid transparent;
  67. border-top-color: #FFF;
  68. -webkit-animation: spin 3s linear infinite;
  69. -moz-animation: spin 3s linear infinite;
  70. -o-animation: spin 3s linear infinite;
  71. -ms-animation: spin 3s linear infinite;
  72. animation: spin 3s linear infinite;
  73. }
  74. #loader:after {
  75. content: "";
  76. position: absolute;
  77. top: 15px;
  78. left: 15px;
  79. right: 15px;
  80. bottom: 15px;
  81. border-radius: 50%;
  82. border: 3px solid transparent;
  83. border-top-color: #FFF;
  84. -moz-animation: spin 1.5s linear infinite;
  85. -o-animation: spin 1.5s linear infinite;
  86. -ms-animation: spin 1.5s linear infinite;
  87. -webkit-animation: spin 1.5s linear infinite;
  88. animation: spin 1.5s linear infinite;
  89. }
  90. @-webkit-keyframes spin {
  91. 0% {
  92. -webkit-transform: rotate(0deg);
  93. -ms-transform: rotate(0deg);
  94. transform: rotate(0deg);
  95. }
  96. 100% {
  97. -webkit-transform: rotate(360deg);
  98. -ms-transform: rotate(360deg);
  99. transform: rotate(360deg);
  100. }
  101. }
  102. @keyframes spin {
  103. 0% {
  104. -webkit-transform: rotate(0deg);
  105. -ms-transform: rotate(0deg);
  106. transform: rotate(0deg);
  107. }
  108. 100% {
  109. -webkit-transform: rotate(360deg);
  110. -ms-transform: rotate(360deg);
  111. transform: rotate(360deg);
  112. }
  113. }
  114. #loader-wrapper .loader-section {
  115. position: fixed;
  116. top: 0;
  117. width: 51%;
  118. height: 100%;
  119. background: #245fba;
  120. z-index: 1000;
  121. -webkit-transform: translateX(0);
  122. -ms-transform: translateX(0);
  123. transform: translateX(0);
  124. }
  125. #loader-wrapper .loader-section.section-left {
  126. left: 0;
  127. }
  128. #loader-wrapper .loader-section.section-right {
  129. right: 0;
  130. }
  131. .loaded #loader-wrapper .loader-section.section-left {
  132. -webkit-transform: translateX(-100%);
  133. -ms-transform: translateX(-100%);
  134. transform: translateX(-100%);
  135. -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  136. transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  137. }
  138. .loaded #loader-wrapper .loader-section.section-right {
  139. -webkit-transform: translateX(100%);
  140. -ms-transform: translateX(100%);
  141. transform: translateX(100%);
  142. -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  143. transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  144. }
  145. .loaded #loader {
  146. opacity: 0;
  147. -webkit-transition: all 0.3s ease-out;
  148. transition: all 0.3s ease-out;
  149. }
  150. .loaded #loader-wrapper {
  151. visibility: hidden;
  152. -webkit-transform: translateY(-100%);
  153. -ms-transform: translateY(-100%);
  154. transform: translateY(-100%);
  155. -webkit-transition: all 0.3s 1s ease-out;
  156. transition: all 0.3s 1s ease-out;
  157. }
  158. .no-js #loader-wrapper {
  159. display: none;
  160. }
  161. .no-js h1 {
  162. color: #222222;
  163. }
  164. #loader-wrapper .load_title {
  165. font-family: 'Open Sans';
  166. color: #FFF;
  167. font-size: 19px;
  168. width: 100%;
  169. text-align: center;
  170. z-index: 9999999999999;
  171. position: absolute;
  172. top: 60%;
  173. opacity: 1;
  174. line-height: 30px;
  175. }
  176. #loader-wrapper .load_title span {
  177. font-weight: normal;
  178. font-style: italic;
  179. font-size: 13px;
  180. color: #FFF;
  181. opacity: 0.5;
  182. }
  183. .socket{
  184. width: 200px;
  185. height: 200px;
  186. position: absolute;
  187. left: 50%;
  188. margin-left: -100px;
  189. top: 50%;
  190. margin-top: -100px;
  191. }
  192. .hex-brick{
  193. background: #87CEEB;
  194. width: 30px;
  195. height: 17px;
  196. position: absolute;
  197. top: 5px;
  198. animation-name: fade;
  199. animation-duration: 2s;
  200. animation-iteration-count: infinite;
  201. -webkit-animation-name: fade;
  202. -webkit-animation-duration: 2s;
  203. -webkit-animation-iteration-count: infinite;
  204. }
  205. .h2{
  206. transform: rotate(60deg);
  207. -webkit-transform: rotate(60deg);
  208. }
  209. .h3{
  210. transform: rotate(-60deg);
  211. -webkit-transform: rotate(-60deg);
  212. }
  213. .gel{
  214. height: 30px;
  215. width: 30px;
  216. transition: all .3s;
  217. -webkit-transition: all .3s;
  218. position: absolute;
  219. top: 50%;
  220. left: 50%;
  221. }
  222. .center-gel{
  223. margin-left: -15px;
  224. margin-top: -15px;
  225. animation-name: pulse;
  226. animation-duration: 2s;
  227. animation-iteration-count: infinite;
  228. -webkit-animation-name: pulse;
  229. -webkit-animation-duration: 2s;
  230. -webkit-animation-iteration-count: infinite;
  231. }
  232. .c1{
  233. margin-left: -47px;
  234. margin-top: -15px;
  235. }
  236. .c2{
  237. margin-left: -31px;
  238. margin-top: -43px;
  239. }
  240. .c3{
  241. margin-left: 1px;
  242. margin-top: -43px;
  243. }
  244. .c4{
  245. margin-left: 17px;
  246. margin-top: -15px;
  247. }
  248. .c5{
  249. margin-left: -31px;
  250. margin-top: 13px;
  251. }
  252. .c6{
  253. margin-left: 1px;
  254. margin-top: 13px;
  255. }
  256. .c7{
  257. margin-left: -63px;
  258. margin-top: -43px;
  259. }
  260. .c8{
  261. margin-left: 33px;
  262. margin-top: -43px;
  263. }
  264. .c9{
  265. margin-left: -15px;
  266. margin-top: 41px;
  267. }
  268. .c10{
  269. margin-left: -63px;
  270. margin-top: 13px;
  271. }
  272. .c11{
  273. margin-left: 33px;
  274. margin-top: 13px;
  275. }
  276. .c12{
  277. margin-left: -15px;
  278. margin-top: -71px;
  279. }
  280. .c13{
  281. margin-left: -47px;
  282. margin-top: -71px;
  283. }
  284. .c14{
  285. margin-left: 17px;
  286. margin-top: -71px;
  287. }
  288. .c15{
  289. margin-left: -47px;
  290. margin-top: 41px;
  291. }
  292. .c16{
  293. margin-left: 17px;
  294. margin-top: 41px;
  295. }
  296. .c17{
  297. margin-left: -79px;
  298. margin-top: -15px;
  299. }
  300. .c18{
  301. margin-left: 49px;
  302. margin-top: -15px;
  303. }
  304. .c19{
  305. margin-left: -63px;
  306. margin-top: -99px;
  307. }
  308. .c20{
  309. margin-left: 33px;
  310. margin-top: -99px;
  311. }
  312. .c21{
  313. margin-left: 1px;
  314. margin-top: -99px;
  315. }
  316. .c22{
  317. margin-left: -31px;
  318. margin-top: -99px;
  319. }
  320. .c23{
  321. margin-left: -63px;
  322. margin-top: 69px;
  323. }
  324. .c24{
  325. margin-left: 33px;
  326. margin-top: 69px;
  327. }
  328. .c25{
  329. margin-left: 1px;
  330. margin-top: 69px;
  331. }
  332. .c26{
  333. margin-left: -31px;
  334. margin-top: 69px;
  335. }
  336. .c27{
  337. margin-left: -79px;
  338. margin-top: -15px;
  339. }
  340. .c28{
  341. margin-left: -95px;
  342. margin-top: -43px;
  343. }
  344. .c29{
  345. margin-left: -95px;
  346. margin-top: 13px;
  347. }
  348. .c30{
  349. margin-left: 49px;
  350. margin-top: 41px;
  351. }
  352. .c31{
  353. margin-left: -79px;
  354. margin-top: -71px;
  355. }
  356. .c32{
  357. margin-left: -111px;
  358. margin-top: -15px;
  359. }
  360. .c33{
  361. margin-left: 65px;
  362. margin-top: -43px;
  363. }
  364. .c34{
  365. margin-left: 65px;
  366. margin-top: 13px;
  367. }
  368. .c35{
  369. margin-left: -79px;
  370. margin-top: 41px;
  371. }
  372. .c36{
  373. margin-left: 49px;
  374. margin-top: -71px;
  375. }
  376. .c37{
  377. margin-left: 81px;
  378. margin-top: -15px;
  379. }
  380. .r1{
  381. animation-name: pulse;
  382. animation-duration: 2s;
  383. animation-iteration-count: infinite;
  384. animation-delay: .2s;
  385. -webkit-animation-name: pulse;
  386. -webkit-animation-duration: 2s;
  387. -webkit-animation-iteration-count: infinite;
  388. -webkit-animation-delay: .2s;
  389. }
  390. .r2{
  391. animation-name: pulse;
  392. animation-duration: 2s;
  393. animation-iteration-count: infinite;
  394. animation-delay: .4s;
  395. -webkit-animation-name: pulse;
  396. -webkit-animation-duration: 2s;
  397. -webkit-animation-iteration-count: infinite;
  398. -webkit-animation-delay: .4s;
  399. }
  400. .r3{
  401. animation-name: pulse;
  402. animation-duration: 2s;
  403. animation-iteration-count: infinite;
  404. animation-delay: .6s;
  405. -webkit-animation-name: pulse;
  406. -webkit-animation-duration: 2s;
  407. -webkit-animation-iteration-count: infinite;
  408. -webkit-animation-delay: .6s;
  409. }
  410. .r1 > .hex-brick{
  411. animation-name: fade;
  412. animation-duration: 2s;
  413. animation-iteration-count: infinite;
  414. animation-delay: .2s;
  415. -webkit-animation-name: fade;
  416. -webkit-animation-duration: 2s;
  417. -webkit-animation-iteration-count: infinite;
  418. -webkit-animation-delay: .2s;
  419. }
  420. .r2 > .hex-brick{
  421. animation-name: fade;
  422. animation-duration: 2s;
  423. animation-iteration-count: infinite;
  424. animation-delay: .4s;
  425. -webkit-animation-name: fade;
  426. -webkit-animation-duration: 2s;
  427. -webkit-animation-iteration-count: infinite;
  428. -webkit-animation-delay: .4s;
  429. }
  430. .r3 > .hex-brick{
  431. animation-name: fade;
  432. animation-duration: 2s;
  433. animation-iteration-count: infinite;
  434. animation-delay: .6s;
  435. -webkit-animation-name: fade;
  436. -webkit-animation-duration: 2s;
  437. -webkit-animation-iteration-count: infinite;
  438. -webkit-animation-delay: .6s;
  439. }
  440. @keyframes pulse{
  441. 0%{
  442. -webkit-transform: scale(1);
  443. transform: scale(1);
  444. }
  445. 50%{
  446. -webkit-transform: scale(0.01);
  447. transform: scale(0.01);
  448. }
  449. 100%{
  450. -webkit-transform: scale(1);
  451. transform: scale(1);
  452. }
  453. }
  454. @keyframes fade{
  455. 0%{
  456. background: #ABF8FF;
  457. }
  458. 50%{
  459. background: #90BBBF;
  460. }
  461. 100%{
  462. background: #ABF8FF;
  463. }
  464. }
  465. @-webkit-keyframes pulse{
  466. 0%{
  467. -webkit-transform: scale(1);
  468. transform: scale(1);
  469. }
  470. 50%{
  471. -webkit-transform: scale(0.01);
  472. transform: scale(0.01);
  473. }
  474. 100%{
  475. -webkit-transform: scale(1);
  476. transform: scale(1);
  477. }
  478. }
  479. @-webkit-keyframes fade{
  480. 0%{
  481. background: #ABF8FF;
  482. }
  483. 50%{
  484. background: #389CA6;
  485. }
  486. 100%{
  487. background: #ABF8FF;
  488. }
  489. }
  490. </style>
  491. </head>
  492. <body>
  493. <div id="app">
  494. <div id="loader-wrapper">
  495. <div class="socket">
  496. <div class="gel center-gel">
  497. <div class="hex-brick h1"></div>
  498. <div class="hex-brick h2"></div>
  499. <div class="hex-brick h3"></div>
  500. </div>
  501. <div class="gel c1 r1">
  502. <div class="hex-brick h1"></div>
  503. <div class="hex-brick h2"></div>
  504. <div class="hex-brick h3"></div>
  505. </div>
  506. <div class="gel c2 r1">
  507. <div class="hex-brick h1"></div>
  508. <div class="hex-brick h2"></div>
  509. <div class="hex-brick h3"></div>
  510. </div>
  511. <div class="gel c3 r1">
  512. <div class="hex-brick h1"></div>
  513. <div class="hex-brick h2"></div>
  514. <div class="hex-brick h3"></div>
  515. </div>
  516. <div class="gel c4 r1">
  517. <div class="hex-brick h1"></div>
  518. <div class="hex-brick h2"></div>
  519. <div class="hex-brick h3"></div>
  520. </div>
  521. <div class="gel c5 r1">
  522. <div class="hex-brick h1"></div>
  523. <div class="hex-brick h2"></div>
  524. <div class="hex-brick h3"></div>
  525. </div>
  526. <div class="gel c6 r1">
  527. <div class="hex-brick h1"></div>
  528. <div class="hex-brick h2"></div>
  529. <div class="hex-brick h3"></div>
  530. </div>
  531. <div class="gel c7 r2">
  532. <div class="hex-brick h1"></div>
  533. <div class="hex-brick h2"></div>
  534. <div class="hex-brick h3"></div>
  535. </div>
  536. <div class="gel c8 r2">
  537. <div class="hex-brick h1"></div>
  538. <div class="hex-brick h2"></div>
  539. <div class="hex-brick h3"></div>
  540. </div>
  541. <div class="gel c9 r2">
  542. <div class="hex-brick h1"></div>
  543. <div class="hex-brick h2"></div>
  544. <div class="hex-brick h3"></div>
  545. </div>
  546. <div class="gel c10 r2">
  547. <div class="hex-brick h1"></div>
  548. <div class="hex-brick h2"></div>
  549. <div class="hex-brick h3"></div>
  550. </div>
  551. <div class="gel c11 r2">
  552. <div class="hex-brick h1"></div>
  553. <div class="hex-brick h2"></div>
  554. <div class="hex-brick h3"></div>
  555. </div>
  556. <div class="gel c12 r2">
  557. <div class="hex-brick h1"></div>
  558. <div class="hex-brick h2"></div>
  559. <div class="hex-brick h3"></div>
  560. </div>
  561. <div class="gel c13 r2">
  562. <div class="hex-brick h1"></div>
  563. <div class="hex-brick h2"></div>
  564. <div class="hex-brick h3"></div>
  565. </div>
  566. <div class="gel c14 r2">
  567. <div class="hex-brick h1"></div>
  568. <div class="hex-brick h2"></div>
  569. <div class="hex-brick h3"></div>
  570. </div>
  571. <div class="gel c15 r2">
  572. <div class="hex-brick h1"></div>
  573. <div class="hex-brick h2"></div>
  574. <div class="hex-brick h3"></div>
  575. </div>
  576. <div class="gel c16 r2">
  577. <div class="hex-brick h1"></div>
  578. <div class="hex-brick h2"></div>
  579. <div class="hex-brick h3"></div>
  580. </div>
  581. <div class="gel c17 r2">
  582. <div class="hex-brick h1"></div>
  583. <div class="hex-brick h2"></div>
  584. <div class="hex-brick h3"></div>
  585. </div>
  586. <div class="gel c18 r2">
  587. <div class="hex-brick h1"></div>
  588. <div class="hex-brick h2"></div>
  589. <div class="hex-brick h3"></div>
  590. </div>
  591. <div class="gel c19 r3">
  592. <div class="hex-brick h1"></div>
  593. <div class="hex-brick h2"></div>
  594. <div class="hex-brick h3"></div>
  595. </div>
  596. <div class="gel c20 r3">
  597. <div class="hex-brick h1"></div>
  598. <div class="hex-brick h2"></div>
  599. <div class="hex-brick h3"></div>
  600. </div>
  601. <div class="gel c21 r3">
  602. <div class="hex-brick h1"></div>
  603. <div class="hex-brick h2"></div>
  604. <div class="hex-brick h3"></div>
  605. </div>
  606. <div class="gel c22 r3">
  607. <div class="hex-brick h1"></div>
  608. <div class="hex-brick h2"></div>
  609. <div class="hex-brick h3"></div>
  610. </div>
  611. <div class="gel c23 r3">
  612. <div class="hex-brick h1"></div>
  613. <div class="hex-brick h2"></div>
  614. <div class="hex-brick h3"></div>
  615. </div>
  616. <div class="gel c24 r3">
  617. <div class="hex-brick h1"></div>
  618. <div class="hex-brick h2"></div>
  619. <div class="hex-brick h3"></div>
  620. </div>
  621. <div class="gel c25 r3">
  622. <div class="hex-brick h1"></div>
  623. <div class="hex-brick h2"></div>
  624. <div class="hex-brick h3"></div>
  625. </div>
  626. <div class="gel c26 r3">
  627. <div class="hex-brick h1"></div>
  628. <div class="hex-brick h2"></div>
  629. <div class="hex-brick h3"></div>
  630. </div>
  631. <div class="gel c28 r3">
  632. <div class="hex-brick h1"></div>
  633. <div class="hex-brick h2"></div>
  634. <div class="hex-brick h3"></div>
  635. </div>
  636. <div class="gel c29 r3">
  637. <div class="hex-brick h1"></div>
  638. <div class="hex-brick h2"></div>
  639. <div class="hex-brick h3"></div>
  640. </div>
  641. <div class="gel c30 r3">
  642. <div class="hex-brick h1"></div>
  643. <div class="hex-brick h2"></div>
  644. <div class="hex-brick h3"></div>
  645. </div>
  646. <div class="gel c31 r3">
  647. <div class="hex-brick h1"></div>
  648. <div class="hex-brick h2"></div>
  649. <div class="hex-brick h3"></div>
  650. </div>
  651. <div class="gel c32 r3">
  652. <div class="hex-brick h1"></div>
  653. <div class="hex-brick h2"></div>
  654. <div class="hex-brick h3"></div>
  655. </div>
  656. <div class="gel c33 r3">
  657. <div class="hex-brick h1"></div>
  658. <div class="hex-brick h2"></div>
  659. <div class="hex-brick h3"></div>
  660. </div>
  661. <div class="gel c34 r3">
  662. <div class="hex-brick h1"></div>
  663. <div class="hex-brick h2"></div>
  664. <div class="hex-brick h3"></div>
  665. </div>
  666. <div class="gel c35 r3">
  667. <div class="hex-brick h1"></div>
  668. <div class="hex-brick h2"></div>
  669. <div class="hex-brick h3"></div>
  670. </div>
  671. <div class="gel c36 r3">
  672. <div class="hex-brick h1"></div>
  673. <div class="hex-brick h2"></div>
  674. <div class="hex-brick h3"></div>
  675. </div>
  676. <div class="gel c37 r3">
  677. <div class="hex-brick h1"></div>
  678. <div class="hex-brick h2"></div>
  679. <div class="hex-brick h3"></div>
  680. </div>
  681. </div>
  682. <!--<div id="loader"></div>-->
  683. <!--<div class="loader-section section-left"></div>-->
  684. <!--<div class="loader-section section-right"></div>-->
  685. <!--<div class="load_title">正在加载系统资源,请耐心等待</div>-->
  686. </div>
  687. </div>
  688. </body>
  689. <script src="./h5player/h5player.min.js" charset="utf-8"></script>
  690. </html>