index.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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. <style>
  16. @keyframes load {
  17. 0% {
  18. -webkit-transform: rotate(-360deg);
  19. transform: rotate(-360deg);
  20. }
  21. 100% {
  22. -webkit-transform: rotate(0);
  23. transform: rotate(0);
  24. }
  25. }
  26. .app-loading {
  27. width: 100%;
  28. height: 100%;
  29. background: #f0f2f5;
  30. }
  31. .app-loading .app-loading-wrap {
  32. position: absolute;
  33. top: 50%;
  34. left: 50%;
  35. -webkit-transform: translate3d(-50%, -50%, 0);
  36. transform: translate3d(-50%, -50%, 0);
  37. }
  38. .app-loading .g-loading {
  39. display: block;
  40. width: 48px;
  41. margin: 30px auto;
  42. -webkit-animation: load 1.2s linear infinite;
  43. animation: load 1.2s linear infinite;
  44. -webkit-transform-origin: center center;
  45. transform-origin: center center;
  46. }
  47. .app-loading .app-loading-wrap img.logo {
  48. display: block;
  49. width: 90px;
  50. margin: 0 auto;
  51. margin-bottom: 20px;
  52. }
  53. .app-loading .app-loading-wrap .app-loading__tip {
  54. display: block;
  55. margin: 20px auto 0 0;
  56. font-size: 30px;
  57. color: #2c3a61;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div id="app">
  63. <section class="app-loading">
  64. <section class="app-loading-wrap">
  65. <img src="./resource/img/logo.png" class="logo" alt="Logo" />
  66. <img src="./resource/img/loading.svg" alt="" class="g-loading" />
  67. <h1 class="app-loading__tip"><%= viteHtmlPluginOptions.title %></h1>
  68. </section>
  69. </section>
  70. </div>
  71. <script type="module" src="/src/main.ts"></script>
  72. </body>
  73. </html>