用户中心弹窗公告美化

<!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>
        /* 全局样式调整 */
        body {
            margin: 0;
            padding: 0;
            background-color: #ececec;
            font-family: '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Arial', sans-serif;
        }

        /* 苹果风格公告样式 */
        #announcement {
            display: none;
            position: fixed;
            top: 40%; /* 上移弹窗 */
            left: 50%;
            transform: translate(-50%, -50%);
            width: 85%;
            max-width: 450px; /* 调整宽度以更适合内容 */
            background-color: #ffffff; /* 更清新的白色背景 */
            color: #333;
            padding: 30px 20px; /* 加大内边距,增强整体感 */
            border-radius: 15px; /* 轻微圆角,柔和视觉 */
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* 提升阴影效果 */
            z-index: 1000;
            text-align: center; /* 中心对齐 */
        }

        #announcement h2 {
            margin-bottom: 20px;
            font-size: 20px;
            font-weight: bold;
            color: #000;
            letter-spacing: 1.5px;
            text-transform: uppercase; /* 字母大写 */
        }

        #announcement p {
            font-size: 16px;
            margin-bottom: 25px;
            color: #555;
            line-height: 1.7; /* 增加行间距 */
            text-align: left; /* 内容左对齐 */
        }

        #close-btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007aff;
            color: #fff;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            text-transform: uppercase;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3); /* 按钮阴影增强 */
        }

        #close-btn:hover {
            background-color: #005bb5;
            box-shadow: 0 6px 16px rgba(0, 91, 181, 0.3); /* 悬停时增强阴影 */
        }
    </style>
</head>
<body>

<div id="announcement">
    <h2>系统公告</h2>
    <p>尊敬的用户您好:<br>
        由于TX更新,暂时无法进行正常挂机,挂机状态会频繁的变更为登录保护,导致每日需要手动补挂。<br>
        后台正在对此问题进行修复,修复需要的时间暂时无法确定,修复后将另行通知,感谢您的支持与谅解。
    </p>
    <button id="close-btn">确定</button>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const announcement = document.getElementById("announcement");
        const closeBtn = document.getElementById("close-btn");

        // 获取当前日期
        const today = new Date().toISOString().slice(0, 10);

        // 获取localStorage中的日期
        const lastDisplayedDate = localStorage.getItem("announcementDisplayedDate");

        // 如果公告当天未显示,显示公告并更新日期
        if (lastDisplayedDate !== today) {
            announcement.style.display = "block";
        }

        // 关闭公告并记录当天日期
        closeBtn.addEventListener("click", function() {
            announcement.style.display = "none";
            localStorage.setItem("announcementDisplayedDate", today);
        });
    });
</script>

</body>
</html>

官方动态

查看更多>>