index.html 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  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>采销结算平台</title>
  8. <script src="/sortable.min.js"></script>
  9. <script src="/dingtalk.open.2.10.3.js" rel="preload" as="script"></script>
  10. <script>
  11. window.process = {};
  12. </script>
  13. </head>
  14. <body>
  15. <div id="app">
  16. <style>
  17. html,
  18. body,
  19. #app {
  20. width: 100%;
  21. height: 100%;
  22. display: flex;
  23. position: relative;
  24. justify-content: center;
  25. align-items: center;
  26. overflow: hidden;
  27. }
  28. .loader,
  29. .loader:before,
  30. .loader:after {
  31. border-radius: 50%;
  32. width: 2.5em;
  33. height: 2.5em;
  34. -webkit-animation-fill-mode: both;
  35. animation-fill-mode: both;
  36. -webkit-animation: loadAnimation 1.8s infinite ease-in-out;
  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. -webkit-transform: translateZ(0);
  46. -ms-transform: translateZ(0);
  47. transform: translateZ(0);
  48. -webkit-animation-delay: -0.16s;
  49. animation-delay: -0.16s;
  50. top: 0;
  51. transform: translate(-50%, 0);
  52. }
  53. .loader:before,
  54. .loader:after {
  55. content: "";
  56. position: absolute;
  57. top: 0;
  58. }
  59. .loader:before {
  60. left: -3.5em;
  61. -webkit-animation-delay: -0.32s;
  62. animation-delay: -0.32s;
  63. }
  64. .loader:after {
  65. left: 3.5em;
  66. }
  67. @-webkit-keyframes loadAnimation {
  68. 0%,
  69. 80%,
  70. 100% {
  71. box-shadow: 0 2.5em 0 -1.3em;
  72. }
  73. 40% {
  74. box-shadow: 0 2.5em 0 0;
  75. }
  76. }
  77. @keyframes loadAnimation {
  78. 0%,
  79. 80%,
  80. 100% {
  81. box-shadow: 0 2.5em 0 -1.3em;
  82. }
  83. 40% {
  84. box-shadow: 0 2.5em 0 0;
  85. }
  86. }
  87. </style>
  88. <div class="loader"></div>
  89. </div>
  90. <script type="module" src="/src/main.ts"></script>
  91. </body>
  92. </html>