index.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  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. <script src="/js/jessibuca-pro/jessibuca-pro.js"></script>
  10. <script type="text/javascript" src="/js/EasyWasmPlayer.js"></script>
  11. <!-- 百度地图 -->
  12. <script src="https://mp-bd83e627-0227-46f3-aef3-95bef99ce553.cdn.bspapp.com/mapvgl.min.js"></script>
  13. <script src="https://api.map.baidu.com/api?v=2.0&type=webgl&ak=9oBcHDQqVQwxKJPySUa404jj4HcFwNdL"></script>
  14. <!-- 高德地图 -->
  15. <script language="javascript"
  16. src="https://webapi.amap.com/maps?v=2.0&key=99e2186c28a9705424380db0d6d243f1&plugin=AMap.ControlBar,AMap.ToolBar"></script>
  17. <title>
  18. <%= webpackConfig.name %>
  19. </title>
  20. <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
  21. <style>
  22. html,
  23. body,
  24. #app {
  25. height: 100%;
  26. margin: 0px;
  27. padding: 0px;
  28. }
  29. .chromeframe {
  30. margin: 0.2em 0;
  31. background: #ccc;
  32. color: #000;
  33. padding: 0.2em 0;
  34. }
  35. #loader-wrapper {
  36. position: fixed;
  37. top: 0;
  38. left: 0;
  39. width: 100%;
  40. height: 100%;
  41. z-index: 999999;
  42. }
  43. #loader-wrapper {
  44. background: #fff;
  45. }
  46. .loader-logo {
  47. display: block;
  48. position: fixed;
  49. left: 50%;
  50. top: 40%;
  51. transform: translate(-50%, -50%);
  52. width: 220px;
  53. height: 60px;
  54. z-index: 3;
  55. }
  56. .loader-icon {
  57. display: block;
  58. position: fixed;
  59. left: 50%;
  60. top: 50%;
  61. transform: translate(-50%, -50%);
  62. width: 160px;
  63. height: 120px;
  64. z-index: 1;
  65. }
  66. #loader-wrapper .load_title {
  67. font-family: 'Open Sans';
  68. color: #303133;
  69. font-size: 19px;
  70. width: 100%;
  71. text-align: center;
  72. z-index: 9999;
  73. position: absolute;
  74. top: 56%;
  75. opacity: 1;
  76. line-height: 30px;
  77. display: flex;
  78. justify-content: center;
  79. align-items: center;
  80. font-weight: 550;
  81. }
  82. #loader-wrapper .load_title .load-point {
  83. background-color: #303133;
  84. width: 8px;
  85. height: 8px;
  86. border-radius: 50%;
  87. margin-left: 10px;
  88. }
  89. @keyframes point2 {
  90. 0% {
  91. opacity: 0;
  92. }
  93. 32% {
  94. opacity: 0;
  95. }
  96. 33% {
  97. opacity: 1;
  98. }
  99. 100% {
  100. opacity: 1;
  101. }
  102. }
  103. @keyframes point3 {
  104. 0% {
  105. opacity: 0;
  106. }
  107. 66% {
  108. opacity: 0;
  109. }
  110. 67% {
  111. opacity: 1;
  112. }
  113. 100% {
  114. opacity: 1;
  115. }
  116. }
  117. #loader-wrapper .load_title .load-point.point2 {
  118. animation: point2 3s linear infinite;
  119. }
  120. #loader-wrapper .load_title .load-point.point3 {
  121. animation: point3 3s linear infinite;
  122. }
  123. </style>
  124. </head>
  125. <body>
  126. <div id="app">
  127. <div id="loader-wrapper">
  128. <img class="loader-logo" src="./loading-logo.png"></img>
  129. <img class="loader-icon" src="./loading.gif"></img>
  130. <div class="load_title">正在努力加载中,请稍后</div>
  131. </div>
  132. </div>
  133. </body>
  134. </html>