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

82
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>