第一次美化

index.html

@@ -20,92 +20,86 @@
       body {
         margin: 0;
         background: #020617;
-        --64f90c3645474bd5: #00d4ff;
       }
       #gva-loading-box {
         position: relative;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
         height: 100vh;
         width: 100vw;
         overflow: hidden;
         background:
-          radial-gradient(circle at 12% 10%, rgba(0, 212, 255, 0.16), transparent 28%),
-          radial-gradient(circle at 86% 6%, rgba(245, 158, 11, 0.1), transparent 22%),
+          radial-gradient(circle at 50% 40%, rgba(0, 212, 255, 0.1), transparent 38%),
+          radial-gradient(circle at 12% 10%, rgba(0, 212, 255, 0.12), transparent 28%),
           linear-gradient(135deg, #020617 0%, #07111f 52%, #0f172a 100%);
       }
-      #loading-text {
+      #gva-loading-panel {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 14px;
+        min-width: 148px;
+        padding: 24px 28px 20px;
+        border: 1px solid rgba(0, 212, 255, 0.22);
+        border-radius: 18px;
+        background: linear-gradient(145deg, rgba(10, 28, 54, 0.96), rgba(4, 14, 30, 0.92));
+        box-shadow:
+          0 22px 48px rgba(0, 0, 0, 0.34),
+          0 0 28px rgba(0, 212, 255, 0.1),
+          inset 0 0 28px rgba(0, 212, 255, 0.05);
+      }
+      #loading-ring {
+        position: relative;
+        width: 44px;
+        height: 44px;
+      }
+      #loading-ring::before {
+        content: '';
         position: absolute;
-        bottom: calc(50% - 100px);
-        left: 0;
-        width: 100%;
-        text-align: center;
-        color: #67e8f9;
-        font-size: 14px;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-        text-shadow: 0 0 12px rgba(0, 212, 255, 0.38);
-      }
-      #loading {
-        position: absolute;
-        top: calc(50% - 20px);
-        left: calc(50% - 20px);
-      }
-      @keyframes loader {
-        0% {
-          left: -100px;
-        }
-        100% {
-          left: 110%;
-        }
-      }
-      #box {
-        width: 50px;
-        height: 50px;
-        background: var(--64f90c3645474bd5);
-        box-shadow: 0 0 22px rgba(0, 212, 255, 0.58);
-        animation: animate 0.5s linear infinite;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border-radius: 3px;
-      }
-      @keyframes animate {
-        17% {
-          border-bottom-right-radius: 3px;
-        }
-        25% {
-          transform: translateY(9px) rotate(22.5deg);
-        }
-        50% {
-          transform: translateY(18px) scale(1, 0.9) rotate(45deg);
-          border-bottom-right-radius: 40px;
-        }
-        75% {
-          transform: translateY(9px) rotate(67.5deg);
-        }
-        100% {
-          transform: translateY(0) rotate(90deg);
-        }
-      }
-      #shadow {
-        width: 50px;
-        height: 5px;
-        background: #67e8f9;
-        opacity: 0.28;
-        position: absolute;
-        top: 59px;
-        left: 0;
+        inset: 0;
+        border: 2px solid rgba(0, 212, 255, 0.12);
+        border-top-color: #00d4ff;
+        border-right-color: rgba(103, 232, 249, 0.55);
         border-radius: 50%;
-        animation: shadow 0.5s linear infinite;
+        animation: gvaBootSpin 0.85s linear infinite;
+        box-shadow: 0 0 18px rgba(0, 212, 255, 0.22);
       }
-      .dark #shadow {
-        background: #fff;
+      #loading-ring::after {
+        content: '';
+        position: absolute;
+        inset: -6px;
+        border: 1px dashed rgba(0, 212, 255, 0.16);
+        border-radius: 50%;
+        animation: gvaBootOrbit 2.4s linear infinite;
       }
-      @keyframes shadow {
+      #loading-text {
+        margin: 0;
+        color: #dceeff;
+        font-size: 13px;
+        font-weight: 600;
+        letter-spacing: 0.1em;
+        animation: gvaBootPulse 1.6s ease-in-out infinite;
+      }
+      @keyframes gvaBootSpin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      @keyframes gvaBootOrbit {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      @keyframes gvaBootPulse {
+        0%,
+        100% {
+          opacity: 0.72;
+        }
         50% {
-          transform: scale(1.2, 1);
+          opacity: 1;
         }
       }
     </style>
@@ -113,11 +107,10 @@
 
   <body>
     <div id="gva-loading-box">
-      <div id="loading">
-        <div id="shadow"></div>
-        <div id="box"></div>
+      <div id="gva-loading-panel">
+        <div id="loading-ring"></div>
+        <div id="loading-text">系统正在加载中，请稍候...</div>
       </div>
-      <div id="loading-text">系统正在加载中，请稍候...</div>
     </div>
     <div id="app"></div>
     <script type="module" src="./src/main.js"></script>