<!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>
<!-- 引入 Tailwind CSS 用于快速样式布局 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入 FontAwesome 用于图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
background-color: #f0f2f5;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
gap: 40px;
flex-wrap: wrap;
}
/* 模拟手机外壳 */
.phone-frame {
width: 375px;
height: 812px;
background-color: #fff;
border-radius: 30px;
box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.3);
border: 12px solid #1e293b;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
/* 顶部刘海/状态栏区域 */
.status-bar {
height: 30px;
background-color: #1e3a8a;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px;
font-size: 12px;
z-index: 10;
}
/* 滚动区域 */
.scroll-content {
flex: 1;
overflow-y: auto;
background-color: #f8fafc;
}
/* 隐藏滚动条 */
.scroll-content::-webkit-scrollbar {
display: none;
}
/* 底部导航 */
.bottom-nav {
height: 70px;
background-color: white;
border-top: 1px solid #e2e8f0;
display: flex;
justify-content: space-around;
align-items: center;
padding-bottom: 10px;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
color: #64748b;
font-size: 10px;
gap: 4px;
cursor: pointer;
}
.nav-item.active {
color: #1e3a8a;
}
/* 自定义组件样式 */
.card {
background: white;
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.tag {
padding: 2px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: bold;
}
.tag-urgent { background-color: #fee2e2; color: #ef4444; }
.tag-process { background-color: #dbeafe; color: #1e40af; }
.tag-ai { background-color: #f3e8ff; color: #7e22ce; border: 1px solid #d8b4fe; }
.step-line {
position: absolute;
left: 22px;
top: 35px;
bottom: 0;
width: 2px;
background-color: #e2e8f0;
z-index: 0;
}
.recording-wave {
display: flex;
gap: 3px;
align-items: center;
height: 20px;
}
.bar {
width: 3px;
background-color: #3b82f6;
animation: wave 1s ease-in-out infinite;
}
@keyframes wave {
0%, 100% { height: 5px; }
50% { height: 15px; }
}
</style>
</head>
<body>
<!-- 页面 1：智能协同工作台 -->
<div class="phone-frame">
<!-- 状态栏 -->
<div class="status-bar">
<span>14:32</span>
<div class="flex gap-2">
<i class="fa-solid fa-signal"></i>
<i class="fa-solid fa-wifi"></i>
<i class="fa-solid fa-battery-three-quarters"></i>
</div>
</div>
<!-- 顶部Header -->
<div class="bg-blue-900 text-white p-5 pb-8 rounded-b-[2rem] relative shadow-lg">
<div class="flex justify-between items-start">
<div>
<p class="text-blue-200 text-xs">OPO智慧协同系统 v2.0</p>
<h1 class="text-xl font-bold mt-1">你好, 李协调员</h1>
<div class="flex items-center gap-2 mt-2 text-xs bg-blue-800/50 px-2 py-1 rounded-full w-fit">
<div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<span>在线 | 南京鼓楼区由西向东行驶</span>
</div>
</div>
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" class="w-10 h-10 rounded-full border-2 border-white bg-white">
</div>
<!-- 悬浮的数据概览 -->
<div class="absolute -bottom-8 left-4 right-4 bg-white text-gray-800 rounded-xl p-4 shadow-md flex justify-between text-center">
<div>
<div class="text-xs text-gray-500">待办任务</div>
<div class="text-xl font-bold text-blue-600">3</div>
</div>
<div>
<div class="text-xs text-gray-500">合规预警</div>
<div class="text-xl font-bold text-orange-500">1</div>
</div>
<div>
<div class="text-xs text-gray-500">本月绩效</div>
<div class="text-xl font-bold text-green-600">98</div>
</div>
</div>
</div>
<div class="scroll-content pt-12 px-4">
<!-- 紧急任务卡片 (智能调度) -->
<div class="flex justify-between items-center mb-2 mt-2">
<h3 class="font-bold text-gray-800">当前执行 (1)</h3>
<span class="text-xs text-blue-600">智能调度推荐路径 ></span>
</div>
<div class="card border-l-4 border-red-500 relative overflow-hidden">
<div class="absolute top-0 right-0 bg-red-100 text-red-600 text-[10px] px-2 py-1 rounded-bl-lg font-bold">
紧急程度：高
</div>
<div class="flex justify-between items-start mb-2">
<h4 class="font-bold text-gray-800">潜在捐献案例跟进</h4>
</div>
<div class="text-sm text-gray-600 space-y-1 mb-3">
<p><i class="fa-regular fa-hospital w-5"></i> 南京市第一医院(南院)</p>
<p><i class="fa-regular fa-clock w-5"></i> 预计到达: 15分钟后</p>
<p><i class="fa-solid fa-truck-medical w-5"></i> 状态: 转运途中</p>
</div>
<div class="flex gap-2">
<button class="flex-1 bg-blue-600 text-white py-2 rounded-lg text-sm font-medium shadow-sm active:scale-95 transition">
进入作业
</button>
<button class="w-10 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center shadow-sm border border-blue-100">
<i class="fa-solid fa-phone"></i>
</button>
<button class="w-10 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center shadow-sm border border-blue-100">
<i class="fa-solid fa-location-arrow"></i>
</button>
</div>
</div>
<!-- 常用功能 Grid (二期重点：智能采集与通讯) -->
<h3 class="font-bold text-gray-800 mb-2">快捷作业</h3>
<div class="grid grid-cols-4 gap-3 mb-6">
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center text-lg shadow-sm">
<i class="fa-solid fa-wand-magic-sparkles"></i>
</div>
<span class="text-[10px] text-gray-600">AI录入</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center text-lg shadow-sm">
<i class="fa-solid fa-video"></i>
</div>
<span class="text-[10px] text-gray-600">多方会议</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-orange-50 text-orange-600 rounded-xl flex items-center justify-center text-lg shadow-sm">
<i class="fa-solid fa-glasses"></i>
</div>
<span class="text-[10px] text-gray-600">眼镜互联</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-green-50 text-green-600 rounded-xl flex items-center justify-center text-lg shadow-sm">
<i class="fa-solid fa-box-open"></i>
</div>
<span class="text-[10px] text-gray-600">物资领用</span>
</div>
</div>
<!-- AI助手/数字人入口 -->
<div class="card bg-gradient-to-r from-slate-800 to-slate-900 text-white flex items-center justify-between">
<div>
<div class="text-xs text-blue-300 mb-1">AI智能助手</div>
<div class="text-sm font-bold">"有什么可以帮您？"</div>
</div>
<div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center animate-pulse">
<i class="fa-solid fa-microphone-lines"></i>
</div>
</div>
</div>
<!-- 底部导航 -->
<div class="bottom-nav">
<div class="nav-item active">
<i class="fa-solid fa-house text-lg"></i>
<span>工作台</span>
</div>
<div class="nav-item">
<i class="fa-solid fa-list-check text-lg"></i>
<span>任务</span>
</div>
<div class="nav-item relative">
<i class="fa-solid fa-comment-dots text-lg"></i>
<div class="absolute -top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></div>
<span>消息</span>
</div>
<div class="nav-item">
<i class="fa-solid fa-user text-lg"></i>
<span>我的</span>
</div>
</div>
</div>
<!-- 页面 2：现场作业与AI采集 (深化功能) -->
<div class="phone-frame">
<!-- 状态栏 -->
<div class="status-bar">
<span>14:35</span>
<div class="flex gap-2">
<i class="fa-solid fa-signal"></i>
<i class="fa-solid fa-wifi"></i>
<i class="fa-solid fa-battery-full"></i>
</div>
</div>
<!-- 顶部导航 -->
<div class="bg-white border-b border-gray-200 p-4 flex items-center justify-between shadow-sm z-20">
<i class="fa-solid fa-chevron-left text-gray-600 text-lg"></i>
<div class="text-center">
<h2 class="font-bold text-gray-800 text-base">案例 #2023-JS-091</h2>
<span class="text-[10px] text-green-600 bg-green-50 px-2 rounded-full">进行中</span>
</div>
<i class="fa-solid fa-ellipsis text-gray-600 text-lg"></i>
</div>
<!-- 流程步骤条 -->
<div class="bg-white px-4 py-3 shadow-sm mb-2">
<div class="flex justify-between items-center relative">
<div class="absolute top-1/2 left-0 w-full h-0.5 bg-gray-200 -z-10"></div>
<div class="flex flex-col items-center gap-1 bg-white px-1">
<div class="w-6 h-6 rounded-full bg-green-500 text-white flex items-center justify-center text-xs"><i class="fa-solid fa-check"></i></div>
<span class="text-[10px] text-gray-500">接报</span>
</div>
<div class="flex flex-col items-center gap-1 bg-white px-1">
<div class="w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-xs">2</div>
<span class="text-[10px] text-blue-600 font-bold">维护/评估</span>
</div>
<div class="flex flex-col items-center gap-1 bg-white px-1">
<div class="w-6 h-6 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center text-xs">3</div>
<span class="text-[10px] text-gray-400">获取</span>
</div>
<div class="flex flex-col items-center gap-1 bg-white px-1">
<div class="w-6 h-6 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center text-xs">4</div>
<span class="text-[10px] text-gray-400">分配</span>
</div>
</div>
</div>
<div class="scroll-content px-4 py-2">
<!-- AI合规提示 (二期重点：智能合规校验) -->
<div class="bg-purple-50 border border-purple-100 rounded-lg p-3 mb-4 flex gap-3 items-start">
<div class="text-purple-600 mt-0.5"><i class="fa-solid fa-robot"></i></div>
<div class="flex-1">
<div class="text-xs font-bold text-purple-700 mb-1">AI 合规助手提示</div>
<p class="text-[10px] text-purple-600 leading-relaxed">
根据SOP要求，当前阶段必须上传《脑死亡判定书》及家属签署的《捐献确认书》。系统检测到您的语音记录中已提及"家属同意"，请尽快补充书面材料。
</p>
</div>
</div>
<!-- 关键材料智能采集 (二期重点：智能采集录入) -->
<div class="mb-4">
<h3 class="font-bold text-gray-800 text-sm mb-2 flex justify-between">
关键材料上传
<span class="text-[10px] text-gray-400 font-normal">支持OCR自动识别</span>
</h3>
<div class="grid grid-cols-2 gap-3">
<!-- 已上传项 -->
<div class="relative bg-white p-2 rounded-lg border border-green-200 shadow-sm">
<div class="h-20 bg-gray-100 rounded mb-2 flex items-center justify-center overflow-hidden">
<!-- 模拟图片 -->
<div class="text-gray-300 text-2xl"><i class="fa-solid fa-file-medical"></i></div>
</div>
<div class="flex justify-between items-center">
<span class="text-[10px] font-bold text-gray-700">化验单据.jpg</span>
<i class="fa-solid fa-circle-check text-green-500 text-xs"></i>
</div>
<!-- 自动提取的数据 -->
<div class="mt-2 bg-green-50 p-1.5 rounded text-[9px] text-green-700">
<i class="fa-solid fa-bolt"></i> 肌酐: 98 umol/L (正常)
</div>
</div>
<!-- 待上传项 -->
<div class="border-2 border-dashed border-blue-300 bg-blue-50 rounded-lg flex flex-col items-center justify-center h-auto min-h-[120px] text-blue-500 gap-2 cursor-pointer active:bg-blue-100 transition">
<i class="fa-solid fa-camera text-2xl"></i>
<span class="text-xs font-medium">拍摄/扫描判定书</span>
</div>
</div>
</div>
<!-- 现场语音/视频记录 (二期重点：智能语音/视频) -->
<div class="card">
<div class="flex justify-between items-center mb-3">
<h3 class="font-bold text-gray-800 text-sm">现场沟通记录</h3>
<div class="tag tag-urgent animate-pulse">录音中</div>
</div>
<!-- 声波动画 -->
<div class="bg-gray-50 p-3 rounded-lg mb-3 flex items-center justify-between">
<div class="recording-wave">
<div class="bar" style="animation-delay: 0s"></div>
<div class="bar" style="animation-delay: 0.2s"></div>
<div class="bar" style="animation-delay: 0.4s"></div>
<div class="bar" style="animation-delay: 0.1s"></div>
<div class="bar" style="animation-delay: 0.3s"></div>
<div class="bar" style="animation-delay: 0s"></div>
<div class="bar" style="animation-delay: 0.2s"></div>
</div>
<span class="text-xs text-gray-500">00:14:22</span>
</div>
<!-- 实时转写 -->
<div class="text-xs text-gray-600 space-y-2 border-l-2 border-blue-200 pl-2">
<p><span class="font-bold text-blue-800">协调员:</span> 请确认家属是否已经完全理解捐献流程？</p>
<p><span class="font-bold text-gray-800">医生:</span> 是的，已经解释清楚，目前生命体征平稳。</p>
<p class="text-gray-400 italic">...正在转写...</p>
</div>
<div class="flex gap-2 mt-3">
<button class="flex-1 border border-gray-300 py-2 rounded-lg text-xs text-gray-700"><i class="fa-solid fa-pause mr-1"></i> 暂停</button>
<button class="flex-1 border border-gray-300 py-2 rounded-lg text-xs text-gray-700"><i class="fa-solid fa-tag mr-1"></i> 标记重点</button>
</div>
</div>
</div>
<!-- 底部操作栏 -->
<div class="bg-white border-t border-gray-200 p-4 pb-6 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]">
<div class="flex justify-between items-center mb-3">
<span class="text-xs text-gray-500">SOP 完成度: 3/5</span>
<span class="text-xs text-blue-600 font-bold">60%</span>
</div>
<!-- 进度条 -->
<div class="w-full bg-gray-200 rounded-full h-1.5 mb-4">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 60%"></div>
</div>
<button class="w-full bg-blue-600 text-white py-3 rounded-xl font-bold shadow-lg shadow-blue-200 active:scale-[0.98] transition">
确认并提交本阶段数据
</button>
</div>
</div>
</body>
</html>
index.html
style.css
index.js
index.html