<!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>