index.html 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <link rel="icon" href="/favicon.png" />
  7. <title>%VITE_TITLE%</title>
  8. <!-- 腾讯地图WebGL版本API -->
  9. <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=WCIBZ-65LCM-MYA6P-6TJCD-OVIVO-VCBET"></script>
  10. <style>
  11. .loading-container {
  12. position: fixed;
  13. top: 0;
  14. left: 0;
  15. width: 100%;
  16. height: 100%;
  17. display: flex;
  18. }
  19. .dark .loading-container {
  20. background-color: #232324;
  21. color: rgba(255, 255, 255, 0.9);
  22. }
  23. .loading-container .loading {
  24. --speed-of-animation: 0.9s;
  25. --gap: 12px;
  26. --first-color: #4c86f9;
  27. --second-color: #49a84c;
  28. --third-color: #f6bb02;
  29. --fourth-color: #26a69a;
  30. --fifth-color: #2196f3;
  31. margin: auto;
  32. width: 160px;
  33. height: 100px;
  34. display: flex;
  35. justify-content: center;
  36. align-items: center;
  37. gap: var(--gap);
  38. }
  39. .loading-container .loading span {
  40. width: 6px;
  41. height: 80px;
  42. background: var(--first-color);
  43. animation: scale var(--speed-of-animation) ease-in-out infinite;
  44. }
  45. .loading-container .loading span:nth-child(2) {
  46. background: var(--second-color);
  47. animation-delay: -0.8s;
  48. }
  49. .loading-container .loading span:nth-child(3) {
  50. background: var(--third-color);
  51. animation-delay: -0.7s;
  52. }
  53. .loading-container .loading span:nth-child(4) {
  54. background: var(--fourth-color);
  55. animation-delay: -0.6s;
  56. }
  57. .loading-container .loading span:nth-child(5) {
  58. background: var(--fifth-color);
  59. animation-delay: -0.5s;
  60. }
  61. @keyframes scale {
  62. 0%,
  63. 40%,
  64. 100% {
  65. transform: scaleY(0.25);
  66. }
  67. 20% {
  68. transform: scaleY(1);
  69. }
  70. }
  71. </style>
  72. </head>
  73. <body class="dark:text-#e9e9e9 auto-bg">
  74. <div id="app">
  75. <div class="loading-container">
  76. <div class="loading">
  77. <span></span>
  78. <span></span>
  79. <span></span>
  80. <span></span>
  81. <span></span>
  82. </div>
  83. </div>
  84. </div>
  85. <script type="module" src="/src/main.js"></script>
  86. </body>
  87. </html>