Skip to content

Commit 161d62a

Browse files
CommandstoneCommandstone
authored
Create dashboard.html
1 parent 00340ef commit 161d62a

1 file changed

Lines changed: 172 additions & 0 deletions

File tree

‎denlu/dashboard.html‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>网站公告中心</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
padding: 60px 20px 20px;
11+
min-height: 100vh;
12+
background: linear-gradient(135deg, #ffd700, #7cfc00);
13+
font-family: 'Microsoft YaHei', sans-serif;
14+
}
15+
16+
.home-button {
17+
position: fixed;
18+
left: 20px;
19+
top: 20px;
20+
padding: 10px 20px;
21+
background: rgba(255, 255, 255, 0.9);
22+
border-radius: 25px;
23+
text-decoration: none;
24+
color: #2c3e50;
25+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
26+
transition: all 0.3s ease;
27+
z-index: 100;
28+
}
29+
30+
.home-button:hover {
31+
transform: translateY(-2px);
32+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
33+
}
34+
35+
.container {
36+
max-width: 1200px;
37+
margin: 0 auto;
38+
}
39+
40+
.header {
41+
text-align: center;
42+
padding: 30px;
43+
background: rgba(255, 255, 255, 0.9);
44+
border-radius: 15px;
45+
margin-bottom: 30px;
46+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
47+
}
48+
49+
.announcement-grid {
50+
display: grid;
51+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
52+
gap: 25px;
53+
padding: 20px;
54+
}
55+
56+
.announcement-card {
57+
background: rgba(255, 255, 255, 0.95);
58+
border-radius: 12px;
59+
padding: 20px;
60+
transition: all 0.3s ease;
61+
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
62+
cursor: pointer;
63+
}
64+
65+
.announcement-card:hover {
66+
transform: translateY(-5px);
67+
}
68+
69+
.announcement-title {
70+
color: #2c3e50;
71+
font-size: 1.4em;
72+
margin-bottom: 10px;
73+
border-bottom: 2px solid #7cfc00;
74+
padding-bottom: 8px;
75+
}
76+
77+
.announcement-date {
78+
color: #95a5a6;
79+
font-size: 0.9em;
80+
margin-bottom: 15px;
81+
}
82+
83+
.announcement-content {
84+
color: #34495e;
85+
line-height: 1.6;
86+
max-height: 0;
87+
overflow: hidden;
88+
transition: max-height 0.3s ease-out;
89+
}
90+
91+
.expanded .announcement-content {
92+
max-height: 500px;
93+
}
94+
95+
@media (max-width: 768px) {
96+
.announcement-grid {
97+
grid-template-columns: 1fr;
98+
}
99+
100+
.home-button {
101+
font-size: 14px;
102+
padding: 8px 16px;
103+
}
104+
}
105+
</style>
106+
</head>
107+
<body>
108+
<a href="indexcd.html" class="home-button">🏠 返回首页</a>
109+
110+
<div class="container">
111+
<div class="header">
112+
<h1>📢 网站公告中心</h1>
113+
<p>最新动态与重要通知</p>
114+
</div>
115+
116+
<div class="announcement-grid" id="announcementContainer">
117+
<!-- 公告卡片动态生成 -->
118+
</div>
119+
</div>
120+
121+
<script>
122+
// 模拟公告数据
123+
const announcements = [
124+
{
125+
title: "系统维护通知",
126+
date: "2025-04-25",
127+
content: "为提高服务质量，我们计划于5月1日凌晨0:00至5月3日凌晨6:00进行系统维护升级。"
128+
},
129+
{
130+
title: "登录系统更新",
131+
date: "2024-04-25",
132+
content: "新版用户登录已上线，新增功能介绍，请前往登录查看详细内容。"
133+
},
134+
{
135+
title: "登录系统",
136+
date: "2024-03-27",
137+
content: "用户登录已上线，请前往登录查看详细内容。"
138+
}
139+
];
140+
141+
// 生成公告卡片
142+
function createAnnouncementCard(announcement) {
143+
const card = document.createElement('div');
144+
card.className = 'announcement-card';
145+
146+
card.innerHTML = `
147+
<div class="announcement-title">${announcement.title}</div>
148+
<div class="announcement-date">📅 ${announcement.date}</div>
149+
<div class="announcement-content">${announcement.content}</div>
150+
`;
151+
152+
// 点击展开/收起功能
153+
card.addEventListener('click', () => {
154+
card.classList.toggle('expanded');
155+
});
156+
157+
return card;
158+
}
159+
160+
// 初始化公告列表
161+
function initAnnouncements() {
162+
const container = document.getElementById('announcementContainer');
163+
announcements.forEach(ann => {
164+
container.appendChild(createAnnouncementCard(ann));
165+
});
166+
}
167+
168+
// 页面加载初始化
169+
window.onload = initAnnouncements;
170+
</script>
171+
</body>
172+
</html>

0 commit comments

Comments
 (0)