这个静态页面具有以下特点：
- 现代化设计：采用渐变背景和毛玻璃效果，视觉体验优雅
- 响应式布局：适配各种设备屏幕尺寸
- 动态效果：包含脉冲动画和加载指示器
- 备案信息显示：页面底部清晰展示备案号码
- 用户友好提示：明确告知维护原因和预计恢复时间
使用建议：
将这段代码保存为maintenance.html文件，上传到您的网站根目录，然后在易优CMS后台的"网站基本信息设置"中开启网站关闭功能1，系统会自动显示这个维护页面。您可以根据需要修改备案号、预计恢复时间等具体信息。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网站维护中 - 临时关闭</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<style>
.maintenance-container {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
0%, 100% { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
50% { background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); }
}
.content-box {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
</style>
</head>
<body class="maintenance-container flex items-center justify-center p-4">
<div class="content-box rounded-2xl shadow-2xl p-8 max-w-md w-full text-center pulse-animation">
<div>
<i class="fas fa-tools text-white text-6xl mb-4"></i>
<h1 class="text-3xl font-bold text-white mb-2">网站维护中</h1>
<p class="text-white/80 text-lg">我们正在对网站进行升级维护</p>
</div>
<div>
<div class="flex justify-center space-x-2 mb-4">
<div class="w-3 h-3 bg-white rounded-full animate-bounce"></div>
<div class="w-3 h-3 bg-white rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
<div class="w-3 h-3 bg-white rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
</div>
<p class="text-white/70 text-sm">为了给您提供更好的服务体验，我们正在进行系统维护升级</p>
</div>
<div class="border-t border-white/20 pt-6 mt-6">
<div class="flex items-center justify-center space-x-4 text-white/60 text-sm">
<i class="fas fa-clock"></i>
<span>预计恢复时间：2025年11月26日 10:00</span>
</div>
</div>
<div class="mt-8 pt-6 border-t border-white/20">
<p class="text-white/50 text-xs">备案号：京ICP备12345678号-1</p>
</div>
</div>
<script>
// 自动刷新倒计时（可选功能）
let countdown = 60;
const countdownElement = document.createElement('div');
countdownElement.className = 'text-white/40 text-xs mt-4';
document.querySelector('.content-box').appendChild(countdownElement);
function updateCountdown() {
countdown--;
if (countdown <= 0) {
countdown = 60;
checkMaintenanceStatus();
}
countdownElement.textContent = `${countdown}秒后自动检查网站状态`;
}
function checkMaintenanceStatus() {
// 这里可以添加检查网站是否恢复正常的逻辑
console.log('检查网站维护状态...');
}
setInterval(updateCountdown, 1000);
updateCountdown();
// 点击页面任意位置刷新
document.addEventListener('click', function() {
location.reload();
});
</script>
</body>
</html>
