49 lines
2.1 KiB
HTML
49 lines
2.1 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>HoloLake公告栏</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- 顶部标题栏 -->
|
||
<header class="header">
|
||
<h1 data-i18n="title">公告栏</h1>
|
||
<div class="header-actions">
|
||
<!-- 语言切换器 -->
|
||
<div class="lang-switcher">
|
||
<button class="lang-btn" data-lang="zh-CN" aria-label="切换到中文">中</button>
|
||
<button class="lang-btn" data-lang="en-US" aria-label="Switch to English">EN</button>
|
||
</div>
|
||
<span class="pinned-badge" data-i18n="pinned">条置顶</span>
|
||
<button class="subscribe-btn" data-i18n="subscribe">订阅</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 频道标签栏（用 nav 包裹） -->
|
||
<nav class="channel-bar" role="tablist">
|
||
<button class="channel-tab active" data-channel="全部" role="tab" data-i18n="all">全部</button>
|
||
<button class="channel-tab" data-channel="系统" role="tab" data-i18n="system">系统公告</button>
|
||
<button class="channel-tab" data-channel="知秋" role="tab" data-i18n="dev">开发动态</button>
|
||
<button class="channel-tab" data-channel="技术" role="tab" data-i18n="team">团队消息</button>
|
||
</nav>
|
||
|
||
<!-- 公告主内容区 -->
|
||
<main class="bulletin-container" role="list"></main>
|
||
|
||
<!-- 底部状态栏 -->
|
||
<footer class="footer">
|
||
<span>共 <span id="totalCount">6</span> 条公告 <span id="pinnedCount">2</span> <span data-i18n="pinned">条置顶</span></span>
|
||
<span class="footer-brand" data-i18n="footer">HoloLake光湖系统</span>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- 先加载 i18n，再加载其他 JS -->
|
||
<script src="i18n.js"></script>
|
||
<script src="api.js"></script>
|
||
<script src="storage.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html> |