<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统维护中</title>
<!-- 引入现代字体 Plus Jakarta Sans -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- 引入图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #2563eb;
--primary-light: #dbeafe;
--success: #10b981;
--warning: #f59e0b;
--text-main: #0f172a;
--text-sub: #64748b;
--bg-body: #f8fafc;
--card-bg: rgba(255, 255, 255, 0.9);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Plus Jakarta Sans', sans-serif;
}
body {
background-color: var(--bg-body);
color: var(--text-main);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
/* 动态极光背景 */
.aurora-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.6;
z-index: -1;
animation: float 10s infinite alternate;
}
.blob-1 { top: -10%; left: -10%; width: 600px; height: 600px; background: #60a5fa; }
.blob-2 { bottom: -10%; right: -10%; width: 500px; height: 500px; background: #a78bfa; animation-delay: -5s; }
@keyframes float {
0% { transform: translate(0, 0); }
100% { transform: translate(40px, 40px); }
}
/* 主卡片 */
.maintenance-card {
background: var(--card-bg);
width: 100%;
max-width: 600px;
padding: 48px;
border-radius: 32px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.6);
text-align: center;
position: relative;
overflow: hidden;
}
/* 顶部装饰条 */
.card-top-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: linear-gradient(90deg, #2563eb, #9333ea);
}
/* 图标区域 */
.icon-container {
width: 80px;
height: 80px;
background: #eff6ff;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px auto;
color: var(--primary);
font-size: 32px;
position: relative;
}
.icon-container::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 24px;
border: 2px solid var(--primary);
opacity: 0.3;
animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
75%, 100% { transform: scale(1.4); opacity: 0; }
}
h1 { font-size: 28px; font-weight: 800; margin-bottom: 12px; letter-spacing: -0.5px; }
p.desc { color: var(--text-sub); font-size: 16px; line-height: 1.6; margin-bottom: 32px; }
/* 倒计时区域 */
.timer-box {
background: #f1f5f9;
border-radius: 16px;
padding: 20px;
margin-bottom: 32px;
display: flex;
justify-content: space-around;
align-items: center;
}
.time-unit { display: flex; flex-direction: column; align-items: center; }
.time-val { font-size: 32px; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; }
.time-label { font-size: 12px; color: var(--text-sub); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-top: 4px; }
.separator { font-size: 24px; color: #cbd5e1; font-weight: 300; margin-top: -10px; }
/* 预计恢复时间 */
.eta-text {
display: inline-block;
background: #dbeafe;
color: #1e40af;
padding: 6px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
margin-bottom: 32px;
}
/* 任务列表 */
.task-section { text-align: left; }
.task-header { font-size: 14px; font-weight: 700; color: var(--text-sub); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
.task-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.task-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 12px;
transition: 0.3s;
}
.task-left { display: flex; align-items: center; gap: 12px; }
.task-name { font-size: 14px; font-weight: 600; color: var(--text-main); }
/* 状态徽标 */
.status-badge {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.status-done { background: #dcfce7; color: #166534; }
.status-progress { background: #dbeafe; color: #1e40af; }
.status-pending { background: #f1f5f9; color: #64748b; }
/* 旋转动画 */
.fa-spin-slow { animation: fa-spin 3s infinite linear; }
/* 底部联系 */
.footer { margin-top: 32px; font-size: 13px; color: var(--text-sub); }
.footer a { color: var(--primary); text-decoration: none; font-weight: 600; }
.footer a:hover { text-decoration: underline; }
</style>
</head>
<body>
<!-- 背景装饰 -->
<div class="aurora-blob blob-1"></div>
<div class="aurora-blob blob-2"></div>
<div class="maintenance-card">
<div class="card-top-line"></div>
<!-- 图标 -->
<div class="icon-container">
<i class="fa-solid fa-screwdriver-wrench"></i>
</div>
<!-- 标题与描述 -->
<h1>系统升级维护中</h1>
<p class="desc">为了提供更稳定、安全的 EDC 数据服务，我们正在对服务器进行计划内的升级维护。在此期间系统将无法访问。</p>
<!-- 预计恢复时间 -->
<div class="eta-text">
预计恢复时间：今天 18:00 (GMT+8)
</div>
<!-- 倒计时 -->
<div class="timer-box">
<div class="time-unit">
<span class="time-val" id="hours">01</span>
<span class="time-label">小时</span>
</div>
<span class="separator">:</span>
<div class="time-unit">
<span class="time-val" id="minutes">45</span>
<span class="time-label">分钟</span>
</div>
<span class="separator">:</span>
<div class="time-unit">
<span class="time-val" id="seconds">30</span>
<span class="time-label">秒</span>
</div>
</div>
<!-- 正在进行的工作 (Task Monitor) -->
<div class="task-section">
<div class="task-header">当前进度日志</div>
<ul class="task-list">
<!-- 已完成 -->
<li class="task-item" style="opacity: 0.6;">
<div class="task-left">
<i class="fa-solid fa-check-circle" style="color: var(--success);"></i>
<span class="task-name" style="text-decoration: line-through;">数据库备份与归档</span>
</div>
<span class="status-badge status-done">已完成</span>
</li>
<!-- 进行中 (高亮) -->
<li class="task-item" style="border-color: var(--primary); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);">
<div class="task-left">
<i class="fa-solid fa-circle-notch fa-spin-slow" style="color: var(--primary);"></i>
<span class="task-name">安全补丁更新 (V3.1.0)</span>
</div>
<span class="status-badge status-progress">
<span style="width:6px; height:6px; background:currentColor; border-radius:50%; display:inline-block;"></span>
进行中
</span>
</li>
<!-- 待处理 -->
<li class="task-item">
<div class="task-left">
<i class="fa-regular fa-circle" style="color: #cbd5e1;"></i>
<span class="task-name">系统重启与连通性测试</span>
</div>
<span class="status-badge status-pending">等待中</span>
</li>
</ul>
</div>
<div class="footer">
如需紧急查询数据，请联系 <a href="#">admin-it@jianfancloud.com</a>
</div>
</div>
<script>
// 模拟一个倒计时脚本
function startCountdown(durationInSeconds) {
let timer = durationInSeconds, hours, minutes, seconds;
const hourEl = document.getElementById('hours');
const minEl = document.getElementById('minutes');
const secEl = document.getElementById('seconds');
setInterval(function () {
hours = parseInt(timer / 3600, 10);
minutes = parseInt((timer % 3600) / 60, 10);
seconds = parseInt(timer % 60, 10);
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
hourEl.textContent = hours;
minEl.textContent = minutes;
secEl.textContent = seconds;
if (--timer < 0) {
timer = durationInSeconds; // 循环或者是停止
}
}, 1000);
}
// 初始化倒计时：1小时45分30秒
window.onload = function () {
const twoHours = 60 * 60 + 45 * 60 + 30;
startCountdown(twoHours);
};
</script>
</body>
</html>
最后修改：2025 年 11 月 21 日
© 允许规范转载