|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>实验室管理系统 - 实验计划管理子系统</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #1e40af; |
|
|
--secondary: #3b82f6; |
|
|
--card-green: #dcfce7; |
|
|
--card-blue: #dbeafe; |
|
|
--card-orange: #ffedd5; |
|
|
--card-purple: #f3e8ff; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; |
|
|
overflow-x: hidden; |
|
|
background-color: #f9fafb; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
box-shadow: 0 0 15px rgba(0,0,0,0.05); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.header { |
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.status-badge { |
|
|
padding: 2px 8px; |
|
|
border-radius: 12px; |
|
|
font-size: 12px; |
|
|
} |
|
|
|
|
|
.status-not-started { |
|
|
background-color: #e5e7eb; |
|
|
color: #374151; |
|
|
} |
|
|
|
|
|
.status-in-progress { |
|
|
background-color: #dcfce7; |
|
|
color: #166534; |
|
|
} |
|
|
|
|
|
.status-paused { |
|
|
background-color: #fef3c7; |
|
|
color: #92400e; |
|
|
} |
|
|
|
|
|
.status-completed { |
|
|
background-color: #dbeafe; |
|
|
color: #1e40af; |
|
|
} |
|
|
|
|
|
.action-btn { |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.action-btn:hover { |
|
|
transform: translateY(-1px); |
|
|
} |
|
|
|
|
|
.stat-card { |
|
|
transition: all 0.3s ease; |
|
|
cursor: pointer; |
|
|
border-left: 4px solid; |
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.05); |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.stat-card:hover { |
|
|
transform: translateY(-4px); |
|
|
box-shadow: 0 6px 12px rgba(0,0,0,0.08); |
|
|
} |
|
|
|
|
|
|
|
|
.mobile-menu-btn { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
@media (max-width: 1024px) { |
|
|
.mobile-menu-btn { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
position: fixed; |
|
|
left: -300px; |
|
|
height: 100vh; |
|
|
z-index: 100; |
|
|
} |
|
|
|
|
|
.sidebar.active { |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
.overlay { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-color: rgba(0,0,0,0.4); |
|
|
z-index: 90; |
|
|
} |
|
|
|
|
|
.overlay.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
margin-left: 0; |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<header class="header bg-blue-800 text-white py-4 px-6 flex items-center justify-between fixed top-0 left-0 right-0 z-40 h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="mobile-menu-btn mr-3 text-white lg:hidden"> |
|
|
<button id="menuToggle"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h1 class="text-xl font-bold">实验室管理系统</h1> |
|
|
<div class="ml-10 text-lg opacity-90">实验计划管理</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative group"> |
|
|
<div class="flex items-center cursor-pointer"> |
|
|
<div class="mr-2">admin</div> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10 flex items-center justify-center"> |
|
|
<i class="fas fa-user-circle text-blue-800 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute right-0 top-12 bg-white rounded-md shadow-lg py-2 w-48 hidden group-hover:block z-50"> |
|
|
<div class="text-gray-700 px-4 py-2 hover:bg-gray-100 cursor-pointer flex items-center"> |
|
|
<i class="fas fa-user-circle mr-2 text-blue-600"></i> |
|
|
<span>个人中心</span> |
|
|
</div> |
|
|
<div class="text-gray-700 px-4 py-2 hover:bg-gray-100 cursor-pointer flex items-center"> |
|
|
<i class="fas fa-sign-out-alt mr-2 text-blue-600"></i> |
|
|
<span>退出登录</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="overlay hidden"></div> |
|
|
|
|
|
|
|
|
<aside class="sidebar bg-gray-100 fixed top-16 left-0 bottom-0 w-64 pt-6 overflow-auto"> |
|
|
<ul class="space-y-1"> |
|
|
<li> |
|
|
<a href="#" class="flex items-center py-3 px-6 bg-blue-600 text-white"> |
|
|
<i class="fas fa-calendar-alt mr-3"></i> |
|
|
<span>实验计划管理</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center py-3 px-6 text-gray-700 hover:bg-gray-200"> |
|
|
<i class="fas fa-tasks mr-3"></i> |
|
|
<span>实验任务管理</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center py-3 px-6 text-gray-700 hover:bg-gray-200"> |
|
|
<i class="fas fa-flask mr-3"></i> |
|
|
<span>实验设备管理</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center py-3 px-6 text-gray-700 hover:bg-gray-200"> |
|
|
<i class="fas fa-map-marker-alt mr-3"></i> |
|
|
<span>实验场地管理</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center py-3 px-6 text-gray-700 hover:bg-gray-200"> |
|
|
<i class="fas fa-chart-bar mr-3"></i> |
|
|
<span>实验数据管理</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center py-3 px-6 text-gray-700 hover:bg-gray-200"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
<span>系统设置</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<main class="main-content ml-64 mt-16 p-6 transition-all duration-300"> |
|
|
|
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<h2 class="text-3xl font-bold text-gray-800">实验计划管理总览</h2> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center action-btn"> |
|
|
<i class="fas fa-plus mr-2"></i> 新建实验计划 |
|
|
</button> |
|
|
<button class="border border-gray-300 hover:bg-gray-50 px-4 py-2 rounded-md flex items-center text-gray-700 action-btn"> |
|
|
<i class="fas fa-file-excel mr-2 text-green-600"></i> 导出Excel |
|
|
</button> |
|
|
<button class="border border-gray-300 hover:bg-gray-50 w-10 h-10 rounded-full flex items-center justify-center text-gray-700 action-btn"> |
|
|
<i class="fas fa-question-circle"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
|
|
<div class="stat-card bg-white rounded-lg p-6 border-l-blue-500"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-lg bg-blue-100 mr-4"> |
|
|
<i class="fas fa-calendar text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-2xl font-bold text-gray-800">58</div> |
|
|
<div class="text-gray-600 mt-1">实验计划总数</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="stat-card bg-white rounded-lg p-6 border-l-green-500"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-lg bg-green-100 mr-4"> |
|
|
<i class="fas fa-play-circle text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-2xl font-bold text-gray-800">12</div> |
|
|
<div class="text-gray-600 mt-1">进行中计划</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="stat-card bg-white rounded-lg p-6 border-l-orange-500"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-lg bg-orange-100 mr-4"> |
|
|
<i class="fas fa-check-circle text-orange-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-2xl font-bold text-gray-800">30</div> |
|
|
<div class="text-gray-600 mt-1">已完成计划</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="stat-card bg-white rounded-lg p-6 border-l-purple-500"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-lg bg-purple-100 mr-4"> |
|
|
<i class="fas fa-leaf text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-2xl font-bold text-gray-800">45%</div> |
|
|
<div class="text-gray-600 mt-1">环境类计划占比</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm mb-8 p-6"> |
|
|
<div class="text-lg font-semibold text-gray-800 mb-4">查询筛选</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">时间范围</label> |
|
|
<div class="relative"> |
|
|
<input type="date" class="w-full p-2 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-300"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">至</label> |
|
|
<div class="relative"> |
|
|
<input type="date" class="w-full p-2 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-300"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">实验类别</label> |
|
|
<select class="w-full p-2 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-300"> |
|
|
<option selected>全部</option> |
|
|
<option>环境</option> |
|
|
<option>电磁</option> |
|
|
<option>计量</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">所属型号</label> |
|
|
<input type="text" placeholder="输入型号..." class="w-full p-2 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-300"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">状态</label> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm"> |
|
|
<span class="ml-2 text-gray-700">未开始</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm" checked> |
|
|
<span class="ml-2 text-gray-700">进行中</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm"> |
|
|
<span class="ml-2 text-gray-700">暂停</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm" checked> |
|
|
<span class="ml-2 text-gray-700">已完成</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="self-end"> |
|
|
<div class="flex justify-end gap-3"> |
|
|
<button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"> |
|
|
<i class="fas fa-redo mr-2"></i>重置 |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-blue-600 rounded-md text-white hover:bg-blue-700"> |
|
|
<i class="fas fa-search mr-2"></i>查询 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">实验计划名称</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所属型号</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">实验类别</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">计划起止时间</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">负责人</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-40">操作</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr class="hover:bg-blue-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">1</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-base font-medium text-gray-900">高温试验计划A1</div> |
|
|
<div class="text-sm text-gray-500">计划ID: EXP-2025-071</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">XJ-78</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">环境</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800"> |
|
|
2025-07-01 至 07-20 |
|
|
<div class="text-xs text-gray-500">剩余12天</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="status-badge status-in-progress"> |
|
|
<i class="fas fa-play-circle mr-1"></i> 进行中 |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">张工</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm flex"> |
|
|
<button class="text-blue-600 hover:text-blue-800 mr-3 action-btn"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-green-600 hover:text-green-800 mr-3 action-btn"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-800 mr-3 action-btn"> |
|
|
<i class="fas fa-trash-alt"></i> |
|
|
</button> |
|
|
<button class="text-indigo-600 hover:text-indigo-800 action-btn"> |
|
|
<i class="fas fa-tasks"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-blue-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">2</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-base font-medium text-gray-900">电磁干扰试验B3</div> |
|
|
<div class="text-sm text-gray-500">计划ID: EXP-2025-042</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">WD-22</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">电磁</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800"> |
|
|
2025-06-10 至 06-25 |
|
|
<div class="text-xs text-gray-500">已结束</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="status-badge status-completed"> |
|
|
<i class="fas fa-check-circle mr-1"></i> 已完成 |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">李主任</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm flex"> |
|
|
<button class="text-blue-600 hover:text-blue-800 mr-3 action-btn"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-green-600 hover:text-green-800 mr-3 action-btn"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-800 mr-3 action-btn"> |
|
|
<i class="fas fa-trash-alt"></i> |
|
|
</button> |
|
|
<button class="text-indigo-600 hover:text-indigo-800 action-btn"> |
|
|
<i class="fas fa-tasks"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-blue-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">3</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-base font-medium text-gray-900">低温环境试验C2</div> |
|
|
<div class="text-sm text-gray-500">计划ID: EXP-2025-032</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">LT-35</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">环境</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800"> |
|
|
2025-08-15 至 09-05 |
|
|
<div class="text-xs text-gray-500">未开始</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="status-badge status-not-started"> |
|
|
<i class="fas fa-clock mr-1"></i> 未开始 |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">王研究员</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm flex"> |
|
|
<button class="text-blue-600 hover:text-blue-800 mr-3 action-btn"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-green-600 hover:text-green-800 mr-3 action-btn"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-800 mr-3 action-btn"> |
|
|
<i class="fas fa-trash-alt"></i> |
|
|
</button> |
|
|
<button class="text-indigo-600 hover:text-indigo-800 action-btn"> |
|
|
<i class="fas fa-tasks"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-blue-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">4</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-base font-medium text-gray-900">振动计量测试D5</div> |
|
|
<div class="text-sm text-gray-500">计划ID: EXP-2025-087</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">ZB-44</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">计量</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800"> |
|
|
2025-06-01 至 06-30 |
|
|
<div class="text-xs text-gray-500">已暂停</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="status-badge status-paused"> |
|
|
<i class="fas fa-pause-circle mr-1"></i> 暂停 |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">刘高工</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm flex"> |
|
|
<button class="text-blue-600 hover:text-blue-800 mr-3 action-btn"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-green-600 hover:text-green-800 mr-3 action-btn"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-800 mr-3 action-btn"> |
|
|
<i class="fas fa-trash-alt"></i> |
|
|
</button> |
|
|
<button class="text-indigo-600 hover:text-indigo-800 action-btn"> |
|
|
<i class="fas fa-tasks"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"> |
|
|
<div class="flex-1 flex justify-between sm:hidden"> |
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> |
|
|
上一页 |
|
|
</a> |
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> |
|
|
下一页 |
|
|
</a> |
|
|
</div> |
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-700"> |
|
|
显示第 |
|
|
<span class="font-medium">1</span> |
|
|
至 |
|
|
<span class="font-medium">4</span> |
|
|
条，共 |
|
|
<span class="font-medium">58</span> |
|
|
条记录 |
|
|
</p> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-3 text-sm text-gray-700 flex items-center"> |
|
|
每页显示 |
|
|
<select class="ml-1 border rounded-md p-1 focus:ring-2 focus:ring-blue-300"> |
|
|
<option>10</option> |
|
|
<option selected>20</option> |
|
|
<option>50</option> |
|
|
</select> |
|
|
</div> |
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"> |
|
|
<a href="#" class="relative inline-flex items-center px-3 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<i class="fas fa-chevron-left text-xs"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-blue-500 text-white relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500">1</a> |
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">2</a> |
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">3</a> |
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<i class="fas fa-chevron-right text-xs"></i> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
|
|
|
const menuToggle = document.getElementById('menuToggle'); |
|
|
const sidebar = document.querySelector('.sidebar'); |
|
|
const overlay = document.querySelector('.overlay'); |
|
|
const mainContent = document.querySelector('.main-content'); |
|
|
|
|
|
menuToggle.addEventListener('click', () => { |
|
|
sidebar.classList.toggle('active'); |
|
|
overlay.classList.toggle('active'); |
|
|
}); |
|
|
|
|
|
overlay.addEventListener('click', () => { |
|
|
sidebar.classList.remove('active'); |
|
|
overlay.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.stat-card').forEach(card => { |
|
|
card.addEventListener('click', () => { |
|
|
|
|
|
alert('跳转到对应过滤视图'); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<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-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
