index.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  7. <meta name="description" content=" AI 低代码平台 - 基于深度学习的智慧AI平台" />
  8. <meta name="theme-color" content="#121212" />
  9. <title>智慧 AI 系统 低代码AI模型训练平台</title>
  10. <!-- 预加载工业字体 -->
  11. <link rel="preconnect" href="https://fonts.googleapis.com">
  12. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  13. <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  14. </head>
  15. <body>
  16. <div id="app"></div>
  17. <!-- 应用加载指示器 -->
  18. <div id="loading-indicator" class="app-loading">
  19. <div class="loading-logo">
  20. <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
  21. <rect width="120" height="120" rx="16" fill="#121212"/>
  22. <path d="M30 30H90V42H78V90H42V42H30V30Z" fill="#2A5CAA"/>
  23. <rect x="48" y="48" width="24" height="6" fill="#FF6B35"/>
  24. <rect x="48" y="60" width="24" height="6" fill="#FF6B35"/>
  25. <rect x="48" y="72" width="24" height="6" fill="#FF6B35"/>
  26. </svg>
  27. </div>
  28. <div class="loading-text">请稍候,系统加载中</div>
  29. <div class="loading-progress">
  30. <div class="loading-progress-bar"></div>
  31. </div>
  32. </div>
  33. <script type="module" src="/src/main.js"></script>
  34. <style>
  35. .app-loading {
  36. position: fixed;
  37. top: 0;
  38. left: 0;
  39. width: 100%;
  40. height: 100%;
  41. display: flex;
  42. flex-direction: column;
  43. align-items: center;
  44. justify-content: center;
  45. background-color: #121212;
  46. z-index: 9999;
  47. transition: opacity 0.5s ease;
  48. }
  49. .loading-logo {
  50. margin-bottom: 24px;
  51. animation: pulse 2s infinite;
  52. }
  53. .loading-text {
  54. font-family: 'Roboto', sans-serif;
  55. font-size: 24px;
  56. font-weight: 500;
  57. color: #fff;
  58. margin-bottom: 16px;
  59. }
  60. .loading-progress {
  61. width: 240px;
  62. height: 8px;
  63. background-color: rgba(255, 255, 255, 0.1);
  64. border-radius: 4px;
  65. overflow: hidden;
  66. }
  67. .loading-progress-bar {
  68. height: 100%;
  69. width: 30%;
  70. background-color: #2A5CAA;
  71. border-radius: 4px;
  72. animation: progress 2s infinite;
  73. }
  74. @keyframes pulse {
  75. 0% { transform: scale(1); }
  76. 50% { transform: scale(1.05); }
  77. 100% { transform: scale(1); }
  78. }
  79. @keyframes progress {
  80. 0% { width: 0%; }
  81. 50% { width: 70%; }
  82. 100% { width: 100%; }
  83. }
  84. </style>
  85. </body>
  86. </html>