From df4bedc186812607c4b84369c0edf3a696c317ca Mon Sep 17 00:00:00 2001
From: Cat Tom <linweijie2015@gmail.com>
Date: Wed, 26 Mar 2025 02:50:37 +0800
Subject: [PATCH] chore: update index.html

---
 index.html | 82 +++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 66 insertions(+), 16 deletions(-)
diff --git a/index.html b/index.html
index 8bb26d2..a7e74a3 100644
--- a/index.html
+++ b/index.html
@@ -47,12 +47,16 @@
 </head>
 <body>
   <div id="app">
-    <!-- 初始加载动画 -->
-    <div class="app-loading">
-      <div class="loading-spinner">
-        <svg viewBox="0 0 50 50">
-          <circle cx="25" cy="25" r="20" fill="none" stroke="#7ac5e8" stroke-width="4"></circle>
-        </svg>
+    <div class="content-wrapper">
+      <!-- 页面主要内容 -->
+      
+      <!-- 初始加载动画 -->
+      <div class="app-loading">
+        <div class="loading-spinner">
+          <svg viewBox="0 0 50 50">
+            <circle cx="25" cy="25" r="20" fill="none" stroke="#7ac5e8" stroke-width="4"></circle>
+          </svg>
+        </div>
       </div>
     </div>
   </div>
@@ -62,17 +66,37 @@
   
   <!-- 加载状态样式 -->
   <style>
-    .app-loading {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
+    html, body {
       height: 100%;
+      margin: 0;
+    }
+    
+    #app {
       display: flex;
-      justify-content: center;
-      align-items: center;
-      background: rgba(255,255,255,0.8);
-      z-index: 9999;
+      flex-direction: column;
+      min-height: 100vh;
+      max-height: 100vh;
+      overflow: hidden;
+    }
+    
+    .content-wrapper {
+      flex: 1;
+      overflow-y: auto;
+      padding: 2rem;
+      scrollbar-width: thin;
+      scrollbar-color: #7ac5e8 transparent;
+    }
+    
+    .app-loading {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: rgba(255,255,255,0.9);
+      border-radius: 1rem;
+      padding: 2rem;
+      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+      z-index: 10000;
       transition: opacity 0.3s ease;
     }
     
@@ -99,11 +123,37 @@
       100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
     }
     
+    /* 滚动条样式 */
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    
+    ::-webkit-scrollbar-track {
+      background: rgba(122,197,232,0.1);
+    }
+    
+    ::-webkit-scrollbar-thumb {
+      background: #7ac5e8;
+      border-radius: 4px;
+    }
+    
     /* 当Vue挂载后隐藏加载动画 */
-    [data-v-app] + .app-loading {
+    [data-v-app] .app-loading {
       opacity: 0;
       pointer-events: none;
     }
+    
+    @media (max-width: 768px) {
+      .content-wrapper {
+        padding: 1rem;
+      }
+      
+      .app-loading {
+        padding: 1rem;
+        width: 80%;
+        max-width: 300px;
+      }
+    }
   </style>
 </body>
 </html>
