sion/monisuo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
sion
2026-03-25 22:34:54 +08:00
parent ff555450c0
commit ac96c337ce
1 changed files with 48 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
flutter_monisuo/web/index.html
View File

@@ -33,8 +33,8 @@
<link rel="manifest" href="manifest.json">
<style>
/* 加载指示器样式 */
.loading-container {
/* 启动页样式 */
.splash-container {
position: fixed;
top: 0;
left: 0;
@@ -48,40 +48,67 @@
z-index: 9999;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top: 3px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
.splash-logo {
width: 120px;
height: 120px;
animation: pulse 2s ease-in-out infinite;
}
.loading-text {
margin-top: 20px;
.splash-app-name {
margin-top: 24px;
color: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
font-size: 28px;
font-weight: 600;
letter-spacing: 2px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
.splash-loading {
margin-top: 32px;
display: flex;
gap: 6px;
}
/* 隐藏加载指示器 */
.splash-loading-dot {
width: 8px;
height: 8px;
background: #3498db;
border-radius: 50%;
animation: bounce 1.4s ease-in-out infinite;
}
.splash-loading-dot:nth-child(1) { animation-delay: 0s; }
.splash-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.splash-loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.9; }
}
@keyframes bounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
40% { transform: scale(1); opacity: 1; }
}
/* 隐藏启动页 */
.loading-hidden {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-out;
transition: opacity 0.5s ease-out;
}
</style>
</head>
<body>
<!-- 加载指示器 -->
<div id="loading" class="loading-container">
<div class="loading-spinner"></div>
<div class="loading-text">Loading...</div>
<!-- 启动页 -->
<div id="loading" class="splash-container">
<img src="icons/Icon-192.png" alt="Monisuo" class="splash-logo">
<div class="splash-app-name">MONISUO</div>
<div class="splash-loading">
<div class="splash-loading-dot"></div>
<div class="splash-loading-dot"></div>
<div class="splash-loading-dot"></div>
</div>
</div>
<noscript>