218 lines
6.4 KiB
HTML
218 lines
6.4 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
<title>系统维护中</title>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
min-height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.maintenance-container {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
padding: 60px 40px;
|
|||
|
|
max-width: 600px;
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|||
|
|
animation: fadeIn 0.5s ease-in;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fadeIn {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(-20px);
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.maintenance-icon {
|
|||
|
|
width: 120px;
|
|||
|
|
height: 120px;
|
|||
|
|
margin: 0 auto 30px;
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
animation: pulse 2s infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes pulse {
|
|||
|
|
0%, 100% {
|
|||
|
|
transform: scale(1);
|
|||
|
|
}
|
|||
|
|
50% {
|
|||
|
|
transform: scale(1.05);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.maintenance-icon svg {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
fill: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 32px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 18px;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.details {
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 20px;
|
|||
|
|
margin: 30px 0;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.details p {
|
|||
|
|
color: #555;
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin: 8px 0;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refresh-btn {
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
padding: 15px 40px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
border-radius: 50px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refresh-btn:hover {
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refresh-btn:active {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.countdown {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 600px) {
|
|||
|
|
.maintenance-container {
|
|||
|
|
padding: 40px 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
font-size: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="maintenance-container">
|
|||
|
|
<div class="maintenance-icon">
|
|||
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|||
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
|||
|
|
<circle cx="12" cy="12" r="10" fill="none" stroke="white" stroke-width="2"/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<h1>系统维护中</h1>
|
|||
|
|
<div class="message">
|
|||
|
|
系统正在进行更新维护，请稍后再试
|
|||
|
|
</div>
|
|||
|
|
<div class="details">
|
|||
|
|
<p><strong>维护时间：</strong><span id="maintenance-time">预计 10-30 分钟</span></p>
|
|||
|
|
<p><strong>维护内容：</strong>系统升级更新</p>
|
|||
|
|
<p><strong>如有紧急事务，请联系管理员</strong></p>
|
|||
|
|
</div>
|
|||
|
|
<button class="refresh-btn" onclick="location.reload()">刷新页面</button>
|
|||
|
|
<div class="countdown">
|
|||
|
|
<span id="auto-refresh">页面将在 <span id="countdown">3:00</span> 后自动刷新</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 自动刷新倒计时（3分钟 = 180秒）
|
|||
|
|
let countdown = 180;
|
|||
|
|
const countdownElement = document.getElementById('countdown');
|
|||
|
|
const autoRefreshElement = document.getElementById('auto-refresh');
|
|||
|
|
|
|||
|
|
// 格式化时间显示（分钟:秒）
|
|||
|
|
function formatTime(seconds) {
|
|||
|
|
const minutes = Math.floor(seconds / 60);
|
|||
|
|
const secs = seconds % 60;
|
|||
|
|
return minutes + ':' + (secs < 10 ? '0' : '') + secs;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化显示
|
|||
|
|
if (countdownElement) {
|
|||
|
|
countdownElement.textContent = formatTime(countdown);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 倒计时定时器
|
|||
|
|
const timer = setInterval(() => {
|
|||
|
|
countdown--;
|
|||
|
|
if (countdownElement) {
|
|||
|
|
countdownElement.textContent = formatTime(countdown);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (countdown <= 0) {
|
|||
|
|
clearInterval(timer);
|
|||
|
|
if (autoRefreshElement) {
|
|||
|
|
autoRefreshElement.textContent = '正在刷新...';
|
|||
|
|
}
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// 强制刷新，清除缓存
|
|||
|
|
location.reload(true);
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
|
|||
|
|
// 页面可见性变化时，如果页面重新可见，重新开始倒计时（避免后台运行导致时间不准确）
|
|||
|
|
document.addEventListener('visibilitychange', function() {
|
|||
|
|
if (!document.hidden && countdown > 0) {
|
|||
|
|
// 页面重新可见时，重新初始化倒计时显示
|
|||
|
|
if (countdownElement) {
|
|||
|
|
countdownElement.textContent = formatTime(countdown);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|