feat: 新增健康咨询管理端页面原型
- 新增员工咨询专家、员工咨询小助手、用户评价等页面 - 新增各类配置管理页面（医院、科室、疾病、短语等） - 新增咨询记录、异常事件、专家统计、结算等管理功能 - 新增员工端咨询小助手知识库页面 - 新增功能菜单规划文档 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Haiku 4.5
@@ -0,0 +1,468 @@
|
||||
<!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);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* 顶部导航 */
|
||||
.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);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.top-bar__right .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);cursor:pointer;}
|
||||
/* 侧边栏 */
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-menu{}
|
||||
.sidebar-menu__group{}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.sidebar-menu__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-menu__item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-menu__item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-menu__item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
/* 主内容 */
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
/* 页面头部 */
|
||||
.page-header{margin-bottom:20px;}
|
||||
.page-header__title{font-size:var(--font-xl);font-weight:600;color:var(--text-primary);}
|
||||
.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);color:var(--text-primary);outline:none;background:#fff;min-width:200px;}
|
||||
.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);color:var(--text-primary);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;cursor:pointer;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 12px;font-size:var(--font-xs);}
|
||||
/* 统计卡片 */
|
||||
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;box-shadow:var(--shadow-sm);}
|
||||
.stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.stat-card__value{font-size:var(--font-xxl);font-weight:700;color:var(--text-primary);margin-top:8px;}
|
||||
.stat-card__value.blue{color:var(--primary);}
|
||||
.stat-card__value.green{color:var(--success);}
|
||||
.stat-card__trend{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:4px;}
|
||||
/* 表格卡片 */
|
||||
.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__actions{display:flex;gap:8px;align-items:center;}
|
||||
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);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);color:var(--text-primary);border-bottom:1px solid var(--border);}
|
||||
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);}
|
||||
/* 分页 */
|
||||
.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);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link:hover{color:#40a9ff;}
|
||||
</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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<!-- [交互] 点击切换一级菜单 -->
|
||||
<a href="archive-personal.html" class="active">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<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>
|
||||
返回首页
|
||||
</div>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu">
|
||||
<div class="sidebar-menu__group">
|
||||
<div class="sidebar-menu__title">档案</div>
|
||||
<!-- [交互] 点击切换二级菜单 -->
|
||||
<a href="archive-personal.html" class="sidebar-menu__item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
个人咨询数据
|
||||
</a>
|
||||
<a href="archive-unit.html" class="sidebar-menu__item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
单位报表数据
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<main class="main">
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">员工总人数</div>
|
||||
<div class="stat-card__value">3,842</div>
|
||||
<div class="stat-card__trend">截至今日</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本年咨询专家总次数</div>
|
||||
<div class="stat-card__value blue">12,567</div>
|
||||
<div class="stat-card__trend">2026年度</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本年咨询小助手总次数</div>
|
||||
<div class="stat-card__value green">38,920</div>
|
||||
<div class="stat-card__trend">2026年度</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">有咨询记录员工数</div>
|
||||
<div class="stat-card__value">2,109</div>
|
||||
<div class="stat-card__trend">本年度活跃</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<!-- 双列面板级联选择器样式 -->
|
||||
<style>
|
||||
.org-select-wrap{position:relative;display:inline-block;}
|
||||
.org-trigger{height:36px;min-width:160px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 28px 0 12px;font-size:var(--font-sm);color:var(--text-primary);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;cursor:pointer;display:flex;align-items:center;user-select:none;white-space:nowrap;}
|
||||
.org-trigger.open,.org-trigger:hover{border-color:var(--primary);}
|
||||
.org-panel{display:none;position:absolute;top:40px;left:0;z-index:300;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);width:420px;}
|
||||
.org-panel.open{display:flex;}
|
||||
.org-col{flex:1;overflow-y:auto;max-height:240px;border-right:1px solid var(--border);}
|
||||
.org-col:last-child{border-right:none;}
|
||||
.org-col__title{padding:8px 14px;font-size:var(--font-xs);color:var(--text-placeholder);background:#FAFAFA;border-bottom:1px solid var(--border);font-weight:500;}
|
||||
.org-item{padding:9px 14px;font-size:var(--font-sm);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:4px;}
|
||||
.org-item:hover{background:#F0F8FF;color:var(--primary);}
|
||||
.org-item.active{background:#E6F7FF;color:var(--primary);font-weight:500;}
|
||||
.org-item.selected{color:var(--primary);}
|
||||
.org-item svg{flex-shrink:0;opacity:.45;}
|
||||
.org-item.active svg{opacity:1;}
|
||||
</style>
|
||||
|
||||
<div style="background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-sm);">
|
||||
<!-- 第一行：筛选条件 + 查询重置 -->
|
||||
<div style="display:flex;align-items:center;gap:12px;flex-wrap:nowrap;">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select" style="min-width:90px;">
|
||||
<option>2026年</option>
|
||||
<option>2025年</option>
|
||||
<option>2024年</option>
|
||||
<option>2023年</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- [交互] 点击展开双列面板，左列选单位，右列联动显示部门 -->
|
||||
<div class="filter-item">
|
||||
<label style="white-space:nowrap;">所属单位/部门</label>
|
||||
<div class="org-select-wrap" id="orgWrap">
|
||||
<div class="org-trigger" id="orgTrigger" onclick="toggleOrg()">全部单位/部门</div>
|
||||
<div class="org-panel" id="orgPanel">
|
||||
<div class="org-col" id="orgUnitCol">
|
||||
<div class="org-col__title">单位</div>
|
||||
<div class="org-item active" data-unit="" onclick="selectUnit(this,'全部单位/部门','')">
|
||||
全部单位/部门
|
||||
</div>
|
||||
<div class="org-item" data-unit="cy1" onclick="selectUnit(this,'采油一厂','cy1')">
|
||||
采油一厂
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M4.5 3l3 3-3 3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="org-item" data-unit="cy2" onclick="selectUnit(this,'采油二厂','cy2')">
|
||||
采油二厂
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M4.5 3l3 3-3 3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="org-item" data-unit="cy3" onclick="selectUnit(this,'采油三厂','cy3')">
|
||||
采油三厂
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M4.5 3l3 3-3 3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="org-item" data-unit="ktyf" onclick="selectUnit(this,'勘探开发研究院','ktyf')">
|
||||
勘探开发研究院
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M4.5 3l3 3-3 3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="org-item" data-unit="jg" onclick="selectUnit(this,'机关事务服务中心','jg')">
|
||||
机关事务服务中心
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M4.5 3l3 3-3 3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="org-col" id="orgDeptCol">
|
||||
<div class="org-col__title">部门</div>
|
||||
<div class="org-item" style="color:var(--text-placeholder);cursor:default;">请先选择单位</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工姓名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工姓名" style="width:120px;min-width:unset;">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>员工编号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入员工编号" style="width:120px;min-width:unset;">
|
||||
</div>
|
||||
<button class="btn btn-primary" style="white-space:nowrap;flex-shrink:0;">
|
||||
<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" style="white-space:nowrap;flex-shrink:0;" onclick="resetOrg()">重置</button>
|
||||
</div>
|
||||
<!-- 第二行：导出操作 -->
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-top:12px;">
|
||||
<!-- [交互] 点击导出列表数据 -->
|
||||
<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">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var orgDeptMap={
|
||||
'cy1':['全部部门','生产一队','生产二队','安全环保部','综合管理部'],
|
||||
'cy2':['全部部门','生产一队','生产二队','综合管理部','安全环保部'],
|
||||
'cy3':['全部部门','生产一队','生产二队','综合管理部','安全环保部'],
|
||||
'ktyf':['全部部门','地质研究室','物探研究室','综合管理部','科研管理处'],
|
||||
'jg':['全部部门','综合管理部','财务部','后勤服务部','行政事务管理处']
|
||||
};
|
||||
var orgSelected={unit:'',dept:''};
|
||||
|
||||
function toggleOrg(){
|
||||
var panel=document.getElementById('orgPanel');
|
||||
var trigger=document.getElementById('orgTrigger');
|
||||
var open=panel.classList.toggle('open');
|
||||
trigger.classList.toggle('open',open);
|
||||
if(open) document.addEventListener('click',closeOrgOutside,true);
|
||||
}
|
||||
function closeOrgOutside(e){
|
||||
if(!document.getElementById('orgWrap').contains(e.target)){
|
||||
document.getElementById('orgPanel').classList.remove('open');
|
||||
document.getElementById('orgTrigger').classList.remove('open');
|
||||
document.removeEventListener('click',closeOrgOutside,true);
|
||||
}
|
||||
}
|
||||
function selectUnit(el,unitName,unitKey){
|
||||
// 高亮单位列
|
||||
document.querySelectorAll('#orgUnitCol .org-item').forEach(function(n){n.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
orgSelected.unit=unitKey;
|
||||
orgSelected.dept='';
|
||||
// 渲染部门列
|
||||
var deptCol=document.getElementById('orgDeptCol');
|
||||
if(!unitKey){
|
||||
deptCol.innerHTML='<div class="org-col__title">部门</div><div class="org-item" style="color:var(--text-placeholder);cursor:default;">请先选择单位</div>';
|
||||
document.getElementById('orgTrigger').textContent='全部单位/部门';
|
||||
document.getElementById('orgPanel').classList.remove('open');
|
||||
document.getElementById('orgTrigger').classList.remove('open');
|
||||
document.removeEventListener('click',closeOrgOutside,true);
|
||||
return;
|
||||
}
|
||||
var depts=orgDeptMap[unitKey]||[];
|
||||
deptCol.innerHTML='<div class="org-col__title">部门</div>';
|
||||
depts.forEach(function(d,i){
|
||||
var item=document.createElement('div');
|
||||
item.className='org-item'+(i===0?' active':'');
|
||||
item.textContent=d;
|
||||
item.onclick=function(){ selectDept(this,unitName,d); };
|
||||
deptCol.appendChild(item);
|
||||
});
|
||||
document.getElementById('orgTrigger').textContent=unitName;
|
||||
}
|
||||
function selectDept(el,unitName,deptName){
|
||||
document.querySelectorAll('#orgDeptCol .org-item').forEach(function(n){n.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
orgSelected.dept=deptName;
|
||||
var label=deptName==='全部部门'?unitName:unitName+' / '+deptName;
|
||||
document.getElementById('orgTrigger').textContent=label;
|
||||
document.getElementById('orgPanel').classList.remove('open');
|
||||
document.getElementById('orgTrigger').classList.remove('open');
|
||||
document.removeEventListener('click',closeOrgOutside,true);
|
||||
}
|
||||
function resetOrg(){
|
||||
orgSelected={unit:'',dept:''};
|
||||
document.getElementById('orgTrigger').textContent='全部单位/部门';
|
||||
document.querySelectorAll('#orgUnitCol .org-item').forEach(function(n,i){n.classList.toggle('active',i===0);});
|
||||
var deptCol=document.getElementById('orgDeptCol');
|
||||
deptCol.innerHTML='<div class="org-col__title">部门</div><div class="org-item" style="color:var(--text-placeholder);cursor:default;">请先选择单位</div>';
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">员工咨询数据列表</div>
|
||||
<div class="table-card__actions"></div>
|
||||
</div>
|
||||
<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>张伟</td>
|
||||
<td>CQ001234</td>
|
||||
<td>男</td>
|
||||
<td>34</td>
|
||||
<td>采油一厂</td>
|
||||
<td>生产一队</td>
|
||||
<td><span class="tag tag-blue">12次</span></td>
|
||||
<td><span class="tag tag-green">45次</span></td>
|
||||
<td>2026-04-08</td>
|
||||
<!-- [交互] 点击查看该员工历年咨询明细 -->
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>李明</td>
|
||||
<td>CQ002571</td>
|
||||
<td>男</td>
|
||||
<td>41</td>
|
||||
<td>采油二厂</td>
|
||||
<td>综合管理部</td>
|
||||
<td><span class="tag tag-blue">8次</span></td>
|
||||
<td><span class="tag tag-green">32次</span></td>
|
||||
<td>2026-04-07</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>王芳</td>
|
||||
<td>CQ003388</td>
|
||||
<td>女</td>
|
||||
<td>29</td>
|
||||
<td>勘探开发研究院</td>
|
||||
<td>地质研究室</td>
|
||||
<td><span class="tag tag-blue">5次</span></td>
|
||||
<td><span class="tag tag-green">28次</span></td>
|
||||
<td>2026-04-06</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>刘洋</td>
|
||||
<td>CQ004102</td>
|
||||
<td>男</td>
|
||||
<td>38</td>
|
||||
<td>采油三厂</td>
|
||||
<td>生产二队</td>
|
||||
<td><span class="tag tag-blue">3次</span></td>
|
||||
<td><span class="tag tag-green">19次</span></td>
|
||||
<td>2026-04-05</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>赵静</td>
|
||||
<td>CQ005667</td>
|
||||
<td>女</td>
|
||||
<td>32</td>
|
||||
<td>机关事务服务中心</td>
|
||||
<td>综合管理部</td>
|
||||
<td><span class="tag tag-blue">0次</span></td>
|
||||
<td><span class="tag tag-green">7次</span></td>
|
||||
<td>2026-03-28</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>陈磊</td>
|
||||
<td>CQ006890</td>
|
||||
<td>男</td>
|
||||
<td>45</td>
|
||||
<td>采油一厂</td>
|
||||
<td>安全环保部</td>
|
||||
<td><span class="tag tag-blue">16次</span></td>
|
||||
<td><span class="tag tag-green">53次</span></td>
|
||||
<td>2026-04-09</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孙丽</td>
|
||||
<td>CQ007234</td>
|
||||
<td>女</td>
|
||||
<td>27</td>
|
||||
<td>采油二厂</td>
|
||||
<td>生产一队</td>
|
||||
<td><span class="tag tag-blue">2次</span></td>
|
||||
<td><span class="tag tag-green">11次</span></td>
|
||||
<td>2026-04-03</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>周强</td>
|
||||
<td>CQ008456</td>
|
||||
<td>男</td>
|
||||
<td>36</td>
|
||||
<td>采油三厂</td>
|
||||
<td>生产二队</td>
|
||||
<td><span class="tag tag-blue">9次</span></td>
|
||||
<td><span class="tag tag-green">24次</span></td>
|
||||
<td>2026-04-08</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span>共 3842 条</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">385</button>
|
||||
<button class="page-btn">›</button>
|
||||
<span>每页</span>
|
||||
<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,437 @@
|
||||
<!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);--shadow-md:0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.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);}
|
||||
.top-bar__right .btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.top-bar__right .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);cursor:pointer;}
|
||||
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:240px;background:#001529;overflow-y:auto;z-index:90;}
|
||||
.sidebar-menu__title{color:rgba(255,255,255,0.35);font-size:var(--font-xs);padding:16px 24px 8px;letter-spacing:.5px;}
|
||||
.sidebar-menu__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-menu__item:hover{color:#fff;background:rgba(255,255,255,0.06);}
|
||||
.sidebar-menu__item.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-menu__item svg{width:16px;height:16px;flex-shrink:0;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;min-height:calc(100vh - 56px);}
|
||||
.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:200px;}
|
||||
.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;cursor:pointer;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);}
|
||||
/* 汇总卡片 */
|
||||
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;box-shadow:var(--shadow-sm);}
|
||||
.stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.stat-card__value{font-size:var(--font-xxl);font-weight:700;margin-top:8px;}
|
||||
.blue{color:var(--primary);}
|
||||
.green{color:var(--success);}
|
||||
.orange{color:var(--warning);}
|
||||
.stat-card__trend{font-size:var(--font-xs);color:var(--text-placeholder);margin-top:4px;}
|
||||
.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{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);}
|
||||
thead th.sortable{cursor:pointer;}
|
||||
thead th.sortable:hover{color:var(--primary);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#F8FBFF;}
|
||||
.rank-num{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--font-xs);font-weight:700;}
|
||||
.rank-1{background:#FAAD14;color:#fff;}
|
||||
.rank-2{background:#C0C0C0;color:#fff;}
|
||||
.rank-3{background:#CD7F32;color:#fff;}
|
||||
.rank-n{background:var(--background);color:var(--text-secondary);}
|
||||
.progress-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;min-width:100px;}
|
||||
.progress-fill{height:100%;background:var(--primary);border-radius:3px;}
|
||||
.amount{font-weight:600;color:var(--text-primary);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link:hover{color:#40a9ff;}
|
||||
/* Tab */
|
||||
.tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px;}
|
||||
.tab-item{padding:10px 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);font-weight:600;border-bottom-color:var(--primary);}
|
||||
.tab-panel{display:none;}
|
||||
.tab-panel.active{display:block;}
|
||||
</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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html" class="active">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<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>
|
||||
返回首页
|
||||
</div>
|
||||
<div class="avatar">管</div>
|
||||
<span style="color:rgba(255,255,255,0.65);">系统管理员 ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-menu">
|
||||
<div class="sidebar-menu__title">档案</div>
|
||||
<a href="archive-personal.html" class="sidebar-menu__item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
个人咨询数据
|
||||
</a>
|
||||
<a href="archive-unit.html" class="sidebar-menu__item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 7h6M5 10h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
单位报表数据
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">统计单位数</div>
|
||||
<div class="stat-card__value">28</div>
|
||||
<div class="stat-card__trend">全部所属单位</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本年度咨询专家总次数</div>
|
||||
<div class="stat-card__value blue">12,567</div>
|
||||
<div class="stat-card__trend">2026年度汇总</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本年度咨询小助手总次数</div>
|
||||
<div class="stat-card__value green">38,920</div>
|
||||
<div class="stat-card__trend">2026年度汇总</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本年度咨询总费用</div>
|
||||
<div class="stat-card__value orange">¥ 248,600</div>
|
||||
<div class="stat-card__trend">2026年度汇总</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] Tab 切换单位维度 / 部门维度 -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab-item active" onclick="switchTab('unit',this)">二级单位</div>
|
||||
<div class="tab-item" onclick="switchTab('dept',this)">三级单位</div>
|
||||
</div>
|
||||
|
||||
<!-- 单位维度面板 -->
|
||||
<div class="tab-panel active" id="panel-unit">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option>2026年</option>
|
||||
<option>2025年</option>
|
||||
<option>2024年</option>
|
||||
<option>2023年</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>单位名称</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>全部单位</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采油三厂</option>
|
||||
<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" 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>
|
||||
<button class="btn btn-default" style="margin-left:auto;">
|
||||
<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">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">二级单位咨询数据列表</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>排名</th>
|
||||
<th>单位名称</th>
|
||||
<th>员工人数</th>
|
||||
<th class="sortable">咨询专家次数 ↕</th>
|
||||
<th class="sortable">咨询小助手次数 ↕</th>
|
||||
<th>咨询占比</th>
|
||||
<th class="sortable">咨询费用（元）↕</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-1">1</span></td>
|
||||
<td>采油一厂</td><td>623</td><td>2,341</td><td>7,820</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:72%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">72%</span></div></td>
|
||||
<td><span class="amount">¥ 46,820</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-2">2</span></td>
|
||||
<td>采油二厂</td><td>558</td><td>1,986</td><td>6,540</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:65%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">65%</span></div></td>
|
||||
<td><span class="amount">¥ 39,720</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-3">3</span></td>
|
||||
<td>采油三厂</td><td>502</td><td>1,675</td><td>5,890</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:58%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">58%</span></div></td>
|
||||
<td><span class="amount">¥ 33,500</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">4</span></td>
|
||||
<td>勘探开发研究院</td><td>389</td><td>1,203</td><td>4,210</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:45%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">45%</span></div></td>
|
||||
<td><span class="amount">¥ 24,060</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">5</span></td>
|
||||
<td>机关事务服务中心</td><td>312</td><td>876</td><td>3,150</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:38%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">38%</span></div></td>
|
||||
<td><span class="amount">¥ 17,520</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">6</span></td>
|
||||
<td>天然气开采厂</td><td>278</td><td>743</td><td>2,680</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:32%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">32%</span></div></td>
|
||||
<td><span class="amount">¥ 14,860</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">7</span></td>
|
||||
<td>长庆石化公司</td><td>245</td><td>612</td><td>2,190</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:28%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">28%</span></div></td>
|
||||
<td><span class="amount">¥ 12,240</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">8</span></td>
|
||||
<td>工程技术研究院</td><td>198</td><td>487</td><td>1,730</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:22%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">22%</span></div></td>
|
||||
<td><span class="amount">¥ 9,740</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>20条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 部门维度面板 -->
|
||||
<div class="tab-panel" id="panel-dept">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>年份</label>
|
||||
<select class="filter-select">
|
||||
<option>2026年</option>
|
||||
<option>2025年</option>
|
||||
<option>2024年</option>
|
||||
<option>2023年</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>所属单位</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>全部单位</option>
|
||||
<option>采油一厂</option>
|
||||
<option>采油二厂</option>
|
||||
<option>采油三厂</option>
|
||||
<option>勘探开发研究院</option>
|
||||
<option>机关事务服务中心</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>部门名称</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>全部部门</option>
|
||||
<option>生产一队</option>
|
||||
<option>生产二队</option>
|
||||
<option>综合管理部</option>
|
||||
<option>安全环保部</option>
|
||||
<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" 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>
|
||||
<button class="btn btn-default" style="margin-left:auto;">
|
||||
<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">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">三级单位咨询数据列表</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>排名</th>
|
||||
<th>所属单位</th>
|
||||
<th>部门名称</th>
|
||||
<th>员工人数</th>
|
||||
<th class="sortable">咨询专家次数 ↕</th>
|
||||
<th class="sortable">咨询小助手次数 ↕</th>
|
||||
<th>咨询占比</th>
|
||||
<th class="sortable">咨询费用（元）↕</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-1">1</span></td>
|
||||
<td>采油一厂</td><td>生产一队</td><td>186</td><td>712</td><td>2,430</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:68%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">68%</span></div></td>
|
||||
<td><span class="amount">¥ 14,240</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-2">2</span></td>
|
||||
<td>采油一厂</td><td>生产二队</td><td>174</td><td>658</td><td>2,180</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:63%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">63%</span></div></td>
|
||||
<td><span class="amount">¥ 13,160</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-3">3</span></td>
|
||||
<td>采油二厂</td><td>生产一队</td><td>163</td><td>598</td><td>1,960</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:57%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">57%</span></div></td>
|
||||
<td><span class="amount">¥ 11,960</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">4</span></td>
|
||||
<td>采油三厂</td><td>生产二队</td><td>158</td><td>543</td><td>1,820</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:52%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">52%</span></div></td>
|
||||
<td><span class="amount">¥ 10,860</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">5</span></td>
|
||||
<td>勘探开发研究院</td><td>地质研究室</td><td>142</td><td>487</td><td>1,640</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:47%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">47%</span></div></td>
|
||||
<td><span class="amount">¥ 9,740</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">6</span></td>
|
||||
<td>采油一厂</td><td>安全环保部</td><td>136</td><td>432</td><td>1,450</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:43%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">43%</span></div></td>
|
||||
<td><span class="amount">¥ 8,640</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">7</span></td>
|
||||
<td>采油二厂</td><td>综合管理部</td><td>128</td><td>378</td><td>1,260</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:38%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">38%</span></div></td>
|
||||
<td><span class="amount">¥ 7,560</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="rank-num rank-n">8</span></td>
|
||||
<td>机关事务服务中心</td><td>综合管理部</td><td>115</td><td>312</td><td>1,080</td>
|
||||
<td><div style="display:flex;align-items:center;gap:8px;"><div class="progress-bar"><div class="progress-fill" style="width:32%"></div></div><span style="font-size:var(--font-xs);color:var(--text-secondary);">32%</span></div></td>
|
||||
<td><span class="amount">¥ 6,240</span></td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span>共 142 条</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>
|
||||
<span>每页</span>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>20条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchTab(key, el) {
|
||||
document.querySelectorAll('.tab-item').forEach(function(t){t.classList.remove('active');});
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p){p.classList.remove('active');});
|
||||
el.classList.add('active');
|
||||
document.getElementById('panel-'+key).classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,96 @@
|
||||
<!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:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;min-height:100vh;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-lg:17px;--radius-sm:4px;--radius-md:8px;}
|
||||
.dialog{background:#fff;border-radius:var(--radius-md);width:520px;box-shadow:0 8px 32px rgba(0,0,0,0.2);}
|
||||
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.dialog__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.dialog__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.dialog__close:hover{background:#F5F5F5;}
|
||||
.dialog__body{padding:24px;}
|
||||
.dialog__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;}
|
||||
.required{color:#FF4D4F;}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;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;}
|
||||
.num-input{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;width:120px;}
|
||||
.num-input__btn{width:36px;height:40px;border:none;background:#FAFAFA;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);}
|
||||
.num-input__btn:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.num-input__val{flex:1;border:none;text-align:center;font-size:var(--font-sm);outline:none;height:40px;}
|
||||
.switch-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
|
||||
.switch{width:40px;height:22px;border-radius:11px;background:#E8E8E8;cursor:pointer;position:relative;transition:.2s;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
|
||||
.switch.on::after{left:20px;}
|
||||
.switch-label{font-size:var(--font-sm);}
|
||||
.hint{font-size:var(--font-xs);color:#999;margin-top:4px;}
|
||||
.btn{height:36px;padding:0 20px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;}
|
||||
.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);}
|
||||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<div class="dialog__title">新增科室</div>
|
||||
<button class="dialog__close" onclick="window.close()">✕</button>
|
||||
</div>
|
||||
<div class="dialog__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 科室名称</div>
|
||||
<input class="form-input" type="text" placeholder="请输入科室名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 科室分类</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择科室分类</option>
|
||||
<option>内科</option>
|
||||
<option>外科</option>
|
||||
<option>妇产科</option>
|
||||
<option>儿科</option>
|
||||
<option>五官科</option>
|
||||
<option>皮肤科</option>
|
||||
<option>精神科</option>
|
||||
<option>中医科</option>
|
||||
<option>其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">列表排序序号</div>
|
||||
<div class="num-input">
|
||||
<button class="num-input__btn" onclick="let v=this.nextElementSibling;v.value=Math.max(1,+v.value-1)">−</button>
|
||||
<input class="num-input__val" type="number" value="1" min="1">
|
||||
<button class="num-input__btn" onclick="let v=this.previousElementSibling;v.value=+v.value+1">+</button>
|
||||
</div>
|
||||
<div class="hint">数字越小越靠前显示</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">显示配置</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
<span class="switch-label">移动端显示</span>
|
||||
</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch" onclick="this.classList.toggle('on')"></div>
|
||||
<span class="switch-label">列表置顶</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="btn btn-default" onclick="window.close()">取消</button>
|
||||
<button class="btn btn-primary">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,344 @@
|
||||
<!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;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--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;}
|
||||
.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:200px;}
|
||||
.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{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);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);}
|
||||
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-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.switch{width:36px;height:20px;border-radius:10px;background:#E8E8E8;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;}
|
||||
.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);}
|
||||
.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);}
|
||||
.expert-count{display:inline-flex;align-items:center;gap:4px;font-size:var(--font-sm);color:var(--primary);font-weight:500;}
|
||||
/* 抽屉弹窗 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);z-index:999;transition:background .3s;pointer-events:none;}
|
||||
.drawer-overlay.open{background:rgba(0,0,0,0.45);pointer-events:auto;}
|
||||
.drawer{position:fixed;top:0;right:-400px;bottom:0;width:400px;background:#fff;box-shadow:-2px 0 8px rgba(0,0,0,0.15);z-index:1000;transition:right .3s;display:flex;flex-direction:column;}
|
||||
.drawer.open{right:0;}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.drawer__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.drawer__close:hover{background:#F5F5F5;}
|
||||
.drawer__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.drawer__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:#FF4D4F;}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-textarea{width:100%;height:80px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:var(--font-sm);outline:none;resize:vertical;}
|
||||
.form-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;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;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.switch-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
.switch-row .switch{width:40px;height:22px;border-radius:11px;background:#E8E8E8;cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch-row .switch.on{background:var(--primary);}
|
||||
.switch-row .switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
|
||||
.switch-row .switch.on::after{left:20px;}
|
||||
.switch-label{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.num-input{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;width:120px;}
|
||||
.num-input__btn{width:36px;height:40px;border:none;background:#FAFAFA;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);}
|
||||
.num-input__btn:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.num-input__val{flex:1;border:none;text-align:center;font-size:var(--font-sm);outline:none;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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-department.html" class="active">基础配置</a>
|
||||
<a href="history-expert.html">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<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>
|
||||
返回首页
|
||||
</div>
|
||||
<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="config-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="config-department.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/><rect x="9" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="9" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/><rect x="9" y="9" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
科室配置
|
||||
</a>
|
||||
<a href="config-disease.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a6 6 0 100 12A6 6 0 008 2zM8 5v3l2 2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
疾病配置
|
||||
</a>
|
||||
<a href="config-notice.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 3h10v8H3zM6 11v2M10 11v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
咨询须知
|
||||
</a>
|
||||
<a href="config-phrase.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 7h8M2 10h6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
常用语
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<div class="drawer-overlay" id="dept-drawer-overlay" onclick="closeDrawer()"></div>
|
||||
<div class="drawer" id="dept-drawer">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title">新增科室</div>
|
||||
<button class="drawer__close" onclick="closeDrawer()">✕</button>
|
||||
</div>
|
||||
<div class="drawer__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 科室名称</div>
|
||||
<input class="form-input" type="text" placeholder="请输入科室名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">科室分类</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择科室分类</option>
|
||||
<option>内科</option>
|
||||
<option>外科</option>
|
||||
<option>妇产科</option>
|
||||
<option>儿科</option>
|
||||
<option>五官科</option>
|
||||
<option>其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">科室简介</div>
|
||||
<textarea class="form-textarea" placeholder="请输入科室简介"></textarea>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">置顶</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch" onclick="this.classList.toggle('on')"></div>
|
||||
<span class="switch-label">是否置顶</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">排序</div>
|
||||
<div class="num-input">
|
||||
<button class="num-input__btn" onclick="let v=this.nextElementSibling;v.value=Math.max(1,+v.value-1)">−</button>
|
||||
<input class="num-input__val" type="number" value="1" min="1">
|
||||
<button class="num-input__btn" onclick="let v=this.previousElementSibling;v.value=+v.value+1">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer__footer">
|
||||
<button class="btn btn-default" onclick="closeDrawer()">取消</button>
|
||||
<button class="btn btn-primary">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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-primary" onclick="openDrawer()">
|
||||
<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>
|
||||
<!-- [交互] 点击查看导出任务列表 -->
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="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);">共 32 个科室</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>科室名称</th>
|
||||
<th>科室分类</th>
|
||||
<th>关联专家数</th>
|
||||
<th>置顶</th>
|
||||
<th>排序</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-weight:500;">心血管内科</td>
|
||||
<td>内科</td>
|
||||
<td><span class="expert-count">12 位专家</span></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')" title="点击切换置顶状态"></div></td>
|
||||
<td>1</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">神经内科</td>
|
||||
<td>内科</td>
|
||||
<td><span class="expert-count">8 位专家</span></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>2</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">骨科</td>
|
||||
<td>外科</td>
|
||||
<td><span class="expert-count">6 位专家</span></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>3</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">消化内科</td>
|
||||
<td>内科</td>
|
||||
<td><span class="expert-count">9 位专家</span></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>4</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">内分泌科</td>
|
||||
<td>内科</td>
|
||||
<td><span class="expert-count">5 位专家</span></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>5</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">眼科</td>
|
||||
<td>五官科</td>
|
||||
<td><span class="expert-count">4 位专家</span></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>6</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">妇科</td>
|
||||
<td>妇产科</td>
|
||||
<td><span class="expert-count">7 位专家</span></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>7</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:500;">皮肤科</td>
|
||||
<td>外科</td>
|
||||
<td><span class="expert-count">3 位专家</span></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>8</td>
|
||||
<td><div style="display:flex;gap:8px;"><span class="link" onclick="openDrawer()">编辑</span><span class="link-danger">删除</span></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
function openDrawer(){
|
||||
const drawer=document.getElementById('dept-drawer');
|
||||
const overlay=document.getElementById('dept-drawer-overlay');
|
||||
drawer.classList.add('open');
|
||||
overlay.classList.add('open');
|
||||
}
|
||||
|
||||
function closeDrawer(){
|
||||
const drawer=document.getElementById('dept-drawer');
|
||||
const overlay=document.getElementById('dept-drawer-overlay');
|
||||
drawer.classList.remove('open');
|
||||
overlay.classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!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:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;min-height:100vh;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-lg:17px;--radius-sm:4px;--radius-md:8px;}
|
||||
.dialog{background:#fff;border-radius:var(--radius-md);width:520px;box-shadow:0 8px 32px rgba(0,0,0,0.2);}
|
||||
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.dialog__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.dialog__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.dialog__close:hover{background:#F5F5F5;}
|
||||
.dialog__body{padding:24px;}
|
||||
.dialog__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;}
|
||||
.required{color:#FF4D4F;}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;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;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.num-input{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;width:120px;}
|
||||
.num-input__btn{width:36px;height:40px;border:none;background:#FAFAFA;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);}
|
||||
.num-input__btn:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.num-input__val{flex:1;border:none;text-align:center;font-size:var(--font-sm);outline:none;height:40px;}
|
||||
.switch-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
|
||||
.switch{width:40px;height:22px;border-radius:11px;background:#E8E8E8;cursor:pointer;position:relative;transition:.2s;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
|
||||
.switch.on::after{left:20px;}
|
||||
.hint{font-size:var(--font-xs);color:#999;margin-top:4px;}
|
||||
.btn{height:36px;padding:0 20px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;}
|
||||
.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);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<div class="dialog__title">新增疾病</div>
|
||||
<button class="dialog__close" onclick="window.close()">✕</button>
|
||||
</div>
|
||||
<div class="dialog__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 疾病名称</div>
|
||||
<input class="form-input" type="text" placeholder="请输入疾病标准名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">别名/俗称</div>
|
||||
<input class="form-input" type="text" placeholder="请输入疾病别名或俗称（选填）">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 所属科室</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择所属科室</option>
|
||||
<option>心血管内科</option>
|
||||
<option>神经内科</option>
|
||||
<option>内分泌科</option>
|
||||
<option>消化内科</option>
|
||||
<option>骨科</option>
|
||||
<option>眼科</option>
|
||||
<option>妇科</option>
|
||||
<option>皮肤科</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">列表排序序号</div>
|
||||
<div class="num-input">
|
||||
<button class="num-input__btn" onclick="let v=this.nextElementSibling;v.value=Math.max(1,+v.value-1)">−</button>
|
||||
<input class="num-input__val" type="number" value="1" min="1">
|
||||
<button class="num-input__btn" onclick="let v=this.previousElementSibling;v.value=+v.value+1">+</button>
|
||||
</div>
|
||||
<div class="hint">数字越小越靠前显示</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">显示配置</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
<span style="font-size:var(--font-sm);">移动端显示</span>
|
||||
</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch" onclick="this.classList.toggle('on')"></div>
|
||||
<span style="font-size:var(--font-sm);">列表置顶</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="btn btn-default" onclick="window.close()">取消</button>
|
||||
<button class="btn btn-primary">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,359 @@
|
||||
<!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;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--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;font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.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;}
|
||||
.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;}
|
||||
|
||||
.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:200px;}
|
||||
.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{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);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);}
|
||||
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-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
|
||||
.switch{width:36px;height:20px;border-radius:10px;background:#E8E8E8;cursor:pointer;position:relative;transition:.2s;}
|
||||
.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;}
|
||||
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
|
||||
.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);}
|
||||
|
||||
/* 抽屉样式 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);z-index:999;transition:background .3s;pointer-events:none;}
|
||||
.drawer-overlay.open{background:rgba(0,0,0,0.45);pointer-events:auto;}
|
||||
.drawer{position:fixed;top:0;right:-400px;bottom:0;width:400px;background:#fff;box-shadow:-2px 0 8px rgba(0,0,0,0.15);z-index:1000;transition:right .3s;display:flex;flex-direction:column;}
|
||||
.drawer.open{right:0;}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.drawer__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.drawer__close:hover{background:#F5F5F5;}
|
||||
.drawer__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.drawer__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:#FF4D4F;}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;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;}
|
||||
.form-textarea{width:100%;height:80px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;resize:none;}
|
||||
.form-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
|
||||
.switch-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
.switch-row .switch{width:40px;height:22px;border-radius:11px;background:#E8E8E8;cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch-row .switch.on{background:var(--primary);}
|
||||
.switch-row .switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;}
|
||||
.switch-row .switch.on::after{left:20px;}
|
||||
.switch-label{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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html" class="active">基础配置</a>
|
||||
<a href="history-expert.html">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<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>
|
||||
返回首页
|
||||
</div>
|
||||
<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="config-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"/></svg>
|
||||
医院配置
|
||||
</a>
|
||||
<a href="config-department.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/><rect x="9" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="9" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/><rect x="9" y="9" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
科室配置
|
||||
</a>
|
||||
<a href="config-disease.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a6 6 0 100 12A6 6 0 008 2zM8 5v3l2 2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
疾病配置
|
||||
</a>
|
||||
<a href="config-notice.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 3h10v8H3zM6 11v2M10 11v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
咨询须知
|
||||
</a>
|
||||
<a href="config-phrase.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 7h8M2 10h6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
常用语
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<div class="drawer-overlay" id="drawer-overlay" onclick="closeDrawer()"></div>
|
||||
<div class="drawer" id="drawer">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title" id="drawer-title">新增疾病</div>
|
||||
<button class="drawer__close" onclick="closeDrawer()">✕</button>
|
||||
</div>
|
||||
<div class="drawer__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 疾病名称</div>
|
||||
<input class="form-input" type="text" placeholder="请输入疾病名称">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 所属科室</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择科室</option>
|
||||
<option>心血管内科</option>
|
||||
<option>神经内科</option>
|
||||
<option>内分泌科</option>
|
||||
<option>消化内科</option>
|
||||
<option>骨科</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">置顶</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch" onclick="this.classList.toggle('on')"></div>
|
||||
<span class="switch-label">是否置顶</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">排序序号</div>
|
||||
<input class="form-input" type="number" placeholder="数字越小越靠前" value="99">
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer__footer">
|
||||
<button class="btn btn-default" onclick="closeDrawer()">取消</button>
|
||||
<button class="btn btn-primary">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" style="min-width:150px;">
|
||||
<option>全部科室</option>
|
||||
<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>
|
||||
</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-primary" onclick="openDrawer('add')">
|
||||
<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>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="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);">共 86 条疾病</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<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="tag tag-blue">心血管内科</span></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">糖尿病</td>
|
||||
<td><span class="tag tag-blue">内分泌科</span></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">冠心病</td>
|
||||
<td><span class="tag tag-blue">心血管内科</span></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">脑梗死</td>
|
||||
<td><span class="tag tag-blue">神经内科</span></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">颈椎病</td>
|
||||
<td><span class="tag tag-blue">骨科</span></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td style="font-weight:500;">慢性胃炎</td>
|
||||
<td><span class="tag tag-blue">消化内科</span></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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">…</button>
|
||||
<button class="page-btn">9</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>
|
||||
|
||||
<script>
|
||||
function openDrawer(type) {
|
||||
const drawer = document.getElementById('drawer');
|
||||
const overlay = document.getElementById('drawer-overlay');
|
||||
const title = document.getElementById('drawer-title');
|
||||
|
||||
title.innerText = type === 'add' ? '新增疾病' : '编辑疾病';
|
||||
drawer.classList.add('open');
|
||||
overlay.classList.add('open');
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
const drawer = document.getElementById('drawer');
|
||||
const overlay = document.getElementById('drawer-overlay');
|
||||
drawer.classList.remove('open');
|
||||
overlay.classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,126 @@
|
||||
<!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:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;min-height:100vh;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--radius-sm:4px;--radius-md:8px;}
|
||||
.dialog{background:#fff;border-radius:var(--radius-md);width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,0.2);}
|
||||
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.dialog__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.dialog__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.dialog__close:hover{background:#F5F5F5;}
|
||||
.dialog__body{padding:24px;}
|
||||
.dialog__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;}
|
||||
.form-label .required{color:#FF4D4F;}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-textarea{width:100%;height:80px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:var(--font-sm);outline:none;resize:vertical;}
|
||||
.form-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;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;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
.switch-row{display:flex;align-items:center;gap:12px;}
|
||||
.switch{width:40px;height:22px;border-radius:11px;background:#E8E8E8;cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch.on{background:var(--primary);}
|
||||
.switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
|
||||
.switch.on::after{left:20px;}
|
||||
.switch-label{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.num-input{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;width:120px;}
|
||||
.num-input__btn{width:36px;height:40px;border:none;background:#FAFAFA;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);}
|
||||
.num-input__btn:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.num-input__val{flex:1;border:none;text-align:center;font-size:var(--font-sm);outline:none;height:40px;}
|
||||
.btn{height:36px;padding:0 20px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;}
|
||||
.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);}
|
||||
.hint{font-size:var(--font-xs);color:#999;margin-top:4px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- [交互] 医院配置 新增/编辑弹窗 -->
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<div class="dialog__title">新增医院</div>
|
||||
<button class="dialog__close" onclick="window.close()">✕</button>
|
||||
</div>
|
||||
<div class="dialog__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 医院名称</div>
|
||||
<input class="form-input" type="text" placeholder="请输入医院全称">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 医院等级</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择医院等级</option>
|
||||
<option>三级甲等</option>
|
||||
<option>三级</option>
|
||||
<option>二级甲等</option>
|
||||
<option>二级</option>
|
||||
<option>一级</option>
|
||||
<option>未定级</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 医院类型</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择医院类型</option>
|
||||
<option>综合医院</option>
|
||||
<option>专科医院</option>
|
||||
<option>中医院</option>
|
||||
<option>社区卫生服务中心</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 医院地址</div>
|
||||
<input class="form-input" type="text" placeholder="请输入详细地址（省市区+街道）">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">医院简介</div>
|
||||
<textarea class="form-textarea" placeholder="请输入医院简介，支持200字以内..."></textarea>
|
||||
<div class="hint">0 / 200</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="form-label">列表排序序号</div>
|
||||
<div class="num-input">
|
||||
<button class="num-input__btn" onclick="let v=this.nextElementSibling;v.value=Math.max(1,+v.value-1)">−</button>
|
||||
<input class="num-input__val" type="number" value="1" min="1">
|
||||
<button class="num-input__btn" onclick="let v=this.previousElementSibling;v.value=+v.value+1">+</button>
|
||||
</div>
|
||||
<div class="hint">数字越小越靠前显示</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">显示配置</div>
|
||||
<div style="display:flex;flex-direction:column;gap:12px;">
|
||||
<div class="switch-row">
|
||||
<!-- [交互] 切换移动端显示状态 -->
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
<span class="switch-label">移动端显示</span>
|
||||
<span style="font-size:var(--font-xs);color:#999;">（关闭后员工端搜索医院时不展示该医院）</span>
|
||||
</div>
|
||||
<div class="switch-row">
|
||||
<!-- [交互] 切换置顶状态 -->
|
||||
<div class="switch" onclick="this.classList.toggle('on')"></div>
|
||||
<span class="switch-label">列表置顶</span>
|
||||
<span style="font-size:var(--font-xs);color:#999;">（开启后该医院将固定在列表顶部展示）</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="btn btn-default" onclick="window.close()">取消</button>
|
||||
<button class="btn btn-primary">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,557 @@
|
||||
<!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;}
|
||||
.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:200px;}
|
||||
.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);}
|
||||
.btn-danger-ghost{background:#fff;color:var(--danger);border:1px solid var(--danger);}
|
||||
.btn-danger-ghost:hover{background:#FFF1F0;}
|
||||
.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{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);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);}
|
||||
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);}
|
||||
.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);}
|
||||
.hospital-level{font-weight:500;}
|
||||
.level-3a{color:#722ED1;}
|
||||
.level-3{color:var(--primary);}
|
||||
.level-2{color:var(--success);}
|
||||
.level-1{color:var(--text-secondary);}
|
||||
/* 抽屉弹窗 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);z-index:999;transition:background .3s;pointer-events:none;}
|
||||
.drawer-overlay.open{background:rgba(0,0,0,0.45);pointer-events:auto;}
|
||||
.drawer{position:fixed;top:0;right:-400px;bottom:0;width:400px;background:#fff;box-shadow:-2px 0 8px rgba(0,0,0,0.15);z-index:1000;transition:right .3s;display:flex;flex-direction:column;}
|
||||
.drawer.open{right:0;}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.drawer__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.drawer__close:hover{background:#F5F5F5;}
|
||||
.drawer__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.drawer__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:#FF4D4F;}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-select{width:100%;height:40px;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;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.switch-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
|
||||
.switch-row .switch{width:40px;height:22px;border-radius:11px;background:#E8E8E8;cursor:pointer;position:relative;transition:.2s;flex-shrink:0;}
|
||||
.switch-row .switch.on{background:var(--primary);}
|
||||
.switch-row .switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
|
||||
.switch-row .switch.on::after{left:20px;}
|
||||
.switch-label{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.dept-list{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;}
|
||||
.dept-item{display:flex;align-items:center;gap:8px;padding:8px;cursor:pointer;border-radius:var(--radius-sm);transition:background .2s;}
|
||||
.dept-item:hover{background:#F5F5F5;}
|
||||
.dept-item input[type="checkbox"]{cursor:pointer;}
|
||||
.dept-item label{flex:1;cursor:pointer;font-size:var(--font-sm);margin:0;}
|
||||
/* 医院信息卡片 */
|
||||
.hospital-info{background:#F5F7FA;border-radius:var(--radius-sm);padding:12px;margin-bottom:16px;display:none;}
|
||||
.hospital-info.show{display:block;}
|
||||
.hospital-info__item{display:flex;justify-content:space-between;font-size:var(--font-sm);margin-bottom:8px;}
|
||||
.hospital-info__item:last-child{margin-bottom:0;}
|
||||
.hospital-info__label{color:var(--text-secondary);}
|
||||
.hospital-info__value{color:var(--text-primary);font-weight:500;}
|
||||
/* 级联选择 */
|
||||
.cascade-select{display:flex;gap:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:#fff;height:300px;}
|
||||
.cascade-panel{flex:1;border-right:1px solid var(--border);overflow-y:auto;min-width:120px;}
|
||||
.cascade-panel:last-child{border-right:none;}
|
||||
.cascade-item{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;transition:background .2s;border-bottom:1px solid #F0F0F0;font-size:var(--font-sm);}
|
||||
.cascade-item:hover{background:#F5F7FA;}
|
||||
.cascade-item.active{background:var(--primary-light);color:var(--primary);font-weight:500;}
|
||||
.cascade-item__checkbox{cursor:pointer;flex-shrink:0;}
|
||||
.cascade-item__label{flex:1;cursor:pointer;}
|
||||
.cascade-item__arrow{color:var(--text-secondary);font-size:12px;flex-shrink:0;}
|
||||
/* 已选择标签 */
|
||||
.selected-tags{display:flex;flex-wrap:wrap;gap:8px;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#F5F7FA;min-height:40px;align-content:flex-start;}
|
||||
.selected-tag{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:4px 10px;font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.selected-tag__close{cursor:pointer;color:var(--text-secondary);font-weight:bold;width:16px;height:16px;display:flex;align-items:center;justify-content:center;}
|
||||
.selected-tag__close:hover{color:var(--text-primary);}
|
||||
.btn{height:36px;padding:0 20px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;}
|
||||
.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);}
|
||||
</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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html" class="active">基础配置</a>
|
||||
<a href="history-expert.html">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<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>
|
||||
返回首页
|
||||
</div>
|
||||
<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="config-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="config-department.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/><rect x="9" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="9" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/><rect x="9" y="9" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
科室配置
|
||||
</a>
|
||||
<a href="config-disease.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a6 6 0 100 12A6 6 0 008 2zM8 5v3l2 2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
疾病配置
|
||||
</a>
|
||||
<a href="config-notice.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 3h10v8H3zM6 11v2M10 11v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
咨询须知
|
||||
</a>
|
||||
<a href="config-phrase.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 7h8M2 10h6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
常用语
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<div class="drawer-overlay" id="hospital-drawer-overlay" onclick="closeDrawer()"></div>
|
||||
<div class="drawer" id="hospital-drawer">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title">新增医院</div>
|
||||
<button class="drawer__close" onclick="closeDrawer()">✕</button>
|
||||
</div>
|
||||
<div class="drawer__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 选择医院</div>
|
||||
<select class="form-select" id="hospital-select" onchange="onHospitalChange()">
|
||||
<option value="">请选择医院</option>
|
||||
<option value="1">西安交通大学第一附属医院</option>
|
||||
<option value="2">长庆油田职工医院</option>
|
||||
<option value="3">陕西省人民医院</option>
|
||||
<option value="4">西北妇女儿童医院</option>
|
||||
<option value="5">庆阳市人民医院</option>
|
||||
<option value="6">延安大学附属医院</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="hospital-info" id="hospital-info">
|
||||
<div class="hospital-info__item">
|
||||
<span class="hospital-info__label">等级：</span>
|
||||
<span class="hospital-info__value" id="hospital-level"></span>
|
||||
</div>
|
||||
<div class="hospital-info__item">
|
||||
<span class="hospital-info__label">地址：</span>
|
||||
<span class="hospital-info__value" id="hospital-address"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">置顶</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch" onclick="this.classList.toggle('on')"></div>
|
||||
<span class="switch-label">是否置顶</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">状态</div>
|
||||
<div class="switch-row">
|
||||
<div class="switch on" onclick="this.classList.toggle('on')"></div>
|
||||
<span class="switch-label">是否显示</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">选择院内科室</div>
|
||||
<div class="selected-tags" id="selected-tags"></div>
|
||||
<div class="cascade-select" id="cascade-select">
|
||||
<div class="cascade-panel" id="panel-1"></div>
|
||||
<div class="cascade-panel" id="panel-2"></div>
|
||||
<div class="cascade-panel" id="panel-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer__footer">
|
||||
<button class="btn btn-default" onclick="closeDrawer()">取消</button>
|
||||
<button class="btn btn-primary">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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;">
|
||||
<!-- [交互] 点击打开新增弹窗: ./config-hospital-dialog.html -->
|
||||
<button class="btn btn-primary" onclick="openDrawer()">
|
||||
<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>
|
||||
<!-- [交互] 点击查看导出任务列表 -->
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="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>
|
||||
<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><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td><span class="hospital-level level-3a">三级甲等</span></td>
|
||||
<td>陕西省西安市雁塔区</td>
|
||||
<td>12</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')" title="点击切换置顶状态"></div></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')" title="点击切换显示状态"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<span class="link" onclick="openDrawer()">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td style="font-weight:500;">长庆油田职工医院</td>
|
||||
<td><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td><span class="hospital-level level-3">三级</span></td>
|
||||
<td>陕西省西安市未央区</td>
|
||||
<td>8</td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<span class="link" onclick="openDrawer()">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td style="font-weight:500;">陕西省人民医院</td>
|
||||
<td><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td><span class="hospital-level level-3a">三级甲等</span></td>
|
||||
<td>陕西省西安市碑林区</td>
|
||||
<td>15</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<span class="link" onclick="openDrawer()">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td style="font-weight:500;">西北妇女儿童医院</td>
|
||||
<td><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td><span class="hospital-level level-3a">三级甲等</span></td>
|
||||
<td>陕西省西安市雁塔区</td>
|
||||
<td>6</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<span class="link" onclick="openDrawer()">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td style="font-weight:500;">庆阳市人民医院</td>
|
||||
<td><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td><span class="hospital-level level-2">二级甲等</span></td>
|
||||
<td>甘肃省庆阳市西峰区</td>
|
||||
<td>5</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<span class="link" onclick="openDrawer()">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td style="font-weight:500;">延安大学附属医院</td>
|
||||
<td><div style="width:40px;height:40px;background:#E8E8E8;border-radius:4px;"></div></td>
|
||||
<td><span class="hospital-level level-3">三级</span></td>
|
||||
<td>陕西省延安市宝塔区</td>
|
||||
<td>10</td>
|
||||
<td><div class="switch" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td><div class="switch on" onclick="this.classList.toggle('on')"></div></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<span class="link" onclick="openDrawer()">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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>
|
||||
<script>
|
||||
// 医院数据
|
||||
const hospitalData={
|
||||
'1':{name:'西安交通大学第一附属医院',level:'三级甲等',address:'陕西省西安市雁塔区'},
|
||||
'2':{name:'长庆油田职工医院',level:'三级',address:'陕西省西安市未央区'},
|
||||
'3':{name:'陕西省人民医院',level:'三级甲等',address:'陕西省西安市碑林区'},
|
||||
'4':{name:'西北妇女儿童医院',level:'三级甲等',address:'陕西省西安市雁塔区'},
|
||||
'5':{name:'庆阳市人民医院',level:'二级甲等',address:'甘肃省庆阳市西峰区'},
|
||||
'6':{name:'延安大学附属医院',level:'三级',address:'陕西省延安市宝塔区'}
|
||||
};
|
||||
|
||||
// 科室数据结构
|
||||
const deptData=[
|
||||
{id:'1',name:'内科',children:[
|
||||
{id:'1-1',name:'心血管内科'},{id:'1-2',name:'神经内科'},{id:'1-3',name:'内分泌科'},{id:'1-4',name:'消化内科'}
|
||||
]},
|
||||
{id:'2',name:'外科',children:[
|
||||
{id:'2-1',name:'骨科'},{id:'2-2',name:'普通外科'},{id:'2-3',name:'泌尿外科'}
|
||||
]},
|
||||
{id:'3',name:'妇儿科',children:[
|
||||
{id:'3-1',name:'妇产科'},{id:'3-2',name:'儿科'},{id:'3-3',name:'新生儿科'}
|
||||
]},
|
||||
{id:'4',name:'其他科室',children:[
|
||||
{id:'4-1',name:'眼科'},{id:'4-2',name:'耳鼻喉科'},{id:'4-3',name:'皮肤科'}
|
||||
]}
|
||||
];
|
||||
|
||||
let selectedDepts=new Set();
|
||||
|
||||
function openDrawer(){
|
||||
const drawer=document.getElementById('hospital-drawer');
|
||||
const overlay=document.getElementById('hospital-drawer-overlay');
|
||||
drawer.classList.add('open');
|
||||
overlay.classList.add('open');
|
||||
initCascadeSelect();
|
||||
}
|
||||
|
||||
function closeDrawer(){
|
||||
const drawer=document.getElementById('hospital-drawer');
|
||||
const overlay=document.getElementById('hospital-drawer-overlay');
|
||||
drawer.classList.remove('open');
|
||||
overlay.classList.remove('open');
|
||||
}
|
||||
|
||||
function onHospitalChange(){
|
||||
const select=document.getElementById('hospital-select');
|
||||
const info=document.getElementById('hospital-info');
|
||||
const value=select.value;
|
||||
|
||||
if(value && hospitalData[value]){
|
||||
const data=hospitalData[value];
|
||||
document.getElementById('hospital-level').textContent=data.level;
|
||||
document.getElementById('hospital-address').textContent=data.address;
|
||||
info.classList.add('show');
|
||||
}else{
|
||||
info.classList.remove('show');
|
||||
}
|
||||
}
|
||||
|
||||
function initCascadeSelect(){
|
||||
renderPanel1();
|
||||
}
|
||||
|
||||
function renderPanel1(){
|
||||
const panel=document.getElementById('panel-1');
|
||||
panel.innerHTML='';
|
||||
deptData.forEach(dept=>{
|
||||
const item=document.createElement('div');
|
||||
item.className='cascade-item';
|
||||
item.innerHTML=`
|
||||
<label class="cascade-item__label">${dept.name}</label>
|
||||
<span class="cascade-item__arrow">›</span>
|
||||
`;
|
||||
item.onclick=()=>renderPanel2(dept);
|
||||
panel.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
function renderPanel2(parent){
|
||||
const panel=document.getElementById('panel-2');
|
||||
panel.innerHTML='';
|
||||
if(parent.children){
|
||||
parent.children.forEach(child=>{
|
||||
const item=document.createElement('div');
|
||||
item.className='cascade-item';
|
||||
if(selectedDepts.has(child.id)){
|
||||
item.classList.add('active');
|
||||
}
|
||||
item.innerHTML=`
|
||||
<input type="checkbox" class="cascade-item__checkbox" ${selectedDepts.has(child.id)?'checked':''}>
|
||||
<label class="cascade-item__label">${child.name}</label>
|
||||
`;
|
||||
item.onclick=(e)=>{
|
||||
e.stopPropagation();
|
||||
const checkbox=item.querySelector('input[type="checkbox"]');
|
||||
checkbox.checked=!checkbox.checked;
|
||||
if(checkbox.checked){
|
||||
selectedDepts.add(child.id);
|
||||
item.classList.add('active');
|
||||
}else{
|
||||
selectedDepts.delete(child.id);
|
||||
item.classList.remove('active');
|
||||
}
|
||||
updateSelectedTags();
|
||||
};
|
||||
panel.appendChild(item);
|
||||
});
|
||||
}
|
||||
document.getElementById('panel-3').innerHTML='';
|
||||
}
|
||||
|
||||
function updateSelectedTags(){
|
||||
const tagsContainer=document.getElementById('selected-tags');
|
||||
tagsContainer.innerHTML='';
|
||||
|
||||
selectedDepts.forEach(deptId=>{
|
||||
let deptName='';
|
||||
for(let category of deptData){
|
||||
const found=category.children.find(c=>c.id===deptId);
|
||||
if(found){
|
||||
deptName=found.name;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if(deptName){
|
||||
const tag=document.createElement('div');
|
||||
tag.className='selected-tag';
|
||||
tag.innerHTML=`
|
||||
<span>${deptName}</span>
|
||||
<span class="selected-tag__close" onclick="removeTag('${deptId}')">×</span>
|
||||
`;
|
||||
tagsContainer.appendChild(tag);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function removeTag(deptId){
|
||||
selectedDepts.delete(deptId);
|
||||
updateSelectedTags();
|
||||
renderPanel2(deptData.find(d=>d.children.some(c=>c.id===deptId)));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,224 @@
|
||||
<!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;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--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;font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.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;}
|
||||
.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:flex-start;justify-content:space-between;}
|
||||
.page-header__left{}
|
||||
.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;}
|
||||
.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);}
|
||||
/* 须知编辑区 */
|
||||
.notice-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.notice-card__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.notice-card__title{font-size:var(--font-base);font-weight:600;}
|
||||
.notice-card__actions{display:flex;gap:8px;}
|
||||
.notice-card__body{padding:24px;}
|
||||
.preview-box{background:#F8FBFF;border:1px solid #D6E8FF;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:24px;}
|
||||
.preview-box__label{font-size:var(--font-xs);color:var(--primary);margin-bottom:12px;font-weight:500;display:flex;align-items:center;gap:6px;}
|
||||
.preview-box__label svg{width:14px;height:14px;}
|
||||
.preview-title{font-size:var(--font-base);font-weight:600;margin-bottom:12px;}
|
||||
.preview-content{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.8;}
|
||||
.preview-content p{margin-bottom:8px;}
|
||||
.preview-content strong{color:var(--text-primary);}
|
||||
.editor-section{}
|
||||
.editor-section__label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;font-weight:500;}
|
||||
.editor-title-input{width:100%;height:44px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 14px;font-size:var(--font-base);outline:none;margin-bottom:16px;font-weight:600;}
|
||||
.editor-title-input:focus{border-color:var(--primary);}
|
||||
.editor-toolbar{display:flex;gap:4px;padding:8px 12px;border:1px solid var(--border);border-bottom:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:#FAFAFA;flex-wrap:wrap;}
|
||||
.toolbar-btn{padding:4px 8px;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;}
|
||||
.toolbar-btn:hover{background:#E8E8E8;color:var(--text-primary);}
|
||||
.toolbar-divider{width:1px;background:var(--border);margin:2px 4px;}
|
||||
.editor-body{width:100%;min-height:240px;border:1px solid var(--border);border-radius:0 0 var(--radius-sm) var(--radius-sm);padding:14px;font-size:var(--font-sm);outline:none;line-height:1.8;color:var(--text-primary);}
|
||||
.editor-body:focus{border-color:var(--primary);}
|
||||
.editor-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
|
||||
.editor-footer__hint{font-size:var(--font-xs);color:#999;}
|
||||
/* 历史版本 */
|
||||
.version-list{margin-top:24px;}
|
||||
.version-list__title{font-size:var(--font-sm);font-weight:500;margin-bottom:12px;color:var(--text-secondary);}
|
||||
.version-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
|
||||
.version-item:last-child{border-bottom:none;}
|
||||
.version-tag{font-size:var(--font-xs);background:var(--primary-light);color:var(--primary);padding:2px 8px;border-radius:10px;}
|
||||
.version-tag.current{background:#F6FFED;color:var(--success);}
|
||||
.version-info{flex:1;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.version-time{font-size:var(--font-xs);color:#999;}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
/* 编辑弹窗 */
|
||||
.edit-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:999;display:none;align-items:center;justify-content:center;}
|
||||
.edit-modal-overlay.open{display:flex;}
|
||||
.edit-modal{background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,0.15);width:90%;max-width:600px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;}
|
||||
.edit-modal__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.edit-modal__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.edit-modal__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.edit-modal__close:hover{background:#F5F5F5;}
|
||||
.edit-modal__body{flex:1;padding:24px;overflow-y:auto;}
|
||||
.edit-modal__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
|
||||
</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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-notice.html" class="active">基础配置</a>
|
||||
<a href="history-expert.html">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<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>
|
||||
返回首页
|
||||
</div>
|
||||
<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="config-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"/></svg>
|
||||
医院配置
|
||||
</a>
|
||||
<a href="config-department.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/><rect x="9" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="9" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/><rect x="9" y="9" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
科室配置
|
||||
</a>
|
||||
<a href="config-disease.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a6 6 0 100 12A6 6 0 008 2zM8 5v3l2 2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
疾病配置
|
||||
</a>
|
||||
<a href="config-notice.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 3h10v8H3zM6 11v2M10 11v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
咨询须知
|
||||
</a>
|
||||
<a href="config-phrase.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 7h8M2 10h6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
常用语
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="notice-card">
|
||||
<div class="notice-card__header">
|
||||
<div class="notice-card__title">当前生效版本预览</div>
|
||||
<div class="notice-card__actions">
|
||||
<!-- [交互] 点击进入编辑模式（打开编辑弹窗） -->
|
||||
<button class="btn btn-primary" onclick="openEditModal()">>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10L10 2l2 2-8 8-2.5.5.5-2.5z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
||||
编辑内容
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice-card__body">
|
||||
<!-- 移动端弹窗预览 -->
|
||||
<div class="preview-box">
|
||||
<div class="preview-box__label">
|
||||
<svg viewBox="0 0 14 14" fill="none"><rect x="3" y="1" width="8" height="12" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M5.5 3h3M5.5 5h3M5.5 7h1.5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
移动端弹窗预览效果
|
||||
</div>
|
||||
<div style="max-width:320px;margin:0 auto;border:1px solid var(--border);border-radius:12px;padding:20px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.08);">
|
||||
<div class="preview-title">咨询须知</div>
|
||||
<div class="preview-content">
|
||||
<p><strong>1. 服务说明</strong></p>
|
||||
<p>本平台提供图文咨询和视频咨询两种方式，专家将在24小时内回复您的问题。</p>
|
||||
<p><strong>2. 使用规范</strong></p>
|
||||
<p>请详细描述您的症状或健康问题，上传相关检查报告有助于专家准确判断。</p>
|
||||
<p><strong>3. 注意事项</strong></p>
|
||||
<p>本咨询服务仅供健康指导参考，不作为正式医疗诊断依据。如病情紧急，请立即前往医院就诊或拨打急救电话120。</p>
|
||||
<p><strong>4. 隐私保护</strong></p>
|
||||
<p>您的咨询内容将严格保密，仅接诊专家可查看。</p>
|
||||
</div>
|
||||
<div style="margin-top:16px;display:flex;gap:8px;">
|
||||
<div style="flex:1;height:36px;border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#666;">不同意</div>
|
||||
<div style="flex:1;height:36px;background:var(--primary);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;">同意并继续</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<div class="edit-modal-overlay" id="edit-modal-overlay" onclick="if(event.target===this)closeEditModal()">
|
||||
<div class="edit-modal">
|
||||
<div class="edit-modal__header">
|
||||
<div class="edit-modal__title">编辑咨询须知</div>
|
||||
<button class="edit-modal__close" onclick="closeEditModal()">✕</button>
|
||||
</div>
|
||||
<div class="edit-modal__body">
|
||||
<div class="editor-section__label">弹窗标题</div>
|
||||
<input class="editor-title-input" type="text" value="咨询须知" placeholder="请输入弹窗标题">
|
||||
<div class="editor-section__label" style="margin-top:16px;">须知内容</div>
|
||||
<div class="editor-toolbar">
|
||||
<button class="toolbar-btn" title="加粗"><strong>B</strong></button>
|
||||
<button class="toolbar-btn" title="斜体"><em>I</em></button>
|
||||
<button class="toolbar-btn" title="下划线"><u>U</u></button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button class="toolbar-btn">有序列表</button>
|
||||
<button class="toolbar-btn">无序列表</button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button class="toolbar-btn">字号 ▾</button>
|
||||
<button class="toolbar-btn">颜色 ▾</button>
|
||||
</div>
|
||||
<div class="editor-body" contenteditable="true">
|
||||
1. 服务说明
|
||||
本平台提供图文咨询和视频咨询两种方式，专家将在24小时内回复您的问题。
|
||||
|
||||
2. 使用规范
|
||||
请详细描述您的症状或健康问题，上传相关检查报告有助于专家准确判断。
|
||||
|
||||
3. 注意事项
|
||||
本咨询服务仅供健康指导参考，不作为正式医疗诊断依据。如病情紧急，请立即前往医院就诊或拨打急救电话120。
|
||||
|
||||
4. 隐私保护
|
||||
您的咨询内容将严格保密，仅接诊专家可查看。</div>
|
||||
<div class="editor-footer">
|
||||
<span class="editor-footer__hint">支持富文本编辑，内容将展示在员工端咨询发起弹窗中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit-modal__footer">
|
||||
<button class="btn btn-default" onclick="closeEditModal()">取消</button>
|
||||
<button class="btn btn-primary">发布生效</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openEditModal() {
|
||||
document.getElementById('edit-modal-overlay').classList.add('open');
|
||||
}
|
||||
|
||||
function closeEditModal() {
|
||||
document.getElementById('edit-modal-overlay').classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!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:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;min-height:100vh;}
|
||||
:root{--primary:#1890FF;--primary-light:#E6F7FF;--danger:#FF4D4F;--text-primary:#333;--text-secondary:#666;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-lg:17px;--radius-sm:4px;--radius-md:8px;}
|
||||
.dialog{background:#fff;border-radius:var(--radius-md);width:520px;box-shadow:0 8px 32px rgba(0,0,0,0.2);}
|
||||
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);}
|
||||
.dialog__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.dialog__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.dialog__close:hover{background:#F5F5F5;}
|
||||
.dialog__body{padding:24px;}
|
||||
.dialog__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);}
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;}
|
||||
.required{color:#FF4D4F;}
|
||||
.form-select{width:100%;height:40px;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;}
|
||||
.form-select:focus{border-color:var(--primary);}
|
||||
.form-textarea{width:100%;height:120px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:var(--font-sm);outline:none;resize:vertical;line-height:1.6;}
|
||||
.form-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
|
||||
.hint{font-size:var(--font-xs);color:#999;margin-top:4px;text-align:right;}
|
||||
.btn{height:36px;padding:0 20px;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;border:none;transition:all .2s;}
|
||||
.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);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dialog">
|
||||
<div class="dialog__header">
|
||||
<div class="dialog__title">新增常用语</div>
|
||||
<button class="dialog__close" onclick="window.close()">✕</button>
|
||||
</div>
|
||||
<div class="dialog__body">
|
||||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 适用角色</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择适用角色</option>
|
||||
<option>咨询小助手</option>
|
||||
<option>咨询专家</option>
|
||||
<option>通用</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 分类</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择分类</option>
|
||||
<option>问候语</option>
|
||||
<option>引导语</option>
|
||||
<option>结束语</option>
|
||||
<option>注意事项</option>
|
||||
<option>其他</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 常用语内容</div>
|
||||
<textarea class="form-textarea" placeholder="请输入常用语内容，建议简洁明了，不超过200字..." oninput="document.getElementById('char-count').textContent=this.value.length"></textarea>
|
||||
<div class="hint"><span id="char-count">0</span> / 200</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog__footer">
|
||||
<button class="btn btn-default" onclick="window.close()">取消</button>
|
||||
<button class="btn btn-primary">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,331 @@
|
||||
<!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;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--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;font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.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;}
|
||||
.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:240px;}
|
||||
.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:140px;}
|
||||
|
||||
.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{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);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);vertical-align:top;}
|
||||
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-purple{background:#F9F0FF;color:#722ED1;}
|
||||
|
||||
.phrase-text{max-width:480px;line-height:1.6;color:var(--text-primary);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
|
||||
.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);}
|
||||
|
||||
/* 抽屉样式 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);z-index:999;transition:background .3s;pointer-events:none;}
|
||||
.drawer-overlay.open{background:rgba(0,0,0,0.45);pointer-events:auto;}
|
||||
.drawer{position:fixed;top:0;right:-480px;bottom:0;width:480px;background:#fff;box-shadow:-2px 0 8px rgba(0,0,0,0.15);z-index:1000;transition:right .3s;display:flex;flex-direction:column;}
|
||||
.drawer.open{right:0;}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;}
|
||||
.drawer__close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;}
|
||||
.drawer__close:hover{background:#F5F5F5;}
|
||||
.drawer__body{flex:1;overflow-y:auto;padding:24px;}
|
||||
.drawer__footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
|
||||
.form-item{margin-bottom:20px;}
|
||||
.form-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:4px;font-weight:500;}
|
||||
.form-label .required{color:#FF4D4F;}
|
||||
.form-input{width:100%;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);outline:none;}
|
||||
.form-select{width:100%;height:40px;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;}
|
||||
.form-textarea{width:100%;height:120px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:var(--font-sm);outline:none;resize:none;line-height:1.6;}
|
||||
.form-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,0.2);}
|
||||
</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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html" class="active">基础配置</a>
|
||||
<a href="history-expert.html">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<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>
|
||||
返回首页
|
||||
</div>
|
||||
<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="config-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"/></svg>
|
||||
医院配置
|
||||
</a>
|
||||
<a href="config-department.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/><rect x="9" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/><rect x="2" y="9" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/><rect x="9" y="9" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.4"/></svg>
|
||||
科室配置
|
||||
</a>
|
||||
<a href="config-disease.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2a6 6 0 100 12A6 6 0 008 2zM8 5v3l2 2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
疾病配置
|
||||
</a>
|
||||
<a href="config-notice.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M3 3h10v8H3zM6 11v2M10 11v2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
咨询须知
|
||||
</a>
|
||||
<a href="config-phrase.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 7h8M2 10h6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
常用语
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<div class="drawer-overlay" id="drawer-overlay" onclick="closeDrawer()"></div>
|
||||
<div class="drawer" id="drawer">
|
||||
<div class="drawer__header">
|
||||
<div class="drawer__title" id="drawer-title">新增常用语</div>
|
||||
<button class="drawer__close" onclick="closeDrawer()">✕</button>
|
||||
</div>
|
||||
<div class="drawer__body">
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 常用语内容</div>
|
||||
<textarea class="form-textarea" placeholder="请输入常用语内容..."></textarea>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 分类</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择分类</option>
|
||||
<option>问候语</option>
|
||||
<option>引导语</option>
|
||||
<option>结束语</option>
|
||||
<option>注意事项</option>
|
||||
<option>其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label"><span class="required">*</span> 适用角色</div>
|
||||
<select class="form-select">
|
||||
<option value="">请选择角色</option>
|
||||
<option>通用</option>
|
||||
<option>咨询小助手</option>
|
||||
<option>咨询专家</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">排序序号</div>
|
||||
<input class="form-input" type="number" placeholder="数字越小越靠前" value="99">
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer__footer">
|
||||
<button class="btn btn-default" onclick="closeDrawer()">取消</button>
|
||||
<button class="btn btn-primary">确认保存</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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">
|
||||
<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-primary" onclick="openDrawer('add')">
|
||||
<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>
|
||||
<button class="btn btn-default">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="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);">共 24 条</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>常用语内容</th>
|
||||
<th>分类</th>
|
||||
<th>适用角色</th>
|
||||
<th>使用次数</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td><div class="phrase-text">您好！我是健康咨询小助手，很高兴为您服务。请问您有什么健康问题需要咨询？</div></td>
|
||||
<td><span class="tag tag-blue">问候语</span></td>
|
||||
<td><span class="tag tag-green">咨询小助手</span></td>
|
||||
<td>1,234</td>
|
||||
<td>2025-06-01</td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td><div class="phrase-text">您好，我是您的健康咨询专家，请详细描述您的症状，包括发病时间、症状表现及既往病史。</div></td>
|
||||
<td><span class="tag tag-blue">问候语</span></td>
|
||||
<td><span class="tag tag-purple">咨询专家</span></td>
|
||||
<td>876</td>
|
||||
<td>2025-06-01</td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td><div class="phrase-text">建议您尽快前往医院进行进一步检查，以便获得更准确的诊断和治疗方案。</div></td>
|
||||
<td><span class="tag tag-blue">注意事项</span></td>
|
||||
<td><span class="tag tag-green">通用</span></td>
|
||||
<td>654</td>
|
||||
<td>2025-07-15</td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td><div class="phrase-text">感谢您的咨询！如有其他健康问题，欢迎随时联系我们。祝您身体健康！</div></td>
|
||||
<td><span class="tag tag-blue">结束语</span></td>
|
||||
<td><span class="tag tag-green">通用</span></td>
|
||||
<td>543</td>
|
||||
<td>2025-07-15</td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="openDrawer('edit')">编辑</span>
|
||||
<span class="link-danger">删除</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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>
|
||||
<select class="filter-select" style="min-width:70px;height:32px;"><option>10条</option><option>20条</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function openDrawer(type) {
|
||||
const drawer = document.getElementById('drawer');
|
||||
const overlay = document.getElementById('drawer-overlay');
|
||||
const title = document.getElementById('drawer-title');
|
||||
|
||||
title.innerText = type === 'add' ? '新增常用语' : '编辑常用语';
|
||||
drawer.classList.add('open');
|
||||
overlay.classList.add('open');
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
const drawer = document.getElementById('drawer');
|
||||
const overlay = document.getElementById('drawer-overlay');
|
||||
drawer.classList.remove('open');
|
||||
overlay.classList.remove('open');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,309 @@
|
||||
<!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;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--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;font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.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;}
|
||||
.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;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-item__arrow{font-size:10px;color:rgba(255,255,255,0.35);transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subitem{display:flex;align-items:center;padding:9px 24px 9px 50px;color:rgba(255,255,255,0.45);font-size:var(--font-xs);cursor:pointer;transition:all .2s;text-decoration:none;position:relative;}
|
||||
.sidebar-subitem:hover{color:#fff;}
|
||||
.sidebar-subitem.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subitem.active::before{content:'';position:absolute;left:34px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#FAAD14;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:16px;}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.breadcrumb a:hover{color:#40a9ff;}
|
||||
.breadcrumb__sep{color:var(--border);}
|
||||
.detail-layout{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start;}
|
||||
.card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;}
|
||||
.card__title{font-size:var(--font-base);font-weight:600;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
|
||||
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}
|
||||
.info-item{padding:10px 0;border-bottom:1px solid var(--border);display:flex;gap:8px;}
|
||||
.info-item:nth-last-child(-n+2){border-bottom:none;}
|
||||
.info-item__label{font-size:var(--font-sm);color:var(--text-secondary);min-width:80px;}
|
||||
.info-item__value{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.chief-complaint-box{background:#F5F7FA;border-radius:var(--radius-sm);padding:14px 16px;font-size:var(--font-sm);line-height:1.8;color:var(--text-primary);margin-top:4px;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.consult-list{display:flex;flex-direction:column;gap:10px;}
|
||||
.consult-item{border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;transition:all .2s;cursor:pointer;}
|
||||
.consult-item:hover{border-color:var(--primary);background:var(--primary-light);}
|
||||
.consult-item__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
|
||||
.consult-item__id{font-family:monospace;font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.consult-item__meta{display:flex;align-items:center;gap:12px;font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.consult-item__expert{font-size:var(--font-sm);font-weight:500;color:var(--text-primary);}
|
||||
.consult-item__dept{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.stars{color:#FAAD14;font-size:var(--font-sm);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.btn{height:32px;padding:0 14px;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-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);border-color:var(--primary);}
|
||||
.info-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:20px;margin-bottom:12px;}
|
||||
.info-card__title{font-size:var(--font-sm);font-weight:600;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);}
|
||||
.info-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px;font-size:var(--font-sm);}
|
||||
.info-row:last-child{margin-bottom:0;}
|
||||
.info-row__label{color:var(--text-secondary);white-space:nowrap;min-width:72px;}
|
||||
.info-row__value{color:var(--text-primary);flex:1;}
|
||||
</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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html" class="active">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<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>
|
||||
返回
|
||||
</div>
|
||||
<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="history-expert.html" class="sidebar-item sidebar-item--parent">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询历史记录</div>
|
||||
<span class="sidebar-item__arrow">▾</span>
|
||||
</a>
|
||||
<a href="consult-record.html" class="sidebar-item active">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M3 2h10v12H3z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 5h4M6 8h4M6 11h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询档案</div>
|
||||
</a>
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="breadcrumb">
|
||||
<a href="consult-record.html">咨询档案</a>
|
||||
<span class="breadcrumb__sep">›</span>
|
||||
<span>档案详情 · DA20260409001</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-layout">
|
||||
<!-- 左侧：档案主体 -->
|
||||
<div>
|
||||
<!-- 基本信息 -->
|
||||
<div class="card">
|
||||
<div class="card__title">
|
||||
基本信息
|
||||
<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="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">档案编号</span>
|
||||
<span class="info-item__value" style="font-family:monospace;color:var(--text-secondary);">DA20260409001</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-item__label">创建时间</span>
|
||||
<span class="info-item__value">2026-04-09 09:12</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" style="font-family:monospace;">CQ001234</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" style="color:var(--primary);font-weight:600;">3 次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主诉 -->
|
||||
<div class="card">
|
||||
<div class="card__title">主诉</div>
|
||||
<div class="chief-complaint-box">
|
||||
心跳加速、胸闷，活动后加重，持续约2周，休息后可缓解。近期工作压力较大，睡眠质量下降。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 既往病史 & 过敏史 -->
|
||||
<div class="card">
|
||||
<div class="card__title">病史信息</div>
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;">既往病史</div>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap;">
|
||||
<span class="tag tag-orange">高血压（确诊2年）</span>
|
||||
<span class="tag tag-orange">高脂血症</span>
|
||||
</div>
|
||||
<div style="font-size:var(--font-xs);color:var(--text-secondary);margin-top:8px;line-height:1.6;">
|
||||
目前服用：氨氯地平 5mg/日（降压）、阿托伐他汀 20mg/晚（调脂）
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top:1px solid var(--border);padding-top:16px;">
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:8px;">过敏史</div>
|
||||
<span class="tag tag-gray">无已知过敏史</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关联咨询记录 -->
|
||||
<div class="card">
|
||||
<div class="card__title">关联咨询记录（3次）</div>
|
||||
<div class="consult-list">
|
||||
<div class="consult-item" onclick="location.href='history-expert-detail.html'">
|
||||
<div class="consult-item__header">
|
||||
<span class="consult-item__id">ZX20260409088</span>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<span class="tag tag-blue">图文咨询</span>
|
||||
<span class="tag" style="background:#E6F7FF;color:var(--primary);">进行中</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;">
|
||||
<div>
|
||||
<div class="consult-item__expert">李医生</div>
|
||||
<div class="consult-item__dept">心血管内科 · 主任医师</div>
|
||||
</div>
|
||||
<div class="consult-item__meta">
|
||||
<span>2026-04-09 09:12</span>
|
||||
<span class="link">查看详情 →</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="consult-item" onclick="location.href='history-expert-detail.html'">
|
||||
<div class="consult-item__header">
|
||||
<span class="consult-item__id">ZX20260325044</span>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<span class="tag tag-blue">图文咨询</span>
|
||||
<span class="tag tag-green">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;">
|
||||
<div>
|
||||
<div class="consult-item__expert">李医生</div>
|
||||
<div class="consult-item__dept">心血管内科 · 主任医师</div>
|
||||
</div>
|
||||
<div class="consult-item__meta">
|
||||
<span>2026-03-25 14:30</span>
|
||||
<span class="stars">★★★★★</span>
|
||||
<span class="link">查看详情 →</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="consult-item" onclick="location.href='history-expert-detail.html'">
|
||||
<div class="consult-item__header">
|
||||
<span class="consult-item__id">ZX20260210018</span>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<span class="tag" style="background:#F9F0FF;color:#722ED1;">视频咨询</span>
|
||||
<span class="tag tag-green">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;">
|
||||
<div>
|
||||
<div class="consult-item__expert">王医生</div>
|
||||
<div class="consult-item__dept">内分泌科 · 副主任医师</div>
|
||||
</div>
|
||||
<div class="consult-item__meta">
|
||||
<span>2026-02-10 10:00</span>
|
||||
<span class="stars">★★★★</span>
|
||||
<span class="link">查看详情 →</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：员工信息 -->
|
||||
<div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">员工信息</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
|
||||
<div style="width:48px;height:48px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:18px;font-weight:600;flex-shrink:0;">张</div>
|
||||
<div>
|
||||
<div style="font-size:var(--font-base);font-weight:600;">张伟</div>
|
||||
<div style="font-size:var(--font-xs);color:var(--text-secondary);">CQ001234 · 采油一厂</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">性别</span>
|
||||
<span class="info-row__value">男</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">年龄</span>
|
||||
<span class="info-row__value">42岁</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">岗位</span>
|
||||
<span class="info-row__value">采油工程师</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">联系方式</span>
|
||||
<span class="info-row__value" style="color:var(--text-secondary);">已脱敏</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">档案统计</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||||
<div style="background:#F5F7FA;border-radius:var(--radius-sm);padding:10px 12px;text-align:center;">
|
||||
<div style="font-size:20px;font-weight:700;color:var(--primary);">3</div>
|
||||
<div style="font-size:var(--font-xs);color:var(--text-secondary);margin-top:2px;">关联咨询</div>
|
||||
</div>
|
||||
<div style="background:#F5F7FA;border-radius:var(--radius-sm);padding:10px 12px;text-align:center;">
|
||||
<div style="font-size:20px;font-weight:700;color:var(--success);">2</div>
|
||||
<div style="font-size:var(--font-xs);color:var(--text-secondary);margin-top:2px;">已完成</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:12px;">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">首次咨询</span>
|
||||
<span class="info-row__value">2026-02-10</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">最近咨询</span>
|
||||
<span class="info-row__value">2026-04-09</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,243 @@
|
||||
<!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;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--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;font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.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;}
|
||||
.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;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-item__arrow{font-size:10px;color:rgba(255,255,255,0.35);transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subitem{display:flex;align-items:center;padding:9px 24px 9px 50px;color:rgba(255,255,255,0.45);font-size:var(--font-xs);cursor:pointer;transition:all .2s;text-decoration:none;position:relative;}
|
||||
.sidebar-subitem:hover{color:#fff;}
|
||||
.sidebar-subitem.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subitem.active::before{content:'';position:absolute;left:34px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#FAAD14;}
|
||||
.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;}
|
||||
.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{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);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);vertical-align:top;}
|
||||
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-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.chief-complaint{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html" class="active">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<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>
|
||||
返回首页
|
||||
</div>
|
||||
<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="history-expert.html" class="sidebar-item sidebar-item--parent">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询历史记录</div>
|
||||
<span class="sidebar-item__arrow">▾</span>
|
||||
</a>
|
||||
<a href="consult-record.html" class="sidebar-item active">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M3 2h10v12H3z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 5h4M6 8h4M6 11h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询档案</div>
|
||||
</a>
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</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="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">
|
||||
<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>
|
||||
<button class="btn btn-default" style="margin-left:auto;">
|
||||
<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 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">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
<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);">共 8,432 条</div>
|
||||
</div>
|
||||
<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 style="font-family:monospace;color:var(--text-secondary);">DA20260409001</td>
|
||||
<td>张伟</td>
|
||||
<td>CQ001234</td>
|
||||
<td>采油一厂</td>
|
||||
<td><div class="chief-complaint">心跳加速、胸闷，活动后加重</div></td>
|
||||
<td><span class="tag tag-orange">高血压</span></td>
|
||||
<td><span class="tag tag-gray">无</span></td>
|
||||
<td style="color:var(--primary);font-weight:500;">3次</td>
|
||||
<td>2026-04-09 09:12</td>
|
||||
<!-- [交互] 点击跳转至: ./consult-record-detail.html -->
|
||||
<td><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">DA20260409002</td>
|
||||
<td>李明</td>
|
||||
<td>CQ002571</td>
|
||||
<td>采油二厂</td>
|
||||
<td><div class="chief-complaint">空腹血糖偏高，体检发现6.8mmol/L</div></td>
|
||||
<td><span class="tag tag-gray">无</span></td>
|
||||
<td><span class="tag tag-gray">无</span></td>
|
||||
<td style="color:var(--primary);font-weight:500;">1次</td>
|
||||
<td>2026-04-09 09:45</td>
|
||||
<td><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">DA20260408010</td>
|
||||
<td>刘洋</td>
|
||||
<td>CQ004102</td>
|
||||
<td>采油三厂</td>
|
||||
<td><div class="chief-complaint">腰部疼痛，久坐后加重，放射至左腿</div></td>
|
||||
<td><span class="tag tag-orange">腰椎间盘突出</span></td>
|
||||
<td><span class="tag tag-orange">青霉素过敏</span></td>
|
||||
<td style="color:var(--primary);font-weight:500;">5次</td>
|
||||
<td>2026-04-08 14:55</td>
|
||||
<td><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">DA20260407005</td>
|
||||
<td>陈磊</td>
|
||||
<td>CQ006890</td>
|
||||
<td>采油一厂</td>
|
||||
<td><div class="chief-complaint">反复头痛，以额部为主，伴有恶心</div></td>
|
||||
<td><span class="tag tag-orange">高血压</span></td>
|
||||
<td><span class="tag tag-gray">无</span></td>
|
||||
<td style="color:var(--primary);font-weight:500;">8次</td>
|
||||
<td>2026-04-07 09:55</td>
|
||||
<td><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">DA20260406003</td>
|
||||
<td>王芳</td>
|
||||
<td>CQ003388</td>
|
||||
<td>勘探开发研究院</td>
|
||||
<td><div class="chief-complaint">睡眠质量差，入睡困难，多梦易醒</div></td>
|
||||
<td><span class="tag tag-gray">无</span></td>
|
||||
<td><span class="tag tag-gray">无</span></td>
|
||||
<td style="color:var(--primary);font-weight:500;">2次</td>
|
||||
<td>2026-04-06 11:20</td>
|
||||
<td><span class="link" onclick="location.href='consult-record-detail.html'">查看详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span>共 8,432 条</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">844</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,311 @@
|
||||
<!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;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--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;font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.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;}
|
||||
.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;}
|
||||
/* 告警横幅 */
|
||||
.alert-banner{background:#FFF1F0;border:1px solid #FFCCC7;border-radius:var(--radius-md);padding:14px 20px;margin-bottom:16px;display:flex;align-items:center;gap:12px;}
|
||||
.alert-banner__icon{color:var(--danger);font-size:20px;flex-shrink:0;}
|
||||
.alert-banner__text{font-size:var(--font-sm);color:var(--danger);}
|
||||
.alert-banner__text strong{font-weight:600;}
|
||||
/* 统计卡片 */
|
||||
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;box-shadow:var(--shadow-sm);}
|
||||
.stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.stat-card__value{font-size:28px;font-weight:700;margin-top:8px;}
|
||||
.stat-card__sub{font-size:var(--font-xs);color:var(--text-placeholder);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;}
|
||||
.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-danger{background:var(--danger);color:#fff;}
|
||||
.btn-danger:hover{background:#ff7875;}
|
||||
.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{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);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);vertical-align:top;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#FFF8F8;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.dirty-type{font-weight:500;color:var(--danger);}
|
||||
.dirty-value{font-family:monospace;background:#FFF1F0;padding:2px 6px;border-radius:var(--radius-sm);color:var(--danger);font-size:var(--font-xs);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.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);}
|
||||
.desc-box{background:#FFFBE6;border:1px solid #FFE58F;border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px;font-size:var(--font-sm);color:#7C5800;line-height:1.7;}
|
||||
.desc-box strong{color:#5C3D00;}
|
||||
</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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html">咨询数据</a>
|
||||
<a href="exception-dirty.html" class="active">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<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>
|
||||
返回首页
|
||||
</div>
|
||||
<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-dirty.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L2 13h12L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 6v4M8 11.5v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
系统脏数据
|
||||
</a>
|
||||
<a href="exception-result.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/><path d="M8 5v3M8 10v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
结果异常
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 告警横幅 -->
|
||||
<div class="alert-banner">
|
||||
<div class="alert-banner__icon">⚠️</div>
|
||||
<div class="alert-banner__text">
|
||||
<strong>实时告警：</strong>当前有 <strong>7</strong> 条脏数据待处理，其中 <strong>3</strong> 条为高优先级（咨询时长异常），<strong>4</strong> 条为评分溢出。系统已自动推送告警至运维人员。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 说明框 -->
|
||||
<div class="desc-box">
|
||||
<strong>脏数据定义：</strong>咨询时长异常（时长 < 0 或 > 72小时）或评价分数溢出（评分 > 5分）等情形。
|
||||
处理方案：业务系统数据质量控制（第一道保障）→ 数据中台清洗质量筛查 → 中台标记异常并回传业务系统 → 实时推送告警至管理员。
|
||||
</div>
|
||||
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">待处理脏数据</div>
|
||||
<div class="stat-card__value" style="color:var(--danger);">7</div>
|
||||
<div class="stat-card__sub">需立即处理</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本月累计脏数据</div>
|
||||
<div class="stat-card__value" style="color:var(--warning);">23</div>
|
||||
<div class="stat-card__sub">2026年4月</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">已处理</div>
|
||||
<div class="stat-card__value" style="color:var(--success);">16</div>
|
||||
<div class="stat-card__sub">本月已修复</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">数据质量率</div>
|
||||
<div class="stat-card__value" style="color:var(--primary);">99.8%</div>
|
||||
<div class="stat-card__sub">本月整体质量</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>待处理</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">
|
||||
<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">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">脏数据列表</div>
|
||||
<div style="display:flex;gap:8px;align-items:center;">
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 23 条</span>
|
||||
<!-- [交互] 批量忽略低优先级脏数据 -->
|
||||
<button class="btn btn-default" style="height:30px;font-size:var(--font-xs);">批量忽略</button>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>告警ID</th>
|
||||
<th>咨询单号</th>
|
||||
<th>异常类型</th>
|
||||
<th>异常字段</th>
|
||||
<th>异常值</th>
|
||||
<th>正常范围</th>
|
||||
<th>来源</th>
|
||||
<th>告警时间</th>
|
||||
<th>处理状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ALT20260409001</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409088</td>
|
||||
<td><span class="dirty-type">咨询时长异常</span></td>
|
||||
<td>duration_minutes</td>
|
||||
<td><span class="dirty-value">-15</span></td>
|
||||
<td style="color:var(--text-secondary);">0 ~ 4320</td>
|
||||
<td><span class="tag tag-red">业务系统</span></td>
|
||||
<td>2026-04-09 11:23</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link">查看详情</span>
|
||||
<!-- [交互] 点击标记为已修复 -->
|
||||
<span class="link" style="color:var(--success);">标记修复</span>
|
||||
<span class="link-danger">忽略</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ALT20260409002</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260409102</td>
|
||||
<td><span class="dirty-type">咨询时长异常</span></td>
|
||||
<td>duration_minutes</td>
|
||||
<td><span class="dirty-value">5280</span></td>
|
||||
<td style="color:var(--text-secondary);">0 ~ 4320</td>
|
||||
<td><span class="tag tag-orange">数据中台</span></td>
|
||||
<td>2026-04-09 11:45</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link">查看详情</span>
|
||||
<span class="link" style="color:var(--success);">标记修复</span>
|
||||
<span class="link-danger">忽略</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ALT20260409003</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408215</td>
|
||||
<td><span class="dirty-type">评分溢出</span></td>
|
||||
<td>rating_score</td>
|
||||
<td><span class="dirty-value">7.5</span></td>
|
||||
<td style="color:var(--text-secondary);">1 ~ 5</td>
|
||||
<td><span class="tag tag-red">业务系统</span></td>
|
||||
<td>2026-04-09 10:12</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link">查看详情</span>
|
||||
<span class="link" style="color:var(--success);">标记修复</span>
|
||||
<span class="link-danger">忽略</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ALT20260408010</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260407088</td>
|
||||
<td><span class="dirty-type">评分溢出</span></td>
|
||||
<td>rating_score</td>
|
||||
<td><span class="dirty-value">-1</span></td>
|
||||
<td style="color:var(--text-secondary);">1 ~ 5</td>
|
||||
<td><span class="tag tag-orange">数据中台</span></td>
|
||||
<td>2026-04-08 16:30</td>
|
||||
<td><span class="tag tag-green">已修复</span></td>
|
||||
<td><span class="link">查看详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ALT20260408008</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260407055</td>
|
||||
<td><span class="dirty-type">咨询时长异常</span></td>
|
||||
<td>duration_minutes</td>
|
||||
<td><span class="dirty-value">-3</span></td>
|
||||
<td style="color:var(--text-secondary);">0 ~ 4320</td>
|
||||
<td><span class="tag tag-red">业务系统</span></td>
|
||||
<td>2026-04-08 14:22</td>
|
||||
<td><span class="tag tag-gray">已忽略</span></td>
|
||||
<td><span class="link">查看详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span>共 23 条</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,339 @@
|
||||
<!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;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--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;font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.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;}
|
||||
.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;}
|
||||
.alert-banner{background:#FFF1F0;border:1px solid #FFCCC7;border-radius:var(--radius-md);padding:14px 20px;margin-bottom:16px;display:flex;align-items:center;gap:12px;}
|
||||
.alert-banner__icon{color:var(--danger);font-size:20px;flex-shrink:0;}
|
||||
.alert-banner__text{font-size:var(--font-sm);color:var(--danger);}
|
||||
.alert-banner__text strong{font-weight:600;}
|
||||
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;box-shadow:var(--shadow-sm);}
|
||||
.stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.stat-card__value{font-size:28px;font-weight:700;margin-top:8px;}
|
||||
.stat-card__sub{font-size:var(--font-xs);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;}
|
||||
.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{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);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);vertical-align:top;}
|
||||
tbody tr:last-child td{border-bottom:none;}
|
||||
tbody tr:hover{background:#FFF8F8;}
|
||||
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.tag-red{background:#FFF1F0;color:var(--danger);}
|
||||
.tag-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-green{background:#F6FFED;color:var(--success);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.tag-purple{background:#F9F0FF;color:#722ED1;}
|
||||
.anomaly-type{font-weight:500;color:var(--danger);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-danger{color:var(--danger);cursor:pointer;font-size:var(--font-sm);}
|
||||
.link-warning{color:var(--warning);cursor:pointer;font-size:var(--font-sm);}
|
||||
.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);}
|
||||
.desc-box{background:#FFFBE6;border:1px solid #FFE58F;border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px;font-size:var(--font-sm);color:#7C5800;line-height:1.7;}
|
||||
.desc-box strong{color:#5C3D00;}
|
||||
.rule-badge{display:inline-flex;align-items:center;gap:4px;background:#F0F5FF;color:#2F54EB;padding:2px 8px;border-radius:10px;font-size:var(--font-xs);}
|
||||
.severity-high{color:var(--danger);font-weight:600;}
|
||||
.severity-mid{color:var(--warning);font-weight:600;}
|
||||
</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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html">咨询数据</a>
|
||||
<a href="exception-dirty.html" class="active">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<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>
|
||||
返回首页
|
||||
</div>
|
||||
<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-dirty.html" class="sidebar-item">
|
||||
<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L2 13h12L8 2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 6v4M8 11.5v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
系统脏数据
|
||||
</a>
|
||||
<a href="exception-result.html" class="sidebar-item active">
|
||||
<svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4"/><path d="M8 5v3M8 10v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||||
结果异常
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- 告警横幅 -->
|
||||
<div class="alert-banner">
|
||||
<div class="alert-banner__icon">⚠️</div>
|
||||
<div class="alert-banner__text">
|
||||
<strong>实时告警：</strong>当前有 <strong>5</strong> 条结果异常待处理，其中 <strong>2</strong> 条为高危（恶意差评），<strong>3</strong> 条为响应超时。系统已自动推送告警至管理员。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 说明框 -->
|
||||
<div class="desc-box">
|
||||
<strong>结果异常定义：</strong>恶意差评（评价内容含侮辱性语言或明显虚假内容）或咨询响应超时（专家超过24小时未回复）等情形。
|
||||
处理流程：数据入库 → 中台医学/业务模型分析 → 判定为风险或异常 → 生成待办工单 → 实时（高危）或每日定时（一般）推送告警至管理员。
|
||||
</div>
|
||||
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">待处理异常</div>
|
||||
<div class="stat-card__value" style="color:var(--danger);">5</div>
|
||||
<div class="stat-card__sub">需立即处理</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本月累计异常</div>
|
||||
<div class="stat-card__value" style="color:var(--warning);">31</div>
|
||||
<div class="stat-card__sub">2026年4月</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">已处理</div>
|
||||
<div class="stat-card__value" style="color:var(--success);">26</div>
|
||||
<div class="stat-card__sub">本月已处置</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">处理率</div>
|
||||
<div class="stat-card__value" style="color:var(--primary);">83.9%</div>
|
||||
<div class="stat-card__sub">本月整体处置率</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>高危</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>
|
||||
<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">
|
||||
<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">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card__header">
|
||||
<div class="table-card__title">结果异常列表</div>
|
||||
<div style="display:flex;gap:8px;align-items:center;">
|
||||
<span style="font-size:var(--font-sm);color:var(--text-secondary);">共 31 条</span>
|
||||
<button class="btn btn-default" style="height:30px;font-size:var(--font-xs);">批量忽略</button>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>工单ID</th>
|
||||
<th>咨询单号</th>
|
||||
<th>异常类型</th>
|
||||
<th>严重程度</th>
|
||||
<th>异常描述</th>
|
||||
<th>触发规则</th>
|
||||
<th>涉及专家</th>
|
||||
<th>告警时间</th>
|
||||
<th>处理状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260409001</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260406008</td>
|
||||
<td><span class="anomaly-type">恶意差评</span></td>
|
||||
<td><span class="severity-high">高危</span></td>
|
||||
<td style="max-width:220px;color:var(--text-secondary);font-size:var(--font-xs);line-height:1.6;">评价内容含侮辱性语言，经NLP模型识别置信度 92%</td>
|
||||
<td><span class="rule-badge">NLP-侮辱检测</span></td>
|
||||
<td>孙医生 / 消化内科</td>
|
||||
<td>2026-04-09 08:15</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="location.href='history-evaluation.html'">查看评价</span>
|
||||
<!-- [交互] 点击标记为已处置（屏蔽该评价） -->
|
||||
<span class="link" style="color:var(--success);">屏蔽评价</span>
|
||||
<span class="link-danger">忽略</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260409002</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408201</td>
|
||||
<td><span class="anomaly-type">恶意差评</span></td>
|
||||
<td><span class="severity-high">高危</span></td>
|
||||
<td style="max-width:220px;color:var(--text-secondary);font-size:var(--font-xs);line-height:1.6;">评价内容疑似虚假，与咨询记录内容严重不符</td>
|
||||
<td><span class="rule-badge">内容一致性校验</span></td>
|
||||
<td>李医生 / 心血管内科</td>
|
||||
<td>2026-04-09 09:02</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="location.href='history-evaluation.html'">查看评价</span>
|
||||
<span class="link" style="color:var(--success);">屏蔽评价</span>
|
||||
<span class="link-danger">忽略</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260409003</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408088</td>
|
||||
<td><span class="anomaly-type">响应超时</span></td>
|
||||
<td><span class="severity-mid">一般</span></td>
|
||||
<td style="max-width:220px;color:var(--text-secondary);font-size:var(--font-xs);line-height:1.6;">专家已超过 26.5 小时未回复，超出24小时SLA</td>
|
||||
<td><span class="rule-badge">SLA-24h回复</span></td>
|
||||
<td>陈医生 / 骨科</td>
|
||||
<td>2026-04-09 10:30</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="location.href='history-expert-detail.html'">查看咨询</span>
|
||||
<!-- [交互] 点击催促专家回复 -->
|
||||
<span class="link-warning">催促回复</span>
|
||||
<span class="link-danger">忽略</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260409004</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260408112</td>
|
||||
<td><span class="anomaly-type">响应超时</span></td>
|
||||
<td><span class="severity-mid">一般</span></td>
|
||||
<td style="max-width:220px;color:var(--text-secondary);font-size:var(--font-xs);line-height:1.6;">专家已超过 31 小时未回复，超出24小时SLA</td>
|
||||
<td><span class="rule-badge">SLA-24h回复</span></td>
|
||||
<td>王医生 / 内分泌科</td>
|
||||
<td>2026-04-09 11:00</td>
|
||||
<td><span class="tag tag-orange">待处理</span></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link" onclick="location.href='history-expert-detail.html'">查看咨询</span>
|
||||
<span class="link-warning">催促回复</span>
|
||||
<span class="link-danger">忽略</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260408015</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260407055</td>
|
||||
<td><span class="anomaly-type">响应超时</span></td>
|
||||
<td><span class="severity-mid">一般</span></td>
|
||||
<td style="max-width:220px;color:var(--text-secondary);font-size:var(--font-xs);line-height:1.6;">专家超时回复，已于次日补充回复</td>
|
||||
<td><span class="rule-badge">SLA-24h回复</span></td>
|
||||
<td>张医生 / 神经内科</td>
|
||||
<td>2026-04-08 14:00</td>
|
||||
<td><span class="tag tag-green">已处置</span></td>
|
||||
<td><span class="link" onclick="location.href='history-expert-detail.html'">查看咨询</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">WO20260407008</td>
|
||||
<td style="font-family:monospace;color:var(--text-secondary);">ZX20260405033</td>
|
||||
<td><span class="anomaly-type">恶意差评</span></td>
|
||||
<td><span class="severity-high">高危</span></td>
|
||||
<td style="max-width:220px;color:var(--text-secondary);font-size:var(--font-xs);line-height:1.6;">评价内容含侮辱性语言，已屏蔽处理</td>
|
||||
<td><span class="rule-badge">NLP-侮辱检测</span></td>
|
||||
<td>孙医生 / 消化内科</td>
|
||||
<td>2026-04-07 16:20</td>
|
||||
<td><span class="tag tag-gray">已忽略</span></td>
|
||||
<td><span class="link" onclick="location.href='history-evaluation.html'">查看评价</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span>共 31 条</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,367 @@
|
||||
<!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;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--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;font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.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;}
|
||||
.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;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-item__arrow{font-size:10px;color:rgba(255,255,255,0.35);transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subitem{display:flex;align-items:center;padding:9px 24px 9px 50px;color:rgba(255,255,255,0.45);font-size:var(--font-xs);cursor:pointer;transition:all .2s;text-decoration:none;position:relative;}
|
||||
.sidebar-subitem:hover{color:#fff;}
|
||||
.sidebar-subitem.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subitem.active::before{content:'';position:absolute;left:34px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#FAAD14;}
|
||||
.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;}
|
||||
.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{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);}
|
||||
thead th.sortable{cursor:pointer;}
|
||||
thead th.sortable:hover{color:var(--primary);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);}
|
||||
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);}
|
||||
.stars{color:#FAAD14;font-size:var(--font-sm);}
|
||||
.progress-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;min-width:80px;}
|
||||
.progress-fill{height:100%;border-radius:3px;}
|
||||
.progress-fill.blue{background:var(--primary);}
|
||||
.progress-fill.green{background:var(--success);}
|
||||
.expert-info{display:flex;align-items:center;gap:10px;}
|
||||
.expert-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:600;font-size:var(--font-sm);flex-shrink:0;}
|
||||
.expert-name{font-weight:500;}
|
||||
.expert-dept{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.hot-bar{display:flex;align-items:center;gap:6px;}
|
||||
.hot-icon{color:var(--danger);font-size:var(--font-sm);}
|
||||
.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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html" class="active">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<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>
|
||||
返回首页
|
||||
</div>
|
||||
<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="history-expert.html" class="sidebar-item sidebar-item--parent">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询历史记录</div>
|
||||
<span class="sidebar-item__arrow">▾</span>
|
||||
</a>
|
||||
<a href="consult-record.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M3 2h10v12H3z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 5h4M6 8h4M6 11h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询档案</div>
|
||||
</a>
|
||||
<a href="expert-statistics.html" class="sidebar-item active">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>时间范围</label>
|
||||
<select class="filter-select" style="min-width:120px;">
|
||||
<option>本月</option>
|
||||
<option>本季度</option>
|
||||
<option>本年度</option>
|
||||
<option>自定义</option>
|
||||
</select>
|
||||
</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>
|
||||
<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">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
<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);">共 42 位专家</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>专家信息</th>
|
||||
<th class="sortable">总咨询次数 ↕</th>
|
||||
<th>进行中</th>
|
||||
<th class="sortable">图文咨询 ↕</th>
|
||||
<th class="sortable">视频咨询 ↕</th>
|
||||
<th class="sortable">满意度 ↕</th>
|
||||
<th class="sortable">24h回复率 ↕</th>
|
||||
<th class="sortable">热度 ↕</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">李</div>
|
||||
<div>
|
||||
<div class="expert-name">李医生</div>
|
||||
<div class="expert-dept">心血管内科 · 主任医师</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td style="font-weight:600;color:var(--primary);">1,234</td>
|
||||
<td><span class="tag tag-blue">3</span></td>
|
||||
<td>986</td>
|
||||
<td>248</td>
|
||||
<td>
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<span class="stars">★</span>
|
||||
<span style="font-weight:600;">4.9</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<div class="progress-bar"><div class="progress-fill green" style="width:98%"></div></div>
|
||||
<span style="font-size:var(--font-xs);">98%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="hot-bar">
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">极热</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">王</div>
|
||||
<div>
|
||||
<div class="expert-name">王医生</div>
|
||||
<div class="expert-dept">内分泌科 · 副主任医师</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td style="font-weight:600;color:var(--primary);">987</td>
|
||||
<td><span class="tag tag-blue">2</span></td>
|
||||
<td>756</td>
|
||||
<td>231</td>
|
||||
<td>
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<span class="stars">★</span>
|
||||
<span style="font-weight:600;">4.8</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<div class="progress-bar"><div class="progress-fill green" style="width:95%"></div></div>
|
||||
<span style="font-size:var(--font-xs);">95%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="hot-bar">
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">热门</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">张</div>
|
||||
<div>
|
||||
<div class="expert-name">张医生</div>
|
||||
<div class="expert-dept">神经内科 · 主治医师</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td style="font-weight:600;color:var(--primary);">756</td>
|
||||
<td><span class="tag tag-blue">1</span></td>
|
||||
<td>612</td>
|
||||
<td>144</td>
|
||||
<td>
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<span class="stars">★</span>
|
||||
<span style="font-weight:600;">4.7</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<div class="progress-bar"><div class="progress-fill green" style="width:92%"></div></div>
|
||||
<span style="font-size:var(--font-xs);">92%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="hot-bar">
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">热门</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">陈</div>
|
||||
<div>
|
||||
<div class="expert-name">陈医生</div>
|
||||
<div class="expert-dept">骨科 · 副主任医师</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td style="font-weight:600;color:var(--primary);">543</td>
|
||||
<td><span class="tag tag-blue">0</span></td>
|
||||
<td>489</td>
|
||||
<td>54</td>
|
||||
<td>
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<span class="stars">★</span>
|
||||
<span style="font-weight:600;">4.5</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<div class="progress-bar"><div class="progress-fill blue" style="width:88%"></div></div>
|
||||
<span style="font-size:var(--font-xs);">88%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="hot-bar">
|
||||
<span class="hot-icon">🔥</span>
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">一般</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">孙</div>
|
||||
<div>
|
||||
<div class="expert-name">孙医生</div>
|
||||
<div class="expert-dept">消化内科 · 主治医师</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td style="font-weight:600;color:var(--primary);">312</td>
|
||||
<td><span class="tag tag-blue">1</span></td>
|
||||
<td>278</td>
|
||||
<td>34</td>
|
||||
<td>
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<span class="stars">★</span>
|
||||
<span style="font-weight:600;color:var(--warning);">3.8</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<div class="progress-bar"><div class="progress-fill blue" style="width:75%"></div></div>
|
||||
<span style="font-size:var(--font-xs);color:var(--warning);">75%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="hot-bar">
|
||||
<span style="font-size:var(--font-xs);color:var(--text-secondary);">— 冷门</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span>共 42 条</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,197 @@
|
||||
<!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;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--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;font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.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;}
|
||||
.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;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-item__arrow{font-size:10px;color:rgba(255,255,255,0.35);transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subitem{display:flex;align-items:center;padding:9px 24px 9px 50px;color:rgba(255,255,255,0.45);font-size:var(--font-xs);cursor:pointer;transition:all .2s;text-decoration:none;position:relative;}
|
||||
.sidebar-subitem:hover{color:#fff;}
|
||||
.sidebar-subitem.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subitem.active::before{content:'';position:absolute;left:34px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#FAAD14;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:var(--font-sm);}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.breadcrumb span{color:var(--text-secondary);}
|
||||
.detail-layout{display:grid;grid-template-columns:1fr 280px;gap:20px;}
|
||||
.chat-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;}
|
||||
.chat-card__header{padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.chat-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.chat-meta__item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.chat-meta__item strong{color:var(--text-primary);}
|
||||
.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-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.chat-card__body{padding:24px;max-height:calc(100vh - 300px);overflow-y:auto;display:flex;flex-direction:column;gap:16px;}
|
||||
.msg{display:flex;gap:12px;align-items:flex-start;}
|
||||
.msg.right{flex-direction:row-reverse;}
|
||||
.msg__avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);font-weight:600;}
|
||||
.msg__avatar.user{background:#E6F7FF;color:var(--primary);}
|
||||
.msg__avatar.bot{background:#F6FFED;color:var(--success);}
|
||||
.msg__content{}
|
||||
.msg__name{font-size:var(--font-xs);color:var(--text-secondary);margin-bottom:4px;}
|
||||
.msg.right .msg__name{text-align:right;}
|
||||
.msg__bubble{background:#F5F7FA;border-radius:var(--radius-md);padding:12px 16px;font-size:var(--font-sm);line-height:1.7;max-width:520px;}
|
||||
.msg.right .msg__bubble{background:var(--primary-light);}
|
||||
.msg__time{font-size:var(--font-xs);color:#bbb;margin-top:4px;}
|
||||
.msg.right .msg__time{text-align:right;}
|
||||
.system-msg{text-align:center;font-size:var(--font-xs);color:#bbb;padding:4px 0;}
|
||||
.transfer-notice{background:#FFF7E6;border:1px solid #FFD591;border-radius:var(--radius-sm);padding:10px 16px;font-size:var(--font-sm);color:var(--warning);text-align:center;}
|
||||
.info-panel{display:flex;flex-direction:column;gap:16px;}
|
||||
.info-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:20px;}
|
||||
.info-card__title{font-size:var(--font-sm);font-weight:600;margin-bottom:14px;}
|
||||
.info-row{display:flex;justify-content:space-between;margin-bottom:10px;font-size:var(--font-sm);}
|
||||
.info-row:last-child{margin-bottom:0;}
|
||||
.info-row__label{color:var(--text-secondary);}
|
||||
.info-row__value{color:var(--text-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;width:100%;justify-content:center;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html" class="active">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<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>
|
||||
返回首页
|
||||
</div>
|
||||
<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="history-expert.html" class="sidebar-item sidebar-item--parent open">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询历史记录</div>
|
||||
<span class="sidebar-item__arrow">▲</span>
|
||||
</a>
|
||||
<a href="history-expert.html" class="sidebar-subitem">员工咨询专家</a>
|
||||
<a href="history-assistant.html" class="sidebar-subitem active">员工咨询小助手</a>
|
||||
<a href="history-expert-assistant.html" class="sidebar-subitem">专家咨询小助手</a>
|
||||
<a href="history-evaluation.html" class="sidebar-subitem">用户评价</a>
|
||||
<a href="consult-record.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M3 2h10v12H3z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 5h4M6 8h4M6 11h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询档案</div>
|
||||
</a>
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="breadcrumb">
|
||||
<a href="history-assistant.html">员工咨询小助手</a>
|
||||
<span>›</span>
|
||||
<span>对话详情 #AS20260409002</span>
|
||||
</div>
|
||||
<div class="detail-layout">
|
||||
<div class="chat-card">
|
||||
<div class="chat-card__header">
|
||||
<div class="chat-meta">
|
||||
<div class="chat-meta__item">会话ID：<strong>AS20260409002</strong></div>
|
||||
<div class="chat-meta__item">消息数：<strong>18条</strong></div>
|
||||
<div class="chat-meta__item">时长：<strong>15分钟</strong></div>
|
||||
<div class="chat-meta__item">转专家：<span class="tag tag-blue">已转专家</span></div>
|
||||
<div class="chat-meta__item">时间：<strong>2026-04-09 09:45</strong></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-card__body">
|
||||
<div class="system-msg">会话开始 · 2026-04-09 09:45</div>
|
||||
<div class="msg">
|
||||
<div class="msg__avatar bot">助</div>
|
||||
<div class="msg__content">
|
||||
<div class="msg__name">咨询小助手</div>
|
||||
<div class="msg__bubble">您好！我是健康咨询小助手，很高兴为您服务。请问您有什么健康问题需要咨询？</div>
|
||||
<div class="msg__time">09:45</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg right">
|
||||
<div class="msg__avatar user">李</div>
|
||||
<div class="msg__content">
|
||||
<div class="msg__name">李明（员工）</div>
|
||||
<div class="msg__bubble">我体检报告显示空腹血糖6.8，这是糖尿病吗？</div>
|
||||
<div class="msg__time">09:46</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg">
|
||||
<div class="msg__avatar bot">助</div>
|
||||
<div class="msg__content">
|
||||
<div class="msg__name">咨询小助手</div>
|
||||
<div class="msg__bubble">您好！空腹血糖6.8 mmol/L属于糖尿病前期（正常值为3.9-6.1 mmol/L，6.1-7.0为糖尿病前期，≥7.0为糖尿病）。<br><br>建议您：<br>1. 不要过于担心，糖尿病前期是可以逆转的<br>2. 控制饮食，减少精制碳水化合物摄入<br>3. 增加运动，每天至少30分钟中等强度运动<br>4. 建议咨询专科医生进行进一步评估</div>
|
||||
<div class="msg__time">09:47</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg right">
|
||||
<div class="msg__avatar user">李</div>
|
||||
<div class="msg__content">
|
||||
<div class="msg__name">李明（员工）</div>
|
||||
<div class="msg__bubble">我想咨询一下专科医生，能帮我转接吗？</div>
|
||||
<div class="msg__time">09:58</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transfer-notice">
|
||||
系统提示：员工申请转接专家咨询 · 09:58 · 已转接至内分泌科 王医生
|
||||
</div>
|
||||
<div class="system-msg">会话结束（已转专家）· 2026-04-09 10:00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-panel">
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">员工信息</div>
|
||||
<div class="info-row"><span class="info-row__label">姓名</span><span class="info-row__value">李明</span></div>
|
||||
<div class="info-row"><span class="info-row__label">工号</span><span class="info-row__value">CQ002571</span></div>
|
||||
<div class="info-row"><span class="info-row__label">所属单位</span><span class="info-row__value">采油二厂</span></div>
|
||||
<div class="info-row"><span class="info-row__label">职务</span><span class="info-row__value">班长</span></div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">会话统计</div>
|
||||
<div class="info-row"><span class="info-row__label">总消息数</span><span class="info-row__value">18条</span></div>
|
||||
<div class="info-row"><span class="info-row__label">员工发送</span><span class="info-row__value">9条</span></div>
|
||||
<div class="info-row"><span class="info-row__label">助手回复</span><span class="info-row__value">9条</span></div>
|
||||
<div class="info-row"><span class="info-row__label">会话时长</span><span class="info-row__value">15分钟</span></div>
|
||||
<div class="info-row"><span class="info-row__label">转专家</span><span class="info-row__value" style="color:var(--primary);">是</span></div>
|
||||
</div>
|
||||
<button class="btn btn-default" onclick="window.print()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 5V2h8v3M3 9H1V5h12v4h-2M3 9v3h8V9" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
||||
打印记录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,253 @@
|
||||
<!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;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--radius-sm:4px;--radius-md:8px;--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;font-size:var(--font-sm);}
|
||||
.btn-back-link{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.btn-back-link: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;}
|
||||
.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;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-item__arrow{font-size:10px;color:rgba(255,255,255,0.35);transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subitem{display:flex;align-items:center;padding:9px 24px 9px 50px;color:rgba(255,255,255,0.45);font-size:var(--font-xs);cursor:pointer;transition:all .2s;text-decoration:none;position:relative;}
|
||||
.sidebar-subitem:hover{color:#fff;}
|
||||
.sidebar-subitem.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subitem.active::before{content:'';position:absolute;left:34px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#FAAD14;}
|
||||
.main{margin-left:240px;margin-top:56px;padding:24px;}
|
||||
/* 面包屑 */
|
||||
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:var(--font-sm);}
|
||||
.breadcrumb a{color:var(--primary);text-decoration:none;}
|
||||
.breadcrumb a:hover{color:#40a9ff;}
|
||||
.breadcrumb span{color:var(--text-secondary);}
|
||||
/* 布局 */
|
||||
.detail-layout{display:grid;grid-template-columns:1fr 320px;gap:20px;}
|
||||
/* 左侧对话区 */
|
||||
.chat-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;}
|
||||
.chat-card__header{padding:20px 24px;border-bottom:1px solid var(--border);}
|
||||
.chat-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
|
||||
.chat-meta__item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.chat-meta__item strong{color:var(--text-primary);}
|
||||
.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);}
|
||||
.chat-card__body{padding:24px;flex:1;overflow-y:auto;max-height:calc(100vh - 320px);display:flex;flex-direction:column;gap:20px;}
|
||||
/* 消息气泡 */
|
||||
.msg{display:flex;gap:12px;align-items:flex-start;}
|
||||
.msg.right{flex-direction:row-reverse;}
|
||||
.msg__avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);font-weight:600;}
|
||||
.msg__avatar.user{background:#E6F7FF;color:var(--primary);}
|
||||
.msg__avatar.expert{background:#F6FFED;color:var(--success);}
|
||||
.msg__content{}
|
||||
.msg__name{font-size:var(--font-xs);color:var(--text-secondary);margin-bottom:4px;}
|
||||
.msg.right .msg__name{text-align:right;}
|
||||
.msg__bubble{background:#F5F7FA;border-radius:var(--radius-md);padding:12px 16px;font-size:var(--font-sm);line-height:1.7;max-width:520px;color:var(--text-primary);}
|
||||
.msg.right .msg__bubble{background:var(--primary-light);color:var(--text-primary);}
|
||||
.msg__time{font-size:var(--font-xs);color:#bbb;margin-top:4px;}
|
||||
.msg.right .msg__time{text-align:right;}
|
||||
.msg__img{width:160px;height:120px;border-radius:var(--radius-sm);object-fit:cover;background:#E8E8E8;display:flex;align-items:center;justify-content:center;color:#999;font-size:var(--font-xs);}
|
||||
.system-msg{text-align:center;font-size:var(--font-xs);color:#bbb;padding:4px 0;}
|
||||
/* 右侧信息面板 */
|
||||
.info-panel{display:flex;flex-direction:column;gap:16px;}
|
||||
.info-card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:20px;}
|
||||
.info-card__title{font-size:var(--font-sm);font-weight:600;margin-bottom:14px;color:var(--text-primary);}
|
||||
.info-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;font-size:var(--font-sm);}
|
||||
.info-row:last-child{margin-bottom:0;}
|
||||
.info-row__label{color:var(--text-secondary);flex-shrink:0;}
|
||||
.info-row__value{color:var(--text-primary);text-align:right;max-width:180px;}
|
||||
.stars{color:#FAAD14;}
|
||||
.eval-content{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.6;margin-top:8px;padding:10px 12px;background:#FAFAFA;border-radius:var(--radius-sm);}
|
||||
.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;width:100%;justify-content:center;}
|
||||
.btn-default{background:#fff;color:var(--text-primary);border:1px solid var(--border);}
|
||||
.btn-default:hover{color:var(--primary);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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html" class="active">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back-link" onclick="history.back()">
|
||||
<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>
|
||||
返回首页
|
||||
</div>
|
||||
<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="history-expert.html" class="sidebar-item sidebar-item--parent open">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询历史记录</div>
|
||||
<span class="sidebar-item__arrow">▲</span>
|
||||
</a>
|
||||
<a href="history-expert.html" class="sidebar-subitem active">员工咨询专家</a>
|
||||
<a href="history-assistant.html" class="sidebar-subitem">员工咨询小助手</a>
|
||||
<a href="history-expert-assistant.html" class="sidebar-subitem">专家咨询小助手</a>
|
||||
<a href="history-evaluation.html" class="sidebar-subitem">用户评价</a>
|
||||
<a href="consult-record.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M3 2h10v12H3z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 5h4M6 8h4M6 11h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询档案</div>
|
||||
</a>
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<!-- [交互] 面包屑导航 -->
|
||||
<div class="breadcrumb">
|
||||
<a href="history-expert.html">员工咨询专家</a>
|
||||
<span>›</span>
|
||||
<span>咨询详情 #ZX20260409001</span>
|
||||
</div>
|
||||
<div class="detail-layout">
|
||||
<!-- 左侧对话记录 -->
|
||||
<div class="chat-card">
|
||||
<div class="chat-card__header">
|
||||
<div class="chat-meta">
|
||||
<div class="chat-meta__item">单号：<strong>ZX20260409001</strong></div>
|
||||
<div class="chat-meta__item">类型：<span class="tag tag-blue">图文咨询</span></div>
|
||||
<div class="chat-meta__item">状态：<span class="tag tag-green">已完成</span></div>
|
||||
<div class="chat-meta__item">时长：<strong>23分钟</strong></div>
|
||||
<div class="chat-meta__item">发起：<strong>2026-04-09 09:12</strong></div>
|
||||
<div class="chat-meta__item">结束：<strong>2026-04-09 09:35</strong></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-card__body">
|
||||
<div class="system-msg">咨询开始 · 2026-04-09 09:12</div>
|
||||
|
||||
<!-- 员工消息（右侧） -->
|
||||
<div class="msg right">
|
||||
<div class="msg__avatar user">张</div>
|
||||
<div class="msg__content">
|
||||
<div class="msg__name">张伟（员工）</div>
|
||||
<div class="msg__bubble">您好，我最近经常感到心跳加速，有时候会有胸闷的感觉，特别是在爬楼梯或者快走的时候。这种情况已经持续了大概两周了，请问需要注意什么？</div>
|
||||
<div class="msg__time">09:12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专家消息（左侧） -->
|
||||
<div class="msg">
|
||||
<div class="msg__avatar expert">李</div>
|
||||
<div class="msg__content">
|
||||
<div class="msg__name">李医生（心血管内科）</div>
|
||||
<div class="msg__bubble">您好！根据您描述的症状，心跳加速和胸闷在活动后加重，需要引起重视。请问您有没有高血压、糖尿病等基础疾病？家族中有没有心脏病史？另外，您最近的睡眠和饮食情况如何？</div>
|
||||
<div class="msg__time">09:15</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 员工消息 -->
|
||||
<div class="msg right">
|
||||
<div class="msg__avatar user">张</div>
|
||||
<div class="msg__content">
|
||||
<div class="msg__name">张伟（员工）</div>
|
||||
<div class="msg__bubble">我有轻度高血压，在吃药控制。父亲有冠心病。最近工作比较忙，睡眠不太好，大概每天只睡5-6小时。我上传一下我最近的体检报告。</div>
|
||||
<div class="msg__time">09:18</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片消息 -->
|
||||
<div class="msg right">
|
||||
<div class="msg__avatar user">张</div>
|
||||
<div class="msg__content">
|
||||
<div class="msg__name">张伟（员工）</div>
|
||||
<div class="msg__img">[体检报告图片]</div>
|
||||
<div class="msg__time">09:19</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专家消息 -->
|
||||
<div class="msg">
|
||||
<div class="msg__avatar expert">李</div>
|
||||
<div class="msg__content">
|
||||
<div class="msg__name">李医生（心血管内科）</div>
|
||||
<div class="msg__bubble">看了您的体检报告，您的血压控制在正常范围内，但心电图显示有轻度ST段改变。结合您的家族史和症状，建议您：<br><br>1. 尽快到医院做一个动态心电图（Holter）检查<br>2. 同时做心脏彩超排除器质性病变<br>3. 近期避免剧烈运动，注意休息<br>4. 保证充足睡眠，每天不少于7小时<br>5. 如果出现持续胸痛、呼吸困难，立即就医</div>
|
||||
<div class="msg__time">09:28</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 员工消息 -->
|
||||
<div class="msg right">
|
||||
<div class="msg__avatar user">张</div>
|
||||
<div class="msg__content">
|
||||
<div class="msg__name">张伟（员工）</div>
|
||||
<div class="msg__bubble">好的，谢谢医生！我明天就去医院检查。请问去哪个医院比较好？</div>
|
||||
<div class="msg__time">09:32</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专家消息 -->
|
||||
<div class="msg">
|
||||
<div class="msg__avatar expert">李</div>
|
||||
<div class="msg__content">
|
||||
<div class="msg__name">李医生（心血管内科）</div>
|
||||
<div class="msg__bubble">建议您去西安交通大学第一附属医院或长庆油田职工医院的心血管内科就诊，挂心血管内科门诊即可。祝您早日康复！</div>
|
||||
<div class="msg__time">09:35</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="system-msg">咨询结束 · 2026-04-09 09:35</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧信息面板 -->
|
||||
<div class="info-panel">
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">员工信息</div>
|
||||
<div class="info-row"><span class="info-row__label">姓名</span><span class="info-row__value">张伟</span></div>
|
||||
<div class="info-row"><span class="info-row__label">工号</span><span class="info-row__value">CQ001234</span></div>
|
||||
<div class="info-row"><span class="info-row__label">所属单位</span><span class="info-row__value">采油一厂</span></div>
|
||||
<div class="info-row"><span class="info-row__label">职务</span><span class="info-row__value">一线员工</span></div>
|
||||
<div class="info-row"><span class="info-row__label">联系电话</span><span class="info-row__value">138****5678</span></div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">专家信息</div>
|
||||
<div class="info-row"><span class="info-row__label">姓名</span><span class="info-row__value">李医生</span></div>
|
||||
<div class="info-row"><span class="info-row__label">科室</span><span class="info-row__value">心血管内科</span></div>
|
||||
<div class="info-row"><span class="info-row__label">职称</span><span class="info-row__value">主任医师</span></div>
|
||||
<div class="info-row"><span class="info-row__label">所属医院</span><span class="info-row__value">西安交大一附院</span></div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">评价信息</div>
|
||||
<div class="info-row"><span class="info-row__label">评分</span><span class="info-row__value stars">★★★★★ 5.0</span></div>
|
||||
<div class="info-row"><span class="info-row__label">评价时间</span><span class="info-row__value">2026-04-09 09:40</span></div>
|
||||
<div class="eval-content">专家回复很专业，解答了我的疑惑，建议也很实用，非常感谢！</div>
|
||||
</div>
|
||||
<button class="btn btn-default" onclick="window.print()">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 5V2h8v3M3 9H1V5h12v4h-2M3 9v3h8V9" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
||||
打印记录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,336 @@
|
||||
<!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;--border:#E8E8E8;--font-xs:11px;--font-sm:13px;--font-base:15px;--font-lg:17px;--font-xl:20px;--font-xxl:24px;--radius-sm:4px;--radius-md:8px;--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;font-size:var(--font-sm);}
|
||||
.btn-back{color:rgba(255,255,255,0.65);cursor:pointer;display:flex;align-items:center;gap:4px;}
|
||||
.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;}
|
||||
.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;}
|
||||
.sidebar-item--parent{justify-content:space-between;}
|
||||
.sidebar-item__left{display:flex;align-items:center;gap:10px;}
|
||||
.sidebar-item__arrow{font-size:10px;color:rgba(255,255,255,0.35);transition:transform .2s;flex-shrink:0;}
|
||||
.sidebar-subitem{display:flex;align-items:center;padding:9px 24px 9px 50px;color:rgba(255,255,255,0.45);font-size:var(--font-xs);cursor:pointer;transition:all .2s;text-decoration:none;position:relative;}
|
||||
.sidebar-subitem:hover{color:#fff;}
|
||||
.sidebar-subitem.active{color:#fff;background:var(--primary);}
|
||||
.sidebar-subitem.active::before{content:'';position:absolute;left:34px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#FAAD14;}
|
||||
.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;}
|
||||
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
|
||||
.stat-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;box-shadow:var(--shadow-sm);}
|
||||
.stat-card__label{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.stat-card__value{font-size:var(--font-xxl);font-weight:700;margin-top:8px;}
|
||||
.stat-card__sub{font-size:var(--font-xs);color:var(--text-placeholder);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;}
|
||||
.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-success{background:var(--success);color:#fff;}
|
||||
.btn-success:hover{background:#73d13d;}
|
||||
.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{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);}
|
||||
tbody td{padding:14px 16px;font-size:var(--font-sm);border-bottom:1px solid var(--border);}
|
||||
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-orange{background:#FFF7E6;color:var(--warning);}
|
||||
.tag-blue{background:var(--primary-light);color:var(--primary);}
|
||||
.tag-gray{background:#F5F5F5;color:var(--text-secondary);}
|
||||
.amount{font-weight:600;color:var(--text-primary);}
|
||||
.amount-total{font-weight:700;color:var(--warning);font-size:var(--font-base);}
|
||||
.expert-info{display:flex;align-items:center;gap:10px;}
|
||||
.expert-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:600;font-size:var(--font-sm);flex-shrink:0;}
|
||||
.expert-name{font-weight:500;}
|
||||
.expert-dept{font-size:var(--font-xs);color:var(--text-secondary);}
|
||||
.link{color:var(--primary);cursor:pointer;font-size:var(--font-sm);}
|
||||
.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="M7 14h14M14 7v14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
专家咨询–管理员
|
||||
</div>
|
||||
<nav class="top-bar__nav">
|
||||
<a href="archive-personal.html">档案</a>
|
||||
<a href="config-hospital.html">基础配置</a>
|
||||
<a href="history-expert.html" class="active">咨询数据</a>
|
||||
<a href="exception-dirty.html">异常事件</a>
|
||||
</nav>
|
||||
<div class="top-bar__right">
|
||||
<div class="btn-back" onclick="history.back()">
|
||||
<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>
|
||||
返回首页
|
||||
</div>
|
||||
<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="history-expert.html" class="sidebar-item sidebar-item--parent">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询历史记录</div>
|
||||
<span class="sidebar-item__arrow">▾</span>
|
||||
</a>
|
||||
<a href="consult-record.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M3 2h10v12H3z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 5h4M6 8h4M6 11h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询档案</div>
|
||||
</a>
|
||||
<a href="expert-statistics.html" class="sidebar-item">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><path d="M2 13V8l4-4 3 3 5-5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>专家咨询统计</div>
|
||||
</a>
|
||||
<a href="settlement.html" class="sidebar-item active">
|
||||
<div class="sidebar-item__left"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M5 8h6M5 11h3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>咨询结算</div>
|
||||
</a>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本月待结算金额</div>
|
||||
<div class="stat-card__value" style="color:var(--warning);">¥ 32,450</div>
|
||||
<div class="stat-card__sub">2026年4月</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本月已结算金额</div>
|
||||
<div class="stat-card__value" style="color:var(--success);">¥ 18,200</div>
|
||||
<div class="stat-card__sub">已完成结算</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">本年累计结算</div>
|
||||
<div class="stat-card__value" style="color:var(--primary);">¥ 248,600</div>
|
||||
<div class="stat-card__sub">2026年度</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__label">待结算专家数</div>
|
||||
<div class="stat-card__value">28</div>
|
||||
<div class="stat-card__sub">本月待处理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>结算周期</label>
|
||||
<select class="filter-select" style="min-width:140px;">
|
||||
<option>2026年4月</option>
|
||||
<option>2026年3月</option>
|
||||
<option>2026年2月</option>
|
||||
<option>2026年1月</option>
|
||||
<option>2025年12月</option>
|
||||
</select>
|
||||
</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>
|
||||
</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>
|
||||
<!-- [交互] 点击生成本月结算报表 -->
|
||||
<button class="btn btn-success" style="margin-left:auto;">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v7M4.5 6.5L7 9l2.5-2.5M2 10v2h10v-2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
生成结算报表
|
||||
</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">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
查看导出任务
|
||||
</button>
|
||||
</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">结算明细列表（2026年4月）</div>
|
||||
<div style="font-size:var(--font-sm);color:var(--text-secondary);">共 42 位专家</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">李</div>
|
||||
<div>
|
||||
<div class="expert-name">李医生</div>
|
||||
<div class="expert-dept">心血管内科</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>312</td>
|
||||
<td>¥ 30</td>
|
||||
<td>86</td>
|
||||
<td>¥ 80</td>
|
||||
<td><span class="amount-total">¥ 16,240</span></td>
|
||||
<td><span class="tag tag-orange">待结算</span></td>
|
||||
<td>—</td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link">查看明细</span>
|
||||
<!-- [交互] 点击标记为已结算 -->
|
||||
<span class="link" style="color:var(--success);">确认结算</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">王</div>
|
||||
<div>
|
||||
<div class="expert-name">王医生</div>
|
||||
<div class="expert-dept">内分泌科</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>245</td>
|
||||
<td>¥ 30</td>
|
||||
<td>62</td>
|
||||
<td>¥ 80</td>
|
||||
<td><span class="amount-total">¥ 12,310</span></td>
|
||||
<td><span class="tag tag-green">已结算</span></td>
|
||||
<td>2026-04-05</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">张</div>
|
||||
<div>
|
||||
<div class="expert-name">张医生</div>
|
||||
<div class="expert-dept">神经内科</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>198</td>
|
||||
<td>¥ 30</td>
|
||||
<td>45</td>
|
||||
<td>¥ 80</td>
|
||||
<td><span class="amount-total">¥ 9,540</span></td>
|
||||
<td><span class="tag tag-blue">结算中</span></td>
|
||||
<td>—</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">陈</div>
|
||||
<div>
|
||||
<div class="expert-name">陈医生</div>
|
||||
<div class="expert-dept">骨科</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>156</td>
|
||||
<td>¥ 30</td>
|
||||
<td>18</td>
|
||||
<td>¥ 80</td>
|
||||
<td><span class="amount-total">¥ 6,120</span></td>
|
||||
<td><span class="tag tag-orange">待结算</span></td>
|
||||
<td>—</td>
|
||||
<td>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<span class="link">查看明细</span>
|
||||
<span class="link" style="color:var(--success);">确认结算</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="expert-info">
|
||||
<div class="expert-avatar">孙</div>
|
||||
<div>
|
||||
<div class="expert-name">孙医生</div>
|
||||
<div class="expert-dept">消化内科</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>89</td>
|
||||
<td>¥ 30</td>
|
||||
<td>12</td>
|
||||
<td>¥ 80</td>
|
||||
<td><span class="amount-total">¥ 3,630</span></td>
|
||||
<td><span class="tag tag-green">已结算</span></td>
|
||||
<td>2026-04-06</td>
|
||||
<td><span class="link">查看明细</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<span>共 42 条</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>
|
||||
Reference in New Issue
Block a user