|
|
<!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> |
