index.html 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  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. <meta name="keywords" content="L-charging">
  9. <meta name="description" content="Lcharger -- 奥升云平台">
  10. <link rel="icon" href="<%= BASE_URL %>favicon.png">
  11. <title>
  12. <%= VUE_APP_TITLE %>
  13. </title>
  14. <style>
  15. html,
  16. body,
  17. #app {
  18. height: 100%;
  19. margin: 0px;
  20. padding: 0px;
  21. }
  22. .chromeframe {
  23. margin: 0.2em 0;
  24. background: #ccc;
  25. color: #000;
  26. padding: 0.2em 0;
  27. }
  28. #loader-wrapper {
  29. position: fixed;
  30. top: 0;
  31. left: 0;
  32. width: 100%;
  33. height: 100%;
  34. z-index: 999999;
  35. }
  36. #loader {
  37. display: block;
  38. position: relative;
  39. left: 50%;
  40. top: 50%;
  41. width: 150px;
  42. height: 150px;
  43. margin: -75px 0 0 -75px;
  44. border-radius: 50%;
  45. border: 3px solid transparent;
  46. border-top-color: #00d591;
  47. -webkit-animation: spin 2s linear infinite;
  48. -ms-animation: spin 2s linear infinite;
  49. -moz-animation: spin 2s linear infinite;
  50. -o-animation: spin 2s linear infinite;
  51. animation: spin 2s linear infinite;
  52. z-index: 1001;
  53. }
  54. #loader:before {
  55. content: "";
  56. position: absolute;
  57. top: 5px;
  58. left: 5px;
  59. right: 5px;
  60. bottom: 5px;
  61. border-radius: 50%;
  62. border: 3px solid transparent;
  63. border-top-color: #00ba9e;
  64. -webkit-animation: spin 3s linear infinite;
  65. -moz-animation: spin 3s linear infinite;
  66. -o-animation: spin 3s linear infinite;
  67. -ms-animation: spin 3s linear infinite;
  68. animation: spin 3s linear infinite;
  69. }
  70. #loader:after {
  71. content: "";
  72. position: absolute;
  73. top: 15px;
  74. left: 15px;
  75. right: 15px;
  76. bottom: 15px;
  77. border-radius: 50%;
  78. border: 3px solid transparent;
  79. border-top-color: #00bab6;
  80. -moz-animation: spin 1.5s linear infinite;
  81. -o-animation: spin 1.5s linear infinite;
  82. -ms-animation: spin 1.5s linear infinite;
  83. -webkit-animation: spin 1.5s linear infinite;
  84. animation: spin 1.5s linear infinite;
  85. }
  86. #loader-wrapper .loader-section {
  87. position: fixed;
  88. top: 0;
  89. width: 51%;
  90. height: 100%;
  91. background: #EDF3F3;
  92. z-index: 1000;
  93. -webkit-transform: translateX(0);
  94. -ms-transform: translateX(0);
  95. transform: translateX(0);
  96. }
  97. #loader-wrapper .loader-section.section-left {
  98. left: 0;
  99. }
  100. #loader-wrapper .loader-section.section-right {
  101. right: 0;
  102. }
  103. .loaded #loader-wrapper .loader-section.section-left {
  104. -webkit-transform: translateX(-100%);
  105. -ms-transform: translateX(-100%);
  106. transform: translateX(-100%);
  107. -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  108. transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  109. }
  110. .loaded #loader-wrapper .loader-section.section-right {
  111. -webkit-transform: translateX(100%);
  112. -ms-transform: translateX(100%);
  113. transform: translateX(100%);
  114. -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  115. transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  116. }
  117. .loaded #loader {
  118. opacity: 0;
  119. -webkit-transition: all 0.3s ease-out;
  120. transition: all 0.3s ease-out;
  121. }
  122. .loaded #loader-wrapper {
  123. visibility: hidden;
  124. -webkit-transform: translateY(-100%);
  125. -ms-transform: translateY(-100%);
  126. transform: translateY(-100%);
  127. -webkit-transition: all 0.3s 1s ease-out;
  128. transition: all 0.3s 1s ease-out;
  129. }
  130. .no-js #loader-wrapper {
  131. display: none;
  132. }
  133. .no-js h1 {
  134. color: #222222;
  135. }
  136. #loader-wrapper .load_title {
  137. font-family: 'Open Sans';
  138. color: #FFF;
  139. font-size: 19px;
  140. width: 100%;
  141. text-align: center;
  142. z-index: 9999999999999;
  143. position: absolute;
  144. top: 60%;
  145. opacity: 1;
  146. line-height: 30px;
  147. }
  148. #loader-wrapper .load_title span {
  149. font-weight: normal;
  150. font-style: italic;
  151. font-size: 13px;
  152. color: #FFF;
  153. opacity: 0.5;
  154. }
  155. @keyframes spin {
  156. 0% {
  157. -webkit-transform: rotate(0deg);
  158. -ms-transform: rotate(0deg);
  159. transform: rotate(0deg);
  160. }
  161. 100% {
  162. -webkit-transform: rotate(-360deg);
  163. -ms-transform: rotate(-360deg);
  164. transform: rotate(-360deg);
  165. }
  166. }
  167. .loader {
  168. display: block;
  169. position: relative;
  170. left: 50%;
  171. top: 50%;
  172. width: 56px;
  173. height: 56px;
  174. margin: -28px 0 0 -28px;
  175. z-index: 1001;
  176. svg {
  177. animation: spin 1.5s linear infinite;
  178. }
  179. }
  180. </style>
  181. </head>
  182. <body>
  183. <div id="app">
  184. <div id="loader-wrapper">
  185. <div class="loader">
  186. <svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  187. <defs>
  188. <pattern id="pattern-nw10j48-17-1" width="100%" height="100%" patternUnits="objectBoundingBox">
  189. <use xlink:href="#image-nw10j48-17-2"></use>
  190. </pattern>
  191. <image id="image-nw10j48-17-2" width="56" height="56" xlink:href="data:image/png;base64,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"></image>
  192. </defs>
  193. <g id="Tino-天诺" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  194. <g id="画板备份-44" transform="translate(-44.000000, -44.000000)" fill="url(#pattern-nw10j48-17-1)" fill-rule="nonzero">
  195. <path d="M72,44 C87.463973,44 100,56.536027 100,72 C100,74.5915736 99.6479172,77.1009138 98.988975,79.4827971 L94.3745213,72.2346945 L87.3593984,75.0018595 C87.5481704,74.0303395 87.6470588,73.0267181 87.6470588,72 C87.6470588,63.358368 80.641632,56.3529412 72,56.3529412 C63.358368,56.3529412 56.3529412,63.358368 56.3529412,72 C56.3529412,80.641632 63.358368,87.6470588 72,87.6470588 C77.2617602,87.6470588 81.9169122,85.0498601 84.7534152,81.0675034 L92.1237018,78.1615934 L96.6558586,85.2812616 C91.9250589,94.0452474 82.657933,100 72,100 C56.536027,100 44,87.463973 44,72 C44,56.536027 56.536027,44 72,44 Z" id="形状结合" transform="translate(72.000000, 72.000000) rotate(-32.000000) translate(-72.000000, -72.000000) "></path>
  196. </g>
  197. </g>
  198. </svg>
  199. </div>
  200. <div class="loader-section section-left"></div>
  201. <div class="loader-section section-right"></div>
  202. </div>
  203. </div>
  204. </body>
  205. </html>