feat: 从墨刀原型迁移应急就医模块，新增29个页面原型
从墨刀原型完整迁移应急就医模块至 emergency-dispatch 目录，按管理员/操作人员/专业人员三个角色分目录组织，涵盖档案、应急资源、应急中心、异常事件等功能模块。同步更新导航页 SITE_MAP。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
冯普
@@ -0,0 +1,218 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 应急中心报表数据 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html" class="active">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">档案</div>
|
||||
<a href="archive-personal.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
个人应急数据
|
||||
</a>
|
||||
<a href="archive-unit.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 8h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
单位报表数据
|
||||
</a>
|
||||
<!-- [交互] 当前页面：应急中心报表数据 -->
|
||||
<a href="archive-center.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><path d="M6 14v-4h4v4" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
应急中心报表数据
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份选择：</label>
|
||||
<input class="filter-input" type="text" value="2025" style="min-width:100px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>应急中心：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
<option>西安应急中心</option>
|
||||
<option>庆阳应急中心</option>
|
||||
<option>延安应急中心</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">应急中心报表数据</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 243 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>应急中心</th>
|
||||
<th>操作人员人数</th>
|
||||
<th>专业人员人数</th>
|
||||
<th>应急视频次数</th>
|
||||
<th>应急电话次数</th>
|
||||
<th>总工单数量</th>
|
||||
<th>已完成工单数量</th>
|
||||
<th>未完成工单数量</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">西安应急中心</td>
|
||||
<td>12</td>
|
||||
<td>8</td>
|
||||
<td>350</td>
|
||||
<td>280</td>
|
||||
<td>630</td>
|
||||
<td>580</td>
|
||||
<td>50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">庆阳应急中心</td>
|
||||
<td>8</td>
|
||||
<td>5</td>
|
||||
<td>200</td>
|
||||
<td>160</td>
|
||||
<td>360</td>
|
||||
<td>330</td>
|
||||
<td>30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">延安应急中心</td>
|
||||
<td>6</td>
|
||||
<td>4</td>
|
||||
<td>150</td>
|
||||
<td>120</td>
|
||||
<td>270</td>
|
||||
<td>250</td>
|
||||
<td>20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">榆林应急中心</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td>100</td>
|
||||
<td>80</td>
|
||||
<td>180</td>
|
||||
<td>165</td>
|
||||
<td>15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">银川应急中心</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
<td>80</td>
|
||||
<td>65</td>
|
||||
<td>145</td>
|
||||
<td>130</td>
|
||||
<td>15</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 243 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">25</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option><option>50条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,257 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 个人应急数据详情 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.page-header{margin-bottom:20px;display:flex;align-items:center;gap:16px;}
|
||||
.page-header__title{font-size:var(--font-xl);font-weight:600;}
|
||||
.page-header__sub{font-size:var(--font-base);color:var(--text-secondary);}
|
||||
.page-header__back{display:flex;align-items:center;gap:4px;color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.page-header__back:hover{color:#40a9ff;}
|
||||
/* Tab 切换 */
|
||||
.tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:2px solid var(--border);background:#fff;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:0 24px;box-shadow:var(--shadow-sm);}
|
||||
.tab-item{padding:14px 24px;font-size:var(--font-sm);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap;}
|
||||
.tab-item:hover{color:var(--primary);}
|
||||
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html" class="active">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">档案</div>
|
||||
<a href="archive-personal.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
个人应急数据
|
||||
</a>
|
||||
<a href="archive-unit.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 8h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
单位报表数据
|
||||
</a>
|
||||
<a href="archive-center.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><path d="M6 14v-4h4v4" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
应急中心报表数据
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<!-- [交互] 点击返回: ./archive-personal.html -->
|
||||
<a class="page-header__back" href="archive-personal.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回
|
||||
</a>
|
||||
<div class="page-header__title">个人应急数据详情</div>
|
||||
<div class="page-header__sub">张旭（公司机关-健康科）</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 切换 -->
|
||||
<div class="tabs">
|
||||
<div class="tab-item active" onclick="switchTab(this)">拨打120</div>
|
||||
<div class="tab-item" onclick="switchTab(this)">应急视频</div>
|
||||
<div class="tab-item" onclick="switchTab(this)">应急电话</div>
|
||||
<div class="tab-item" onclick="switchTab(this)">大病就医</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份选择：</label>
|
||||
<input class="filter-input" type="text" value="2025" style="min-width:100px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">拨打120记录</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 243 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>应急工单编号</th>
|
||||
<th>求助时间</th>
|
||||
<th>应急中心</th>
|
||||
<th>专业人员</th>
|
||||
<th>操作人员</th>
|
||||
<th>驻场人员</th>
|
||||
<th>工单状态</th>
|
||||
<th>工单类型</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">YJ58966523</td>
|
||||
<td>2026-03-26 14:40:07</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>王医生</td>
|
||||
<td>李操作</td>
|
||||
<td>张驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">YJ58966524</td>
|
||||
<td>2026-03-25 09:15:32</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>赵医生</td>
|
||||
<td>刘操作</td>
|
||||
<td>陈驻场</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>事后补单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">YJ58966525</td>
|
||||
<td>2026-03-20 16:22:18</td>
|
||||
<td>庆阳应急中心</td>
|
||||
<td>孙医生</td>
|
||||
<td>周操作</td>
|
||||
<td>吴驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">YJ58966526</td>
|
||||
<td>2026-03-18 11:05:44</td>
|
||||
<td>延安应急中心</td>
|
||||
<td>杨医生</td>
|
||||
<td>吴操作</td>
|
||||
<td>郑驻场</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>正常派单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">YJ58966527</td>
|
||||
<td>2026-03-15 08:30:21</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>马医生</td>
|
||||
<td>黄操作</td>
|
||||
<td>林驻场</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td>事后补单</td>
|
||||
<td><a class="link" href="#">详细过程</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 243 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">25</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option><option>50条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
/* Tab 切换交互 */
|
||||
function switchTab(el){
|
||||
document.querySelectorAll('.tab-item').forEach(function(t){t.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,287 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 个人应急数据 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
/* 顶部导航 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.page-header{margin-bottom:20px;}
|
||||
.page-header__title{font-size:var(--font-xl);font-weight:600;}
|
||||
.page-header__desc{font-size:var(--font-sm);color:var(--text-secondary);margin-top:4px;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.filter-select:focus{border-color:var(--primary);}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-sm{height:30px;padding:0 10px;font-size:var(--font-xs);}
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
/* 标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
/* 操作链接 */
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html" class="active">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">档案</div>
|
||||
<!-- [交互] 当前页面：个人应急数据 -->
|
||||
<a href="archive-personal.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
个人应急数据
|
||||
</a>
|
||||
<a href="archive-unit.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 8h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
单位报表数据
|
||||
</a>
|
||||
<a href="archive-center.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><path d="M6 14v-4h4v4" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
应急中心报表数据
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>年份选择：</label>
|
||||
<input class="filter-input" type="text" value="2025" style="min-width:100px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位部门：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
<option>公司机关</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1.4"/><path d="M10 10l2.5 2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">个人应急数据</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 243 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>性别</th>
|
||||
<th>年龄</th>
|
||||
<th>单位</th>
|
||||
<th>部门</th>
|
||||
<th>拨打120次数</th>
|
||||
<th>应急视频次数</th>
|
||||
<th>应急电话次数</th>
|
||||
<th>大病就医次数</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">王旭</td>
|
||||
<td>342423</td>
|
||||
<td>男</td>
|
||||
<td>45</td>
|
||||
<td>公司机关</td>
|
||||
<td>办公室</td>
|
||||
<td>5</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
<td>2</td>
|
||||
<!-- [交互] 点击跳转至: ./archive-personal-detail.html -->
|
||||
<td><a class="link" href="archive-personal-detail.html">详细数据</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">张旭</td>
|
||||
<td>342424</td>
|
||||
<td>男</td>
|
||||
<td>38</td>
|
||||
<td>公司机关</td>
|
||||
<td>健康科</td>
|
||||
<td>3</td>
|
||||
<td>2</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td><a class="link" href="archive-personal-detail.html">详细数据</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">李明</td>
|
||||
<td>342425</td>
|
||||
<td>男</td>
|
||||
<td>52</td>
|
||||
<td>采油一厂</td>
|
||||
<td>生产部</td>
|
||||
<td>2</td>
|
||||
<td>3</td>
|
||||
<td>2</td>
|
||||
<td>0</td>
|
||||
<td><a class="link" href="archive-personal-detail.html">详细数据</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">赵丽</td>
|
||||
<td>342426</td>
|
||||
<td>女</td>
|
||||
<td>41</td>
|
||||
<td>采油二厂</td>
|
||||
<td>安全科</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td><a class="link" href="archive-personal-detail.html">详细数据</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">刘强</td>
|
||||
<td>342427</td>
|
||||
<td>男</td>
|
||||
<td>36</td>
|
||||
<td>公司机关</td>
|
||||
<td>信息中心</td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td>0</td>
|
||||
<td><a class="link" href="archive-personal-detail.html">详细数据</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td style="font-weight:500;">陈静</td>
|
||||
<td>342428</td>
|
||||
<td>女</td>
|
||||
<td>29</td>
|
||||
<td>采油一厂</td>
|
||||
<td>综合办</td>
|
||||
<td>1</td>
|
||||
<td>0</td>
|
||||
<td>1</td>
|
||||
<td>0</td>
|
||||
<td><a class="link" href="archive-personal-detail.html">详细数据</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 243 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">25</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option><option>50条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,266 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 单位报表数据 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* Tab 按钮组 */
|
||||
.tab-btns{display:flex;gap:0;margin-bottom:0;}
|
||||
.tab-btn{padding:8px 20px;font-size:var(--font-sm);border:1px solid var(--border);background:#fff;cursor:pointer;transition:all .2s;color:var(--text-secondary);}
|
||||
.tab-btn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);}
|
||||
.tab-btn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
|
||||
.tab-btn:not(:first-child){border-left:none;}
|
||||
.tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.tab-btn:hover:not(.active){color:var(--primary);border-color:var(--primary);}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html" class="active">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">档案</div>
|
||||
<a href="archive-personal.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
个人应急数据
|
||||
</a>
|
||||
<!-- [交互] 当前页面：单位报表数据 -->
|
||||
<a href="archive-unit.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 8h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
单位报表数据
|
||||
</a>
|
||||
<a href="archive-center.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><path d="M6 14v-4h4v4" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
应急中心报表数据
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份选择：</label>
|
||||
<input class="filter-input" type="text" value="2025" style="min-width:100px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<div class="tab-btns">
|
||||
<button class="tab-btn active" onclick="switchTabBtn(this)">二级单位</button>
|
||||
<button class="tab-btn" onclick="switchTabBtn(this)">三级单位</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位：</label>
|
||||
<select class="filter-select">
|
||||
<option>请选择</option>
|
||||
<option>公司机关</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
<button class="btn btn-default">查看导出任务</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">单位报表数据</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 243 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>单位</th>
|
||||
<th>总人数</th>
|
||||
<th>应急视频次数</th>
|
||||
<th>应急视频人数</th>
|
||||
<th>拨打120次数</th>
|
||||
<th>拨打120人数</th>
|
||||
<th>应急电话次数</th>
|
||||
<th>应急电话人数</th>
|
||||
<th>大病就医次数</th>
|
||||
<th>大病就医人数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">公司机关</td>
|
||||
<td>1000</td>
|
||||
<td>100</td>
|
||||
<td>80</td>
|
||||
<td>50</td>
|
||||
<td>45</td>
|
||||
<td>120</td>
|
||||
<td>95</td>
|
||||
<td>30</td>
|
||||
<td>28</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">采油一厂</td>
|
||||
<td>2500</td>
|
||||
<td>200</td>
|
||||
<td>160</td>
|
||||
<td>80</td>
|
||||
<td>70</td>
|
||||
<td>180</td>
|
||||
<td>150</td>
|
||||
<td>45</td>
|
||||
<td>40</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">采油二厂</td>
|
||||
<td>1800</td>
|
||||
<td>150</td>
|
||||
<td>120</td>
|
||||
<td>60</td>
|
||||
<td>55</td>
|
||||
<td>140</td>
|
||||
<td>110</td>
|
||||
<td>35</td>
|
||||
<td>30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">采气一厂</td>
|
||||
<td>1200</td>
|
||||
<td>90</td>
|
||||
<td>75</td>
|
||||
<td>40</td>
|
||||
<td>35</td>
|
||||
<td>100</td>
|
||||
<td>85</td>
|
||||
<td>20</td>
|
||||
<td>18</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">第一采油厂</td>
|
||||
<td>3000</td>
|
||||
<td>250</td>
|
||||
<td>200</td>
|
||||
<td>100</td>
|
||||
<td>90</td>
|
||||
<td>220</td>
|
||||
<td>180</td>
|
||||
<td>55</td>
|
||||
<td>50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td style="font-weight:500;">输油处</td>
|
||||
<td>800</td>
|
||||
<td>60</td>
|
||||
<td>50</td>
|
||||
<td>25</td>
|
||||
<td>20</td>
|
||||
<td>70</td>
|
||||
<td>55</td>
|
||||
<td>15</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 243 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">25</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option><option>50条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
/* 按钮组 Tab 切换 */
|
||||
function switchTabBtn(el){
|
||||
el.parentElement.querySelectorAll('.tab-btn').forEach(function(b){b.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,168 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 应急中心基本信息 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.info-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;}
|
||||
.info-card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border);}
|
||||
.info-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;}
|
||||
.info-item{display:flex;align-items:flex-start;gap:8px;}
|
||||
.info-item__label{font-size:var(--font-sm);color:var(--text-secondary);min-width:100px;flex-shrink:0;}
|
||||
.info-item__value{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html" class="active">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急中心</div>
|
||||
<a href="center-basic-info.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</a>
|
||||
<a href="center-work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="center-data-screen.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 14h6M8 12v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
大屏数据配置
|
||||
</a>
|
||||
<a href="center-schedule.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 7h12M5 1v4M11 1v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
排班配置
|
||||
</a>
|
||||
<a href="center-simulation.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="main">
|
||||
<div class="info-card">
|
||||
<div class="info-card__header">
|
||||
<span class="info-card__title">应急中心基本信息</span>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M10.5 1.5l2 2M1 10l7-7 2 2-7 7H1v-2z" stroke="#fff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
编辑
|
||||
</button>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">中心名称</span>
|
||||
<span class="info-item__value">西安应急中心</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">中心编号</span>
|
||||
<span class="info-item__value">EC-XA-001</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">所在地址</span>
|
||||
<span class="info-item__value">陕西省西安市未央区长庆路</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">联系电话</span>
|
||||
<span class="info-item__value">029-86518000</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">负责人</span>
|
||||
<span class="info-item__value">张建国</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">负责人电话</span>
|
||||
<span class="info-item__value">029-86518001</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">服务区域</span>
|
||||
<span class="info-item__value">长庆油田全域</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">运营状态</span>
|
||||
<span class="info-item__value"><span class="tag tag-green">已启用</span></span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">创建时间</span>
|
||||
<span class="info-item__value">2024-01-15</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">最后更新时间</span>
|
||||
<span class="info-item__value">2026-04-18</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,346 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 通话记录 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.filter-date{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:140px;}
|
||||
.filter-date:focus{border-color:var(--primary);}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html" class="active">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急中心</div>
|
||||
<a href="center-basic-info.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</a>
|
||||
<a href="center-work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="center-data-screen.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 14h6M8 12v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
大屏数据配置
|
||||
</a>
|
||||
<a href="center-schedule.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 7h12M5 1v4M11 1v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
排班配置
|
||||
</a>
|
||||
<a href="center-simulation.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>通话编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入通话编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>通话类型</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>应急视频</option>
|
||||
<option>应急电话</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>时间范围</label>
|
||||
<input class="filter-date" type="date" value="2026-04-01">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-date" type="date" value="2026-04-20">
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="#fff" stroke-width="1.5"/><path d="M9.5 9.5L13 13" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 9v3h10V9M7 2v7M4 5l3 3 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">通话记录列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 450 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>通话编号</th>
|
||||
<th>通话类型</th>
|
||||
<th>关联工单</th>
|
||||
<th>呼叫方</th>
|
||||
<th>接听方</th>
|
||||
<th>开始时间</th>
|
||||
<th>通话时长</th>
|
||||
<th>通话状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>CALL-20260420-001</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>WO-20260420-001</td>
|
||||
<td>王建军</td>
|
||||
<td>李坐席</td>
|
||||
<td>2026-04-20 09:15:32</td>
|
||||
<td>08:25</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
<a class="link">回放</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>CALL-20260420-002</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td>WO-20260420-002</td>
|
||||
<td>张丽萍</td>
|
||||
<td>王坐席</td>
|
||||
<td>2026-04-20 08:42:18</td>
|
||||
<td>03:47</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
<a class="link">回放</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>CALL-20260419-018</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>WO-20260419-015</td>
|
||||
<td>陈伟东</td>
|
||||
<td>赵坐席</td>
|
||||
<td>2026-04-19 22:05:47</td>
|
||||
<td>12:33</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
<a class="link">回放</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>CALL-20260419-017</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td>WO-20260419-014</td>
|
||||
<td>刘志强</td>
|
||||
<td>李坐席</td>
|
||||
<td>2026-04-19 18:30:12</td>
|
||||
<td>05:18</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
<a class="link">回放</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>CALL-20260419-016</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>WO-20260419-013</td>
|
||||
<td>赵国庆</td>
|
||||
<td>王坐席</td>
|
||||
<td>2026-04-19 16:12:55</td>
|
||||
<td>00:00</td>
|
||||
<td><span class="tag tag-red">未接</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>CALL-20260419-015</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td>WO-20260419-012</td>
|
||||
<td>孙明亮</td>
|
||||
<td>赵坐席</td>
|
||||
<td>2026-04-19 14:28:03</td>
|
||||
<td>06:42</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
<a class="link">回放</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>CALL-20260419-014</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>WO-20260419-011</td>
|
||||
<td>周文博</td>
|
||||
<td>李坐席</td>
|
||||
<td>2026-04-19 11:45:20</td>
|
||||
<td>02:15</td>
|
||||
<td><span class="tag tag-orange">中断</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
<a class="link">回放</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>CALL-20260419-013</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td>WO-20260419-010</td>
|
||||
<td>吴海涛</td>
|
||||
<td>王坐席</td>
|
||||
<td>2026-04-19 09:08:41</td>
|
||||
<td>04:56</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">详情</a>
|
||||
<a class="link">回放</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>共 450 条</span>
|
||||
<button class="page-btn"><</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">45</button>
|
||||
<button class="page-btn">></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,230 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 大屏数据配置 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 全局重置与基础样式 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 开关 */
|
||||
.switch{width:36px;height:20px;border-radius:10px;background:var(--border);cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;}
|
||||
.switch.on::after{left:18px;}
|
||||
/* 配置卡片 */
|
||||
.config-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.config-card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border);}
|
||||
.config-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.config-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
|
||||
.config-item{border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;display:flex;align-items:center;justify-content:space-between;}
|
||||
.config-item__info{display:flex;flex-direction:column;gap:4px;}
|
||||
.config-item__name{font-size:var(--font-sm);font-weight:500;}
|
||||
.config-item__desc{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html" class="active">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急中心</div>
|
||||
<a href="center-basic-info.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</a>
|
||||
<a href="center-work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="center-data-screen.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 14h6M8 12v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
大屏数据配置
|
||||
</a>
|
||||
<a href="center-schedule.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 7h12M5 1v4M11 1v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
排班配置
|
||||
</a>
|
||||
<a href="center-simulation.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<!-- 页面标题 -->
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
|
||||
<h2 style="font-size:var(--font-xl);font-weight:600;">大屏数据配置</h2>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
保存配置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 数据概览模块 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card__header">
|
||||
<div class="config-card__title">数据概览模块</div>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">控制大屏顶部核心指标展示</span>
|
||||
</div>
|
||||
<div class="config-grid">
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">今日工单数</div>
|
||||
<div class="config-item__desc">展示当日接收的应急工单总数</div>
|
||||
</div>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">在线坐席数</div>
|
||||
<div class="config-item__desc">展示当前在线的坐席人员数量</div>
|
||||
</div>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">应急响应中数量</div>
|
||||
<div class="config-item__desc">展示正在处理中的应急事件数量</div>
|
||||
</div>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 地图展示模块 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card__header">
|
||||
<div class="config-card__title">地图展示模块</div>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">控制大屏地图图层的显示内容</span>
|
||||
</div>
|
||||
<div class="config-grid">
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">医院分布</div>
|
||||
<div class="config-item__desc">在地图上标注合作医院位置</div>
|
||||
</div>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">AED设备位置</div>
|
||||
<div class="config-item__desc">在地图上标注AED设备分布点</div>
|
||||
</div>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">救护车位置</div>
|
||||
<div class="config-item__desc">实时显示救护车当前位置</div>
|
||||
</div>
|
||||
<div class="switch" onclick="this.classList.toggle('on')"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计图表模块 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card__header">
|
||||
<div class="config-card__title">统计图表模块</div>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">控制大屏底部统计图表的展示</span>
|
||||
</div>
|
||||
<div class="config-grid">
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">月度趋势图</div>
|
||||
<div class="config-item__desc">展示近12个月工单数量趋势</div>
|
||||
</div>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">工单类型分布</div>
|
||||
<div class="config-item__desc">按类型统计工单占比饼图</div>
|
||||
</div>
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<div class="config-item__info">
|
||||
<div class="config-item__name">响应时长统计</div>
|
||||
<div class="config-item__desc">展示平均响应时长柱状图</div>
|
||||
</div>
|
||||
<div class="switch" onclick="this.classList.toggle('on')"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,324 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 员工信息 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 全局重置与基础样式 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
/* 标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
/* 开关 */
|
||||
.switch{width:36px;height:20px;border-radius:10px;background:var(--border);cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;}
|
||||
.switch.on::after{left:18px;}
|
||||
/* 操作按钮 */
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html" class="active">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急中心</div>
|
||||
<a href="center-basic-info.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</a>
|
||||
<a href="center-work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="center-data-screen.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 14h6M8 12v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
大屏数据配置
|
||||
</a>
|
||||
<a href="center-schedule.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 7h12M5 1v4M11 1v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
排班配置
|
||||
</a>
|
||||
<a href="center-simulation.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>公司机关</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>角色类型</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>操作人员</option>
|
||||
<option>专业人员</option>
|
||||
<option>驻场人员</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5.5" stroke="#fff" stroke-width="1.5"/><path d="M11 11l3.5 3.5" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增员工
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 2v8M4 7l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12v2h12v-2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">员工信息列表</div>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 56 条记录</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>所属单位</th>
|
||||
<th>角色类型</th>
|
||||
<th>联系电话</th>
|
||||
<th>资质证书</th>
|
||||
<th>入职时间</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>李操作员</td>
|
||||
<td>EMP20210101</td>
|
||||
<td>采油一厂</td>
|
||||
<td><span class="tag tag-blue">操作人员</span></td>
|
||||
<td>138****5621</td>
|
||||
<td>急救员证</td>
|
||||
<td>2021-03-15</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>陈医生</td>
|
||||
<td>EMP20200218</td>
|
||||
<td>公司机关</td>
|
||||
<td><span class="tag tag-green">专业人员</span></td>
|
||||
<td>139****8834</td>
|
||||
<td>执业医师资格证</td>
|
||||
<td>2020-06-01</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>张操作员</td>
|
||||
<td>EMP20220315</td>
|
||||
<td>采油二厂</td>
|
||||
<td><span class="tag tag-blue">操作人员</span></td>
|
||||
<td>137****2209</td>
|
||||
<td>急救员证</td>
|
||||
<td>2022-07-20</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>周驻场</td>
|
||||
<td>EMP20230412</td>
|
||||
<td>采气一厂</td>
|
||||
<td><span class="tag tag-orange">驻场人员</span></td>
|
||||
<td>135****7743</td>
|
||||
<td>护士执业证</td>
|
||||
<td>2023-01-10</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>赵医生</td>
|
||||
<td>EMP20190506</td>
|
||||
<td>公司机关</td>
|
||||
<td><span class="tag tag-green">专业人员</span></td>
|
||||
<td>136****3318</td>
|
||||
<td>执业医师资格证、AHA导师证</td>
|
||||
<td>2019-09-01</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>王操作员</td>
|
||||
<td>EMP20240108</td>
|
||||
<td>采油一厂</td>
|
||||
<td><span class="tag tag-blue">操作人员</span></td>
|
||||
<td>158****9902</td>
|
||||
<td>急救员证</td>
|
||||
<td>2024-03-01</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>共 56 条</span>
|
||||
<button class="page-btn"><</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,265 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 分组管理 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.switch{width:36px;height:20px;border-radius:10px;background:var(--border);cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;}
|
||||
.switch.on::after{left:18px;}
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html" class="active">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急中心</div>
|
||||
<a href="center-basic-info.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</a>
|
||||
<a href="center-work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="center-data-screen.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 14h6M8 12v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
大屏数据配置
|
||||
</a>
|
||||
<a href="center-schedule.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 7h12M5 1v4M11 1v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
排班配置
|
||||
</a>
|
||||
<a href="center-simulation.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>分组名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入分组名称">
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="#fff" stroke-width="1.5"/><path d="M9.5 9.5L13 13" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-primary">+ 新增分组</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">分组列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 8 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>分组名称</th>
|
||||
<th>分组编号</th>
|
||||
<th>组长</th>
|
||||
<th>成员数</th>
|
||||
<th>值班规则</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>A组-日班</td>
|
||||
<td>GRP-001</td>
|
||||
<td>李晓峰</td>
|
||||
<td>6</td>
|
||||
<td>工作日 08:00-20:00</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link">成员管理</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>B组-夜班</td>
|
||||
<td>GRP-002</td>
|
||||
<td>赵文涛</td>
|
||||
<td>4</td>
|
||||
<td>工作日 20:00-08:00</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link">成员管理</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>C组-周末班</td>
|
||||
<td>GRP-003</td>
|
||||
<td>孙丽华</td>
|
||||
<td>5</td>
|
||||
<td>周末全天 08:00-20:00</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link">成员管理</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>D组-机动组</td>
|
||||
<td>GRP-004</td>
|
||||
<td>周建明</td>
|
||||
<td>3</td>
|
||||
<td>按需调度</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link">成员管理</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>E组-备用组</td>
|
||||
<td>GRP-005</td>
|
||||
<td>吴海涛</td>
|
||||
<td>2</td>
|
||||
<td>节假日全天</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link">成员管理</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>共 8 条</span>
|
||||
<button class="page-btn"><</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,256 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 排班配置 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 全局重置与基础样式 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:center;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;text-align:center;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
/* 标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
/* 操作按钮 */
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html" class="active">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急中心</div>
|
||||
<a href="center-basic-info.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</a>
|
||||
<a href="center-work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="center-data-screen.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 14h6M8 12v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
大屏数据配置
|
||||
</a>
|
||||
<a href="center-schedule.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 7h12M5 1v4M11 1v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
排班配置
|
||||
</a>
|
||||
<a href="center-simulation.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>排班周期</label>
|
||||
<select class="filter-select">
|
||||
<option>本周</option>
|
||||
<option>上周</option>
|
||||
<option>下周</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>分组</label>
|
||||
<select class="filter-select">
|
||||
<option>全部分组</option>
|
||||
<option>A组</option>
|
||||
<option>B组</option>
|
||||
<option>C组</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5.5" stroke="#fff" stroke-width="1.5"/><path d="M11 11l3.5 3.5" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增排班
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 排班表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">排班表 — 本周（2026-04-14 ~ 2026-04-20）</div>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 3 组</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:left;">分组</th>
|
||||
<th style="text-align:left;">人员</th>
|
||||
<th>周一(4/14)</th>
|
||||
<th>周二(4/15)</th>
|
||||
<th>周三(4/16)</th>
|
||||
<th>周四(4/17)</th>
|
||||
<th>周五(4/18)</th>
|
||||
<th>周六(4/19)</th>
|
||||
<th>周日(4/20)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2" style="text-align:left;font-weight:500;vertical-align:middle;">A组</td>
|
||||
<td style="text-align:left;">李操作员</td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left;">陈医生</td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left;font-weight:500;vertical-align:middle;">B组</td>
|
||||
<td style="text-align:left;">张操作员</td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" style="text-align:left;font-weight:500;vertical-align:middle;">C组</td>
|
||||
<td style="text-align:left;">周操作员</td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left;">赵医生</td>
|
||||
<td><span class="tag tag-orange">夜班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-gray">休息</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
<td><span class="tag tag-blue">白班</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,284 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 坐席管理 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html" class="active">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急中心</div>
|
||||
<a href="center-basic-info.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</a>
|
||||
<a href="center-work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="center-data-screen.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 14h6M8 12v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
大屏数据配置
|
||||
</a>
|
||||
<a href="center-schedule.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 7h12M5 1v4M11 1v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
排班配置
|
||||
</a>
|
||||
<a href="center-simulation.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>坐席编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入坐席编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>坐席状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>在线</option>
|
||||
<option>离线</option>
|
||||
<option>忙碌</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="#fff" stroke-width="1.5"/><path d="M9.5 9.5L13 13" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-primary">+ 新增坐席</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 9v3h10V9M7 2v7M4 5l3 3 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">坐席列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 24 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>坐席编号</th>
|
||||
<th>坐席名称</th>
|
||||
<th>绑定人员</th>
|
||||
<th>联系电话</th>
|
||||
<th>所属分组</th>
|
||||
<th>当前状态</th>
|
||||
<th>今日接单数</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>SEAT-001</td>
|
||||
<td>坐席一号</td>
|
||||
<td>李晓峰</td>
|
||||
<td>138****5521</td>
|
||||
<td>A组-日班</td>
|
||||
<td><span class="tag tag-green">在线</span></td>
|
||||
<td>12</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>SEAT-002</td>
|
||||
<td>坐席二号</td>
|
||||
<td>王秀英</td>
|
||||
<td>139****8834</td>
|
||||
<td>A组-日班</td>
|
||||
<td><span class="tag tag-orange">忙碌</span></td>
|
||||
<td>8</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>SEAT-003</td>
|
||||
<td>坐席三号</td>
|
||||
<td>赵文涛</td>
|
||||
<td>136****2290</td>
|
||||
<td>B组-夜班</td>
|
||||
<td><span class="tag tag-gray">离线</span></td>
|
||||
<td>0</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>SEAT-004</td>
|
||||
<td>坐席四号</td>
|
||||
<td>孙丽华</td>
|
||||
<td>158****6617</td>
|
||||
<td>A组-日班</td>
|
||||
<td><span class="tag tag-green">在线</span></td>
|
||||
<td>15</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>SEAT-005</td>
|
||||
<td>坐席五号</td>
|
||||
<td>周建明</td>
|
||||
<td>137****4403</td>
|
||||
<td>B组-夜班</td>
|
||||
<td><span class="tag tag-gray">离线</span></td>
|
||||
<td>0</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>共 24 条</span>
|
||||
<button class="page-btn"><</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,303 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 大病就医 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 全局重置与基础样式 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
/* 标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
/* 开关 */
|
||||
.switch{width:36px;height:20px;border-radius:10px;background:var(--border);cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;}
|
||||
.switch.on::after{left:18px;}
|
||||
/* 操作按钮 */
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html" class="active">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急中心</div>
|
||||
<a href="center-basic-info.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</a>
|
||||
<a href="center-work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="center-serious-illness.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="center-data-screen.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 14h6M8 12v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
大屏数据配置
|
||||
</a>
|
||||
<a href="center-schedule.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 7h12M5 1v4M11 1v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
排班配置
|
||||
</a>
|
||||
<a href="center-simulation.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>公司机关</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气一厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>就医状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>就医中</option>
|
||||
<option>已完成</option>
|
||||
<option>已取消</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5.5" stroke="#fff" stroke-width="1.5"/><path d="M11 11l3.5 3.5" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 2v8M4 7l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12v2h12v-2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">大病就医列表</div>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 86 条记录</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>所属单位</th>
|
||||
<th>诊断疾病</th>
|
||||
<th>就医医院</th>
|
||||
<th>就医时间</th>
|
||||
<th>当前状态</th>
|
||||
<th>跟进人</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>王建国</td>
|
||||
<td>EMP20230156</td>
|
||||
<td>采油一厂</td>
|
||||
<td>急性心肌梗死</td>
|
||||
<td>西安交大一附院</td>
|
||||
<td>2026-04-15 09:30</td>
|
||||
<td><span class="tag tag-blue">就医中</span></td>
|
||||
<td>李晓明</td>
|
||||
<td class="action-btns"><a class="link" href="#">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>张丽华</td>
|
||||
<td>EMP20220089</td>
|
||||
<td>公司机关</td>
|
||||
<td>脑血管意外</td>
|
||||
<td>庆阳市人民医院</td>
|
||||
<td>2026-04-12 14:20</td>
|
||||
<td><span class="tag tag-blue">就医中</span></td>
|
||||
<td>赵文博</td>
|
||||
<td class="action-btns"><a class="link" href="#">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>刘志强</td>
|
||||
<td>EMP20210234</td>
|
||||
<td>采油二厂</td>
|
||||
<td>严重骨折（多发性）</td>
|
||||
<td>兰州大学第一医院</td>
|
||||
<td>2026-04-08 11:05</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>孙伟</td>
|
||||
<td class="action-btns"><a class="link" href="#">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>陈秀英</td>
|
||||
<td>EMP20230312</td>
|
||||
<td>采气一厂</td>
|
||||
<td>恶性肿瘤（肺癌）</td>
|
||||
<td>北京协和医院</td>
|
||||
<td>2026-03-25 08:45</td>
|
||||
<td><span class="tag tag-blue">就医中</span></td>
|
||||
<td>王晓峰</td>
|
||||
<td class="action-btns"><a class="link" href="#">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>赵德明</td>
|
||||
<td>EMP20200178</td>
|
||||
<td>采油一厂</td>
|
||||
<td>急性重症胰腺炎</td>
|
||||
<td>西安交大二附院</td>
|
||||
<td>2026-03-18 16:30</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>李晓明</td>
|
||||
<td class="action-btns"><a class="link" href="#">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>杨红梅</td>
|
||||
<td>EMP20240045</td>
|
||||
<td>公司机关</td>
|
||||
<td>严重烧伤（III度）</td>
|
||||
<td>庆阳市人民医院</td>
|
||||
<td>2026-03-10 10:15</td>
|
||||
<td><span class="tag tag-gray">已取消</span></td>
|
||||
<td>赵文博</td>
|
||||
<td class="action-btns"><a class="link" href="#">详情</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>共 86 条</span>
|
||||
<button class="page-btn"><</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<button class="page-btn">></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,297 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 模拟急救联动 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 全局重置与基础样式 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
/* 标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
/* 操作按钮 */
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html" class="active">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急中心</div>
|
||||
<a href="center-basic-info.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</a>
|
||||
<a href="center-work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="center-data-screen.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 14h6M8 12v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
大屏数据配置
|
||||
</a>
|
||||
<a href="center-schedule.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 7h12M5 1v4M11 1v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
排班配置
|
||||
</a>
|
||||
<a href="center-simulation.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>演练编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入演练编号" style="min-width:160px;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>演练状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>已完成</option>
|
||||
<option>进行中</option>
|
||||
<option>待开始</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5.5" stroke="#fff" stroke-width="1.5"/><path d="M11 11l3.5 3.5" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新建演练
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 2v8M4 7l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12v2h12v-2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">模拟演练列表</div>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 18 条记录</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>演练编号</th>
|
||||
<th>演练名称</th>
|
||||
<th>演练类型</th>
|
||||
<th>参与人数</th>
|
||||
<th>计划时间</th>
|
||||
<th>实际开始时间</th>
|
||||
<th>演练状态</th>
|
||||
<th>评分</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">SIM20260418001</td>
|
||||
<td>采油一厂心脏骤停急救演练</td>
|
||||
<td>心脏骤停急救</td>
|
||||
<td>12</td>
|
||||
<td>2026-04-18 09:00</td>
|
||||
<td>2026-04-18 09:05</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>92</td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">详情</a>
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">SIM20260416002</td>
|
||||
<td>化工车间中毒应急演练</td>
|
||||
<td>中毒应急</td>
|
||||
<td>18</td>
|
||||
<td>2026-04-16 14:00</td>
|
||||
<td>2026-04-16 14:10</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>87</td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">详情</a>
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">SIM20260420003</td>
|
||||
<td>井场工伤大出血急救演练</td>
|
||||
<td>工伤大出血</td>
|
||||
<td>10</td>
|
||||
<td>2026-04-20 10:00</td>
|
||||
<td>2026-04-20 10:02</td>
|
||||
<td><span class="tag tag-blue">进行中</span></td>
|
||||
<td>—</td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">详情</a>
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">SIM20260422004</td>
|
||||
<td>办公楼突发晕倒急救演练</td>
|
||||
<td>突发晕倒</td>
|
||||
<td>8</td>
|
||||
<td>2026-04-22 09:00</td>
|
||||
<td>—</td>
|
||||
<td><span class="tag tag-orange">待开始</span></td>
|
||||
<td>—</td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">详情</a>
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">SIM20260425005</td>
|
||||
<td>多人伤亡事故联合救援演练</td>
|
||||
<td>多人伤亡事故</td>
|
||||
<td>35</td>
|
||||
<td>2026-04-25 08:30</td>
|
||||
<td>—</td>
|
||||
<td><span class="tag tag-orange">待开始</span></td>
|
||||
<td>—</td>
|
||||
<td class="action-btns">
|
||||
<a class="link" href="#">详情</a>
|
||||
<a class="link" href="#">编辑</a>
|
||||
<a class="link-danger" href="#">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>共 18 条</span>
|
||||
<button class="page-btn"><</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,318 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 应急工单 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.filter-date{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:140px;}
|
||||
.filter-date:focus{border-color:var(--primary);}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html" class="active">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急中心</div>
|
||||
<a href="center-basic-info.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 5h6M5 8h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
基本信息
|
||||
</a>
|
||||
<a href="center-work-order.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="center-seat.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 10V6a4 4 0 018 0v4" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="10" width="12" height="3" rx="1.5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
坐席管理
|
||||
</a>
|
||||
<a href="center-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
分组管理
|
||||
</a>
|
||||
<a href="center-call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="center-serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="center-data-screen.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 14h6M8 12v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
大屏数据配置
|
||||
</a>
|
||||
<a href="center-schedule.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 7h12M5 1v4M11 1v4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
排班配置
|
||||
</a>
|
||||
<a href="center-simulation.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
模拟急救联动
|
||||
</a>
|
||||
<a href="center-employee.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
员工信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>工单编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入工单编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>工单状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>待处理</option>
|
||||
<option>处理中</option>
|
||||
<option>已完成</option>
|
||||
<option>已取消</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>求助方式</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>应急视频</option>
|
||||
<option>应急电话</option>
|
||||
<option>拨打120</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>时间范围</label>
|
||||
<input class="filter-date" type="date" value="2026-04-01">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-date" type="date" value="2026-04-20">
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="#fff" stroke-width="1.5"/><path d="M9.5 9.5L13 13" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 9v3h10V9M7 2v7M4 5l3 3 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">应急工单列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 580 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>工单编号</th>
|
||||
<th>求助员工</th>
|
||||
<th>求助方式</th>
|
||||
<th>所属单位</th>
|
||||
<th>求助时间</th>
|
||||
<th>处理操作员</th>
|
||||
<th>专业人员</th>
|
||||
<th>工单状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>WO-20260420-001</td>
|
||||
<td>王建军</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>采油一厂</td>
|
||||
<td>2026-04-20 09:15:32</td>
|
||||
<td>李坐席</td>
|
||||
<td>张医生</td>
|
||||
<td><span class="tag tag-orange">处理中</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>WO-20260420-002</td>
|
||||
<td>张丽萍</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td>采气厂</td>
|
||||
<td>2026-04-20 08:42:18</td>
|
||||
<td>王坐席</td>
|
||||
<td>刘医生</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>WO-20260419-015</td>
|
||||
<td>陈伟东</td>
|
||||
<td><span class="tag tag-red">拨打120</span></td>
|
||||
<td>油田总医院</td>
|
||||
<td>2026-04-19 22:05:47</td>
|
||||
<td>赵坐席</td>
|
||||
<td>陈医生</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>WO-20260419-014</td>
|
||||
<td>刘志强</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>采油一厂</td>
|
||||
<td>2026-04-19 18:30:12</td>
|
||||
<td>李坐席</td>
|
||||
<td>王医生</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>WO-20260419-013</td>
|
||||
<td>赵国庆</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td>采油二厂</td>
|
||||
<td>2026-04-19 16:12:55</td>
|
||||
<td>王坐席</td>
|
||||
<td>—</td>
|
||||
<td><span class="tag tag-gray">已取消</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>WO-20260419-012</td>
|
||||
<td>孙明亮</td>
|
||||
<td><span class="tag tag-red">拨打120</span></td>
|
||||
<td>采气厂</td>
|
||||
<td>2026-04-19 14:28:03</td>
|
||||
<td>赵坐席</td>
|
||||
<td>张医生</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>WO-20260419-011</td>
|
||||
<td>周文博</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>采油一厂</td>
|
||||
<td>2026-04-19 11:45:20</td>
|
||||
<td>李坐席</td>
|
||||
<td>刘医生</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>WO-20260419-010</td>
|
||||
<td>吴海涛</td>
|
||||
<td><span class="tag tag-green">应急电话</span></td>
|
||||
<td>采油二厂</td>
|
||||
<td>2026-04-19 09:08:41</td>
|
||||
<td>王坐席</td>
|
||||
<td>陈医生</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><a class="link">详情</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>共 580 条</span>
|
||||
<button class="page-btn"><</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">58</button>
|
||||
<button class="page-btn">></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,292 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 结果异常 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 全局重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
/* 设计令牌 */
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
/* 标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
/* 操作链接 */
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html" class="active">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">异常事件</div>
|
||||
<a href="exception-result.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
结果异常
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>异常类型：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>工单超时</option>
|
||||
<option>设备异常</option>
|
||||
<option>通话异常</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>应急中心：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部应急中心</option>
|
||||
<option>西安应急中心</option>
|
||||
<option>庆阳应急中心</option>
|
||||
<option>延安应急中心</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>处理状态：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>待处理</option>
|
||||
<option>已处理</option>
|
||||
<option>已忽略</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>时间范围：</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 导出按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">异常列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 36 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>异常编号</th>
|
||||
<th>异常类型</th>
|
||||
<th>关联工单</th>
|
||||
<th>应急中心</th>
|
||||
<th>异常描述</th>
|
||||
<th>发生时间</th>
|
||||
<th>处理状态</th>
|
||||
<th>处理人</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260420001</td>
|
||||
<td><span class="tag tag-orange">工单超时</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260420035</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>工单处理超时，已超过30分钟未响应</td>
|
||||
<td>2026-04-20 09:15</td>
|
||||
<td><span class="tag tag-red">待处理</span></td>
|
||||
<td>—</td>
|
||||
<td><div class="action-btns"><span class="link">处理</span><span class="link">详情</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260420002</td>
|
||||
<td><span class="tag tag-red">设备异常</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419078</td>
|
||||
<td>庆阳应急中心</td>
|
||||
<td>AED设备离线，编号AED-QY-003</td>
|
||||
<td>2026-04-20 08:42</td>
|
||||
<td><span class="tag tag-red">待处理</span></td>
|
||||
<td>—</td>
|
||||
<td><div class="action-btns"><span class="link">处理</span><span class="link">详情</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260419003</td>
|
||||
<td><span class="tag tag-blue">通话异常</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419045</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>应急通话中断，持续时间不足1分钟</td>
|
||||
<td>2026-04-19 16:30</td>
|
||||
<td><span class="tag tag-green">已处理</span></td>
|
||||
<td>王建国</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260419004</td>
|
||||
<td><span class="tag tag-orange">工单超时</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419012</td>
|
||||
<td>延安应急中心</td>
|
||||
<td>工单派单超时，超过15分钟未分配</td>
|
||||
<td>2026-04-19 14:20</td>
|
||||
<td><span class="tag tag-green">已处理</span></td>
|
||||
<td>李晓明</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260418005</td>
|
||||
<td><span class="tag tag-red">设备异常</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">—</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>监控终端设备掉线，编号MON-XA-012</td>
|
||||
<td>2026-04-18 11:05</td>
|
||||
<td><span class="tag tag-gray">已忽略</span></td>
|
||||
<td>赵伟</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260418006</td>
|
||||
<td><span class="tag tag-blue">通话异常</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260418023</td>
|
||||
<td>庆阳应急中心</td>
|
||||
<td>通话录音失败，未能保存通话记录</td>
|
||||
<td>2026-04-18 09:33</td>
|
||||
<td><span class="tag tag-green">已处理</span></td>
|
||||
<td>张明</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260417007</td>
|
||||
<td><span class="tag tag-orange">工单超时</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260417056</td>
|
||||
<td>延安应急中心</td>
|
||||
<td>工单关闭超时，已超过2小时未完结</td>
|
||||
<td>2026-04-17 15:48</td>
|
||||
<td><span class="tag tag-gray">已忽略</span></td>
|
||||
<td>陈刚</td>
|
||||
<td><div class="action-btns"><span class="link">详情</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EXC20260420008</td>
|
||||
<td><span class="tag tag-red">设备异常</span></td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260420041</td>
|
||||
<td>西安应急中心</td>
|
||||
<td>应急呼叫终端电量低于10%</td>
|
||||
<td>2026-04-20 07:20</td>
|
||||
<td><span class="tag tag-red">待处理</span></td>
|
||||
<td>—</td>
|
||||
<td><div class="action-btns"><span class="link">处理</span><span class="link">详情</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 36 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,293 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - AED组网 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 基础重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
|
||||
/* 设计令牌 */
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
|
||||
/* 状态标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
|
||||
/* 操作链接 */
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
医院信息
|
||||
</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<a href="resource-aed.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED组网
|
||||
</a>
|
||||
<a href="resource-device.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
设备管理
|
||||
</a>
|
||||
<a href="resource-ambulance.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
急救包信息
|
||||
</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
急救医生信息
|
||||
</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
紧急联系人信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>设备编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入设备编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>安装位置：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入安装位置">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部单位</option>
|
||||
<option>长庆油田总部</option>
|
||||
<option>第一采油厂</option>
|
||||
<option>第二采油厂</option>
|
||||
<option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>设备状态：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>正常</option>
|
||||
<option>异常</option>
|
||||
<option>维修中</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增AED设备
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">AED设备列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 32 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备编号</th>
|
||||
<th>品牌型号</th>
|
||||
<th>安装位置</th>
|
||||
<th>所属单位</th>
|
||||
<th>安装时间</th>
|
||||
<th>电极片到期时间</th>
|
||||
<th>电池到期时间</th>
|
||||
<th>设备状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">AED-2025-001</td>
|
||||
<td>迈瑞 BeneHeart C1A</td>
|
||||
<td>总部办公楼1层大厅</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>2025-03-15</td>
|
||||
<td>2027-03-15</td>
|
||||
<td>2029-03-15</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">AED-2025-002</td>
|
||||
<td>飞利浦 HeartStart FRx</td>
|
||||
<td>职工食堂入口处</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>2025-04-01</td>
|
||||
<td>2027-04-01</td>
|
||||
<td>2029-04-01</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">AED-2025-003</td>
|
||||
<td>迈瑞 BeneHeart C2</td>
|
||||
<td>第一采油厂调度中心</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>2025-05-10</td>
|
||||
<td>2027-05-10</td>
|
||||
<td>2029-05-10</td>
|
||||
<td><span class="tag tag-red">异常</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">AED-2025-004</td>
|
||||
<td>卓尔 AED Plus</td>
|
||||
<td>第二采油厂值班室</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>2025-06-20</td>
|
||||
<td>2027-06-20</td>
|
||||
<td>2029-06-20</td>
|
||||
<td><span class="tag tag-orange">维修中</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">AED-2025-005</td>
|
||||
<td>飞利浦 HeartStart HS1</td>
|
||||
<td>第三采油厂体育馆</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>2025-07-08</td>
|
||||
<td>2027-07-08</td>
|
||||
<td>2029-07-08</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 32 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,288 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 救护车信息 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 基础重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
|
||||
/* 设计令牌 */
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
|
||||
/* 状态标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
|
||||
/* 操作链接 */
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
医院信息
|
||||
</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<a href="resource-aed.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED组网
|
||||
</a>
|
||||
<a href="resource-device.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
设备管理
|
||||
</a>
|
||||
<!-- 当前页：救护车信息 -->
|
||||
<a href="resource-ambulance.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
急救包信息
|
||||
</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
急救医生信息
|
||||
</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
紧急联系人信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>车牌号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入车牌号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部单位</option>
|
||||
<option>长庆油田总部</option>
|
||||
<option>第一采油厂</option>
|
||||
<option>第二采油厂</option>
|
||||
<option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>车辆状态：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>在线</option>
|
||||
<option>离线</option>
|
||||
<option>维修中</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增救护车
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">救护车列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 18 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>车牌号</th>
|
||||
<th>车辆类型</th>
|
||||
<th>所属单位</th>
|
||||
<th>驾驶员</th>
|
||||
<th>联系电话</th>
|
||||
<th>购置时间</th>
|
||||
<th>年检到期</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">陕A·120E1</td>
|
||||
<td>普通型救护车</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>张志强</td>
|
||||
<td>138****5621</td>
|
||||
<td>2023-05-10</td>
|
||||
<td>2026-05-10</td>
|
||||
<td><span class="tag tag-green">在线</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">陕A·120E2</td>
|
||||
<td>急救型救护车</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>李国栋</td>
|
||||
<td>139****3782</td>
|
||||
<td>2024-01-15</td>
|
||||
<td>2027-01-15</td>
|
||||
<td><span class="tag tag-green">在线</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">陕K·120F1</td>
|
||||
<td>普通型救护车</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>王建军</td>
|
||||
<td>137****9156</td>
|
||||
<td>2022-08-20</td>
|
||||
<td>2025-08-20</td>
|
||||
<td><span class="tag tag-gray">离线</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">陕K·120F2</td>
|
||||
<td>急救型救护车</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>赵明辉</td>
|
||||
<td>136****4829</td>
|
||||
<td>2023-11-05</td>
|
||||
<td>2026-11-05</td>
|
||||
<td><span class="tag tag-orange">维修中</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">陕K·120G1</td>
|
||||
<td>普通型救护车</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>陈伟东</td>
|
||||
<td>135****7213</td>
|
||||
<td>2024-03-22</td>
|
||||
<td>2027-03-22</td>
|
||||
<td><span class="tag tag-green">在线</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 18 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,295 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 设备管理 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 基础重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
|
||||
/* 设计令牌 */
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
|
||||
/* 状态标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
|
||||
/* 开关组件 */
|
||||
.switch{position:relative;width:36px;height:20px;background:#ccc;border-radius:10px;cursor:pointer;transition:background .2s;border:none;padding:0;}
|
||||
.switch::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;}
|
||||
.switch.on{background:var(--success);}
|
||||
.switch.on::after{transform:translateX(16px);}
|
||||
|
||||
/* 操作链接 */
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
医院信息
|
||||
</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<a href="resource-aed.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED组网
|
||||
</a>
|
||||
<!-- 当前页：设备管理 -->
|
||||
<a href="resource-device.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
设备管理
|
||||
</a>
|
||||
<a href="resource-ambulance.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
急救包信息
|
||||
</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
急救医生信息
|
||||
</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
紧急联系人信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>设备名称：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入设备名称">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>设备类型：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>急救设备</option>
|
||||
<option>监护设备</option>
|
||||
<option>通讯设备</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部单位</option>
|
||||
<option>长庆油田总部</option>
|
||||
<option>第一采油厂</option>
|
||||
<option>第二采油厂</option>
|
||||
<option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增设备
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">设备列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 28 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>设备编号</th>
|
||||
<th>设备类型</th>
|
||||
<th>所属单位</th>
|
||||
<th>安装位置</th>
|
||||
<th>购置时间</th>
|
||||
<th>维保到期</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">便携式心电监护仪</td>
|
||||
<td>DEV-2025-001</td>
|
||||
<td>监护设备</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>总部医疗室</td>
|
||||
<td>2024-06-15</td>
|
||||
<td>2026-06-15</td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">急救呼吸机</td>
|
||||
<td>DEV-2025-002</td>
|
||||
<td>急救设备</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>采油一厂调度中心</td>
|
||||
<td>2024-09-20</td>
|
||||
<td>2026-09-20</td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">卫星电话</td>
|
||||
<td>DEV-2025-003</td>
|
||||
<td>通讯设备</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>采油二厂值班室</td>
|
||||
<td>2025-01-10</td>
|
||||
<td>2027-01-10</td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">便携式血氧仪</td>
|
||||
<td>DEV-2025-004</td>
|
||||
<td>监护设备</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>采油三厂医务室</td>
|
||||
<td>2025-02-18</td>
|
||||
<td>2027-02-18</td>
|
||||
<td><button class="switch" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">担架车</td>
|
||||
<td>DEV-2025-005</td>
|
||||
<td>急救设备</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>总部办公楼B1层</td>
|
||||
<td>2024-11-05</td>
|
||||
<td>2026-11-05</td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 28 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,306 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 急救医生信息 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 基础重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
|
||||
/* 设计令牌 */
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
|
||||
/* 状态标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
|
||||
/* 开关组件 */
|
||||
.switch{position:relative;width:36px;height:20px;background:#ccc;border-radius:10px;cursor:pointer;transition:background .2s;border:none;padding:0;}
|
||||
.switch::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;}
|
||||
.switch.on{background:var(--success);}
|
||||
.switch.on::after{transform:translateX(16px);}
|
||||
|
||||
/* 操作链接 */
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
医院信息
|
||||
</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<a href="resource-aed.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED组网
|
||||
</a>
|
||||
<a href="resource-device.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
设备管理
|
||||
</a>
|
||||
<a href="resource-ambulance.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
急救包信息
|
||||
</a>
|
||||
<!-- 当前页：急救医生信息 -->
|
||||
<a href="resource-doctor.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
急救医生信息
|
||||
</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
紧急联系人信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入医生姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属医院：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部医院</option>
|
||||
<option>长庆油田职工医院</option>
|
||||
<option>西安市第一医院</option>
|
||||
<option>庆阳市人民医院</option>
|
||||
<option>定边县医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>科室：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部科室</option>
|
||||
<option>急诊科</option>
|
||||
<option>心内科</option>
|
||||
<option>骨科</option>
|
||||
<option>外科</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>职称：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>主任医师</option>
|
||||
<option>副主任医师</option>
|
||||
<option>主治医师</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增急救医生
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">急救医生列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 36 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>姓名</th>
|
||||
<th>所属医院</th>
|
||||
<th>科室</th>
|
||||
<th>职称</th>
|
||||
<th>联系电话</th>
|
||||
<th>专长</th>
|
||||
<th>认证状态</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">张建国</td>
|
||||
<td>长庆油田职工医院</td>
|
||||
<td>急诊科</td>
|
||||
<td>主任医师</td>
|
||||
<td>138****5612</td>
|
||||
<td>心肺复苏、创伤急救</td>
|
||||
<td><span class="tag tag-green">已认证</span></td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">李明华</td>
|
||||
<td>西安市第一医院</td>
|
||||
<td>心内科</td>
|
||||
<td>副主任医师</td>
|
||||
<td>139****3287</td>
|
||||
<td>心血管急症、胸痛处理</td>
|
||||
<td><span class="tag tag-green">已认证</span></td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">王秀英</td>
|
||||
<td>庆阳市人民医院</td>
|
||||
<td>急诊科</td>
|
||||
<td>主治医师</td>
|
||||
<td>137****9451</td>
|
||||
<td>中毒急救、烧伤处理</td>
|
||||
<td><span class="tag tag-green">已认证</span></td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">赵志远</td>
|
||||
<td>定边县医院</td>
|
||||
<td>骨科</td>
|
||||
<td>副主任医师</td>
|
||||
<td>136****8723</td>
|
||||
<td>骨折固定、脊柱损伤</td>
|
||||
<td><span class="tag tag-gray">未认证</span></td>
|
||||
<td><button class="switch" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">刘海燕</td>
|
||||
<td>长庆油田职工医院</td>
|
||||
<td>外科</td>
|
||||
<td>主治医师</td>
|
||||
<td>135****2164</td>
|
||||
<td>外伤缝合、止血处理</td>
|
||||
<td><span class="tag tag-green">已认证</span></td>
|
||||
<td><button class="switch on" onclick="this.classList.toggle('on')"></button></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 36 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,289 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 紧急联系人信息 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.switch{width:36px;height:20px;border-radius:10px;background:var(--border);cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;}
|
||||
.switch.on::after{left:18px;}
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
医院信息
|
||||
</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<a href="resource-aed.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED组网
|
||||
</a>
|
||||
<a href="resource-device.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
设备管理
|
||||
</a>
|
||||
<a href="resource-ambulance.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
急救包信息
|
||||
</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
急救医生信息
|
||||
</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
紧急联系人信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采气厂</option>
|
||||
<option>油田总医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="6" cy="6" r="4.5" stroke="#fff" stroke-width="1.5"/><path d="M9.5 9.5L13 13" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
查询
|
||||
</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
<div style="flex:1;"></div>
|
||||
<button class="btn btn-primary">+ 新增紧急联系人</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 9v3h10V9M7 2v7M4 5l3 3 3-3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<span class="table-card__title">紧急联系人列表</span>
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 120 条</span>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>所属单位</th>
|
||||
<th>联系人姓名</th>
|
||||
<th>与员工关系</th>
|
||||
<th>联系电话</th>
|
||||
<th>备用电话</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>王建军</td>
|
||||
<td>EMP-20210034</td>
|
||||
<td>采油一厂</td>
|
||||
<td>王秀兰</td>
|
||||
<td>配偶</td>
|
||||
<td>138****2356</td>
|
||||
<td>029-8651****</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>李明华</td>
|
||||
<td>EMP-20190087</td>
|
||||
<td>采油二厂</td>
|
||||
<td>李国强</td>
|
||||
<td>父亲</td>
|
||||
<td>139****7890</td>
|
||||
<td>—</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>张丽萍</td>
|
||||
<td>EMP-20200156</td>
|
||||
<td>采气厂</td>
|
||||
<td>赵文涛</td>
|
||||
<td>配偶</td>
|
||||
<td>136****4512</td>
|
||||
<td>136****9988</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>陈伟东</td>
|
||||
<td>EMP-20180045</td>
|
||||
<td>油田总医院</td>
|
||||
<td>陈小梅</td>
|
||||
<td>女儿</td>
|
||||
<td>158****3321</td>
|
||||
<td>—</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>刘志强</td>
|
||||
<td>EMP-20220012</td>
|
||||
<td>采油一厂</td>
|
||||
<td>刘桂芳</td>
|
||||
<td>母亲</td>
|
||||
<td>137****6678</td>
|
||||
<td>029-8659****</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<a class="link">编辑</a>
|
||||
<a class="link-danger">删除</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>共 120 条</span>
|
||||
<button class="page-btn"><</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">...</button>
|
||||
<button class="page-btn">12</button>
|
||||
<button class="page-btn">></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,286 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 急救包信息 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 基础重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
|
||||
/* 设计令牌 */
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
|
||||
/* 状态标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-orange{background:#FFF7E6;color:#FA8C16;}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
|
||||
/* 操作链接 */
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
医院信息
|
||||
</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<a href="resource-aed.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED组网
|
||||
</a>
|
||||
<a href="resource-device.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
设备管理
|
||||
</a>
|
||||
<a href="resource-ambulance.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
</a>
|
||||
<!-- 当前页：急救包信息 -->
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
急救包信息
|
||||
</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
急救医生信息
|
||||
</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
紧急联系人信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>急救包编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入急救包编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部单位</option>
|
||||
<option>长庆油田总部</option>
|
||||
<option>第一采油厂</option>
|
||||
<option>第二采油厂</option>
|
||||
<option>第三采油厂</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>存放位置：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入存放位置">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增急救包
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格卡片 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">急救包列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 45 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>急救包编号</th>
|
||||
<th>配置标准</th>
|
||||
<th>所属单位</th>
|
||||
<th>存放位置</th>
|
||||
<th>责任人</th>
|
||||
<th>药品到期时间</th>
|
||||
<th>上次检查时间</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">FK-2025-001</td>
|
||||
<td>企业标准型</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>总部办公楼1层前台</td>
|
||||
<td>刘芳</td>
|
||||
<td>2027-03-15</td>
|
||||
<td>2026-03-01</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">FK-2025-002</td>
|
||||
<td>野外作业型</td>
|
||||
<td>第一采油厂</td>
|
||||
<td>采油一厂调度中心</td>
|
||||
<td>王刚</td>
|
||||
<td>2026-06-20</td>
|
||||
<td>2026-02-15</td>
|
||||
<td><span class="tag tag-orange">即将过期</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">FK-2025-003</td>
|
||||
<td>企业标准型</td>
|
||||
<td>第二采油厂</td>
|
||||
<td>采油二厂值班室</td>
|
||||
<td>陈丽</td>
|
||||
<td>2027-01-10</td>
|
||||
<td>2026-03-20</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">FK-2025-004</td>
|
||||
<td>野外作业型</td>
|
||||
<td>第三采油厂</td>
|
||||
<td>采油三厂井站A区</td>
|
||||
<td>孙伟</td>
|
||||
<td>2025-12-01</td>
|
||||
<td>2025-11-15</td>
|
||||
<td><span class="tag tag-red">已过期</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">FK-2025-005</td>
|
||||
<td>企业标准型</td>
|
||||
<td>长庆油田总部</td>
|
||||
<td>总部职工食堂</td>
|
||||
<td>赵敏</td>
|
||||
<td>2027-05-08</td>
|
||||
<td>2026-04-10</td>
|
||||
<td><span class="tag tag-green">正常</span></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 45 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,250 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 医院信息 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.switch{width:36px;height:20px;border-radius:10px;background:var(--border);cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;}
|
||||
.switch.on::after{left:18px;}
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
.hospital-level{font-weight:500;}
|
||||
.level-3a{color:#722ED1;}
|
||||
.level-3{color:var(--primary);}
|
||||
.level-2{color:var(--success);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
医院信息
|
||||
</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
医疗点信息
|
||||
</a>
|
||||
<a href="resource-aed.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
AED组网
|
||||
</a>
|
||||
<a href="resource-device.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
设备管理
|
||||
</a>
|
||||
<a href="resource-ambulance.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
救护车信息
|
||||
</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
急救包信息
|
||||
</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M8 6v2M7 7h2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
急救医生信息
|
||||
</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
紧急联系人信息
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>医院名称：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入医院名称">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>医院等级：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部等级</option>
|
||||
<option>三级甲等</option>
|
||||
<option>三级</option>
|
||||
<option>二级甲等</option>
|
||||
<option>二级</option>
|
||||
<option>一级</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
新增医院
|
||||
</button>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
导出列表数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">医院列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 48 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>医院名称</th>
|
||||
<th>等级</th>
|
||||
<th>地址</th>
|
||||
<th>联系电话</th>
|
||||
<th>急救科室数</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-weight:500;">西安交通大学第一附属医院</td>
|
||||
<td><span class="hospital-level level-3a">三级甲等</span></td>
|
||||
<td>陕西省西安市雁塔区</td>
|
||||
<td>029-85323112</td>
|
||||
<td>12</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">长庆油田职工医院</td>
|
||||
<td><span class="hospital-level level-3">三级</span></td>
|
||||
<td>陕西省西安市未央区</td>
|
||||
<td>029-86518000</td>
|
||||
<td>8</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">陕西省人民医院</td>
|
||||
<td><span class="hospital-level level-3a">三级甲等</span></td>
|
||||
<td>陕西省西安市碑林区</td>
|
||||
<td>029-85251331</td>
|
||||
<td>15</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">庆阳市人民医院</td>
|
||||
<td><span class="hospital-level level-2">二级甲等</span></td>
|
||||
<td>甘肃省庆阳市西峰区</td>
|
||||
<td>0934-8612116</td>
|
||||
<td>5</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">延安大学附属医院</td>
|
||||
<td><span class="hospital-level level-3">三级</span></td>
|
||||
<td>陕西省延安市宝塔区</td>
|
||||
<td>0911-2881111</td>
|
||||
<td>10</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 48 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 医疗点信息 | 健康长庆原型</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__nav{display:flex;align-items:center;gap:4px;flex:1;}
|
||||
.top-bar__nav a{color:rgba(255,255,255,0.65);text-decoration:none;padding:6px 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);transition:all .2s;}
|
||||
.top-bar__nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
|
||||
.top-bar__nav a.active{color:#fff;background:var(--primary);}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-group-title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.switch{width:36px;height:20px;border-radius:10px;background:var(--border);cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;}
|
||||
.switch.on::after{left:18px;}
|
||||
.action-btns{display:flex;gap:8px;align-items:center;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link:hover{color:#40a9ff;}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger:hover{color:#ff7875;}
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="resource-hospital.html" class="active">应急资源</a>
|
||||
<a href="center-basic-info.html">应急中心</a>
|
||||
<a href="exception-result.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>返回首页</a>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-group-title">应急资源</div>
|
||||
<a href="resource-hospital.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8" stroke="currentColor" stroke-width="1.4"/><rect x="5" y="9" width="3" height="5" rx=".5" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="9" width="3" height="3" rx=".5" stroke="currentColor" stroke-width="1.2"/></svg>医院信息</a>
|
||||
<a href="resource-medical-point.html" class="sidebar-item active"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>医疗点信息</a>
|
||||
<a href="resource-aed.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.4"/></svg>AED组网</a>
|
||||
<a href="resource-device.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>设备管理</a>
|
||||
<a href="resource-ambulance.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="10" height="8" rx="1" stroke="currentColor" stroke-width="1.4"/><path d="M11 7h3l1 3v2h-4" stroke="currentColor" stroke-width="1.4"/><circle cx="4" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="13" r="1.5" stroke="currentColor" stroke-width="1.2"/></svg>救护车信息</a>
|
||||
<a href="resource-first-aid-kit.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M6 4V3a2 2 0 014 0v1M8 7v4M6 9h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>急救包信息</a>
|
||||
<a href="resource-doctor.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M8 2a3 3 0 110 6 3 3 0 010-6zM3 14c0-2.8 2.2-5 5-5s5 2.2 5 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>急救医生信息</a>
|
||||
<a href="resource-emergency-contact.html" class="sidebar-item"><svg viewBox="0 0 16 16" fill="none"><path d="M11 2h3v12h-3M2 2h3v12H2" stroke="currentColor" stroke-width="1.4"/><path d="M8 5a2 2 0 110 4 2 2 0 010-4zM5 13c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="currentColor" stroke-width="1.2"/></svg>紧急联系人信息</a>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>医疗点名称：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位：</label>
|
||||
<select class="filter-select"><option>全部</option><option>公司机关</option><option>采油一厂</option><option>采油二厂</option></select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:16px;">
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>新增医疗点</button>
|
||||
<button class="btn btn-default">导出列表数据</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">医疗点列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 36 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>序号</th><th>医疗点名称</th><th>所属单位</th><th>地址</th><th>联系人</th><th>联系电话</th><th>医护人员数</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td style="font-weight:500;">公司机关医疗点</td><td>公司机关</td><td>西安市未央区长庆大厦1楼</td><td>王医生</td><td>029-86518001</td><td>3</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td></tr>
|
||||
<tr><td>2</td><td style="font-weight:500;">采油一厂医疗点</td><td>采油一厂</td><td>庆阳市西峰区采油一厂办公楼</td><td>李医生</td><td>0934-8612001</td><td>5</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td></tr>
|
||||
<tr><td>3</td><td style="font-weight:500;">采油二厂医疗点</td><td>采油二厂</td><td>庆阳市庆城县采油二厂基地</td><td>张医生</td><td>0934-3221001</td><td>4</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td></tr>
|
||||
<tr><td>4</td><td style="font-weight:500;">采气一厂医疗点</td><td>采气一厂</td><td>榆林市靖边县采气一厂</td><td>赵护士</td><td>0912-4837001</td><td>2</td><td><div class="switch" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td></tr>
|
||||
<tr><td>5</td><td style="font-weight:500;">输油处医疗点</td><td>输油处</td><td>西安市灞桥区输油处办公区</td><td>刘医生</td><td>029-83518001</td><td>2</td><td><div class="switch on" onclick="this.classList.toggle('on')"></div></td><td><div class="action-btns"><span class="link">编辑</span><span class="link-danger">删除</span></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 36 条</span>
|
||||
<button class="page-btn">‹</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">4</button><button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,53 @@
|
||||
# 应急就医模块变更记录
|
||||
|
||||
## [2026-04-20] init: 从墨刀原型迁移应急就医模块
|
||||
|
||||
从墨刀原型（健康长庆后台管理系统）完整迁移应急就医模块，按角色分目录组织，共计28+个页面。
|
||||
|
||||
**涉及文件：**
|
||||
|
||||
### 管理员视角 (`admin/`)
|
||||
|
||||
#### 档案
|
||||
- `admin/archive-personal.html` — 新增，个人应急数据列表
|
||||
- `admin/archive-personal-detail.html` — 新增，个人应急数据详情（含Tab切换：拨打120/应急视频/应急电话/大病就医）
|
||||
- `admin/archive-unit.html` — 新增，单位报表数据（含二级/三级单位切换）
|
||||
- `admin/archive-center.html` — 新增，应急中心报表数据
|
||||
|
||||
#### 应急资源
|
||||
- `admin/resource-hospital.html` — 新增，医院信息管理
|
||||
- `admin/resource-medical-point.html` — 新增，医疗点信息管理
|
||||
- `admin/resource-aed.html` — 新增，AED组网设备管理
|
||||
- `admin/resource-device.html` — 新增，设备管理
|
||||
- `admin/resource-ambulance.html` — 新增，救护车信息管理
|
||||
- `admin/resource-first-aid-kit.html` — 新增，急救包信息管理
|
||||
- `admin/resource-doctor.html` — 新增，急救医生信息管理
|
||||
- `admin/resource-emergency-contact.html` — 新增，紧急联系人信息
|
||||
|
||||
#### 应急中心
|
||||
- `admin/center-basic-info.html` — 新增，应急中心基本信息
|
||||
- `admin/center-work-order.html` — 新增，应急工单管理
|
||||
- `admin/center-seat.html` — 新增，坐席管理
|
||||
- `admin/center-group.html` — 新增，分组管理
|
||||
- `admin/center-call-record.html` — 新增，通话记录
|
||||
- `admin/center-serious-illness.html` — 新增，大病就医管理
|
||||
- `admin/center-data-screen.html` — 新增，大屏数据配置
|
||||
- `admin/center-schedule.html` — 新增，排班配置
|
||||
- `admin/center-simulation.html` — 新增，模拟急救联动
|
||||
- `admin/center-employee.html` — 新增，员工信息管理
|
||||
|
||||
#### 异常事件
|
||||
- `admin/exception-result.html` — 新增，结果异常
|
||||
|
||||
### 操作人员视角 (`operator/`)
|
||||
- `operator/emergency-active.html` — 新增，正在应急（IM对话界面）
|
||||
- `operator/work-order.html` — 新增，应急工单列表
|
||||
- `operator/call-record.html` — 新增，通话记录
|
||||
- `operator/serious-illness.html` — 新增，大病就医
|
||||
- `operator/duty-group.html` — 新增，值班小组
|
||||
|
||||
### 专业人员视角 (`professional/`)
|
||||
- `professional/professional.html` — 新增，正在应急（IM对话界面）
|
||||
|
||||
### 其他
|
||||
- `doc/CHANGELOG.md` — 新增，变更记录
|
||||
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 通话记录 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 全局重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
/* 设计令牌 */
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);margin-left:auto;}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
/* 标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
/* 操作链接 */
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–操作人员
|
||||
</div>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">操</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">操作人员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<a href="emergency-active.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
正在应急
|
||||
</a>
|
||||
<a href="work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="call-record.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="duty-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
值班小组
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>通话编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入通话编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>通话类型：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>应急视频</option>
|
||||
<option>应急电话</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>时间范围：</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">通话记录列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 230 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>通话编号</th>
|
||||
<th>通话类型</th>
|
||||
<th>关联工单</th>
|
||||
<th>呼叫方</th>
|
||||
<th>开始时间</th>
|
||||
<th>通话时长</th>
|
||||
<th>通话状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CALL20260420001</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td><span class="link">WO20260420003</span></td>
|
||||
<td>张伟</td>
|
||||
<td>2026-04-20 09:10</td>
|
||||
<td>15:23</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="link">详情</span> <span class="link" style="margin-left:8px;">回放</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CALL20260420002</td>
|
||||
<td><span class="tag tag-orange">应急电话</span></td>
|
||||
<td><span class="link">WO20260420005</span></td>
|
||||
<td>李明</td>
|
||||
<td>2026-04-20 09:02</td>
|
||||
<td>08:45</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="link">详情</span> <span class="link" style="margin-left:8px;">回放</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CALL20260420003</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td><span class="link">WO20260420008</span></td>
|
||||
<td>王芳</td>
|
||||
<td>2026-04-20 08:45</td>
|
||||
<td>22:10</td>
|
||||
<td><span class="tag tag-blue">通话中</span></td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CALL20260419004</td>
|
||||
<td><span class="tag tag-orange">应急电话</span></td>
|
||||
<td><span class="link">WO20260419012</span></td>
|
||||
<td>赵刚</td>
|
||||
<td>2026-04-19 16:20</td>
|
||||
<td>05:30</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="link">详情</span> <span class="link" style="margin-left:8px;">回放</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CALL20260419005</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td><span class="link">WO20260419015</span></td>
|
||||
<td>陈小红</td>
|
||||
<td>2026-04-19 14:58</td>
|
||||
<td>12:08</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="link">详情</span> <span class="link" style="margin-left:8px;">回放</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">CALL20260419006</td>
|
||||
<td><span class="tag tag-orange">应急电话</span></td>
|
||||
<td><span class="link">WO20260419018</span></td>
|
||||
<td>孙磊</td>
|
||||
<td>2026-04-19 11:32</td>
|
||||
<td>03:42</td>
|
||||
<td><span class="tag tag-red">未接通</span></td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 230 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<span>...</span>
|
||||
<button class="page-btn">23</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,262 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 值班小组 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 全局重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
/* 设计令牌 */
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);margin-left:auto;}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
/* 值班小组卡片网格 */
|
||||
.group-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
.group-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:20px 24px;}
|
||||
.group-card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);}
|
||||
.group-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.group-card__status{font-size:var(--font-xs);}
|
||||
.member-list{display:flex;flex-direction:column;gap:12px;}
|
||||
.member-item{display:flex;align-items:center;gap:12px;padding:8px 0;}
|
||||
.member-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);font-weight:500;flex-shrink:0;}
|
||||
.member-info{flex:1;}
|
||||
.member-name{font-size:var(--font-sm);font-weight:500;}
|
||||
.member-role{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.member-status{font-size:var(--font-xs);}
|
||||
/* 页面标题 */
|
||||
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
|
||||
.page-header__title{font-size:var(--font-xl);font-weight:600;}
|
||||
.page-header__desc{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–操作人员
|
||||
</div>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">操</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">操作人员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<a href="emergency-active.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
正在应急
|
||||
</a>
|
||||
<a href="work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="duty-group.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
值班小组
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-header__title">值班小组</div>
|
||||
<div class="page-header__desc">当前值班分组信息总览 · 2026-04-20</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 值班小组卡片网格 -->
|
||||
<div class="group-grid">
|
||||
<!-- A组 - 值班中 -->
|
||||
<div class="group-card">
|
||||
<div class="group-card__header">
|
||||
<div class="group-card__title">A组</div>
|
||||
<div class="group-card__status"><span class="tag tag-green">值班中</span></div>
|
||||
</div>
|
||||
<div class="member-list">
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">王</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">王建国</div>
|
||||
<div class="member-role">组长</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">李</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">李晓明</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">张</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">张华</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">刘</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">刘洋</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-orange">忙碌</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- B组 - 待命 -->
|
||||
<div class="group-card">
|
||||
<div class="group-card__header">
|
||||
<div class="group-card__title">B组</div>
|
||||
<div class="group-card__status"><span class="tag tag-blue">待命</span></div>
|
||||
</div>
|
||||
<div class="member-list">
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">赵</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">赵伟</div>
|
||||
<div class="member-role">组长</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">陈</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">陈刚</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">周</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">周婷</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-gray">离线</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- C组 - 休息 -->
|
||||
<div class="group-card">
|
||||
<div class="group-card__header">
|
||||
<div class="group-card__title">C组</div>
|
||||
<div class="group-card__status"><span class="tag tag-gray">休息</span></div>
|
||||
</div>
|
||||
<div class="member-list">
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">孙</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">孙磊</div>
|
||||
<div class="member-role">组长</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-gray">离线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">吴</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">吴强</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-gray">离线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">郑</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">郑明</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-gray">离线</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- D组 - 待命 -->
|
||||
<div class="group-card">
|
||||
<div class="group-card__header">
|
||||
<div class="group-card__title">D组</div>
|
||||
<div class="group-card__status"><span class="tag tag-blue">待命</span></div>
|
||||
</div>
|
||||
<div class="member-list">
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">何</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">何军</div>
|
||||
<div class="member-role">组长</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">马</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">马超</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">黄</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">黄亮</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-green">在线</span></div>
|
||||
</div>
|
||||
<div class="member-item">
|
||||
<div class="member-avatar">杨</div>
|
||||
<div class="member-info">
|
||||
<div class="member-name">杨洋</div>
|
||||
<div class="member-role">操作员</div>
|
||||
</div>
|
||||
<div class="member-status"><span class="tag tag-gray">离线</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,251 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 正在应急 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 全局重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
/* 设计令牌 */
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);margin-left:auto;}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;height:calc(100vh - 56px);display:flex;overflow:hidden;}
|
||||
/* IM左侧面板 - 联系人列表 */
|
||||
.im-left{width:320px;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;}
|
||||
.im-left__search{padding:16px;border-bottom:1px solid var(--border);}
|
||||
.im-left__search input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px 0 36px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Ccircle cx='6' cy='6' r='4' stroke='%23999' stroke-width='1.4'/%3E%3Cpath d='M10 10l2.5 2.5' stroke='%23999' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 12px center;}
|
||||
.im-left__search input:focus{border-color:var(--primary);}
|
||||
.im-left__list{flex:1;overflow-y:auto;}
|
||||
.contact-item{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:background .15s;border-bottom:1px solid #f5f5f5;position:relative;}
|
||||
.contact-item:hover{background:#F8FBFF;}
|
||||
.contact-item.active{background:var(--primary-light);}
|
||||
.contact-avatar{width:40px;height:40px;border-radius:50%;background:#E6F7FF;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:var(--font-sm);font-weight:500;flex-shrink:0;}
|
||||
.contact-info{flex:1;min-width:0;}
|
||||
.contact-info__top{display:flex;align-items:center;justify-content:space-between;}
|
||||
.contact-name{font-size:var(--font-sm);font-weight:500;color:var(--text-primary);}
|
||||
.contact-name span{font-weight:400;color:var(--text-secondary);margin-left:4px;}
|
||||
.contact-time{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.contact-msg{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.contact-badge{position:absolute;top:12px;right:16px;width:18px;height:18px;border-radius:50%;background:var(--danger);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;}
|
||||
/* IM右侧面板 - 对话区 */
|
||||
.im-right{flex:1;display:flex;flex-direction:column;background:#fff;}
|
||||
.im-right__header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
|
||||
.im-right__patient{display:flex;align-items:center;gap:16px;}
|
||||
.im-right__patient-name{font-size:var(--font-base);font-weight:600;}
|
||||
.im-right__patient-info{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
/* 聊天消息区 */
|
||||
.im-right__messages{flex:1;overflow-y:auto;padding:20px 24px;background:#F9FAFB;}
|
||||
.chat-time{font-size:var(--font-xs);color:var(--text-placeholder);text-align:center;margin:16px 0 12px;}
|
||||
.chat-message{display:flex;margin-bottom:16px;gap:10px;}
|
||||
.chat-message.right{flex-direction:row-reverse;}
|
||||
.chat-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);flex-shrink:0;font-weight:500;}
|
||||
.chat-message .chat-avatar{background:#E6F7FF;color:var(--primary);}
|
||||
.chat-message.right .chat-avatar{background:var(--primary);color:#fff;}
|
||||
.chat-body{display:flex;flex-direction:column;max-width:60%;}
|
||||
.chat-name{font-size:var(--font-xs);color:var(--text-secondary);margin-bottom:4px;}
|
||||
.chat-message.right .chat-name{text-align:right;}
|
||||
.chat-bubble{padding:12px 16px;border-radius:12px;font-size:var(--font-sm);line-height:1.6;word-break:break-word;}
|
||||
.chat-message .chat-bubble{background:#fff;color:var(--text-primary);border:1px solid #f0f0f0;}
|
||||
.chat-message.right .chat-bubble{background:var(--primary);color:#fff;border:none;}
|
||||
/* 底部操作区 */
|
||||
.im-right__actions{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:12px;background:#FAFAFA;}
|
||||
.im-right__actions .btn{height:32px;font-size:var(--font-xs);padding:0 12px;}
|
||||
.btn-danger{background:var(--danger);color:#fff;border:none;}
|
||||
.btn-danger:hover{background:#ff7875;}
|
||||
.btn-warning{background:var(--warning);color:#fff;border:none;}
|
||||
.btn-warning:hover{background:#ffc53d;}
|
||||
.im-right__input{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:12px;}
|
||||
.im-right__input input{flex:1;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 16px;font-size:var(--font-sm);outline:none;}
|
||||
.im-right__input input:focus{border-color:var(--primary);}
|
||||
.im-right__input .btn{height:40px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–操作人员
|
||||
</div>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">操</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">操作人员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<a href="emergency-active.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
正在应急
|
||||
</a>
|
||||
<a href="work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="duty-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
值班小组
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区：IM对话界面 -->
|
||||
<main class="main">
|
||||
<!-- 左侧联系人面板 -->
|
||||
<div class="im-left">
|
||||
<div class="im-left__search">
|
||||
<input type="text" placeholder="搜索应急人员...">
|
||||
</div>
|
||||
<div class="im-left__list">
|
||||
<!-- 联系人1 - 选中状态 -->
|
||||
<div class="contact-item active">
|
||||
<div class="contact-avatar">张</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-info__top">
|
||||
<div class="contact-name">张伟 <span>男 45岁</span></div>
|
||||
<div class="contact-time">09:15</div>
|
||||
</div>
|
||||
<div class="contact-msg">我现在胸口很闷，呼吸困难...</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 联系人2 -->
|
||||
<div class="contact-item">
|
||||
<div class="contact-avatar">李</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-info__top">
|
||||
<div class="contact-name">李明 <span>男 38岁</span></div>
|
||||
<div class="contact-time">09:02</div>
|
||||
</div>
|
||||
<div class="contact-msg">头部受伤，有流血情况</div>
|
||||
</div>
|
||||
<div class="contact-badge">2</div>
|
||||
</div>
|
||||
<!-- 联系人3 -->
|
||||
<div class="contact-item">
|
||||
<div class="contact-avatar">王</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-info__top">
|
||||
<div class="contact-name">王芳 <span>女 52岁</span></div>
|
||||
<div class="contact-time">08:45</div>
|
||||
</div>
|
||||
<div class="contact-msg">好的，我已经按照您说的做了</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 联系人4 -->
|
||||
<div class="contact-item">
|
||||
<div class="contact-avatar">赵</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-info__top">
|
||||
<div class="contact-name">赵刚 <span>男 29岁</span></div>
|
||||
<div class="contact-time">08:30</div>
|
||||
</div>
|
||||
<div class="contact-msg">现在感觉好一些了</div>
|
||||
</div>
|
||||
<div class="contact-badge">5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧对话面板 -->
|
||||
<div class="im-right">
|
||||
<!-- 患者信息栏 -->
|
||||
<div class="im-right__header">
|
||||
<div class="im-right__patient">
|
||||
<div class="im-right__patient-name">张伟</div>
|
||||
<div class="im-right__patient-info">员工编号: EMP001 | 采油一厂 · 生产部</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 聊天消息区 -->
|
||||
<div class="im-right__messages">
|
||||
<div class="chat-time">2026-04-20 09:10</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-avatar">张</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-name">张伟</div>
|
||||
<div class="chat-bubble">你好，我现在胸口很闷，呼吸困难，感觉心跳加速</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-message right">
|
||||
<div class="chat-avatar">操</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-name">刘操作员</div>
|
||||
<div class="chat-bubble">张先生您好，我是应急操作人员刘操作员。请您先保持冷静，您现在的位置是在哪里？</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-avatar">张</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-name">张伟</div>
|
||||
<div class="chat-bubble">我在采油一厂生产区3号楼办公室</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-time">2026-04-20 09:13</div>
|
||||
<div class="chat-message right">
|
||||
<div class="chat-avatar">操</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-name">刘操作员</div>
|
||||
<div class="chat-bubble">好的，我已经定位到您的位置。请您先坐下或平躺，解开衣领保持呼吸通畅。我马上为您安排救护。请问您有没有心脏病史？</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-avatar">张</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-name">张伟</div>
|
||||
<div class="chat-bubble">我现在胸口很闷，呼吸困难...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-message right">
|
||||
<div class="chat-avatar">操</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-name">刘操作员</div>
|
||||
<div class="chat-bubble">请尽量保持平静呼吸，救护车已经在路上了，大约5分钟到达。您身边有同事吗？让他们协助您。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮行 -->
|
||||
<div class="im-right__actions">
|
||||
<button class="btn btn-danger">结束应急</button>
|
||||
<button class="btn btn-warning">驻场派单</button>
|
||||
<button class="btn btn-default">应急详情</button>
|
||||
<button class="btn btn-default">员工档案</button>
|
||||
</div>
|
||||
|
||||
<!-- 发送输入框 -->
|
||||
<div class="im-right__input">
|
||||
<input type="text" placeholder="输入消息...">
|
||||
<button class="btn btn-primary">发送</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,219 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 大病就医 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 全局重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
/* 设计令牌 */
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);margin-left:auto;}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
/* 标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
/* 操作链接 */
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–操作人员
|
||||
</div>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">操</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">操作人员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<a href="emergency-active.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
正在应急
|
||||
</a>
|
||||
<a href="work-order.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="serious-illness.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="duty-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
值班小组
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>员工姓名：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>就医状态：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>就医中</option>
|
||||
<option>已完成</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">大病就医列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 45 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>员工姓名</th>
|
||||
<th>员工编号</th>
|
||||
<th>诊断疾病</th>
|
||||
<th>就医医院</th>
|
||||
<th>就医时间</th>
|
||||
<th>当前状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>张伟</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP001</td>
|
||||
<td>急性心肌梗死</td>
|
||||
<td>西安交通大学第一附属医院</td>
|
||||
<td>2026-04-20 10:00</td>
|
||||
<td><span class="tag tag-blue">就医中</span></td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>李明</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP035</td>
|
||||
<td>脑出血</td>
|
||||
<td>陕西省人民医院</td>
|
||||
<td>2026-04-19 14:30</td>
|
||||
<td><span class="tag tag-blue">就医中</span></td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>王芳</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP102</td>
|
||||
<td>肺癌(早期)</td>
|
||||
<td>长庆油田职工医院</td>
|
||||
<td>2026-04-18 09:15</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>赵刚</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP078</td>
|
||||
<td>腰椎间盘突出(重度)</td>
|
||||
<td>西安交通大学第一附属医院</td>
|
||||
<td>2026-04-17 16:45</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>陈小红</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">EMP156</td>
|
||||
<td>冠状动脉粥样硬化</td>
|
||||
<td>庆阳市人民医院</td>
|
||||
<td>2026-04-16 11:20</td>
|
||||
<td><span class="tag tag-blue">就医中</span></td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 45 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,260 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 应急工单 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 全局重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
/* 设计令牌 */
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);margin-left:auto;}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 主内容区 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 筛选栏 */
|
||||
.filter-bar{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.filter-item{display:flex;align-items:center;gap:8px;}
|
||||
.filter-item label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;}
|
||||
.filter-input{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;background:#fff;min-width:180px;}
|
||||
.filter-input:focus{border-color:var(--primary);}
|
||||
.filter-select{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;min-width:120px;}
|
||||
/* 按钮 */
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
/* 表格卡片 */
|
||||
.table-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.table-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
|
||||
.table-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.table-card__content{overflow-x:auto;overflow-y:hidden;}
|
||||
.table-card__content table{min-width:100%;white-space:nowrap;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
thead th{background:#FAFAFA;padding:12px 16px;text-align:left;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);white-space:nowrap;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
/* 标签 */
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
/* 操作链接 */
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);text-decoration:none;}
|
||||
.link:hover{color:#40a9ff;}
|
||||
/* 分页 */
|
||||
.pagination{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;gap:8px;border-top:1px solid var(--border);}
|
||||
.pagination span{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.page-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-size:var(--font-sm);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;}
|
||||
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–操作人员
|
||||
</div>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">操</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">操作人员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<a href="emergency-active.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
正在应急
|
||||
</a>
|
||||
<a href="work-order.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M5 6h6M5 9h4M5 12h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
应急工单
|
||||
</a>
|
||||
<a href="call-record.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 2.5A1.5 1.5 0 014.5 1h2A1.5 1.5 0 018 2.5v1A1.5 1.5 0 016.5 5h-2A1.5 1.5 0 013 3.5v-1z" stroke="currentColor" stroke-width="1.2"/><path d="M5 5v7a3 3 0 003 3h0a3 3 0 003-3V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
通话记录
|
||||
</a>
|
||||
<a href="serious-illness.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
大病就医
|
||||
</a>
|
||||
<a href="duty-group.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="5" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><circle cx="11" cy="5" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M1 14c0-2.2 1.8-4 4-4s4 1.8 4 4M8 14c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
值班小组
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>工单编号：</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入工单编号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>工单状态：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部状态</option>
|
||||
<option>待处理</option>
|
||||
<option>处理中</option>
|
||||
<option>已完成</option>
|
||||
<option>已取消</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>求助方式：</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>应急视频</option>
|
||||
<option>应急电话</option>
|
||||
<option>拨打120</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">工单列表</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 128 条</div>
|
||||
</div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>工单编号</th>
|
||||
<th>求助员工</th>
|
||||
<th>求助方式</th>
|
||||
<th>求助时间</th>
|
||||
<th>工单状态</th>
|
||||
<th>工单类型</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260420001</td>
|
||||
<td>张伟</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>2026-04-20 09:10</td>
|
||||
<td><span class="tag tag-orange">处理中</span></td>
|
||||
<td>突发疾病</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260420002</td>
|
||||
<td>李明</td>
|
||||
<td><span class="tag tag-orange">应急电话</span></td>
|
||||
<td>2026-04-20 09:02</td>
|
||||
<td><span class="tag tag-orange">处理中</span></td>
|
||||
<td>工伤事故</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260420003</td>
|
||||
<td>王芳</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>2026-04-20 08:45</td>
|
||||
<td><span class="tag tag-orange">处理中</span></td>
|
||||
<td>突发疾病</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260420004</td>
|
||||
<td>赵刚</td>
|
||||
<td><span class="tag tag-red">拨打120</span></td>
|
||||
<td>2026-04-20 08:30</td>
|
||||
<td><span class="tag tag-orange">处理中</span></td>
|
||||
<td>突发疾病</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419005</td>
|
||||
<td>陈小红</td>
|
||||
<td><span class="tag tag-orange">应急电话</span></td>
|
||||
<td>2026-04-19 16:20</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>工伤事故</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419006</td>
|
||||
<td>孙磊</td>
|
||||
<td><span class="tag tag-blue">应急视频</span></td>
|
||||
<td>2026-04-19 14:55</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>突发疾病</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260419007</td>
|
||||
<td>周婷</td>
|
||||
<td><span class="tag tag-red">拨打120</span></td>
|
||||
<td>2026-04-19 11:30</td>
|
||||
<td><span class="tag tag-green">已完成</span></td>
|
||||
<td>突发疾病</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260418008</td>
|
||||
<td>吴强</td>
|
||||
<td><span class="tag tag-orange">应急电话</span></td>
|
||||
<td>2026-04-18 09:45</td>
|
||||
<td><span class="tag tag-gray">已取消</span></td>
|
||||
<td>误报</td>
|
||||
<td><span class="link">详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<span>共 128 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<span>...</span>
|
||||
<button class="page-btn">13</button>
|
||||
<button class="page-btn">›</button>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条/页</option><option>20条/页</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,227 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应急就医 - 正在应急 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 全局重置 */
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F5F7FA;color:#333;min-width:1280px;}
|
||||
/* 设计令牌 */
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--success:#52C41A;--warning:#FAAD14;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--text-placeholder:#999;--border:#E8E8E8;--background:#F5F7FA;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.08);}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar{display:flex;align-items:center;height:56px;background:#001529;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;}
|
||||
.top-bar__logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--font-lg);font-weight:600;width:240px;flex-shrink:0;white-space:nowrap;}
|
||||
.top-bar__logo svg{width:28px;height:28px;}
|
||||
.top-bar__right{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);margin-left:auto;}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;text-decoration:none;}
|
||||
.btn-back:hover{color:#fff;}
|
||||
.avatar{width:32px;height:32px;border-radius:50%;background:#1890FF;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-sm);}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-item{display:flex;align-items:center;gap:10px;padding:12px 24px;color:rgba(255,255,255,0.65);font-size:var(--font-sm);cursor:pointer;transition:all .2s;text-decoration:none;}
|
||||
.sidebar-item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 主内容区 - IM布局 */
|
||||
.main{margin-left:240px;margin-top:56px;height:calc(100vh - 56px);display:flex;overflow:hidden;}
|
||||
/* IM左侧面板 - 联系人列表 */
|
||||
.im-left{width:320px;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;}
|
||||
.im-left__search{padding:16px;border-bottom:1px solid var(--border);}
|
||||
.im-left__search input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px 0 36px;font-size:var(--font-sm);outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3E%3Ccircle cx='6' cy='6' r='4' stroke='%23999' stroke-width='1.4'/%3E%3Cpath d='M10 10l2.5 2.5' stroke='%23999' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 12px center;}
|
||||
.im-left__search input:focus{border-color:var(--primary);}
|
||||
.im-left__list{flex:1;overflow-y:auto;}
|
||||
.contact-item{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:background .15s;border-bottom:1px solid #f5f5f5;position:relative;}
|
||||
.contact-item:hover{background:#F8FBFF;}
|
||||
.contact-item.active{background:var(--primary-light);}
|
||||
.contact-avatar{width:40px;height:40px;border-radius:50%;background:#E6F7FF;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:var(--font-sm);font-weight:500;flex-shrink:0;}
|
||||
.contact-info{flex:1;min-width:0;}
|
||||
.contact-info__top{display:flex;align-items:center;justify-content:space-between;}
|
||||
.contact-name{font-size:var(--font-sm);font-weight:500;color:var(--text-primary);}
|
||||
.contact-name span{font-weight:400;color:var(--text-secondary);margin-left:4px;}
|
||||
.contact-time{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.contact-msg{font-size:var(--font-xs);color:var(--text-secondary);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.contact-badge{position:absolute;top:12px;right:16px;width:18px;height:18px;border-radius:50%;background:var(--danger);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;}
|
||||
/* IM右侧面板 - 对话区 */
|
||||
.im-right{flex:1;display:flex;flex-direction:column;background:#fff;}
|
||||
.im-right__header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
|
||||
.im-right__patient{display:flex;align-items:center;gap:16px;}
|
||||
.im-right__patient-name{font-size:var(--font-base);font-weight:600;}
|
||||
.im-right__patient-info{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
/* 聊天消息区 */
|
||||
.im-right__messages{flex:1;overflow-y:auto;padding:20px 24px;background:#F9FAFB;}
|
||||
.chat-time{font-size:var(--font-xs);color:var(--text-placeholder);text-align:center;margin:16px 0 12px;}
|
||||
.chat-message{display:flex;margin-bottom:16px;gap:10px;}
|
||||
.chat-message.right{flex-direction:row-reverse;}
|
||||
.chat-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);flex-shrink:0;font-weight:500;}
|
||||
.chat-message .chat-avatar{background:#E6F7FF;color:var(--primary);}
|
||||
.chat-message.right .chat-avatar{background:var(--primary);color:#fff;}
|
||||
.chat-body{display:flex;flex-direction:column;max-width:60%;}
|
||||
.chat-name{font-size:var(--font-xs);color:var(--text-secondary);margin-bottom:4px;}
|
||||
.chat-message.right .chat-name{text-align:right;}
|
||||
.chat-bubble{padding:12px 16px;border-radius:12px;font-size:var(--font-sm);line-height:1.6;word-break:break-word;}
|
||||
.chat-message .chat-bubble{background:#fff;color:var(--text-primary);border:1px solid #f0f0f0;}
|
||||
.chat-message.right .chat-bubble{background:var(--primary);color:#fff;border:none;}
|
||||
/* 底部操作区 */
|
||||
.im-right__actions{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:12px;background:#FAFAFA;}
|
||||
.im-right__actions .btn{height:32px;font-size:var(--font-xs);padding:0 12px;}
|
||||
.btn{height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
|
||||
.btn-primary{background:var(--primary);color:#fff;border:none;}
|
||||
.btn-primary:hover{background:#40a9ff;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.btn-danger{background:var(--danger);color:#fff;border:none;}
|
||||
.btn-danger:hover{background:#ff7875;}
|
||||
.btn-warning{background:var(--warning);color:#fff;border:none;}
|
||||
.btn-warning:hover{background:#ffc53d;}
|
||||
.im-right__input{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:12px;}
|
||||
.im-right__input input{flex:1;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 16px;font-size:var(--font-sm);outline:none;}
|
||||
.im-right__input input:focus{border-color:var(--primary);}
|
||||
.im-right__input .btn{height:40px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar__logo">
|
||||
<svg viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="6" fill="#1890FF"/><path d="M14 6v7l5 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="8" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
应急就医–专业人员
|
||||
</div>
|
||||
<div class="top-bar__right">
|
||||
<a class="btn-back" href="../../../index.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
返回首页
|
||||
</a>
|
||||
<div class="avatar">专</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">专业人员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<a href="professional.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L1 14h14L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 12v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
正在应急
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区：IM对话界面 -->
|
||||
<main class="main">
|
||||
<!-- 左侧联系人面板 -->
|
||||
<div class="im-left">
|
||||
<div class="im-left__search">
|
||||
<input type="text" placeholder="搜索患者...">
|
||||
</div>
|
||||
<div class="im-left__list">
|
||||
<!-- 联系人1 - 选中状态 -->
|
||||
<div class="contact-item active">
|
||||
<div class="contact-avatar">张</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-info__top">
|
||||
<div class="contact-name">张伟 <span>男 45岁</span></div>
|
||||
<div class="contact-time">09:15</div>
|
||||
</div>
|
||||
<div class="contact-msg">左胸闷痛伴呼吸困难，持续十几分钟</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 联系人2 -->
|
||||
<div class="contact-item">
|
||||
<div class="contact-avatar">李</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-info__top">
|
||||
<div class="contact-name">李明 <span>男 38岁</span></div>
|
||||
<div class="contact-time">09:02</div>
|
||||
</div>
|
||||
<div class="contact-msg">头部外伤，伤口约3cm，持续出血</div>
|
||||
</div>
|
||||
<div class="contact-badge">3</div>
|
||||
</div>
|
||||
<!-- 联系人3 -->
|
||||
<div class="contact-item">
|
||||
<div class="contact-avatar">王</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-info__top">
|
||||
<div class="contact-name">王芳 <span>女 52岁</span></div>
|
||||
<div class="contact-time">08:45</div>
|
||||
</div>
|
||||
<div class="contact-msg">血压已降至正常范围，症状缓解</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧对话面板 -->
|
||||
<div class="im-right">
|
||||
<!-- 患者信息栏 -->
|
||||
<div class="im-right__header">
|
||||
<div class="im-right__patient">
|
||||
<div class="im-right__patient-name">张伟</div>
|
||||
<div class="im-right__patient-info">员工编号: EMP001 | 采油一厂 · 生产部 | 既往史: 高血压(3年)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 聊天消息区 -->
|
||||
<div class="im-right__messages">
|
||||
<div class="chat-time">2026-04-20 09:10</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-avatar">张</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-name">张伟</div>
|
||||
<div class="chat-bubble">医生您好，我现在胸口很闷，呼吸困难，感觉心跳特别快</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-message right">
|
||||
<div class="chat-avatar">专</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-name">李医生(心内科副主任)</div>
|
||||
<div class="chat-bubble">张先生您好，我是心内科李医生。请您描述一下胸闷的具体位置，是左胸还是右胸？疼痛是持续性的还是间断性的？</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-avatar">张</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-name">张伟</div>
|
||||
<div class="chat-bubble">是左边胸口，闷痛的感觉，已经持续十几分钟了，而且出了很多汗</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-time">2026-04-20 09:13</div>
|
||||
<div class="chat-message right">
|
||||
<div class="chat-avatar">专</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-name">李医生(心内科副主任)</div>
|
||||
<div class="chat-bubble">根据您的症状描述——左胸闷痛持续十余分钟伴大汗、心悸，结合您的高血压病史，需要高度警惕急性冠脉综合征的可能。请立即执行以下措施：1. 立刻停止一切活动，就地平卧或半卧位；2. 解开衣领和腰带，保持呼吸通畅；3. 如身边有阿司匹林，嚼服300mg。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-avatar">张</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-name">张伟</div>
|
||||
<div class="chat-bubble">好的医生，我已经躺下了。同事在帮我找药，办公室应急箱里有阿司匹林</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-message right">
|
||||
<div class="chat-avatar">专</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-name">李医生(心内科副主任)</div>
|
||||
<div class="chat-bubble">好的，阿司匹林找到后请嚼碎服用，不要整片吞服。急救团队预计3分钟到达您的位置，到达后会立即做心电图检查。在此期间请告诉我，胸痛有没有向左肩、左臂或下颌放射？</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮行 -->
|
||||
<div class="im-right__actions">
|
||||
<button class="btn btn-danger">结束会诊</button>
|
||||
<button class="btn btn-warning">添加诊断</button>
|
||||
<button class="btn btn-default">查看病历</button>
|
||||
</div>
|
||||
|
||||
<!-- 发送输入框 -->
|
||||
<div class="im-right__input">
|
||||
<input type="text" placeholder="输入医嘱或指导信息...">
|
||||
<button class="btn btn-primary">发送</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user