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.

224 lines
5.4 KiB

11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
  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>
  10. <%= webpackConfig.name %>
  11. </title>
  12. <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
  13. <style>
  14. @font-face {
  15. font-family: "思源宋体 Light" !important;
  16. font-weight: 300;
  17. src: url("/font/EZSx3exf4cjI.woff2") format("woff2"),
  18. url("/font/EZSx3exf4cjI.woff") format("woff");
  19. font-display: swap;
  20. }
  21. html,
  22. body,
  23. #app {
  24. height: 100%;
  25. margin: 0px;
  26. padding: 0px;
  27. font-family: '思源宋体 Light' !important;
  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 {
  44. display: block;
  45. position: relative;
  46. left: 50%;
  47. top: 50%;
  48. width: 150px;
  49. height: 150px;
  50. margin: -75px 0 0 -75px;
  51. border-radius: 50%;
  52. border: 3px solid transparent;
  53. border-top-color: #FFF;
  54. -webkit-animation: spin 2s linear infinite;
  55. -ms-animation: spin 2s linear infinite;
  56. -moz-animation: spin 2s linear infinite;
  57. -o-animation: spin 2s linear infinite;
  58. animation: spin 2s linear infinite;
  59. z-index: 1001;
  60. }
  61. #loader:before {
  62. content: "";
  63. position: absolute;
  64. top: 5px;
  65. left: 5px;
  66. right: 5px;
  67. bottom: 5px;
  68. border-radius: 50%;
  69. border: 3px solid transparent;
  70. border-top-color: #FFF;
  71. -webkit-animation: spin 3s linear infinite;
  72. -moz-animation: spin 3s linear infinite;
  73. -o-animation: spin 3s linear infinite;
  74. -ms-animation: spin 3s linear infinite;
  75. animation: spin 3s linear infinite;
  76. }
  77. #loader:after {
  78. content: "";
  79. position: absolute;
  80. top: 15px;
  81. left: 15px;
  82. right: 15px;
  83. bottom: 15px;
  84. border-radius: 50%;
  85. border: 3px solid transparent;
  86. border-top-color: #FFF;
  87. -moz-animation: spin 1.5s linear infinite;
  88. -o-animation: spin 1.5s linear infinite;
  89. -ms-animation: spin 1.5s linear infinite;
  90. -webkit-animation: spin 1.5s linear infinite;
  91. animation: spin 1.5s linear infinite;
  92. }
  93. @-webkit-keyframes spin {
  94. 0% {
  95. -webkit-transform: rotate(0deg);
  96. -ms-transform: rotate(0deg);
  97. transform: rotate(0deg);
  98. }
  99. 100% {
  100. -webkit-transform: rotate(360deg);
  101. -ms-transform: rotate(360deg);
  102. transform: rotate(360deg);
  103. }
  104. }
  105. @keyframes spin {
  106. 0% {
  107. -webkit-transform: rotate(0deg);
  108. -ms-transform: rotate(0deg);
  109. transform: rotate(0deg);
  110. }
  111. 100% {
  112. -webkit-transform: rotate(360deg);
  113. -ms-transform: rotate(360deg);
  114. transform: rotate(360deg);
  115. }
  116. }
  117. #loader-wrapper .loader-section {
  118. position: fixed;
  119. top: 0;
  120. width: 51%;
  121. height: 100%;
  122. background: #7171C6;
  123. z-index: 1000;
  124. -webkit-transform: translateX(0);
  125. -ms-transform: translateX(0);
  126. transform: translateX(0);
  127. }
  128. #loader-wrapper .loader-section.section-left {
  129. left: 0;
  130. }
  131. #loader-wrapper .loader-section.section-right {
  132. right: 0;
  133. }
  134. .loaded #loader-wrapper .loader-section.section-left {
  135. -webkit-transform: translateX(-100%);
  136. -ms-transform: translateX(-100%);
  137. transform: translateX(-100%);
  138. -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  139. transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  140. }
  141. .loaded #loader-wrapper .loader-section.section-right {
  142. -webkit-transform: translateX(100%);
  143. -ms-transform: translateX(100%);
  144. transform: translateX(100%);
  145. -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  146. transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  147. }
  148. .loaded #loader {
  149. opacity: 0;
  150. -webkit-transition: all 0.3s ease-out;
  151. transition: all 0.3s ease-out;
  152. }
  153. .loaded #loader-wrapper {
  154. visibility: hidden;
  155. -webkit-transform: translateY(-100%);
  156. -ms-transform: translateY(-100%);
  157. transform: translateY(-100%);
  158. -webkit-transition: all 0.3s 1s ease-out;
  159. transition: all 0.3s 1s ease-out;
  160. }
  161. .no-js #loader-wrapper {
  162. display: none;
  163. }
  164. .no-js h1 {
  165. color: #222222;
  166. }
  167. #loader-wrapper .load_title {
  168. font-family: 'Open Sans';
  169. color: #FFF;
  170. font-size: 19px;
  171. width: 100%;
  172. text-align: center;
  173. z-index: 9999999999999;
  174. position: absolute;
  175. top: 60%;
  176. opacity: 1;
  177. line-height: 30px;
  178. }
  179. #loader-wrapper .load_title span {
  180. font-weight: normal;
  181. font-style: italic;
  182. font-size: 13px;
  183. color: #FFF;
  184. opacity: 0.5;
  185. }
  186. </style>
  187. </head>
  188. <body>
  189. <div id="app">
  190. <div id="loader-wrapper">
  191. <div id="loader"></div>
  192. <div class="loader-section section-left"></div>
  193. <div class="loader-section section-right"></div>
  194. <div class="load_title">正在加载系统资源,请耐心等待</div>
  195. </div>
  196. </div>
  197. </body>
  198. </html>