添加notice功能

2026-05-01 08:25:29 +08:00
parent 3185abfef4
commit bad707fce1
16 changed files with 799 additions and 6 deletions
@@ -0,0 +1,141 @@
+<!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>