index.html 2.5 KB

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