index.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <!DOCTYPE html>
  2. <html lang="en" class="layout-theme-default">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" href="/logo_1.png" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>采销结算平台</title>
  8. <script src="/sortable.min.js"></script>
  9. <script>
  10. window.process = {};
  11. </script>
  12. <script type="module" crossorigin src="/assets/index.1417328f.js"></script>
  13. <link rel="stylesheet" href="/assets/index.daf01128.css">
  14. <link rel="stylesheet" href="/assets/layout-theme-default.css" id="head">
  15. </head>
  16. <body>
  17. <div id="app">
  18. <style>
  19. html,
  20. body,
  21. #app {
  22. width: 100%;
  23. height: 100%;
  24. display: flex;
  25. position: relative;
  26. justify-content: center;
  27. align-items: center;
  28. overflow: hidden;
  29. }
  30. .loader,
  31. .loader:before,
  32. .loader:after {
  33. border-radius: 50%;
  34. width: 2.5em;
  35. height: 2.5em;
  36. animation-fill-mode: both;
  37. animation: loadAnimation 1.8s infinite ease-in-out;
  38. }
  39. .loader {
  40. color: #406eeb;
  41. font-size: 10px;
  42. margin: 80px auto;
  43. position: relative;
  44. text-indent: -9999em;
  45. transform: translateZ(0);
  46. animation-delay: -0.16s;
  47. top: 0;
  48. transform: translate(-50%, 0);
  49. }
  50. .loader:before,
  51. .loader:after {
  52. content: "";
  53. position: absolute;
  54. top: 0;
  55. }
  56. .loader:before {
  57. left: -3.5em;
  58. animation-delay: -0.32s;
  59. }
  60. .loader:after {
  61. left: 3.5em;
  62. }
  63. @keyframes loadAnimation {
  64. 0%,
  65. 80%,
  66. 100% {
  67. box-shadow: 0 2.5em 0 -1.3em;
  68. }
  69. 40% {
  70. box-shadow: 0 2.5em 0 0;
  71. }
  72. }
  73. </style>
  74. <div class="loader"></div>
  75. </div>
  76. </body>
  77. </html>