子比主题 – 公告样式美化

1.主题 – 常用功能 – 弹窗通知 选中

<div style="margin:20px 0; padding:0 10px;">
  <!-- 1. 重要提醒（紧急类：影响使用/权益变更） -->
  <div style="margin-bottom:20px;">
    <h3 style="margin:0 0 8px; font-size:16px; font-weight:bold; color:#d33;">重要提醒</h3>
    <!-- 系统维护 -->
    <div style="margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid #f5f5f5;">
      <p style="margin:0; color:#555; font-size:14px; line-height:1.6;">系统将于 <span style="font-weight:bold; color:#d33;">8月25日 00:00-06:00</span> 进行例行升级维护，期间可能短暂无法访问，请提前做好准备。</p>
      <a href="【维护详情页链接】" style="font-size:12px; color:#2f80ed; text-decoration:none; margin-top:4px; display:inline-block;">查看维护影响 →</a>
      <p style="margin:6px 0 0; color:#999; font-size:12px;">发布时间：2025-08-23</p>
    </div>
    <!-- 隐私政策 -->
    <div>
      <p style="margin:0; color:#555; font-size:14px; line-height:1.6;">新版《隐私政策》将于 <span style="font-weight:bold; color:#d33;">9月1日</span> 正式生效，更新内容包含数据收集范围、用户权利说明等。</p>
      <a href="【隐私政策详情页链接】" style="font-size:12px; color:#2f80ed; text-decoration:none; margin-top:4px; display:inline-block;">阅读完整政策 →</a>
      <p style="margin:6px 0 0; color:#999; font-size:12px;">发布时间：2025-08-23</p>
    </div>
  </div>

  <!-- 2. 权益通知（优惠类：关乎用户利益） -->
  <div style="margin-bottom:20px;">
    <h3 style="margin:0 0 8px; font-size:16px; font-weight:bold; color:#ff7a00;">权益通知</h3>
    <p style="margin:0; color:#555; font-size:14px; line-height:1.6;">暑期优惠活动延长至 <span style="font-weight:bold; color:#ff7a00;">8月31日 23:59</span>，涵盖会员折扣、功能免费试用等权益。</p>
    <a href="【优惠活动详情页链接】" style="font-size:12px; color:#2f80ed; text-decoration:none; margin-top:4px; display:inline-block;">查看活动细则 →</a>
    <p style="margin:6px 0 0; color:#999; font-size:12px;">发布时间：2025-08-23</p>
  </div>

  <!-- 3. 最新更新（功能类：非紧急） -->
  <div>
    <h3 style="margin:0 0 8px; font-size:16px; font-weight:bold; color:#096;">最新更新</h3>
    <p style="margin:0; color:#555; font-size:14px; line-height:1.6;">v2.3.0 版本已发布：新增<span style="font-weight:bold; color:#096;">批量导出、图表自适应、深色模式</span>等功能，建议及时更新体验。</p>
    <a href="【更新日志详情页链接】" style="font-size:12px; color:#2f80ed; text-decoration:none; margin-top:4px; display:inline-block;">查看完整更新日志 →</a>
    <p style="margin:6px 0 0; color:#999; font-size:12px;">发布时间：2025-08-23</p>
  </div>
</div>

第二张 加载json数据

div

<div id="notice-container"></div>
<script src="./script.js" defer></script>

script.js

/* 依赖 fetch API，现代浏览器原生支持 */
(() => {
  // 颜色映射
  const colorMap = {
    warning: { title: '#d33', divider: '#f5f5f5' },
    benefit: { title: '#ff7a00' },
    update: { title: '#096' }
  };

  // 创建 DOM 的辅助函数
  const el = (tag, text, style = {}) => {
    const node = document.createElement(tag);
    if (text) node.innerHTML = text;
    Object.assign(node.style, style);
    return node;
  };

  // 渲染单条提醒
  function renderWarningItem(item) {
    const wrap = el('div', null, { marginBottom: '12px', paddingBottom: '12px', borderBottom: '1px solid #f5f5f5' });

    const p = el('p', item.text, { margin: 0, color: '#555', fontSize: '14px', lineHeight: 1.6 });
    p.querySelectorAll('span').forEach(span => {
      span.style.fontWeight = 'bold';
      span.style.color = '#d33';
    });

    const a = el('a', item.linkText, {
      fontSize: '12px',
      color: '#2f80ed',
      textDecoration: 'none',
      marginTop: '4px',
      display: 'inline-block'
    });
    a.href = item.link;

    const date = el('p', `发布时间：${item.date}`, { margin: '6px 0 0', color: '#999', fontSize: '12px' });

    wrap.append(p, a, date);
    return wrap;
  }

  // 渲染区块
  function renderBlock(data) {
    const block = el('div', null, { marginBottom: '20px' });

    const h3 = el('h3', data.title, {
      margin: '0 0 8px',
      fontSize: '16px',
      fontWeight: 'bold',
      color: colorMap[data.type].title
    });

    block.appendChild(h3);

    if (data.items) {          // warning 区块
      data.items.forEach((it, idx) => {
        const itemDom = renderWarningItem(it);
        // 最后一项去掉底部分割线
        if (idx === data.items.length - 1) itemDom.style.borderBottom = 'none';
        block.appendChild(itemDom);
      });
    } else {                   // benefit / update 区块
      const p = el('p', data.text, { margin: 0, color: '#555', fontSize: '14px', lineHeight: 1.6 });
      p.querySelectorAll('span').forEach(span => {
        span.style.fontWeight = 'bold';
        span.style.color = colorMap[data.type].title;
      });

      const a = el('a', data.linkText, {
        fontSize: '12px',
        color: '#2f80ed',
        textDecoration: 'none',
        marginTop: '4px',
        display: 'inline-block'
      });
      a.href = data.link;

      const date = el('p', `发布时间：${data.date}`, { margin: '6px 0 0', color: '#999', fontSize: '12px' });

      block.append(p, a, date);
    }

    return block;
  }

  // 主入口
  fetch('./notice.json')
    .then(res => res.json())
    .then(arr => {
      const container = document.getElementById('notice-container');
      if (!container) {
        console.warn('页面中未找到 id="notice-container" 的挂载点');
        return;
      }
      container.innerHTML = ''; // 清空旧内容
      arr.forEach(item => container.appendChild(renderBlock(item)));
    })
    .catch(err => console.error('加载公告失败：', err));
})();