58 lines
2.3 KiB
HTML
58 lines
2.3 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>系统公告</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>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<a-layout>
|
||
<a-layout-header style="background: #fff; padding: 0 24px">
|
||
<a-page-header
|
||
title="📢 系统公告"
|
||
style="padding:0"
|
||
aria-label="系统最新公告">
|
||
</a-page-header>
|
||
</a-layout-header>
|
||
|
||
<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>
|
||
|
||
<script>
|
||
const handleItemClick = () => {
|
||
// 处理公告项点击事件
|
||
};
|
||
|
||
document.addEventListener('keydown', (event) => {
|
||
if (event.key === 'Enter') {
|
||
event.target.click?.();
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |