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