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>