<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统升级维护中 - Dpz.Core</title>
<style>
:root {
/* 提取自 _variables.css */
--color-primary: #2563eb;
--color-bg-body: #f8fafc;
--color-bg-surface: #ffffff;
--color-text-main: #0f172a;
--color-text-secondary: #475569;
--color-border: #e2e8f0;
--spacing-md: 1rem;
--spacing-xl: 2rem;
--radius-lg: 1rem;
--transition-normal: 300ms ease;
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #3b82f6;
--color-bg-body: #0f172a;
--color-bg-surface: #1e293b;
--color-text-main: #f1f5f9;
--color-text-secondary: #cbd5e1;
--color-border: #334155;
}
}
/* 基础重置 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--color-bg-body);
color: var(--color-text-main);
line-height: 1.6;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-md);
}
.maintenance-card {
background-color: var(--color-bg-surface);
padding: 3rem 2rem;
border-radius: var(--radius-lg);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
border: 1px solid var(--color-border);
max-width: 500px;
width: 100%;
text-align: center;
position: relative;
overflow: hidden;
}
/* 顶部装饰条 */
.maintenance-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--color-primary), #60a5fa);
}
.icon-wrapper {
margin-bottom: var(--spacing-xl);
position: relative;
display: inline-block;
}
.icon-gear {
width: 64px;
height: 64px;
color: var(--color-primary);
animation: spin 4s linear infinite;
}
.version-badge {
display: inline-block;
margin-top: var(--spacing-md);
margin-bottom: var(--spacing-xl);
padding: 0.25rem 0.75rem;
background-color: rgba(37, 99, 235, 0.1);
color: var(--color-primary);
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
}
h1 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--spacing-md);
}
p {
color: var(--color-text-secondary);
margin-bottom: var(--spacing-md);
}
.footer-text {
margin-top: var(--spacing-xl);
font-size: 0.75rem;
color: var(--color-text-secondary);
opacity: 0.8;
}
/* 动画 */
@keyframes spin {
100% { transform: rotate(360deg); }
}
/* 进度条动画效果 */
.progress-bar {
height: 4px;
width: 100px;
background-color: var(--color-border);
margin: 0 auto;
border-radius: 2px;
overflow: hidden;
position: relative;
}
.progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 30%;
background-color: var(--color-primary);
animation: progress 1.5s ease-in-out infinite;
border-radius: 2px;
}
@keyframes progress {
0% { left: -30%; }
100% { left: 100%; }
}
</style>
</head>
<body>
<div class="maintenance-card">
<div class="icon-wrapper">
<!-- 简单的 SVG 齿轮图标 -->
<svg class="icon-gear" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<h1>系统升级中</h1>
<div class="version-badge">Ver 4.10.x → Ver 5.x</div>
<p>我们正在进行重要的大版本更新。</p>
<p>数据迁移与服务升级正在后台有条不紊地进行，<br>请稍候回来。</p>
<div class="progress-bar"></div>
<div class="footer-text">
© Dpz.Core.Web
</div>
</div>
</body>
</html> 评论加载中...