index.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="shortcut icon" href="/favicon.ico" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title><%= title %></title>
  8. <style>
  9. #app {
  10. height: 100%;
  11. }
  12. .fantastic-admin-home {
  13. position: absolute;
  14. z-index: 10000;
  15. top: 0;
  16. left: 0;
  17. height: 100%;
  18. width: 100%;
  19. display: flex;
  20. align-items: center;
  21. justify-content: center;
  22. flex-direction: column;
  23. user-select: none;
  24. color: #736477;
  25. background-color: snow;
  26. }
  27. .fantastic-admin-home .loading {
  28. height: 40px;
  29. width: 40px;
  30. display: flex;
  31. align-items: center;
  32. justify-content: center;
  33. flex-wrap: wrap;
  34. }
  35. .fantastic-admin-home .square {
  36. display: flex;
  37. align-items: center;
  38. justify-content: center;
  39. height: 20px;
  40. width: 20px;
  41. }
  42. .fantastic-admin-home .square::before {
  43. content: '';
  44. width: 10px;
  45. height: 10px;
  46. border-radius: 15%;
  47. border: 3px solid #8c858f;
  48. }
  49. .fantastic-admin-home .loading.animate .square::before {
  50. animation: square-to-dot-animation 1.2s linear;
  51. }
  52. .fantastic-admin-home .loading.animate .square:nth-child(1)::before {
  53. animation-delay: calc(100ms * 1);
  54. }
  55. .fantastic-admin-home .loading.animate .square:nth-child(2)::before {
  56. animation-delay: calc(100ms * 2);
  57. }
  58. .fantastic-admin-home .loading.animate .square:nth-child(3)::before {
  59. animation-delay: calc(100ms * 3);
  60. }
  61. .fantastic-admin-home .loading.animate .square:nth-child(4)::before {
  62. animation-delay: calc(100ms * 4);
  63. }
  64. @keyframes square-to-dot-animation {
  65. 15%,
  66. 55% {
  67. border-radius: 100%;
  68. width: 0;
  69. height: 0;
  70. margin: 5px;
  71. border-width: 5px;
  72. }
  73. 70% {
  74. border-radius: 15%;
  75. width: 10px;
  76. height: 10px;
  77. margin: initial;
  78. border-width: 3px;
  79. }
  80. }
  81. .fantastic-admin-home .text {
  82. font-size: 24px;
  83. margin-top: 20px;
  84. }
  85. </style>
  86. <!-- <%- copyrightScript %> -->
  87. </head>
  88. <body>
  89. <div id="app">
  90. <div class="fantastic-admin-home">
  91. <div class="loading">
  92. <div class="square"></div>
  93. <div class="square"></div>
  94. <div class="square"></div>
  95. <div class="square"></div>
  96. </div>
  97. <!-- <div class="text"><%= title %>载入中…</div> -->
  98. </div>
  99. <script>
  100. const Loading = document.querySelector('.loading')
  101. Loading.classList.add('animate')
  102. Loading.addEventListener('animationend', function() {
  103. setTimeout(function() {
  104. Loading.classList.remove('animate')
  105. }, 600)
  106. setTimeout(function() {
  107. Loading.classList.add('animate')
  108. }, 1000)
  109. })
  110. </script>
  111. </div>
  112. <script type="module" src="/src/main.js"></script>
  113. <% if (debugTool == 'eruda') { %>
  114. <script src="//cdn.jsdelivr.net/npm/eruda/eruda.min.js"></script>
  115. <script>eruda.init();</script>
  116. <% } %>
  117. <% if (debugTool == 'vconsole') { %>
  118. <script src="//cdn.jsdelivr.net/npm/vconsole/dist/vconsole.min.js"></script>
  119. <script>new VConsole();</script>
  120. <% } %>
  121. </body>
  122. </html>