<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPO 任务预览面板原型 (修订版)</title>
<!-- 引入 Font Awesome 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<!-- 引入 Noto Sans SC 字体 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
/* --- 全局与背景样式 --- */
body {
background-color: #0c1a2e;
background-image:
radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0),
radial-gradient(circle at 25px 25px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
background-size: 50px 50px;
font-family: 'Noto Sans SC', sans-serif;
color: #e0e0e0;
padding: 40px;
display: flex;
justify-content: center;
align-items: flex-start;
gap: 40px;
flex-wrap: wrap;
}
/* --- 面板通用基础样式 --- */
.task-panel {
width: 360px;
height: 420px; /* 固定高度，确保所有面板大小一致 */
background: rgba(10, 25, 47, 0.85);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
transition: all 0.3s ease;
overflow: hidden; /* 防止内容溢出 */
}
/* --- 面板内容区 --- */
.panel-content {
padding: 20px;
display: flex;
flex-direction: column;
gap: 18px; /* 模块间距 */
flex-grow: 1;
}
/* --- 面板头部样式 --- */
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 12px;
margin: -20px -20px 0; /* 扩展至面板边缘 */
padding: 15px 20px;
}
.panel-header .title {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px; /* 强化任务ID */
font-weight: 700;
letter-spacing: 1px;
}
.panel-header .status-tag {
font-size: 12px;
font-weight: 500;
padding: 4px 10px;
border-radius: 15px;
color: #fff;
}
/* --- 信息区域样式 --- */
.info-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.info-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.info-row i.fa {
width: 20px;
text-align: center;
color: #8899b3;
}
.info-row strong {
font-weight: 500;
color: #ffffff;
}
.info-row .sub-text {
color: #8899b3;
font-size: 13px;
}
/* --- 文书/结果 状态 --- */
.status-list {
padding-left: 30px; /* 对齐图标 */
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13px;
}
.status-list .item {
display: flex;
align-items: center;
gap: 8px;
}
.status-list i.fa-circle-check { color: #28a745; }
/* --- 进度条样式 --- */
.progress-bar {
width: 100%; height: 8px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 4px; overflow: hidden;
}
.progress-bar-inner { height: 100%; border-radius: 4px; }
/* --- 统一操作区 (CTA) 样式 --- */
.cta-section {
margin-top: auto; /* 将按钮推到底部 */
padding: 15px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
display: flex;
gap: 10px;
}
.cta-button {
flex: 1; /* 按钮平分宽度 */
padding: 12px 0;
border: none;
border-radius: 8px;
color: #fff;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.cta-button:hover { opacity: 0.9; transform: translateY(-1px); }
.cta-button.primary { /* 主按钮 */ }
.cta-button.secondary { /* 次按钮 */
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.cta-button.secondary:hover { background-color: rgba(255, 255, 255, 0.15); }
/* ========== 1. 待启动 - 正常状态 ========== */
.panel-initiated { border-top: 5px solid #007BFF; }
.panel-initiated .status-tag { background-color: #007BFF; }
.panel-initiated .primary { background-color: #007BFF; }
/* ========== 2. 启动中 - 正常状态 ========== */
.panel-inprogress { border-top: 5px solid #28a745; }
.panel-inprogress .status-tag { background-color: #28a745; }
.panel-inprogress .progress-bar-inner { background-color: #28a745; }
.panel-inprogress .primary { background-color: #28a745; }
/* ========== 3. 启动中 - 异常状态 ========== */
@keyframes red-glow {
0%, 100% { box-shadow: 0 0 10px rgba(220, 53, 69, 0.5), inset 0 0 10px rgba(220, 53, 69, 0.3); }
50% { box-shadow: 0 0 15px rgba(220, 53, 69, 0.8), inset 0 0 15px rgba(220, 53, 69, 0.5); }
}
.panel-alert {
border: 1px solid #dc3545;
border-top: 5px solid #dc3545;
animation: red-glow 1.5s infinite ease-in-out;
}
.panel-alert .status-tag { background-color: #dc3545; }
.alert-info-box {
background: rgba(220, 53, 69, 0.15);
border-left: 3px solid #dc3545;
border-radius: 4px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.alert-info-box .alert-title {
display: flex; align-items: center; gap: 8px;
font-size: 15px; font-weight: 700; color: #ff8a8a;
}
.alert-info-box .alert-details {
font-size: 13px; padding-left: 28px; color: #ffc2c2;
}
.panel-alert .primary { background-color: #c82333; }
/* ========== 4. 已结束 - 正常状态 ========== */
.panel-completed { border-top: 5px solid #6c757d; }
.panel-completed .status-tag { background-color: #6c757d; }
.panel-completed .primary { background-color: #495057; border: 1px solid #6c757d; }
.panel-completed .primary:hover { background-color: #5a6268; }
</style>
</head>
<body>
<!-- Panel 1: 待启动 - 正常状态 -->
<div class="task-panel panel-initiated">
<div class="panel-content">
<div class="panel-header">
<div class="title"><i class="fa-solid fa-file-import"></i><span>T240808-01</span></div>
<div class="status-tag">待启动</div>
</div>
<div class="info-section">
<div class="info-row"><i class="fa-solid fa-location-arrow"></i><span><strong>起点:</strong> 江苏省人民医院 - OR 3</span></div>
<div class="info-row"><i class="fa-solid fa-location-dot"></i><span><strong>终点:</strong> 南京市第一医院 - OR 8</span></div>
</div>
<div class="info-section">
<div class="info-row"><i class="fa-solid fa-lungs"></i><span><strong>器官类型:</strong> 肝脏 x 1, 肾脏 x 2</span></div>
<div class="info-row"><i class="fa-solid fa-id-card"></i><span><strong>捐献者ID:</strong> D240808-01</span></div>
<div class="info-row"><i class="fa-solid fa-user-check"></i><span><strong>受赠者ID:</strong> R240808-01, R240808-02</span></div>
</div>
<div class="info-section">
<div class="info-row"><i class="fa-solid fa-file-signature"></i><strong>前置文书:</strong></div>
<div class="status-list">
<div class="item"><i class="fa-solid fa-circle-check"></i> 捐赠协议</div>
<div class="item"><i class="fa-solid fa-circle-check"></i> 死亡证明</div>
</div>
</div>
</div>
<div class="cta-section">
<button class="cta-button secondary"><i class="fa-solid fa-circle-info"></i>查看详情</button>
<button class="cta-button primary"><i class="fa-solid fa-rocket"></i>启动任务</button>
</div>
</div>
<!-- Panel 2: 启动中 - 正常状态 -->
<div class="task-panel panel-inprogress">
<div class="panel-content">
<div class="panel-header">
<div class="title"><i class="fa-solid fa-shipping-fast"></i><span>T240808-02</span></div>
<div class="status-tag">进行中</div>
</div>
<div class="info-section">
<div class="info-row"><i class="fa-solid fa-user-tie"></i><span><strong>协调员:</strong> 张三 <span class="sub-text">(138****5678)</span></span></div>
<div class="info-row"><i class="fa-solid fa-box"></i><span><strong>转运设备:</strong> T08 <span class="sub-text">(电量: 85%)</span></span></div>
</div>
<div class="info-section">
<div class="info-row"><i class="fa-solid fa-route"></i><span><strong>当前状态:</strong> 前往器官获取点</span></div>
<div class="info-row"><i class="fa-solid fa-hourglass-half"></i><span><strong>预计到达 (ETA):</strong> 14:30</span></div>
</div>
<div class="info-section">
<div class="info-row"><i class="fa-solid fa-stopwatch"></i><span><strong>冷缺血时间:</strong> <strong style="color: #28a745;">00:15:22</strong> / 08:00:00</span></div>
<div class="progress-bar">
<div class="progress-bar-inner" style="width: 3%;"></div>
</div>
</div>
</div>
<div class="cta-section">
<button class="cta-button secondary"><i class="fa-solid fa-circle-info"></i>查看详情</button>
<button class="cta-button primary"><i class="fa-solid fa-video"></i>视频通话</button>
</div>
</div>
<!-- Panel 3: 启动中 - 异常状态 -->
<div class="task-panel panel-alert">
<div class="panel-content">
<div class="panel-header">
<div class="title"><i class="fa-solid fa-triangle-exclamation"></i><span>T240808-03</span></div>
<div class="status-tag">异常预警</div>
</div>
<div class="alert-info-box">
<div class="alert-title"><i class="fa-solid fa-temperature-high"></i>转运箱温度超标</div>
<div class="alert-details">
<div><strong>当前:</strong> 8.2°C / <strong>阈值:</strong> 8.0°C | <strong>级别:</strong> 高</div>
</div>
</div>
<div class="info-section">
<div class="info-row"><i class="fa-solid fa-user-tie"></i><span><strong>协调员:</strong> 李四</span></div>
<div class="info-row"><i class="fa-solid fa-box"></i><span><strong>转运设备:</strong> T03 <span class="sub-text" style="color:#ff8a8a; font-weight:bold;">(状态: 异常)</span></span></div>
</div>
<div class="info-section">
<div class="info-row"><i class="fa-solid fa-stopwatch"></i><span><strong>冷缺血时间:</strong> <strong style="color: #dc3545;">04:30:18</strong> / 08:00:00</span></div>
<div class="progress-bar">
<div class="progress-bar-inner" style="width: 56%; background-color: #dc3545;"></div>
</div>
</div>
</div>
<div class="cta-section">
<button class="cta-button secondary"><i class="fa-solid fa-circle-info"></i>查看详情</button>
<button class="cta-button primary"><i class="fa-solid fa-siren-on"></i>启动预案</button>
</div>
</div>
<!-- Panel 4: 已结束 -->
<div class="task-panel panel-completed">
<div class="panel-content">
<div class="panel-header">
<div class="title"><i class="fa-solid fa-flag-checkered"></i><span>T240808-04</span></div>
<div class="status-tag">已结束</div>
</div>
<div class="info-section">
<div class="info-row"><i class="fa-solid fa-circle-check"></i><span><strong>完成状态:</strong> 交付成功</span></div>
<div class="info-row"><i class="fa-solid fa-calendar-check"></i><span><strong>完成时间:</strong> 2024-08-08 16:30</span></div>
<div class="info-row"><i class="fa-solid fa-clock"></i><span><strong>总耗时:</strong> 2小时45分钟</span></div>
</div>
<div class="info-section">
<div class="info-row"><i class="fa-solid fa-user-tie"></i><span><strong>协调员:</strong> 王五</span></div>
<div class="info-row"><i class="fa-solid fa-box"></i><span><strong>转运设备:</strong> T05</span></div>
</div>
<div class="info-section">
<div class="info-row"><i class="fa-solid fa-file-invoice"></i><strong>最终交付文书:</strong></div>
<div class="status-list">
<div class="item"><i class="fa-solid fa-circle-check"></i> 器官接收确认单</div>
</div>
</div>
</div>
<div class="cta-section">
<button class="cta-button secondary"><i class="fa-solid fa-circle-info"></i>查看详情</button>
<button class="cta-button primary"><i class="fa-solid fa-route"></i>轨迹回放</button>
</div>
</div>
</body>
</html>
index.html
style.css
index.js
index.html