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