index.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <%= viteHtmlPluginOptions.hmScript %>
  5. <meta charset="UTF-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  7. <meta name="renderer" content="webkit" />
  8. <meta
  9. name="viewport"
  10. content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
  11. />
  12. <title></title>
  13. <link rel="icon" href="/favicon.ico" />
  14. <%= viteHtmlPluginOptions.injectConfig %>
  15. </head>
  16. <body>
  17. <div id="app">
  18. <style>
  19. @keyframes load {
  20. 0% {
  21. -webkit-transform: rotate(-360deg);
  22. -moz-transform: rotate(-360deg);
  23. -ms-transform: rotate(-360deg);
  24. -o-transform: rotate(-360deg);
  25. transform: rotate(-360deg);
  26. }
  27. 100% {
  28. -webkit-transform: rotate(0);
  29. -moz-transform: rotate(0);
  30. -ms-transform: rotate(0);
  31. -o-transform: rotate(0);
  32. transform: rotate(0);
  33. }
  34. }
  35. .g-loading {
  36. -webkit-animation: load 2s linear infinite;
  37. -moz-animation: load 2s linear infinite;
  38. -ms-animation: load 2s linear infinite;
  39. -o-animation: load 2s linear infinite;
  40. animation: load 2s linear infinite;
  41. -webkit-transform-origin: center center;
  42. -moz-transform-origin: center center;
  43. -ms-transform-origin: center center;
  44. -o-transform-origin: center center;
  45. transform-origin: center center;
  46. }
  47. .app-loading {
  48. width: 100%;
  49. height: 100%;
  50. background: rgba(255, 255, 255, 0, 1);
  51. }
  52. .app-loading .app-loading-wrap {
  53. position: absolute;
  54. top: 45%;
  55. left: 50%;
  56. width: 64px;
  57. -ms-transform: translate3d(-50%, -50%, 0);
  58. -moz-transform: translate3d(-50%, -50%, 0);
  59. -webkit-transform: translate3d(-50%, -50%, 0);
  60. -o-transform: translate3d(-50%, -50%, 0);
  61. transform: translate3d(-50%, -50%, 0);
  62. }
  63. .app-loading .app-loading-wrap img.logo {
  64. margin-bottom: 20px;
  65. margin-left: -20px;
  66. }
  67. .app-loading .app-loading-wrap .app-loading__tip {
  68. display: block;
  69. margin-top: 4px;
  70. font-size: 13px;
  71. color: #303133;
  72. text-align: center;
  73. }
  74. </style>
  75. <section class="app-loading">
  76. <section class="app-loading-wrap">
  77. <img src="./resource/img/logo.png" class="logo" alt="Logo" />
  78. <img src="./resource/img/loading.svg" alt="" class="g-loading" />
  79. </section>
  80. </section>
  81. </div>
  82. <script type="module" src="/src/main.ts"></script>
  83. </body>
  84. </html>