更新 announcement.html

This commit is contained in:
lantern 2025-04-29 02:59:12 +08:00
parent 2875a58d6d
commit b72dcf3750
1 changed files with 85 additions and 57 deletions

View File

@ -1,58 +1,86 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统公告</title> <title>系统公告</title>
<link href="https://cdn.bootcdn.net/ajax/libs/ant-design/4.24.8/antd.min.css" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script> </head>
<script src="https://cdn.bootcdn.net/ajax/libs/ant-design/4.24.8/antd.min.js"></script> <body class="bg-gray-100">
</head> <main class="container mx-auto px-4 py-8">
<body> <h1 class="text-3xl font-bold text-gray-800 mb-6"
<div id="app"> aria-label="系统最新公告">
<a-layout> 📢 系统公告
<a-layout-header style="background: #fff; padding: 0 24px"> </h1>
<a-page-header
title="📢 系统公告" <div class="bg-white rounded-lg shadow-md p-6">
style="padding:0" <ul class="space-y-4">
aria-label="系统最新公告"> <li class="border-l-4 border-blue-500 pl-4">
</a-page-header> <h2 class="text-xl font-semibold text-gray-700 mb-2">
</a-layout-header> 系统维护通知
</h2>
<a-layout-content style="padding: 24px; background: #f0f2f5"> <p class="text-gray-600 mb-2">
<a-list item-layout="horizontal" :grid="{ gutter: 16, column: 1 }"> 将于2024年6月15日 00:00-04:00进行系统维护期间服务可能中断。
<a-list-item> </p>
<a-card :bordered="false"> <time class="text-sm text-gray-500" datetime="2024-06-14">
<a-list-item-meta 2024年6月14日
title="系统维护通知" </time>
description="将于2024年6月15日 00:00-04:00进行系统维护期间服务可能中断。" </li>
class="announcement-item" <li class="border-l-4 border-green-500 pl-4">
tabindex="0" <h2 class="text-xl font-semibold text-gray-700 mb-2">
@click="handleItemClick" 版本更新公告
@keydown.enter="handleItemClick"> </h2>
<template #extra> <p class="text-gray-600 mb-2">
<span class="ant-typography"> 新版本v2.1.0已发布,优化了系统性能并修复了已知问题。
<time datetime="2024-06-14">2024年6月14日</time> </p>
</span> <time class="text-sm text-gray-500" datetime="2024-06-12">
</template> 2024年6月12日
</a-list-item-meta> </time>
</a-card> </li>
</a-list-item> <li class="border-l-4 border-yellow-500 pl-4">
</a-list> <h2 class="text-xl font-semibold text-gray-700 mb-2">
</a-layout-content> 服务器命名规范
</a-layout> </h2>
</div> <p class="text-gray-600 mb-2">
LP名称需使用服务器缩写例如BW服务器应命名为bw
<script> </p>
const handleItemClick = () => { <time class="text-sm text-gray-500" datetime="2024-06-10">
// 处理公告项点击事件 2024年6月10日
}; </time>
</li>
document.addEventListener('keydown', (event) => { <li class="border-l-4 border-purple-500 pl-4">
if (event.key === 'Enter') { <h2 class="text-xl font-semibold text-gray-700 mb-2">
event.target.click?.(); OP指令管理
} </h2>
}); <p class="text-gray-600 mb-2">
</script> LP需配置无OP权限指令确保操作权限分离
</body> </p>
<time class="text-sm text-gray-500" datetime="2024-06-08">
2024年6月8日
</time>
</li>
<li class="border-l-4 border-red-500 pl-4">
<h2 class="text-xl font-semibold text-gray-700 mb-2">
数据库安全
</h2>
<p class="text-gray-600 mb-2">
MySQL数据库禁止开启外网访问仅允许内网连接
</p>
<time class="text-sm text-gray-500" datetime="2024-06-05">
2024年6月5日
</time>
</li>
</ul>
</div>
</main>
<!-- 无障碍键盘导航 -->
<script>
document.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
event.target.click?.();
}
});
</script>
</body>
</html> </html>