更新 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

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