index.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta
  6. http-equiv="Cache-Control"
  7. content="no-cache, no-store, must-revalidate"
  8. />
  9. <meta http-equiv="Pragma" content="no-cache" />
  10. <meta http-equiv="Expires" content="0" />
  11. <link rel="icon" href="/favicon.ico" />
  12. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  13. <script>
  14. if (navigator.userAgent.includes('WebKit')) {
  15. document.documentElement.classList.add('is-webkit');
  16. }
  17. </script>
  18. <title>书嗨后台管理</title>
  19. <style>
  20. .ele-admin-loading {
  21. width: 28px;
  22. height: 28px;
  23. display: grid;
  24. grid-gap: 8px;
  25. grid-template-rows: repeat(2, 1fr);
  26. grid-template-columns: repeat(2, 1fr);
  27. transform: rotate(45deg);
  28. animation: loadingRotate 1.2s infinite linear;
  29. position: fixed;
  30. top: calc(50% - 14px);
  31. left: calc(50% - 14px);
  32. }
  33. .ele-admin-loading > i {
  34. border-radius: 50%;
  35. background: #1677ff;
  36. }
  37. .ele-admin-loading > i:nth-child(2) {
  38. opacity: 0.7;
  39. }
  40. .ele-admin-loading > i:nth-child(3) {
  41. opacity: 0.5;
  42. }
  43. .ele-admin-loading > i:nth-child(4) {
  44. opacity: 0.3;
  45. }
  46. @keyframes loadingRotate {
  47. to {
  48. transform: rotate(405deg);
  49. }
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <div id="app">
  55. <div class="ele-admin-loading">
  56. <i></i>
  57. <i></i>
  58. <i></i>
  59. <i></i>
  60. </div>
  61. </div>
  62. <script type="module" src="/src/main.js"></script>
  63. </body>
  64. </html>