cattom/PersonalPage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update index.html

Browse Source
This commit is contained in:
Cat Tom 2025-03-26 02:50:37 +08:00
parent daa5ee7b78
commit df4bedc186
1 changed files with 66 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
index.html
View File

@ -47,12 +47,16 @@
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<!-- 初始加载动画 --> <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> <div class="app-loading">
</svg> <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> </div>
</div> </div>
@ -62,17 +66,37 @@
<!-- 加载状态样式 --> <!-- 加载状态样式 -->
<style> <style>
.app-loading { html, body {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; height: 100%;
margin: 0;
}
#app {
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center; min-height: 100vh;
background: rgba(255,255,255,0.8); max-height: 100vh;
z-index: 9999; 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; transition: opacity 0.3s ease;
} }
@ -99,11 +123,37 @@
100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } 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挂载后隐藏加载动画 */ /* 当Vue挂载后隐藏加载动画 */
[data-v-app] + .app-loading { [data-v-app] .app-loading {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
@media (max-width: 768px) {
.content-wrapper {
padding: 1rem;
}
.app-loading {
padding: 1rem;
width: 80%;
max-width: 300px;
}
}
</style> </style>
</body> </body>
</html> </html>