Hugging Face's logo

Spaces:
maomaobj
/
lab1
Running

App Files Community
maomaobj commited on
Commit
3aac27a
·
verified ·
1 Parent(s): 0e4a077

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +507 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lab1
3
- emoji: 🏢
4
- colorFrom: yellow
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: lab1
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,507 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#1e40af',
15
+ secondary: '#3b82f6',
16
+ light: '#f0f3f8',
17
+ dark: '#0f172a',
18
+ grey: '#f1f5f9',
19
+ menu: '#e2e8f0'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
27
+
28
+ body {
29
+ font-family: 'Noto Sans SC', sans-serif;
30
+ @apply bg-gray-50;
31
+ overflow-x: hidden;
32
+ }
33
+
34
+ .header-gradient {
35
+ background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
36
+ }
37
+
38
+ .nav-shadow {
39
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
40
+ }
41
+
42
+ .card-shadow {
43
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
44
+ }
45
+
46
+ .active-nav-item {
47
+ @apply bg-blue-50 text-primary font-medium border-l-4 border-primary;
48
+ }
49
+
50
+ .status-tag {
51
+ @apply text-sm px-2 py-1 rounded-full;
52
+ }
53
+
54
+ .status-pending {
55
+ @apply bg-gray-100 text-gray-800;
56
+ }
57
+
58
+ .status-in-progress {
59
+ @apply bg-green-100 text-green-800;
60
+ }
61
+
62
+ .status-completed {
63
+ @apply bg-blue-100 text-blue-800;
64
+ }
65
+
66
+ .status-paused {
67
+ @apply bg-yellow-100 text-yellow-800;
68
+ }
69
+
70
+ .dropdown {
71
+ position: relative;
72
+ display: inline-block;
73
+ }
74
+
75
+ .dropdown-content {
76
+ display: none;
77
+ position: absolute;
78
+ background-color: white;
79
+ min-width: 160px;
80
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
81
+ z-index: 1000;
82
+ right: 0;
83
+ border-radius: 0.375rem;
84
+ overflow: hidden;
85
+ }
86
+
87
+ .dropdown-content a {
88
+ @apply block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 transition-colors;
89
+ }
90
+
91
+ .dropdown-content a:hover {
92
+ @apply text-primary;
93
+ }
94
+
95
+ .filter-card {
96
+ transition: all 0.3s ease;
97
+ }
98
+
99
+ .filter-card:hover {
100
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
101
+ }
102
+
103
+ @media (min-width: 640px) {
104
+ .table-container {
105
+ overflow-x: auto;
106
+ }
107
+
108
+ .table {
109
+ min-width: 768px;
110
+ }
111
+ }
112
+ </style>
113
+ </head>
114
+ <body class="flex flex-col min-h-screen">
115
+ <!-- 顶部导航栏 -->
116
+ <header class="w-full header-gradient text-white">
117
+ <div class="max-w-screen-2xl mx-auto">
118
+ <div class="flex justify-between items-center py-4 px-6">
119
+ <!-- 系统名称 -->
120
+ <div class="flex items-center">
121
+ <i class="fas fa-flask text-2xl mr-3"></i>
122
+ <h1 class="text-2xl font-bold tracking-wide">实验室管理系统</h1>
123
+ </div>
124
+
125
+ <!-- 用户信息及下拉菜单 -->
126
+ <div class="dropdown relative">
127
+ <button id="userDropdownBtn" class="flex items-center space-x-2 focus:outline-none">
128
+ <div class="w-9 h-9 bg-blue-100 rounded-full flex items-center justify-center">
129
+ <span class="text-primary font-semibold">LM</span>
130
+ </div>
131
+ <span class="font-medium">李明</span>
132
+ <i class="fas fa-chevron-down text-sm"></i>
133
+ </button>
134
+
135
+ <div id="userDropdown" class="dropdown-content hidden mt-2">
136
+ <a href="#"><i class="fas fa-key mr-2"></i>修改密码</a>
137
+ <a href="#"><i class="fas fa-sign-out-alt mr-2"></i>退出系统</a>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </header>
143
+
144
+ <div class="flex flex-1">
145
+ <!-- 左侧导航菜单 -->
146
+ <nav class="bg-menu w-64 min-h-screen py-6 px-4 hidden md:block">
147
+ <ul class="space-y-1">
148
+ <li>
149
+ <a href="#" class="active-nav-item flex items-center py-3 px-4 hover:bg-blue-50 transition-colors">
150
+ <i class="fas fa-calendar-alt mr-3 text-primary"></i>
151
+ <span>实验计划管理</span>
152
+ </a>
153
+ </li>
154
+ <li>
155
+ <a href="#" class="flex items-center py-3 px-4 hover:bg-blue-50 transition-colors">
156
+ <i class="fas fa-tasks mr-3 text-gray-500"></i>
157
+ <span>实验任务管理</span>
158
+ </a>
159
+ </li>
160
+ <li>
161
+ <a href="#" class="flex items-center py-3 px-4 hover:bg-blue-50 transition-colors">
162
+ <i class="fas fa-microscope mr-3 text-gray-500"></i>
163
+ <span>实验设备管理</span>
164
+ </a>
165
+ </li>
166
+ <li>
167
+ <a href="#" class="flex items-center py-3 px-4 hover:bg-blue-50 transition-colors">
168
+ <i class="fas fa-map-marker-alt mr-3 text-gray-500"></i>
169
+ <span>实验场地管理</span>
170
+ </a>
171
+ </li>
172
+ <li>
173
+ <a href="#" class="flex items-center py-3 px-4 hover:bg-blue-50 transition-colors">
174
+ <i class="fas fa-chart-bar mr-3 text-gray-500"></i>
175
+ <span>数据统计分析</span>
176
+ </a>
177
+ </li>
178
+ <li>
179
+ <a href="#" class="flex items-center py-3 px-4 hover:bg-blue-50 transition-colors">
180
+ <i class="fas fa-cog mr-3 text-gray-500"></i>
181
+ <span>系统设置</span>
182
+ </a>
183
+ </li>
184
+ </ul>
185
+ </nav>
186
+
187
+ <!-- 主内容区域 -->
188
+ <main class="flex-1 bg-gray-50 p-6">
189
+ <!-- 面包屑导航 -->
190
+ <div class="mb-4">
191
+ <nav class="flex text-sm" aria-label="Breadcrumb">
192
+ <ol class="inline-flex items-center space-x-1 md:space-x-3">
193
+ <li class="inline-flex items-center">
194
+ <a href="#" class="text-gray-600 hover:text-primary">
195
+ <i class="fas fa-home mr-2"></i>
196
+ 首页
197
+ </a>
198
+ </li>
199
+ <li>
200
+ <div class="flex items-center">
201
+ <i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i>
202
+ <span class="text-primary font-medium">实验计划管理</span>
203
+ </div>
204
+ </li>
205
+ </ol>
206
+ </nav>
207
+ </div>
208
+
209
+ <div class="flex justify-between items-center mb-5">
210
+ <h2 class="text-2xl font-bold text-gray-800">实验计划管理</h2>
211
+ </div>
212
+
213
+ <!-- 筛选区域 -->
214
+ <div class="filter-card bg-white rounded-lg shadow card-shadow p-6 mb-6">
215
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
216
+ <div>
217
+ <label class="block text-sm font-medium text-gray-700 mb-1">时间范围</label>
218
+ <div class="flex">
219
+ <input type="date" class="flex-1 w-full px-3 py-2 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-blue-200">
220
+ <span class="flex items-center px-3 bg-gray-100 border-t border-b border-gray-300 text-gray-500">~</span>
221
+ <input type="date" class="flex-1 w-full px-3 py-2 border border-gray-300 rounded-r focus:outline-none focus:ring-2 focus:ring-blue-200">
222
+ </div>
223
+ </div>
224
+
225
+ <div>
226
+ <label class="block text-sm font-medium text-gray-700 mb-1">实验类别</label>
227
+ <select class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200">
228
+ <option value="">全部类别</option>
229
+ <option value="env">环境试验</option>
230
+ <option value="emc">电磁兼容</option>
231
+ <option value="met">计量检定</option>
232
+ </select>
233
+ </div>
234
+
235
+ <div>
236
+ <label class="block text-sm font-medium text-gray-700 mb-1">所属型号</label>
237
+ <input type="text" placeholder="输入型号搜索" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200">
238
+ </div>
239
+
240
+ <div>
241
+ <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
242
+ <div class="grid grid-cols-2 gap-2">
243
+ <label class="flex items-center">
244
+ <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
245
+ <span class="ml-2 text-sm text-gray-700">未开始</span>
246
+ </label>
247
+ <label class="flex items-center">
248
+ <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
249
+ <span class="ml-2 text-sm text-gray-700">进行中</span>
250
+ </label>
251
+ <label class="flex items-center">
252
+ <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
253
+ <span class="ml-2 text-sm text-gray-700">已完成</span>
254
+ </label>
255
+ <label class="flex items-center">
256
+ <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
257
+ <span class="ml-2 text-sm text-gray-700">暂停</span>
258
+ </label>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="flex items-end space-x-3">
263
+ <button class="flex-1 bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded transition-colors">
264
+ <i class="fas fa-search mr-2"></i>搜索
265
+ </button>
266
+ <button class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded transition-colors">
267
+ <i class="fas fa-redo mr-2"></i>重置
268
+ </button>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- 操作按钮区域 -->
274
+ <div class="flex justify-between items-center mb-4">
275
+ <div class="text-sm text-gray-500">共 152 条记录</div>
276
+ <div class="space-x-3">
277
+ <button class="bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded transition-colors">
278
+ <i class="fas fa-plus-circle mr-2"></i>新建计划
279
+ </button>
280
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded transition-colors">
281
+ <i class="fas fa-download mr-2"></i>导出计划
282
+ </button>
283
+ </div>
284
+ </div>
285
+
286
+ <!-- 计划列表表格 -->
287
+ <div class="table-container">
288
+ <div class="bg-white rounded-lg shadow card-shadow overflow-hidden">
289
+ <table class="w-full table-auto">
290
+ <thead class="bg-gray-100">
291
+ <tr>
292
+ <th class="px-5 py-3 text-left text-sm font-semibold text-gray-600 tracking-wider">序号</th>
293
+ <th class="px-5 py-3 text-left text-sm font-semibold text-gray-600 tracking-wider">实验计划名称</th>
294
+ <th class="px-5 py-3 text-left text-sm font-semibold text-gray-600 tracking-wider">所属型号</th>
295
+ <th class="px-5 py-3 text-left text-sm font-semibold text-gray-600 tracking-wider">实验类别</th>
296
+ <th class="px-5 py-3 text-left text-sm font-semibold text-gray-600 tracking-wider">起止时间</th>
297
+ <th class="px-5 py-3 text-left text-sm font-semibold text-gray-600 tracking-wider">状态</th>
298
+ <th class="px-5 py-3 text-left text-sm font-semibold text-gray-600 tracking-wider">负责人</th>
299
+ <th class="px-5 py-3 text-right text-sm font-semibold text-gray-600 tracking-wider">操作</th>
300
+ </tr>
301
+ </thead>
302
+ <tbody class="divide-y divide-gray-200">
303
+ <!-- 示例数据行 -->
304
+ <tr class="hover:bg-blue-50 transition-colors">
305
+ <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
306
+ <td class="px-5 py-4 whitespace-nowrap">
307
+ <div class="text-sm font-medium text-gray-900">高温强度测试计划A1</div>
308
+ </td>
309
+ <td class="px-5 py-4 whitespace-nowrap">
310
+ <div class="text-sm text-gray-900">XJ-78</div>
311
+ </td>
312
+ <td class="px-5 py-4 whitespace-nowrap">
313
+ <div class="text-sm text-gray-500">环境试验</div>
314
+ </td>
315
+ <td class="px-5 py-4 whitespace-nowrap">
316
+ <div class="text-sm text-gray-500">2025-07-01 至 2025-07-20</div>
317
+ </td>
318
+ <td class="px-5 py-4 whitespace-nowrap">
319
+ <span class="status-tag status-in-progress">进行中</span>
320
+ </td>
321
+ <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">张工</td>
322
+ <td class="px-5 py-4 whitespace-nowrap text-right text-sm">
323
+ <div class="space-x-4">
324
+ <a href="#" class="text-secondary hover:text-blue-700" title="查看"><i class="fas fa-eye"></i></a>
325
+ <a href="#" class="text-secondary hover:text-blue-700" title="编辑"><i class="fas fa-edit"></i></a>
326
+ <a href="#" class="text-red-500 hover:text-red-700" title="删除"><i class="fas fa-trash-alt"></i></a>
327
+ <a href="#" class="text-green-500 hover:text-green-700" title="生成任务"><i class="fas fa-tasks"></i></a>
328
+ </div>
329
+ </td>
330
+ </tr>
331
+ <!-- 更多数据行 -->
332
+ <tr class="hover:bg-blue-50 transition-colors">
333
+ <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">2</td>
334
+ <td class="px-5 py-4 whitespace-nowrap">
335
+ <div class="text-sm font-medium text-gray-900">电磁辐射测试实验</div>
336
+ </td>
337
+ <td class="px-5 py-4 whitespace-nowrap">
338
+ <div class="text-sm text-gray-900">RD-42</div>
339
+ </td>
340
+ <td class="px-5 py-4 whitespace-nowrap">
341
+ <div class="text-sm text-gray-500">电磁兼容</div>
342
+ </td>
343
+ <td class="px-5 py-4 whitespace-nowrap">
344
+ <div class="text-sm text-gray-500">2025-07-05 至 2025-07-30</div>
345
+ </td>
346
+ <td class="px-5 py-4 whitespace-nowrap">
347
+ <span class="status-tag status-paused">暂停</span>
348
+ </td>
349
+ <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">王工</td>
350
+ <td class="px-5 py-4 whitespace-nowrap text-right text-sm">
351
+ <div class="space-x-4">
352
+ <a href="#" class="text-secondary hover:text-blue-700"><i class="fas fa-eye"></i></a>
353
+ <a href="#" class="text-secondary hover:text-blue-700"><i class="fas fa-edit"></i></a>
354
+ <a href="#" class="text-red-500 hover:text-red-700"><i class="fas fa-trash-alt"></i></a>
355
+ <a href="#" class="text-green-500 hover:text-green-700"><i class="fas fa-tasks"></i></a>
356
+ </div>
357
+ </td>
358
+ </tr>
359
+ <tr class="hover:bg-blue-50 transition-colors">
360
+ <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">3</td>
361
+ <td class="px-5 py-4 whitespace-nowrap">
362
+ <div class="text-sm font-medium text-gray-900">计量设备定期检定</div>
363
+ </td>
364
+ <td class="px-5 py-4 whitespace-nowrap">
365
+ <div class="text-sm text-gray-900">ME-7C</div>
366
+ </td>
367
+ <td class="px-5 py-4 whitespace-nowrap">
368
+ <div class="text-sm text-gray-500">计量检定</div>
369
+ </td>
370
+ <td class="px-5 py-4 whitespace-nowrap">
371
+ <div class="text-sm text-gray-500">2025-08-10 至 2025-08-25</div>
372
+ </td>
373
+ <td class="px-5 py-4 whitespace-nowrap">
374
+ <span class="status-tag status-pending">未开始</span>
375
+ </td>
376
+ <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">李工</td>
377
+ <td class="px-5 py-4 whitespace-nowrap text-right text-sm">
378
+ <div class="space-x-4">
379
+ <a href="#" class="text-secondary hover:text-blue-700"><i class="fas fa-eye"></i></a>
380
+ <a href="#" class="text-secondary hover:text-blue-700"><i class="fas fa-edit"></i></a>
381
+ <a href="#" class="text-red-500 hover:text-red-700"><i class="fas fa-trash-alt"></i></a>
382
+ <a href="#" class="text-green-500 hover:text-green-700"><i class="fas fa-tasks"></i></a>
383
+ </div>
384
+ </td>
385
+ </tr>
386
+ <tr class="hover:bg-blue-50 transition-colors">
387
+ <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">4</td>
388
+ <td class="px-5 py-4 whitespace-nowrap">
389
+ <div class="text-sm font-medium text-gray-900">低温性能测试实验</div>
390
+ </td>
391
+ <td class="px-5 py-4 whitespace-nowrap">
392
+ <div class="text-sm text-gray-900">CT-33</div>
393
+ </td>
394
+ <td class="px-5 py-4 whitespace-nowrap">
395
+ <div class="text-sm text-gray-500">环境试验</div>
396
+ </td>
397
+ <td class="px-5 py-4 whitespace-nowrap">
398
+ <div class="text-sm text-gray-500">2025-06-15 至 2025-06-28</div>
399
+ </td>
400
+ <td class="px-5 py-4 whitespace-nowrap">
401
+ <span class="status-tag status-completed">已完成</span>
402
+ </td>
403
+ <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">陈工</td>
404
+ <td class="px-5 py-4 whitespace-nowrap text-right text-sm">
405
+ <div class="space-x-4">
406
+ <a href="#" class="text-secondary hover:text-blue-700"><i class="fas fa-eye"></i></a>
407
+ <a href="#" class="text-secondary hover:text-blue-700"><i class="fas fa-edit"></i></a>
408
+ <a href="#" class="text-red-500 hover:text-red-700"><i class="fas fa-trash-alt"></i></a>
409
+ <a href="#" class="text-green-500 hover:text-green-700"><i class="fas fa-tasks"></i></a>
410
+ </div>
411
+ </td>
412
+ </tr>
413
+ </tbody>
414
+ </table>
415
+ </div>
416
+ </div>
417
+
418
+ <!-- 分页控制器 -->
419
+ <div class="mt-6 flex flex-col sm:flex-row items-center justify-between">
420
+ <div class="mb-4 sm:mb-0">
421
+ <p class="text-sm text-gray-700">
422
+ 显示 <span class="font-medium">1</span> 到 <span class="font-medium">4</span> / 共 <span class="font-medium">152</span> 条记录
423
+ </p>
424
+ </div>
425
+ <div class="flex items-center space-x-3">
426
+ <select class="text-sm p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200">
427
+ <option value="10">10条/页</option>
428
+ <option value="20" selected>20条/页</option>
429
+ <option value="50">50条/页</option>
430
+ </select>
431
+
432
+ <nav class="inline-flex">
433
+ <a href="#" class="py-2 px-3 ml-0 mr-1 rounded bg-gray-200 hover:bg-gray-300">
434
+ <i class="fas fa-angle-left"></i>
435
+ </a>
436
+ <a href="#" class="py-2 px-4 hover:bg-blue-100 hover:text-primary text-white bg-primary rounded">1</a>
437
+ <a href="#" class="py-2 px-4 hover:bg-blue-100 hover:text-primary text-gray-600 rounded ml-1">2</a>
438
+ <a href="#" class="py-2 px-4 hover:bg-blue-100 hover:text-primary text-gray-600 rounded ml-1">3</a>
439
+ <span class="py-2 px-4 text-gray-600 ml-1">...</span>
440
+ <a href="#" class="py-2 px-4 hover:bg-blue-100 hover:text-primary text-gray-600 rounded ml-1">8</a>
441
+ <a href="#" class="py-2 px-4 hover:bg-blue-100 hover:text-primary text-gray-600 rounded ml-1 mr-1">9</a>
442
+ <a href="#" class="py-2 px-3 rounded bg-gray-200 hover:bg-gray-300">
443
+ <i class="fas fa-angle-right"></i>
444
+ </a>
445
+ </nav>
446
+ </div>
447
+ </div>
448
+ </main>
449
+ </div>
450
+
451
+ <!-- 移动端底部导航栏 -->
452
+ <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-md md:hidden">
453
+ <div class="flex justify-between p-3">
454
+ <a href="#" class="flex flex-col items-center px-4 py-2 text-primary">
455
+ <i class="fas fa-calendar-alt text-xl"></i>
456
+ <span class="text-xs mt-1">计划</span>
457
+ </a>
458
+ <a href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
459
+ <i class="fas fa-tasks text-xl"></i>
460
+ <span class="text-xs mt-1">任务</span>
461
+ </a>
462
+ <a href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
463
+ <i class="fas fa-microscope text-xl"></i>
464
+ <span class="text-xs mt-1">设备</span>
465
+ </a>
466
+ <a href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
467
+ <i class="fas fa-user text-xl"></i>
468
+ <span class="text-xs mt-1">我的</span>
469
+ </a>
470
+ </div>
471
+ </nav>
472
+
473
+ <script>
474
+ // 用户下拉菜单显示控制
475
+ const dropdownBtn = document.getElementById('userDropdownBtn');
476
+ const dropdownMenu = document.getElementById('userDropdown');
477
+
478
+ dropdownBtn.addEventListener('click', function() {
479
+ dropdownMenu.classList.toggle('hidden');
480
+ });
481
+
482
+ // 关闭下拉菜单当点击页面其他区域时
483
+ document.addEventListener('click', function(event) {
484
+ if (!dropdownBtn.contains(event.target) && !dropdownMenu.contains(event.target)) {
485
+ dropdownMenu.classList.add('hidden');
486
+ }
487
+ });
488
+
489
+ // 响应式菜单选项高亮
490
+ const menuItems = document.querySelectorAll('nav a');
491
+ menuItems.forEach(item => {
492
+ item.addEventListener('click', function() {
493
+ menuItems.forEach(i => i.classList.remove('active-nav-item'));
494
+ this.classList.add('active-nav-item');
495
+ });
496
+ });
497
+
498
+ // 模拟数据加载中的效果
499
+ document.addEventListener('DOMContentLoaded', function() {
500
+ // 模拟加载完成
501
+ setTimeout(function() {
502
+ document.body.classList.remove('opacity-0');
503
+ }, 300);
504
+ });
505
+ </script>
506
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maomaobj/lab1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
507
+ </html>