<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实验室管理系统 - 建设内容</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Rajdhani:wght@500;600;700&display=swap');
:root {
--bg-color: #f8fafc;
--canvas-bg-color: #ffffff;
--card-bg-color: rgba(255, 255, 255, 0.9);
--card-hover-bg: rgba(255, 255, 255, 1);
--text-color: #1e293b;
--text-light-color: #64748b;
--accent-color: #0284c7;
--accent-glow: rgba(2, 132, 199, 0.3);
--border-color: rgba(2, 132, 199, 0.2);
--grid-bg: radial-gradient(rgba(2, 132, 199, 0.05) 1px, transparent 1px);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: var(--bg-color);
background-image: var(--grid-bg);
background-size: 30px 30px;
padding: 20px;
color: var(--text-color);
}
.canvas {
width: 100%;
max-width: 1920px;
margin: 0 auto;
background-color: var(--canvas-bg-color);
padding: 30px;
border-radius: 12px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
border: 1px solid var(--border-color);
position: relative;
overflow: hidden;
}
.canvas::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
rgba(2, 132, 199, 0.03) 0%,
rgba(2, 132, 199, 0) 100%
);
pointer-events: none;
}
.main-header {
text-align: center;
font-size: clamp(24px, 3vw, 44px);
font-weight: 700;
color: var(--text-color);
padding: 20px 0;
margin-bottom: 40px;
border-bottom: 1px solid var(--border-color);
font-family: 'Rajdhani', sans-serif;
position: relative;
}
.main-header::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 180px;
height: 3px;
background-color: var(--accent-color);
border-radius: 3px;
}
.module-container {
display: flex;
flex-direction: column;
gap: 40px;
}
.main-module {
background-color: var(--card-bg-color);
border-radius: 12px;
padding: 30px;
border: 1px solid var(--border-color);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(2, 132, 199, 0.05) inset;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.main-module::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--accent-color), #38bdf8);
opacity: 0.9;
}
.main-module:hover {
transform: translateY(-5px);
background-color: var(--card-hover-bg);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1),
0 0 15px var(--accent-glow),
0 0 0 1px rgba(2, 132, 199, 0.1) inset;
}
.main-module-title {
font-size: clamp(20px, 2.5vw, 28px);
font-weight: 600;
color: var(--text-color);
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 15px;
font-family: 'Rajdhani', sans-serif;
}
.main-module-title i {
color: var(--accent-color);
font-size: 1.3em;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(2, 132, 199, 0.1);
border-radius: 8px;
}
.sub-modules {
display: flex;
flex-wrap: wrap;
gap: 25px;
}
.sub-module {
flex: 1;
min-width: 280px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
padding: 20px;
border: 1px solid rgba(2, 132, 199, 0.15);
transition: all 0.3s ease;
}
.sub-module:hover {
transform: translateY(-3px);
border-color: rgba(2, 132, 199, 0.3);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07), 0 0 10px var(--accent-glow);
}
.sub-module-title {
font-size: clamp(16px, 1.5vw, 20px);
font-weight: 500;
color: var(--accent-color);
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(2, 132, 199, 0.1);
}
.sub-module-title i {
color: var(--accent-color);
font-size: 1.1em;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(2, 132, 199, 0.1);
border-radius: 6px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
font-size: clamp(14px, 1.2vw, 16px);
margin-bottom: 12px;
line-height: 1.7;
color: var(--text-light-color);
display: flex;
flex-wrap: wrap;
position: relative;
padding-left: 20px;
}
li:last-child {
margin-bottom: 0;
}
li::before {
content: '•';
position: absolute;
left: 0;
color: var(--accent-color);
font-size: 1.2em;
}
/* 响应式调整 */
@media (max-width: 1200px) {
.sub-modules {
gap: 20px;
}
.main-module {
padding: 25px;
}
}
@media (max-width: 768px) {
.sub-modules {
flex-direction: column;
}
.canvas {
padding: 20px;
}
.main-header {
padding: 15px 0;
margin-bottom: 30px;
}
.main-module {
padding: 20px;
}
.main-module-title {
margin-bottom: 20px;
}
}
@media (max-width: 480px) {
.main-module {
padding: 15px;
}
.sub-module {
padding: 15px;
}
li {
padding-left: 15px;
}
}
.decorative-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(2, 132, 199, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(2, 132, 199, 0.05) 1px, transparent 1px);
background-size: 50px 50px;
z-index: 0;
}
</style>
</head>
<body>
<div class="canvas">
<div class="decorative-grid"></div>
<h1 class="main-header">实验室管理系统建设内容</h1>
<div class="module-container">
<!-- 一、实验室准入与智能考勤 -->
<div class="main-module">
<h2 class="main-module-title"><i class="fa-solid fa-id-card-clip"></i>一、实验室准入与智能考勤</h2>
<div class="sub-modules">
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-graduation-cap"></i>1.1 用户培训与准入授权</h3>
<ul>
<li>准入考核获取结果管理</li>
<li>有效期与提醒管理</li>
<li>考核结果与实验室门禁权限关联管理</li>
<li>实验室准入权限管理</li>
</ul>
</div>
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-clock-rotate-left"></i>1.2 智能考勤与实时监控</h3>
<ul>
<li>考勤、人脸识别与门禁系统关联管理，实现人脸识别自动考勤</li>
<li>实时在室人员统计看板（显示身份、区域、时长）</li>
<li>实验室当前使用状态监控</li>
</ul>
</div>
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-triangle-exclamation"></i>1.3 异常行为预警</h3>
<ul>
<li>超时停留预警与通知</li>
<li>非授权区域闯入预警与通知</li>
<li>非工作时间进出预警与通知</li>
</ul>
</div>
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-flag-usa"></i>1.4 违规上报及处置反馈</h3>
<ul>
<li>违规行为上报（支持匿名、事件分类管理）</li>
<li>预警与提醒可关联违规上报</li>
<li>支持审核、处置、通知闭环管理</li>
</ul>
</div>
</div>
</div>
<!-- 二、资产（设备/仪器）管理 -->
<div class="main-module">
<h2 class="main-module-title"><i class="fa-solid fa-microchip"></i>二、资产（设备/仪器）管理</h2>
<div class="sub-modules">
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-life-ring"></i>2.1 申请采购管理</h3>
<ul>
<li>物资需求申请管理</li>
<li>分级审批流程管理（普通与危化品）</li>
</ul>
</div>
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-chart-line"></i>2.2 智能监控与维保</h3>
<ul>
<li>关键设备运行状态实时监控（通过物联网传感器）</li>
<li>设备使用频率和环境参数采集</li>
<li>预防性维护计划制定与管理</li>
<li>自动生成并派发维保任务单</li>
</ul>
</div>
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-calendar-check"></i>2.3 仪器预约与使用控制</h3>
<ul>
<li>分级授权的仪器预约资格管理</li>
<li>仪器预约看板（实时显示设备状态：空闲/使用中/维护中等）</li>
<li>多条件筛选仪器（按类型、位置等）</li>
<li>使用前二次身份验证（刷脸/刷卡等）激活设备</li>
<li>详细使用日志记录（操作步骤、参数、结果数据）</li>
</ul>
</div>
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-calculator"></i>2.4 计费结算与数据分析</h3>
<ul>
<li>支持多种计费模式（按时、按次、包月）</li>
<li>自动生成费用清单</li>
<li>设备使用数据多维度分析报表（使用率、故障率、创收能力等）</li>
</ul>
</div>
</div>
</div>
<!-- 三、库存管理 -->
<div class="main-module">
<h2 class="main-module-title"><i class="fa-solid fa-file-invoice-dollar"></i>三、库存管理</h2>
<div class="sub-modules">
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-boxes-stacked"></i>3.1 入库管理</h3>
<ul>
<li>普通耗材入库：单人密码+动态验证码，记录操作员</li>
<li>危化品验收：双人生物识别+电子签名，结合视频存证和操作日志</li>
</ul>
</div>
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-warehouse"></i>3.2 存储管理</h3>
<ul>
<li>普通耗材：标准化货架与分类标签管理</li>
<li>危化品：专用防爆柜+双机双锁（钥匙分人保管）管理</li>
</ul>
</div>
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-arrow-right-from-bracket"></i>3.3 领用与出库管理</h3>
<ul>
<li>危化品领用：需两人同时操作，通过刷卡、指纹等多重验证，并共同签署电子领用记录</li>
<li>用量追踪：扫码出库，系统自动扣减库存</li>
</ul>
</div>
</div>
</div>
<!-- 四、系统对接 -->
<div class="main-module">
<h2 class="main-module-title"><i class="fa-solid fa-plug-circle-bolt"></i>四、系统对接</h2>
<div class="sub-modules">
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-door-open"></i>门禁系统（含人脸识别终端）</h3>
<ul>
<li>人员准入控制、智能考勤和仪器使用前的二次身份验证</li>
</ul>
</div>
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-wifi"></i>物联网传感器</h3>
<ul>
<li>实时采集温度、湿度、运行状态，实现智能监控</li>
</ul>
</div>
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-fingerprint"></i>指纹仪</h3>
<ul>
<li>用于危化品仓库管理员的身份确认</li>
</ul>
</div>
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-video"></i>人脸识别摄像头</h3>
<ul>
<li>用于门禁、考勤和设备激活</li>
</ul>
</div>
<div class="sub-module">
<h3 class="sub-module-title"><i class="fa-solid fa-credit-card"></i>IC/ID卡读卡器</h3>
<ul>
<li>用于危化品领用时申请人的身份验证</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
// 为卡片添加交互效果
document.querySelectorAll('.main-module, .sub-module').forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transition = 'all 0.3s ease';
});
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html