HTML系统通知交互演示页面

由 Vibe Coding 使用 AI 回答

代码问题：

写个html 通知demo

代码解决方案：
<!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;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            padding: 20px;
        }

        .notification-container {
            max-width: 600px;
            margin: 0 auto;
        }

        .notification {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 16px;
            overflow: hidden;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .notification:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .notification-header {
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #f0f0f0;
        }

        .notification-type {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 500;
        }

        .notification-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .icon-info {
            background-color: #e6f7ff;
            color: #1890ff;
        }

        .icon-success {
            background-color: #f6ffed;
            color: #52c41a;
        }

        .icon-warning {
            background-color: #fff7e6;
            color: #faad14;
        }

        .icon-error {
            background-color: #fff2f0;
            color: #ff4d4f;
        }

        .notification-time {
            font-size: 12px;
            color: #999;
        }

        .notification-content {
            padding: 20px;
        }

        .notification-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
        }

        .notification-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
        }

        .notification-actions {
            padding: 12px 20px;
            background-color: #fafafa;
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        .btn {
            padding: 6px 16px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            background: white;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn:hover {
            border-color: #40a9ff;
            color: #40a9ff;
        }

        .btn-primary {
            background: #1890ff;
            border-color: #1890ff;
            color: white;
        }

        .btn-primary:hover {
            background: #40a9ff;
            border-color: #40a9ff;
        }

        .notification.unread {
            border-left: 4px solid #1890ff;
        }

        .notification.unread .notification-title {
            font-weight: 600;
        }

        .close-btn {
            width: 24px;
            height: 24px;
            border: none;
            background: none;
            cursor: pointer;
            color: #999;
            font-size: 18px;
            line-height: 1;
        }

        .close-btn:hover {
            color: #666;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }

        .empty-state svg {
            width: 80px;
            height: 80px;
            margin-bottom: 16px;
            opacity: 0.3;
        }
    </style>
</head>
<body>
    <div class="notification-container">
        <h2 style="margin-bottom: 20px; color: #333;">系统通知</h2>
        
        <div class="notification unread" data-id="1">
            <div class="notification-header">
                <div class="notification-type">
                    <div class="notification-icon icon-info">i</div>
                    <span>系统消息</span>
                </div>
                <div style="display: flex; align-items: center; gap: 12px;">
                    <span class="notification-time">2分钟前</span>
                    <button class="close-btn" onclick="closeNotification(this)">×</button>
                </div>
            </div>
            <div class="notification-content">
                <div class="notification-title">系统维护通知</div>
                <div class="notification-desc">
                    尊敬的用户，系统将于今晚23:00-24:00进行例行维护，期间部分功能可能暂时无法使用，请您提前做好安排。
                </div>
            </div>
            <div class="notification-actions">
                <button class="btn" onclick="markAsRead(this)">稍后处理</button>
                <button class="btn btn-primary" onclick="viewDetails(1)">查看详情</button>
            </div>
        </div>

        <div class="notification" data-id="2">
            <div class="notification-header">
                <div class="notification-type">
                    <div class="notification-icon icon-success">✓</div>
                    <span>操作成功</span>
                </div>
                <div style="display: flex; align-items: center; gap: 12px;">
                    <span class="notification-time">1小时前</span>
                    <button class="close-btn" onclick="closeNotification(this)">×</button>
                </div>
            </div>
            <div class="notification-content">
                <div class="notification-title">密码修改成功</div>
                <div class="notification-desc">
                    您的账户密码已成功修改。如非本人操作，请立即联系客服。
                </div>
            </div>
            <div class="notification-actions">
                <button class="btn" onclick="closeNotification(this)">知道了</button>
            </div>
        </div>

        <div class="notification" data-id="3">
            <div class="notification-header">
                <div class="notification-type">
                    <div class="notification-icon icon-warning">!</div>
                    <span>安全提醒</span>
                </div>
                <div style="display: flex; align-items: center; gap: 12px;">
                    <span class="notification-time">昨天</span>
                    <button class="close-btn" onclick="closeNotification(this)">×</button>
                </div>
            </div>
            <div class="notification-content">
                <div class="notification-title">异常登录提醒</div>
                <div class="notification-desc">
                    检测到您的账号在异地登录。登录地点：北京市，IP：123.123.123.123
                </div>
            </div>
            <div class="notification-actions">
                <button class="btn" onclick="closeNotification(this)">是我本人</button>
                <button class="btn btn-primary" onclick="secureAccount()">立即处理</button>
            </div>
        </div>

        <div class="notification" data-id="4">
            <div class="notification-header">
                <div class="notification-type">
                    <div class="notification-icon icon-error">×</div>
                    <span>系统错误</span>
                </div>
                <div style="display: flex; align-items: center; gap: 12px;">
                    <span class="notification-time">3天前</span>
                    <button class="close-btn" onclick="closeNotification(this)">×</button>
                </div>
            </div>
            <div class="notification-content">
                <div class="notification-title">订单支付失败</div>
                <div class="notification-desc">
                    您的订单 #20240115001 支付失败，原因：余额不足。请充值后重新支付。
                </div>
            </div>
            <div class="notification-actions">
                <button class="btn" onclick="closeNotification(this)">取消订单</button>
                <button class="btn btn-primary" onclick="recharge()">立即充值</button>
            </div>
        </div>
    </div>

    <script>
        // 关闭通知
        function closeNotification(btn) {
            const notification = btn.closest('.notification');
            notification.style.transform = 'translateX(100%)';
            notification.style.opacity = '0';
            setTimeout(() => {
                notification.remove();
                checkEmpty();
            }, 300);
        }

        // 标记为已读
        function markAsRead(btn) {
            const notification = btn.closest('.notification');
            notification.classList.remove('unread');
            setTimeout(() => {
                closeNotification(btn);
            }, 500);
        }

        // 查看详情
        function viewDetails(id) {
            alert(`查看通知详情：${id}`);
            closeNotification(event.target);
        }

        // 安全处理
        function secureAccount() {
            alert('正在跳转到安全中心...');
            closeNotification(event.target);
        }

        // 充值
        function recharge() {
            alert('正在跳转到充值页面...');
            closeNotification(event.target);
        }

        // 检查是否为空
        function checkEmpty() {
            const container = document.querySelector('.notification-container');
            const notifications = container.querySelectorAll('.notification');
            if (notifications.length === 0) {
                container.innerHTML = `
                    <h2 style="margin-bottom: 20px; color: #333;">系统通知</h2>
                    <div class="empty-state">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
                        </svg>
                        <p>暂无新通知</p>
                    </div>
                `;
            }
        }

        // 模拟新通知
        setTimeout(() => {
            const container = document.querySelector('.notification-container');
            if (container.querySelector('.empty-state')) {
                location.reload();
            }
        }, 10000);
    </script>
</body>
</html>