index.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>
  6. <%= htmlWebpackPlugin.options.title %>
  7. </title>
  8. <style>
  9. @font-face {
  10. font-family: 'DingTalkJinBuTi';
  11. src: url('../src/assets/fonts/DingTalkJinBuTi.ttf');
  12. }
  13. @font-face {
  14. font-family: 'DingTalkSans';
  15. src: url('../src/assets/fonts/DingTalkSans.ttf');
  16. }
  17. @font-face {
  18. font-family: 'DingTalkJinBuTi';
  19. src: url('<%=htmlWebpackPlugin.options.publicPath%>static/DingTalkJinBuTi.ttf');
  20. }
  21. @font-face {
  22. font-family: 'DingTalkSans';
  23. src: url('<%=htmlWebpackPlugin.options.publicPath%>static/DingTalkSans.ttf');
  24. }
  25. .page-loading-warp {
  26. padding: 98px;
  27. display: flex;
  28. justify-content: center;
  29. align-items: center;
  30. }
  31. .ant-spin {
  32. -webkit-box-sizing: border-box;
  33. box-sizing: border-box;
  34. margin: 0;
  35. padding: 0;
  36. color: rgba(0, 0, 0, 0.65);
  37. font-size: 14px;
  38. font-variant: tabular-nums;
  39. line-height: 1.5;
  40. list-style: none;
  41. -webkit-font-feature-settings: 'tnum';
  42. font-feature-settings: 'tnum';
  43. position: absolute;
  44. display: none;
  45. color: #3255FA;
  46. text-align: center;
  47. vertical-align: middle;
  48. opacity: 0;
  49. -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  50. transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  51. transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  52. transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
  53. -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  54. }
  55. .ant-spin-spinning {
  56. position: static;
  57. display: inline-block;
  58. opacity: 1;
  59. }
  60. .ant-spin-dot {
  61. position: relative;
  62. display: inline-block;
  63. font-size: 20px;
  64. width: 20px;
  65. height: 20px;
  66. }
  67. .ant-spin-dot-item {
  68. position: absolute;
  69. display: block;
  70. width: 9px;
  71. height: 9px;
  72. background-color: #3255FA;
  73. border-radius: 100%;
  74. -webkit-transform: scale(0.75);
  75. -ms-transform: scale(0.75);
  76. transform: scale(0.75);
  77. -webkit-transform-origin: 50% 50%;
  78. -ms-transform-origin: 50% 50%;
  79. transform-origin: 50% 50%;
  80. opacity: 0.3;
  81. -webkit-animation: antSpinMove 1s infinite linear alternate;
  82. animation: antSpinMove 1s infinite linear alternate;
  83. }
  84. .ant-spin-dot-item:nth-child(1) {
  85. top: 0;
  86. left: 0;
  87. }
  88. .ant-spin-dot-item:nth-child(2) {
  89. top: 0;
  90. right: 0;
  91. -webkit-animation-delay: 0.4s;
  92. animation-delay: 0.4s;
  93. }
  94. .ant-spin-dot-item:nth-child(3) {
  95. right: 0;
  96. bottom: 0;
  97. -webkit-animation-delay: 0.8s;
  98. animation-delay: 0.8s;
  99. }
  100. .ant-spin-dot-item:nth-child(4) {
  101. bottom: 0;
  102. left: 0;
  103. -webkit-animation-delay: 1.2s;
  104. animation-delay: 1.2s;
  105. }
  106. .ant-spin-dot-spin {
  107. -webkit-transform: rotate(45deg);
  108. -ms-transform: rotate(45deg);
  109. transform: rotate(45deg);
  110. -webkit-animation: antRotate 1.2s infinite linear;
  111. animation: antRotate 1.2s infinite linear;
  112. }
  113. .ant-spin-lg .ant-spin-dot {
  114. font-size: 32px;
  115. width: 32px;
  116. height: 32px;
  117. }
  118. .ant-spin-lg .ant-spin-dot i {
  119. width: 14px;
  120. height: 14px;
  121. }
  122. @media all and (-ms-high-contrast: none),
  123. (-ms-high-contrast: active) {
  124. .ant-spin-blur {
  125. background: #fff;
  126. opacity: 0.5;
  127. }
  128. }
  129. @-webkit-keyframes antSpinMove {
  130. to {
  131. opacity: 1;
  132. }
  133. }
  134. @keyframes antSpinMove {
  135. to {
  136. opacity: 1;
  137. }
  138. }
  139. @-webkit-keyframes antRotate {
  140. to {
  141. -webkit-transform: rotate(405deg);
  142. transform: rotate(405deg);
  143. }
  144. }
  145. @keyframes antRotate {
  146. to {
  147. -webkit-transform: rotate(405deg);
  148. transform: rotate(405deg);
  149. }
  150. }
  151. </style>
  152. <script>
  153. // 加载HTML图
  154. var _LoadingHtml =
  155. '<div id="loadingDiv" style="display: flex;justify-content: center;flex-direction: column;align-items: center;position:fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999;background: #f5f5f5;"><div class="page-loading-warp"><div class="ant-spin ant-spin-lg ant-spin-spinning"> <span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></div></div></div>';
  156. // 呈现loading效果
  157. document.write(_LoadingHtml);
  158. // 监听加载状态改变
  159. document.onreadystatechange = completeLoading;
  160. // 加载状态为complete时移除loading效果
  161. function completeLoading() {
  162. if (document.readyState == "complete") {
  163. var loadingMask = document.getElementById('loadingDiv');
  164. loadingMask.parentNode.removeChild(loadingMask);
  165. }
  166. }
  167. </script>
  168. <script src="../src/assets/js/jquery-1.11.0.min.js" type="text/javascript"></script>
  169. <script src="../src/assets/js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>
  170. <script src="../src/assets/js/echarts.all.js"></script>
  171. <script src="../src/assets/js/echarts.min.js"></script>
  172. <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script> -->
  173. <script type="text/javascript" src="<%=htmlWebpackPlugin.options.publicPath%>static/privateConfig.js"></script>
  174. <script type="text/javascript" src="../src/assets/js/crypto-js.js"></script>
  175. <script type="text/javascript" src="../src/assets/js/privateConfig.js"></script>
  176. <script type="text/javascript" src="<%=htmlWebpackPlugin.options.publicPath%>static/crypto-js.js"></script>
  177. <script type="text/javascript" src="<%=htmlWebpackPlugin.options.publicPath%>static/jquery-1.11.0.min.js"></script>
  178. <script type="text/javascript" src="<%=htmlWebpackPlugin.options.publicPath%>static/jquery.numscroll.js"></script>
  179. <script type="text/javascript" src="<%=htmlWebpackPlugin.options.publicPath%>static/echarts.all.js"></script>
  180. <script type="text/javascript" src="<%=htmlWebpackPlugin.options.publicPath%>static/echarts.min.js"></script>
  181. </head>
  182. <body>
  183. <%= htmlWebpackPlugin.options.rootEl %>
  184. </body>
  185. </html>