index.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <link href="/logo.png" rel="icon"/>
  6. <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  7. <meta
  8. content="Vue3 + Vite5 + TypeScript5 + Element-Plus 的后台管理模板,配套接口文档和后端源码,vue-element-admin 的 Vue3 版本"
  9. name="description"
  10. />
  11. <meta
  12. content="vue,element-plus,typescript,vue-element-admin,vue3-element-admin"
  13. name="keywords"
  14. />
  15. <script src="/sortable.js"></script>
  16. <title>生产线综合管控采集平台</title>
  17. </head>
  18. <body>
  19. <div id="app">
  20. <div class="loader"></div>
  21. </div>
  22. </body>
  23. <script src="/src/main.ts" type="module"></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: 20px !important;
  59. border: 0px solid black;
  60. }
  61. .gantt_tooltip {
  62. font-size: 15px;
  63. font-weight: 300;
  64. }
  65. .gantt_tree_content {
  66. font-size: 15px !important;
  67. }
  68. .gantt_grid_data {
  69. background-color: rgba(0, 0, 0, 0.1);
  70. .gantt_row_task {
  71. background-color: rgba(0, 0, 0, 0.1) !important;
  72. }
  73. .odd {
  74. background-color: rgba(0, 0, 0, 0.2) !important;
  75. }
  76. .gantt_row:hover {
  77. background-color: rgba(0, 0, 0, 0.4) !important;
  78. }
  79. .gantt_selected {
  80. background-color: rgb(123, 123, 123) !important;
  81. }
  82. }
  83. .gantt_task {
  84. .gantt_selected {
  85. background-color: rgb(123, 123, 123);
  86. .gantt_task_cell {
  87. border-color: white;
  88. }
  89. }
  90. }
  91. .gantt_data_area {
  92. background-color: rgba(0, 0, 0, 0.1);
  93. .gantt_task_cell {
  94. background-color: rgba(0, 0, 0, 0.1);
  95. border-color: white;
  96. }
  97. }
  98. .year {
  99. background: #ffcc00;
  100. color: #fff !important;
  101. font-size: 16px;
  102. }
  103. .month {
  104. background: #66ccff;
  105. color: #fff !important;
  106. font-size: 16px;
  107. }
  108. .day {
  109. background: #abe4ff;
  110. color: #fff !important;
  111. font-size: 16px;
  112. }
  113. .hour {
  114. background: #0bb051;
  115. color: #fff !important;
  116. font-size: 16px;
  117. }
  118. .gantt_grid_head_cell {
  119. font-size: 16px;
  120. color: white !important;
  121. font-weight: 600;
  122. border: 1px solid rgb(206, 206, 206);
  123. background-color: rgb(48, 65, 86, 0.6);
  124. }
  125. /* 滚动条样式 */
  126. ::-webkit-scrollbar {
  127. width: 6px !important; /* 设置滚动条的宽度 */
  128. }
  129. ::-webkit-scrollbar-track {
  130. background-color: #f0f2f5; /* 滚动条轨道的背景色 */
  131. }
  132. ::-webkit-scrollbar-thumb {
  133. background-color: #90939960; /* 滚动条的颜色 */
  134. border-radius: 8px !important; /* 滚动条的圆角 */
  135. }
  136. ::-webkit-scrollbar-thumb:hover {
  137. background-color: #5a5e66; /* 滚动条hover时的颜色 */
  138. }
  139. @keyframes l19 {
  140. 100% {
  141. transform: rotate(360deg);
  142. }
  143. }
  144. </style>
  145. </html>