系统维护中

设计的美观大气的关站提示页面代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统维护中</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .maintenance-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
            max-width: 600px;
            padding: 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .header {
            margin-bottom: 30px;
        }

        .icon {
            font-size: 64px;
            color: #2196F3;
            margin-bottom: 20px;
            animation: pulse 2s infinite;
        }

        h1 {
            color: #2d3436;
            font-size: 2.2em;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .status {
            color: #e74c3c;
            background: #fce4ec;
            padding: 8px 20px;
            border-radius: 20px;
            display: inline-block;
            font-weight: 500;
            margin-bottom: 25px;
        }

        .description {
            color: #636e72;
            line-height: 1.8;
            margin-bottom: 30px;
            font-size: 1.1em;
        }

        .contact-section {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 12px;
            margin-top: 30px;
        }

        .contact-item {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 15px 0;
        }

        .contact-icon {
            width: 24px;
            height: 24px;
            margin-right: 12px;
            color: #2196F3;
        }

        .decorative-wave {
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 60px;
            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 120" xmlns="http://www.w3.org/2000/svg"><path fill="%232196F3" fill-opacity="0.1" d="M0 32l48 16c48 16 144 48 240 42.7 96-5.7 192-47.7 288-42.7 96 5 192 59 288 64 96 5 192-37 288-48 96-11 192 5 240 16l48 10V0H0z"/></svg>');
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        @media (max-width: 480px) {
            .maintenance-card {
                padding: 25px;
            }
            
            h1 {
                font-size: 1.8em;
            }
        }
    </style>
</head>
<body>
    <div class="maintenance-card">
        <div class="header">
            <!-- 图标可以使用Font Awesome或其他图标库 -->
            <div class="icon">🚧</div>
            <h1>系统升级维护中</h1>
            <div class="status">维护状态：系统临时关闭</div>
        </div>

        <p class="description">
            很抱歉给您带来不便，我们正在对系统进行重要升级维护。<br>
            预计将在24小时内完成，请稍后再访问。感谢您的理解与支持！
        </p>

        <div class="contact-section">
            <div class="contact-item">
                <svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm9.06 8.683L5.648 6.238 4.353 7.762l7.72 6.555 7.581-6.56-1.308-1.513-6.285 5.439z"/>
                </svg>
                <span>技术支持：support@example.com</span>
            </div>
            <div class="contact-item">
                <svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M9.366 10.682a10.556 10.556 0 0 0 3.952 3.952l.884-1.238a1 1 0 0 1 1.294-.296 11.422 11.422 0 0 0 4.583 1.364 1 1 0 0 1 .921.997v4.462a1 1 0 0 1-.898.995c-.53.055-1.064.082-1.602.082C9.94 21 3 14.06 3 5.5c0-.538.027-1.072.082-1.602A1 1 0 0 1 4.077 3h4.462a1 1 0 0 1 .997.921A11.422 11.422 0 0 0 10.9 8.504a1 1 0 0 1-.296 1.294l-1.238.884z"/>
                </svg>
                <span>紧急联系：+86 400-123-4567</span>
            </div>
        </div>

        <div class="decorative-wave"></div>
    </div>
</body>
</html>

主要改进特点：

现代设计语言：
采用卡片式布局和柔和阴影
渐变色背景营造层次感
波浪装饰元素增加设计感
响应式布局适配各种设备
视觉增强：
动态图标动画（施工图标呼吸效果）
状态徽章突出显示
专业图标系统（邮件和电话图标）
精心设计的文字排版
信息呈现：
醒目的状态提示
明确的维护说明
多维度联系方式
预估维护时间
交互细节：
流畅的动画效果
明确的视觉层次
舒适的阅读体验
专业而不失亲切的文案
技术特性：
纯CSS实现（无需额外资源）
SVG矢量图标
移动端优先设计
高性能CSS动画

这个版本通过现代设计语言、清晰的视觉层次和专业的细节处理，既保持了必要的严肃性，又通过适度的动画和设计元素让页面显得更加专业和值得信赖。

相关推荐