| <!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> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#1e40af', |
| secondary: '#3b82f6', |
| light: '#f0f3f8', |
| dark: '#0f172a', |
| grey: '#f1f5f9', |
| menu: '#e2e8f0' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); |
| |
| body { |
| font-family: 'Noto Sans SC', sans-serif; |
| @apply bg-gray-50; |
| overflow-x: hidden; |
| } |
| |
| .header-gradient { |
| background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); |
| } |
| |
| .nav-shadow { |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| } |
| |
| .card-shadow { |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02); |
| } |
| |
| .active-nav-item { |
| @apply bg-blue-50 text-primary font-medium border-l-4 border-primary; |
| } |
| |
| .status-tag { |
| @apply text-sm px-2 py-1 rounded-full; |
| } |
| |
| .status-pending { |
| @apply bg-gray-100 text-gray-800; |
| } |
| |
| .status-in-progress { |
| @apply bg-green-100 text-green-800; |
| } |
| |
| .status-completed { |
| @apply bg-blue-100 text-blue-800; |
| } |
| |
| .status-paused { |
| @apply bg-yellow-100 text-yellow-800; |
| } |
| |
| .dropdown { |
| position: relative; |
| display: inline-block; |
| } |
| |
| .dropdown-content { |
| display: none; |
| position: absolute; |
| background-color: white; |
| min-width: 160px; |
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); |
| z-index: 1000; |
| right: 0; |
| border-radius: 0.375rem; |
| overflow: hidden; |
| } |
| |
| .dropdown-content a { |
| @apply block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 transition-colors; |
| } |
| |
| .dropdown-content a:hover { |
| @apply text-primary; |
| } |
| |
| .filter-card { |
| transition: all 0.3s ease; |
| } |
| |
| .filter-card:hover { |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| |
| @media (min-width: 640px) { |
| .table-container { |
| overflow-x: auto; |
| } |
| |
| .table { |
| min-width: 768px; |
| } |
| } |
| </style> |
| </head> |
| <body class="flex flex-col min-h-screen"> |
| |
| <header class="w-full header-gradient text-white"> |
| <div class="max-w-screen-2xl mx-auto"> |
| <div class="flex justify-between items-center py-4 px-6"> |
| |
| <div class="flex items-center"> |
| <i class="fas fa-flask text-2xl mr-3"></i> |
| <h1 class="text-2xl font-bold tracking-wide">实验室管理系统</h1> |
| </div> |
| |
| |
| <div class="dropdown relative"> |
| <button id="userDropdownBtn" class="flex items-center space-x-2 focus:outline-none"> |
| <div class="w-9 h-9 bg-blue-100 rounded-full flex items-center justify-center"> |
| <span class="text-primary font-semibold">LM</span> |
| </div> |
| <span class="font-medium">李明</span> |
| <i class="fas fa-chevron-down text-sm"></i> |
| </button> |
| |
| <div id="userDropdown" class="dropdown-content hidden mt-2"> |
| <a href="#"><i class="fas fa-key mr-2"></i>修改密码</a> |
| <a href="#"><i class="fas fa-sign-out-alt mr-2"></i>退出系统</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </header> |
| |
| <div class="flex flex-1"> |
| |
| <nav class="bg-menu w-64 min-h-screen py-6 px-4 hidden md:block"> |
| <ul class="space-y-1"> |
| <li> |
| <a href="#" class="active-nav-item flex items-center py-3 px-4 hover:bg-blue-50 transition-colors"> |
| <i class="fas fa-calendar-alt mr-3 text-primary"></i> |
| <span>实验计划管理</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center py-3 px-4 hover:bg-blue-50 transition-colors"> |
| <i class="fas fa-tasks mr-3 text-gray-500"></i> |
| <span>实验任务管理</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center py-3 px-4 hover:bg-blue-50 transition-colors"> |
| <i class="fas fa-microscope mr-3 text-gray-500"></i> |
| <span>实验设备管理</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center py-3 px-4 hover:bg-blue-50 transition-colors"> |
| <i class="fas fa-map-marker-alt mr-3 text-gray-500"></i> |
| <span>实验场地管理</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center py-3 px-4 hover:bg-blue-50 transition-colors"> |
| <i class="fas fa-chart-bar mr-3 text-gray-500"></i> |
| <span>数据统计分析</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center py-3 px-4 hover:bg-blue-50 transition-colors"> |
| <i class="fas fa-cog mr-3 text-gray-500"></i> |
| <span>系统设置</span> |
| </a> |
| </li> |
| </ul> |
| </nav> |
| |
| |
| <main class="flex-1 bg-gray-50 p-6"> |
| |
| <div class="mb-4"> |
| <nav class="flex text-sm" aria-label="Breadcrumb"> |
| <ol class="inline-flex items-center space-x-1 md:space-x-3"> |
| <li class="inline-flex items-center"> |
| <a href="#" class="text-gray-600 hover:text-primary"> |
| <i class="fas fa-home mr-2"></i> |
| 首页 |
| </a> |
| </li> |
| <li> |
| <div class="flex items-center"> |
| <i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i> |
| <span class="text-primary font-medium">实验计划管理</span> |
| </div> |
| </li> |
| </ol> |
| </nav> |
| </div> |
| |
| <div class="flex justify-between items-center mb-5"> |
| <h2 class="text-2xl font-bold text-gray-800">实验计划管理</h2> |
| </div> |
| |
| |
| <div class="filter-card bg-white rounded-lg shadow card-shadow p-6 mb-6"> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">时间范围</label> |
| <div class="flex"> |
| <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"> |
| <span class="flex items-center px-3 bg-gray-100 border-t border-b border-gray-300 text-gray-500">~</span> |
| <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"> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">实验类别</label> |
| <select class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"> |
| <option value="">全部类别</option> |
| <option value="env">环境试验</option> |
| <option value="emc">电磁兼容</option> |
| <option value="met">计量检定</option> |
| </select> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">所属型号</label> |
| <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"> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">状态</label> |
| <div class="grid grid-cols-2 gap-2"> |
| <label class="flex items-center"> |
| <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"> |
| <span class="ml-2 text-sm text-gray-700">未开始</span> |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"> |
| <span class="ml-2 text-sm text-gray-700">进行中</span> |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"> |
| <span class="ml-2 text-sm text-gray-700">已完成</span> |
| </label> |
| <label class="flex items-center"> |
| <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"> |
| <span class="ml-2 text-sm text-gray-700">暂停</span> |
| </label> |
| </div> |
| </div> |
| |
| <div class="flex items-end space-x-3"> |
| <button class="flex-1 bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded transition-colors"> |
| <i class="fas fa-search mr-2"></i>搜索 |
| </button> |
| <button class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded transition-colors"> |
| <i class="fas fa-redo mr-2"></i>重置 |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-between items-center mb-4"> |
| <div class="text-sm text-gray-500">共 152 条记录</div> |
| <div class="space-x-3"> |
| <button class="bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded transition-colors"> |
| <i class="fas fa-plus-circle mr-2"></i>新建计划 |
| </button> |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded transition-colors"> |
| <i class="fas fa-download mr-2"></i>导出计划 |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="table-container"> |
| <div class="bg-white rounded-lg shadow card-shadow overflow-hidden"> |
| <table class="w-full table-auto"> |
| <thead class="bg-gray-100"> |
| <tr> |
| <th class="px-5 py-3 text-left text-sm font-semibold text-gray-600 tracking-wider">序号</th> |
| <th class="px-5 py-3 text-left text-sm font-semibold text-gray-600 tracking-wider">实验计划名称</th> |
| <th class="px-5 py-3 text-left text-sm font-semibold text-gray-600 tracking-wider">所属型号</th> |
| <th class="px-5 py-3 text-left text-sm font-semibold text-gray-600 tracking-wider">实验类别</th> |
| <th class="px-5 py-3 text-left text-sm font-semibold text-gray-600 tracking-wider">起止时间</th> |
| <th class="px-5 py-3 text-left text-sm font-semibold text-gray-600 tracking-wider">状态</th> |
| <th class="px-5 py-3 text-left text-sm font-semibold text-gray-600 tracking-wider">负责人</th> |
| <th class="px-5 py-3 text-right text-sm font-semibold text-gray-600 tracking-wider">操作</th> |
| </tr> |
| </thead> |
| <tbody class="divide-y divide-gray-200"> |
| |
| <tr class="hover:bg-blue-50 transition-colors"> |
| <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">1</td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm font-medium text-gray-900">高温强度测试计划A1</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-900">XJ-78</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-500">环境试验</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-500">2025-07-01 至 2025-07-20</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <span class="status-tag status-in-progress">进行中</span> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">张工</td> |
| <td class="px-5 py-4 whitespace-nowrap text-right text-sm"> |
| <div class="space-x-4"> |
| <a href="#" class="text-secondary hover:text-blue-700" title="查看"><i class="fas fa-eye"></i></a> |
| <a href="#" class="text-secondary hover:text-blue-700" title="编辑"><i class="fas fa-edit"></i></a> |
| <a href="#" class="text-red-500 hover:text-red-700" title="删除"><i class="fas fa-trash-alt"></i></a> |
| <a href="#" class="text-green-500 hover:text-green-700" title="生成任务"><i class="fas fa-tasks"></i></a> |
| </div> |
| </td> |
| </tr> |
| |
| <tr class="hover:bg-blue-50 transition-colors"> |
| <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">2</td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm font-medium text-gray-900">电磁辐射测试实验</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-900">RD-42</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-500">电磁兼容</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-500">2025-07-05 至 2025-07-30</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <span class="status-tag status-paused">暂停</span> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">王工</td> |
| <td class="px-5 py-4 whitespace-nowrap text-right text-sm"> |
| <div class="space-x-4"> |
| <a href="#" class="text-secondary hover:text-blue-700"><i class="fas fa-eye"></i></a> |
| <a href="#" class="text-secondary hover:text-blue-700"><i class="fas fa-edit"></i></a> |
| <a href="#" class="text-red-500 hover:text-red-700"><i class="fas fa-trash-alt"></i></a> |
| <a href="#" class="text-green-500 hover:text-green-700"><i class="fas fa-tasks"></i></a> |
| </div> |
| </td> |
| </tr> |
| <tr class="hover:bg-blue-50 transition-colors"> |
| <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">3</td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm font-medium text-gray-900">计量设备定期检定</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-900">ME-7C</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-500">计量检定</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-500">2025-08-10 至 2025-08-25</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <span class="status-tag status-pending">未开始</span> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">李工</td> |
| <td class="px-5 py-4 whitespace-nowrap text-right text-sm"> |
| <div class="space-x-4"> |
| <a href="#" class="text-secondary hover:text-blue-700"><i class="fas fa-eye"></i></a> |
| <a href="#" class="text-secondary hover:text-blue-700"><i class="fas fa-edit"></i></a> |
| <a href="#" class="text-red-500 hover:text-red-700"><i class="fas fa-trash-alt"></i></a> |
| <a href="#" class="text-green-500 hover:text-green-700"><i class="fas fa-tasks"></i></a> |
| </div> |
| </td> |
| </tr> |
| <tr class="hover:bg-blue-50 transition-colors"> |
| <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">4</td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm font-medium text-gray-900">低温性能测试实验</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-900">CT-33</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-500">环境试验</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-500">2025-06-15 至 2025-06-28</div> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap"> |
| <span class="status-tag status-completed">已完成</span> |
| </td> |
| <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-500">陈工</td> |
| <td class="px-5 py-4 whitespace-nowrap text-right text-sm"> |
| <div class="space-x-4"> |
| <a href="#" class="text-secondary hover:text-blue-700"><i class="fas fa-eye"></i></a> |
| <a href="#" class="text-secondary hover:text-blue-700"><i class="fas fa-edit"></i></a> |
| <a href="#" class="text-red-500 hover:text-red-700"><i class="fas fa-trash-alt"></i></a> |
| <a href="#" class="text-green-500 hover:text-green-700"><i class="fas fa-tasks"></i></a> |
| </div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| |
| |
| <div class="mt-6 flex flex-col sm:flex-row items-center justify-between"> |
| <div class="mb-4 sm:mb-0"> |
| <p class="text-sm text-gray-700"> |
| 显示 <span class="font-medium">1</span> 到 <span class="font-medium">4</span> / 共 <span class="font-medium">152</span> 条记录 |
| </p> |
| </div> |
| <div class="flex items-center space-x-3"> |
| <select class="text-sm p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"> |
| <option value="10">10条/页</option> |
| <option value="20" selected>20条/页</option> |
| <option value="50">50条/页</option> |
| </select> |
| |
| <nav class="inline-flex"> |
| <a href="#" class="py-2 px-3 ml-0 mr-1 rounded bg-gray-200 hover:bg-gray-300"> |
| <i class="fas fa-angle-left"></i> |
| </a> |
| <a href="#" class="py-2 px-4 hover:bg-blue-100 hover:text-primary text-white bg-primary rounded">1</a> |
| <a href="#" class="py-2 px-4 hover:bg-blue-100 hover:text-primary text-gray-600 rounded ml-1">2</a> |
| <a href="#" class="py-2 px-4 hover:bg-blue-100 hover:text-primary text-gray-600 rounded ml-1">3</a> |
| <span class="py-2 px-4 text-gray-600 ml-1">...</span> |
| <a href="#" class="py-2 px-4 hover:bg-blue-100 hover:text-primary text-gray-600 rounded ml-1">8</a> |
| <a href="#" class="py-2 px-4 hover:bg-blue-100 hover:text-primary text-gray-600 rounded ml-1 mr-1">9</a> |
| <a href="#" class="py-2 px-3 rounded bg-gray-200 hover:bg-gray-300"> |
| <i class="fas fa-angle-right"></i> |
| </a> |
| </nav> |
| </div> |
| </div> |
| </main> |
| </div> |
| |
| |
| <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-md md:hidden"> |
| <div class="flex justify-between p-3"> |
| <a href="#" class="flex flex-col items-center px-4 py-2 text-primary"> |
| <i class="fas fa-calendar-alt text-xl"></i> |
| <span class="text-xs mt-1">计划</span> |
| </a> |
| <a href="#" class="flex flex-col items-center px-4 py-2 text-gray-500"> |
| <i class="fas fa-tasks text-xl"></i> |
| <span class="text-xs mt-1">任务</span> |
| </a> |
| <a href="#" class="flex flex-col items-center px-4 py-2 text-gray-500"> |
| <i class="fas fa-microscope text-xl"></i> |
| <span class="text-xs mt-1">设备</span> |
| </a> |
| <a href="#" class="flex flex-col items-center px-4 py-2 text-gray-500"> |
| <i class="fas fa-user text-xl"></i> |
| <span class="text-xs mt-1">我的</span> |
| </a> |
| </div> |
| </nav> |
| |
| <script> |
| |
| const dropdownBtn = document.getElementById('userDropdownBtn'); |
| const dropdownMenu = document.getElementById('userDropdown'); |
| |
| dropdownBtn.addEventListener('click', function() { |
| dropdownMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.addEventListener('click', function(event) { |
| if (!dropdownBtn.contains(event.target) && !dropdownMenu.contains(event.target)) { |
| dropdownMenu.classList.add('hidden'); |
| } |
| }); |
| |
| |
| const menuItems = document.querySelectorAll('nav a'); |
| menuItems.forEach(item => { |
| item.addEventListener('click', function() { |
| menuItems.forEach(i => i.classList.remove('active-nav-item')); |
| this.classList.add('active-nav-item'); |
| }); |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| setTimeout(function() { |
| document.body.classList.remove('opacity-0'); |
| }, 300); |
| }); |
| </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" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
