<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>医疗信息系统</title>
<!-- Tailwind CSS v3 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#64748b',
neutral: '#f1f5f9',
'neutral-dark': '#94a3b8',
'neutral-light': '#f8fafc'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
boxShadow: {
'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'modal': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.glass-effect {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.transition-all-300 {
transition: all 300ms ease-in-out;
}
.hover-scale {
transition: transform 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.02);
}
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<div class="min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center">
<i class="fa fa-heartbeat text-primary text-2xl mr-3"></i>
<h1 class="text-xl font-semibold text-gray-800">医疗信息管理系统</h1>
</div>
<div class="flex items-center space-x-4">
<span class="text-sm text-gray-600">2025年11月13日</span>
<div class="flex items-center">
<i class="fa fa-user-circle text-primary mr-2"></i>
<span class="text-sm font-medium text-gray-700">管理员</span>
</div>
</div>
</div>
</header>
<!-- 主要内容区域 -->
<main class="flex-grow container mx-auto px-4 py-6">
<div class="flex flex-col lg:flex-row gap-6">
<!-- 左侧区域 - 70%宽度 -->
<div class="w-full lg:w-7/12 space-y-6">
<!-- 患者信息卡片 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<h2 class="text-lg font-semibold text-gray-800 mb-4">
患者信息
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="space-y-2">
<label class="text-xs text-gray-500">姓名</label>
<div class="text-sm text-gray-700">张三</div>
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">证件号码</label>
<div class="text-sm text-gray-700">320901198601011234</div>
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">证件类型</label>
<div class="text-sm text-gray-700">身份证</div>
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">年龄</label>
<div class="text-sm text-gray-700">38</div>
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">性别</label>
<div class="text-sm text-gray-700">男</div>
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">联系电话</label>
<div class="text-sm text-gray-700">138****5678</div>
</div>
</div>
</div>
<!-- 发票信息卡片 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<h2 class="text-lg font-semibold text-gray-800 mb-4">
发票信息
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="space-y-2">
<label class="text-xs text-gray-500">发票号码</label>
<div class="text-sm text-gray-700">100009</div>
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">开票日期</label>
<div class="text-sm text-gray-700">2025-10-10</div>
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">发票金额</label>
<div class="text-sm text-gray-700">¥4500.00</div>
</div>
</div>
</div>
<!-- 理赔信息卡片 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<h2 class="text-lg font-semibold text-gray-800 mb-4">
理赔信息
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="space-y-2">
<label class="text-xs text-gray-500">理赔状态</label>
<div class="text-sm text-gray-700">已完成</div>
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">理赔金额</label>
<div class="text-sm text-gray-700">¥3600.00</div>
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">理赔日期</label>
<div class="text-sm text-gray-700">2025-10-15</div>
</div>
</div>
</div>
<!-- 代理人信息卡片 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<h2 class="text-lg font-semibold text-gray-800 mb-4">
代理人信息
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="space-y-2">
<label class="text-xs text-gray-500">代理人姓名</label>
<div class="text-sm text-gray-700">李四</div>
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">代理人证件号码</label>
<div class="text-sm text-gray-700">320901198802023456</div>
</div>
<div class="space-y-2">
<label class="text-xs text-gray-500">与患者关系</label>
<div class="text-sm text-gray-700">夫妻</div>
</div>
</div>
</div>
</div>
<!-- 右侧区域 - 30%宽度 -->
<div class="w-full lg:w-3/12 space-y-6">
<!-- 购药发票 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<h2 class="text-lg font-semibold text-gray-800 mb-4">
购药发票
</h2>
<div class="grid grid-cols-3 gap-3">
<div class="aspect-square cursor-pointer" onclick="openSlideshow('购药发票', 0)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
<div class="aspect-square cursor-pointer" onclick="openSlideshow('购药发票', 1)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
<div class="aspect-square cursor-pointer" onclick="openSlideshow('购药发票', 2)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
</div>
</div>
<!-- 结算清单 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<h2 class="text-lg font-semibold text-gray-800 mb-4">
结算清单
</h2>
<div class="grid grid-cols-3 gap-3">
<div class="aspect-square cursor-pointer" onclick="openSlideshow('结算清单', 0)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
<div class="aspect-square cursor-pointer" onclick="openSlideshow('结算清单', 1)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
<div class="aspect-square cursor-pointer" onclick="openSlideshow('结算清单', 2)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
</div>
</div>
<!-- 用药处方 -->
<div class="bg-white rounded-lg shadow-card p-6 hover-scale">
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex justify-between items-center">
用药处方
<button onclick="openVerificationModal()" class="flex items-center text-sm text-primary hover:text-primary/80 transition-all-300">
<span>查验</span>
<i class="fa fa-search ml-1"></i>
</button>
</h2>
<div class="grid grid-cols-3 gap-3">
<div class="aspect-square cursor-pointer" onclick="openSlideshow('用药处方', 0)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
<div class="aspect-square cursor-pointer" onclick="openSlideshow('用药处方', 1)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
<div class="aspect-square cursor-pointer" onclick="openSlideshow('用药处方', 2)">
<div class="w-full h-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-2xl"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- 底部信息 -->
<footer class="bg-white border-t border-gray-200 py-4">
<div class="container mx-auto px-4 text-center text-sm text-gray-500">
© 2025 医疗信息管理系统 - 版权所有
</div>
</footer>
</div>
<!-- 图片幻灯片 -->
<div id="slideshow" class="fixed inset-0 bg-black z-50 hidden flex flex-col">
<!-- 幻灯片头部 -->
<div class="flex justify-between items-center p-4 text-white">
<h3 id="slideshowTitle" class="text-xl font-medium">图片预览</h3>
<button onclick="closeSlideshow()" class="text-white hover:text-gray-300 transition-all-300">
<i class="fa fa-times text-2xl"></i>
</button>
</div>
<!-- 幻灯片内容 -->
<div class="flex-grow flex items-center justify-center p-4">
<button onclick="prevSlide()" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-3 rounded-full hover:bg-opacity-70 transition-all-300">
<i class="fa fa-chevron-left text-2xl"></i>
</button>
<div id="slideshowContent" class="max-w-full max-h-full flex items-center justify-center">
<div class="aspect-square max-h-[80vh] bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-6xl"></i>
</div>
</div>
<button onclick="nextSlide()" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-3 rounded-full hover:bg-opacity-70 transition-all-300">
<i class="fa fa-chevron-right text-2xl"></i>
</button>
</div>
<!-- 幻灯片底部 -->
<div class="p-4 text-white text-center">
<div id="slideshowCounter" class="text-sm">1 / 3</div>
</div>
</div>
<!-- 查验浮窗 -->
<div id="verificationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg max-w-6xl w-full max-h-[90vh] overflow-hidden flex flex-col">
<!-- 浮窗头部 -->
<div class="p-4 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-xl font-medium text-gray-800">处方查验</h3>
<button onclick="closeVerificationModal()" class="text-gray-500 hover:text-gray-700">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<!-- 浮窗内容 -->
<div class="flex-grow p-6 overflow-y-auto">
<div class="flex flex-col md:flex-row gap-6">
<!-- 左侧大图 -->
<div class="w-full md:w-1/2 space-y-4">
<h4 class="text-lg font-medium text-gray-700">用药处方</h4>
<div class="aspect-square bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-6xl"></i>
</div>
</div>
<!-- 右侧历史处方 -->
<div class="w-full md:w-1/2 space-y-4">
<h4 class="text-lg font-medium text-gray-700">上海第六人民医院历史处方</h4>
<!-- 筛选功能 -->
<div class="bg-gray-50 p-4 rounded-lg">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">项目名称</label>
<div class="relative">
<select id="projectNameFilter" class="w-full pl-3 pr-8 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none">
<option value="">全部项目</option>
<option value="感冒治疗">感冒治疗</option>
<option value="高血压管理">高血压管理</option>
<option value="糖尿病随访">糖尿病随访</option>
<option value="心脏病筛查">心脏病筛查</option>
<option value="胃病诊疗">胃病诊疗</option>
<option value="头痛缓解">头痛缓解</option>
<option value="过敏治疗">过敏治疗</option>
<option value="皮肤病诊疗">皮肤病诊疗</option>
<option value="眼科检查">眼科检查</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<i class="fa fa-chevron-down text-xs"></i>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">医生姓名</label>
<div class="relative">
<i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
<input type="text" id="doctorNameFilter" placeholder="请输入医生姓名" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
</div>
</div>
<div class="flex justify-end space-x-3">
<button onclick="resetFilters()" class="px-4 py-2 border border-gray-300 text-gray-700 rounded hover:bg-gray-100 transition-all-300">
重置
</button>
<button onclick="filterPrescriptions()" class="px-4 py-2 bg-primary text-white rounded hover:bg-primary/90 transition-all-300 flex items-center">
<i class="fa fa-search mr-2"></i>
搜索
</button>
</div>
</div>
<!-- 历史处方图片网格 -->
<div id="historyPrescriptions" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- 图片将通过JavaScript动态生成 -->
</div>
<!-- 分页控件 -->
<div class="mt-6 flex justify-center">
<div class="flex items-center space-x-2">
<button id="prevPage" onclick="changePage('prev')" class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100 transition-all-300 disabled:opacity-50 disabled:cursor-not-allowed">
<i class="fa fa-chevron-left"></i>
</button>
<span id="pageInfo" class="text-sm text-gray-600">1 / 3</span>
<button id="nextPage" onclick="changePage('next')" class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100 transition-all-300">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 图片数据
const imageData = {
'购药发票': [
'购药发票 1',
'购药发票 2',
'购药发票 3'
],
'结算清单': [
'结算清单 1',
'结算清单 2',
'结算清单 3'
],
'用药处方': [
'用药处方 1',
'用药处方 2',
'用药处方 3'
]
};
let currentCategory = '';
let currentIndex = 0;
// 打开幻灯片
function openSlideshow(category, index) {
currentCategory = category;
currentIndex = index;
const slideshow = document.getElementById('slideshow');
const slideshowTitle = document.getElementById('slideshowTitle');
const slideshowCounter = document.getElementById('slideshowCounter');
slideshowTitle.textContent = imageData[category][index];
slideshowCounter.textContent = `${index + 1} / ${imageData[category].length}`;
slideshow.classList.remove('hidden');
// 防止背景滚动
document.body.style.overflow = 'hidden';
// 显示/隐藏导航按钮
updateNavigationButtons();
}
// 关闭幻灯片
function closeSlideshow() {
const slideshow = document.getElementById('slideshow');
slideshow.classList.add('hidden');
// 恢复背景滚动
document.body.style.overflow = '';
}
// 上一张幻灯片
function prevSlide() {
if (currentIndex > 0) {
currentIndex--;
updateSlideshow();
}
}
// 下一张幻灯片
function nextSlide() {
if (currentIndex < imageData[currentCategory].length - 1) {
currentIndex++;
updateSlideshow();
}
}
// 更新幻灯片内容
function updateSlideshow() {
const slideshowTitle = document.getElementById('slideshowTitle');
const slideshowCounter = document.getElementById('slideshowCounter');
slideshowTitle.textContent = imageData[currentCategory][currentIndex];
slideshowCounter.textContent = `${currentIndex + 1} / ${imageData[currentCategory].length}`;
// 显示/隐藏导航按钮
updateNavigationButtons();
}
// 更新导航按钮显示状态
function updateNavigationButtons() {
const prevButton = document.querySelector('#slideshow button:first-of-type');
const nextButton = document.querySelector('#slideshow button:nth-of-type(2)');
if (currentIndex === 0) {
prevButton.classList.add('opacity-0', 'pointer-events-none');
} else {
prevButton.classList.remove('opacity-0', 'pointer-events-none');
}
if (currentIndex === imageData[currentCategory].length - 1) {
nextButton.classList.add('opacity-0', 'pointer-events-none');
} else {
nextButton.classList.remove('opacity-0', 'pointer-events-none');
}
}
// 键盘导航
document.addEventListener('keydown', function(e) {
const slideshow = document.getElementById('slideshow');
if (!slideshow.classList.contains('hidden')) {
if (e.key === 'Escape') {
closeSlideshow();
} else if (e.key === 'ArrowLeft') {
prevSlide();
} else if (e.key === 'ArrowRight') {
nextSlide();
}
}
});
// 查验浮窗相关功能
function openVerificationModal() {
const modal = document.getElementById('verificationModal');
modal.classList.remove('hidden');
// 防止背景滚动
document.body.style.overflow = 'hidden';
// 生成随机处方图片
generateRandomPrescriptions();
}
function closeVerificationModal() {
const modal = document.getElementById('verificationModal');
modal.classList.add('hidden');
// 恢复背景滚动
document.body.style.overflow = '';
}
// 处方数据
let prescriptionsData = [];
let currentPage = 1;
const totalPages = 3;
const itemsPerPage = 9;
// 生成随机处方数据
function generateRandomPrescriptionsData() {
const projectNames = ['感冒治疗', '高血压管理', '糖尿病随访', '心脏病筛查', '胃病诊疗', '头痛缓解', '过敏治疗', '皮肤病诊疗', '眼科检查'];
const doctorNames = ['王医生', '李医生', '张医生', '刘医生', '陈医生', '赵医生', '黄医生', '周医生', '吴医生'];
const patientNames = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十', '-', '-', '-'];
prescriptionsData = [];
// 生成足够的数据用于3页显示，每页9条
for (let i = 0; i < totalPages * itemsPerPage; i++) {
const randomNum = Math.floor(Math.random() * 1000);
const randomProject = projectNames[Math.floor(Math.random() * projectNames.length)];
const randomDoctor = doctorNames[Math.floor(Math.random() * doctorNames.length)];
const randomPatient = patientNames[Math.floor(Math.random() * patientNames.length)];
prescriptionsData.push({
id: i,
number: randomNum,
projectName: randomProject,
doctorName: randomDoctor,
patientName: randomPatient
});
}
return prescriptionsData;
}
// 渲染处方图片
function renderPrescriptions(prescriptions) {
const container = document.getElementById('historyPrescriptions');
container.innerHTML = '';
if (prescriptions.length === 0) {
container.innerHTML = `
<div class="col-span-full flex flex-col items-center justify-center py-8 text-gray-500">
<i class="fa fa-search text-4xl mb-2"></i>
<div>没有找到匹配的处方</div>
</div>
`;
return;
}
prescriptions.forEach((prescription, index) => {
const imgContainer = document.createElement('div');
imgContainer.className = 'cursor-pointer flex flex-col p-2';
imgContainer.innerHTML = `
<div class="aspect-square w-full bg-neutral-dark rounded flex items-center justify-center text-white">
<i class="fa fa-file-image-o text-3xl"></i>
</div>
<div class="mt-2 text-center min-h-[40px]">
<div class="text-xs text-gray-600">处方 ${prescription.number}</div>
<div class="text-xs text-gray-500">${prescription.patientName}</div>
</div>
`;
imgContainer.onclick = function() {
openSlideshow('历史处方', index);
};
container.appendChild(imgContainer);
});
}
// 获取当前页的处方数据
function getCurrentPageData() {
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
return prescriptionsData.slice(startIndex, endIndex);
}
// 更新分页信息显示
function updatePageInfo() {
document.getElementById('pageInfo').textContent = `${currentPage} / ${totalPages}`;
// 更新分页按钮状态
document.getElementById('prevPage').disabled = currentPage === 1;
document.getElementById('nextPage').disabled = currentPage === totalPages;
}
// 切换页码
function changePage(direction) {
if (direction === 'prev' && currentPage > 1) {
currentPage--;
} else if (direction === 'next' && currentPage < totalPages) {
currentPage++;
}
updatePageInfo();
renderPrescriptions(getCurrentPageData());
}
// 生成随机处方图片
function generateRandomPrescriptions() {
generateRandomPrescriptionsData();
currentPage = 1; // 重置为第一页
updatePageInfo();
renderPrescriptions(getCurrentPageData());
}
// 筛选处方
function filterPrescriptions() {
const projectNameFilter = document.getElementById('projectNameFilter').value;
const doctorNameFilter = document.getElementById('doctorNameFilter').value.toLowerCase();
if (!prescriptionsData || prescriptionsData.length === 0) {
generateRandomPrescriptionsData();
}
const filteredPrescriptions = prescriptionsData.filter(prescription => {
const matchesProject = projectNameFilter === '' || prescription.projectName === projectNameFilter;
const matchesDoctor = doctorNameFilter === '' || prescription.doctorName.toLowerCase().includes(doctorNameFilter);
return matchesProject && matchesDoctor;
});
// 筛选时重置为第一页
currentPage = 1;
updatePageInfo();
// 如果筛选结果为空，显示提示信息
if (filteredPrescriptions.length === 0) {
const container = document.getElementById('historyPrescriptions');
container.innerHTML = `
<div class="col-span-full flex flex-col items-center justify-center py-8 text-gray-500">
<i class="fa fa-search text-4xl mb-2"></i>
<div>没有找到匹配的处方</div>
</div>
`;
return;
}
// 显示筛选结果的第一页
const pageData = filteredPrescriptions.slice(0, itemsPerPage);
renderPrescriptions(pageData);
}
// 重置筛选
function resetFilters() {
document.getElementById('projectNameFilter').value = '';
document.getElementById('doctorNameFilter').value = '';
// 重置为第一页
currentPage = 1;
updatePageInfo();
renderPrescriptions(getCurrentPageData());
}
// 点击浮窗外部关闭
document.getElementById('verificationModal').addEventListener('click', function(e) {
if (e.target === this) {
closeVerificationModal();
}
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html