index.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" href="/logo.png" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <meta
  8. name="description"
  9. content="Vue3 + Vite5 + TypeScript5 + Element-Plus 的后台管理模板,配套接口文档和后端源码,vue-element-admin 的 Vue3 版本"
  10. />
  11. <meta
  12. name="keywords"
  13. content="vue,element-plus,typescript,vue-element-admin,vue3-element-admin"
  14. />
  15. <script src="https://cdn.staticfile.org/Sortable/1.10.0-rc2/Sortable.min.js"></script>
  16. <title>生产线综合管控采集平台</title>
  17. </head>
  18. <body>
  19. <div id="app">
  20. <div class="loader"></div>
  21. </div>
  22. </body>
  23. <script type="module" src="/src/main.ts"></script>
  24. <style>
  25. html,
  26. body,
  27. #app {
  28. position: relative;
  29. display: flex;
  30. align-items: center;
  31. justify-content: center;
  32. width: 100%;
  33. height: 100%;
  34. }
  35. .loader {
  36. position: relative;
  37. width: 40px;
  38. aspect-ratio: 0.577;
  39. overflow: hidden;
  40. clip-path: polygon(0 0, 100% 100%, 0 100%, 100% 0);
  41. animation: l19 2s infinite linear;
  42. }
  43. .loader::before {
  44. position: absolute;
  45. inset: -150%;
  46. content: "";
  47. background: repeating-conic-gradient(
  48. from 30deg,
  49. #ffabab 0 60deg,
  50. #abe4ff 0 120deg,
  51. #ff7373 0 180deg
  52. );
  53. animation: inherit;
  54. animation-direction: reverse;
  55. }
  56. /* 甘特图样式控制 */
  57. .gantt_task_line {
  58. border-radius: 15px !important;
  59. border: 0px solid black;
  60. }
  61. @keyframes l19 {
  62. 100% {
  63. transform: rotate(360deg);
  64. }
  65. }
  66. </style>
  67. </html>