142 lines
5.6 KiB
HTML
142 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>通知详情</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Orbitron:wght@500;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../css/notice-page.css">
|
|
</head>
|
|
<body>
|
|
<main class="notice-page">
|
|
<nav class="topbar" aria-label="页面导航">
|
|
<a class="brand" href="../index.html">
|
|
<span class="brand-mark">BI</span>
|
|
<span>通知中心</span>
|
|
</a>
|
|
<a class="back-link" href="../index.html">返回首页</a>
|
|
</nav>
|
|
|
|
<section class="notice-hero">
|
|
<div class="hero-copy">
|
|
<span class="eyebrow">Notice Center</span>
|
|
<h1 id="noticeTitle">重要通知</h1>
|
|
<p id="noticeSummary">2026 年上半年 4 月数据已完成更新。请按需进入相关查询页面查看最新记录。</p>
|
|
</div>
|
|
<div class="status-panel" aria-label="通知状态">
|
|
<span class="status-badge" id="noticeBadge">通知</span>
|
|
<div class="status-code" id="noticeLevel">INFO</div>
|
|
<p id="noticeWindow">长期有效</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="notice-layout">
|
|
<article class="notice-card">
|
|
<div class="notice-meta">
|
|
<span id="noticeDate">2026-05-01</span>
|
|
<span id="noticeState">当前生效</span>
|
|
</div>
|
|
<h2 id="articleTitle">重要通知</h2>
|
|
<p id="articleMessage">2026 年上半年 4 月数据已完成更新。请按需进入相关查询页面查看最新记录。</p>
|
|
|
|
<div class="info-grid">
|
|
<div>
|
|
<span class="info-label">适用范围</span>
|
|
<strong>证书、信函与单据查询</strong>
|
|
</div>
|
|
<div>
|
|
<span class="info-label">提醒类型</span>
|
|
<strong>服务公告与使用提示</strong>
|
|
</div>
|
|
<div>
|
|
<span class="info-label">查看方式</span>
|
|
<strong>页面顶部通知横幅</strong>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<aside class="side-card">
|
|
<h2>温馨提示</h2>
|
|
<p>如通知涉及查询范围、开放时间或数据更新，请以本页展示内容为准。完成阅读后，可返回首页继续使用相关查询服务。</p>
|
|
<a class="primary-action" href="../index.html">返回查询入口</a>
|
|
</aside>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
(function () {
|
|
fetch("../notices.json?v=" + Math.floor(Date.now() / 300000), { cache: "no-store" })
|
|
.then(function (response) {
|
|
if (!response.ok) {
|
|
throw new Error("notice source unavailable");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(function (payload) {
|
|
var notices = Array.isArray(payload) ? payload : payload.notices;
|
|
var notice = Array.isArray(notices) && notices.find(function (item) {
|
|
return item && item.enabled !== false;
|
|
});
|
|
|
|
if (notice) {
|
|
renderNotice(notice);
|
|
}
|
|
})
|
|
.catch(function () {});
|
|
|
|
function renderNotice(notice) {
|
|
setText("noticeTitle", notice.title || "重要通知");
|
|
setText("noticeSummary", notice.message || "");
|
|
setText("noticeBadge", notice.badge || "通知");
|
|
setText("noticeLevel", String(notice.level || "info").toUpperCase());
|
|
setText("articleTitle", notice.title || "重要通知");
|
|
setText("articleMessage", notice.message || "");
|
|
setText("noticeDate", formatDate(notice.startsAt) || "未设置开始时间");
|
|
setText("noticeWindow", formatWindow(notice.startsAt, notice.endsAt));
|
|
}
|
|
|
|
function setText(id, text) {
|
|
var node = document.getElementById(id);
|
|
if (node) {
|
|
node.textContent = text;
|
|
}
|
|
}
|
|
|
|
function formatDate(value) {
|
|
if (!value) {
|
|
return "";
|
|
}
|
|
|
|
var date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) {
|
|
return "";
|
|
}
|
|
|
|
return date.toLocaleDateString("zh-CN", {
|
|
year: "numeric",
|
|
month: "2-digit",
|
|
day: "2-digit"
|
|
});
|
|
}
|
|
|
|
function formatWindow(start, end) {
|
|
var startText = formatDate(start);
|
|
var endText = formatDate(end);
|
|
|
|
if (startText && endText) {
|
|
return startText + " 至 " + endText;
|
|
}
|
|
|
|
if (startText) {
|
|
return startText + " 起生效";
|
|
}
|
|
|
|
return "长期有效";
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|