From 914c39db5e8b0533ee6af79c60370a3615b8e5e3 Mon Sep 17 00:00:00 2001
From: liting <994745334@qq.com>
Date: Sun, 16 Jun 2024 08:30:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 128 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 119 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index 8cfcbefa6..f6b2b6d2a 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,109 @@
   <body>
     <div id="app">
       <style>
+        .first-loading-wrap {
+          display: flex;
+          width: 100%;
+          height: 100vh;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          background-color: #f7f7f7;
+        }
+  
+        .first-loading-wrap>h1 {
+          font-size: 128px;
+        }
+  
+        .first-loading-wrap .loading-wrap {
+          padding:20px  98px ;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .app-loading-title {
+         
+          font-size: 24px;
+          font-weight: bold;
+          text-align: center;
+        }
+        .dot {
+          animation: antRotate 1.2s infinite linear;
+          transform: rotate(45deg);
+          position: relative;
+          display: inline-block;
+          font-size: 32px;
+          width: 32px;
+          height: 32px;
+          box-sizing: border-box;
+        }
+  
+        .dot i {
+          width: 14px;
+          height: 14px;
+          position: absolute;
+          display: block;
+          background-color: #1890ff;
+          border-radius: 100%;
+          transform: scale(0.75);
+          transform-origin: 50% 50%;
+          opacity: 0.3;
+          animation: antSpinMove 1s infinite linear alternate;
+        }
+  
+        .dot i:nth-child(1) {
+          top: 0;
+          left: 0;
+        }
+  
+        .dot i:nth-child(2) {
+          top: 0;
+          right: 0;
+          -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+        }
+  
+        .dot i:nth-child(3) {
+          right: 0;
+          bottom: 0;
+          -webkit-animation-delay: 0.8s;
+          animation-delay: 0.8s;
+        }
+  
+        .dot i:nth-child(4) {
+          bottom: 0;
+          left: 0;
+          -webkit-animation-delay: 1.2s;
+          animation-delay: 1.2s;
+        }
+  
+        @keyframes antRotate {
+          to {
+            -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+          }
+        }
+  
+        @-webkit-keyframes antRotate {
+          to {
+            -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+          }
+        }
+  
+        @keyframes antSpinMove {
+          to {
+            opacity: 1;
+          }
+        }
+  
+        @-webkit-keyframes antSpinMove {
+          to {
+            opacity: 1;
+          }
+        }
+      </style>
+      <!-- <style>
         .app-loading {
           display: flex;
           width: 100%;
@@ -41,8 +144,8 @@
         }
 
         .app-loading .app-loading-title {
-          margin-bottom: 30px;
-          font-size: 20px;
+          margin-top: 20px;
+          font-size: 24px;
           font-weight: bold;
           text-align: center;
         }
@@ -132,19 +235,26 @@
             transform: rotate(-360deg);
           }
         }
-      </style>
-      <div class="app-loading">
-        <div class="app-loading-wrap">
-          <div class="app-loading-title">
-            <img src="/logo.gif" class="app-loading-logo" alt="Logo" />
-            <div class="app-loading-title">%VITE_APP_TITLE%</div>
+      </style> -->
+        <div class="first-loading-wrap">
+          <div class="loading-wrap">
+            <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
           </div>
+          <div class="app-loading-title">%VITE_APP_TITLE%</div>
+        </div>
+      <!-- <div class="app-loading">
+        <div class="app-loading-wrap">
+          
           <div class="app-loading-item">
             <div class="app-loading-outter"></div>
             <div class="app-loading-inner"></div>
           </div>
+          <div class="app-loading-title">
+            <img src="/logo.gif" class="app-loading-logo" alt="Logo" />
+            <div class="app-loading-title">%VITE_APP_TITLE%</div>
+          </div>
         </div>
-      </div>
+      </div> -->
     </div>
     <script type="module" src="/src/main.ts"></script>
   </body>
