552 lines
18 KiB
HTML
552 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>宠物详情 - 专业医疗式</title>
|
||
<link rel="stylesheet" href="assets/css/common.css">
|
||
<style>
|
||
/* 专业医疗式特有样式 */
|
||
.medical-container {
|
||
background: #F8F9FA;
|
||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||
}
|
||
|
||
.medical-header {
|
||
background: #2C5282;
|
||
color: white;
|
||
padding: var(--spacing-lg);
|
||
position: relative;
|
||
}
|
||
|
||
.header-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.patient-id {
|
||
font-size: 12px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.emergency-btn {
|
||
background: #E53E3E;
|
||
color: white;
|
||
border: none;
|
||
padding: var(--spacing-xs) var(--spacing-sm);
|
||
border-radius: var(--radius-sm);
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.patient-info {
|
||
display: flex;
|
||
gap: var(--spacing-md);
|
||
align-items: center;
|
||
}
|
||
|
||
.patient-avatar {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: var(--radius-md);
|
||
border: 2px solid rgba(255,255,255,0.3);
|
||
}
|
||
|
||
.patient-details h1 {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.patient-meta {
|
||
font-size: 14px;
|
||
opacity: 0.9;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.medical-tabs {
|
||
background: white;
|
||
border-bottom: 1px solid #E2E8F0;
|
||
display: flex;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.tab-item {
|
||
padding: var(--spacing-md) var(--spacing-lg);
|
||
border-bottom: 3px solid transparent;
|
||
font-weight: 500;
|
||
color: #4A5568;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: #2C5282;
|
||
border-bottom-color: #2C5282;
|
||
background: #F7FAFC;
|
||
}
|
||
|
||
.medical-section {
|
||
background: white;
|
||
margin: var(--spacing-md);
|
||
border-radius: var(--radius-md);
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.section-header {
|
||
background: #EDF2F7;
|
||
padding: var(--spacing-md);
|
||
border-bottom: 1px solid #E2E8F0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.section-title {
|
||
font-weight: bold;
|
||
color: #2D3748;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-sm);
|
||
}
|
||
|
||
.section-action {
|
||
background: #2C5282;
|
||
color: white;
|
||
border: none;
|
||
padding: var(--spacing-xs) var(--spacing-sm);
|
||
border-radius: var(--radius-sm);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.vital-signs {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--spacing-md);
|
||
padding: var(--spacing-md);
|
||
}
|
||
|
||
.vital-item {
|
||
text-align: center;
|
||
padding: var(--spacing-md);
|
||
background: #F7FAFC;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid #E2E8F0;
|
||
}
|
||
|
||
.vital-value {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #2D3748;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.vital-label {
|
||
font-size: 12px;
|
||
color: #718096;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.vital-status {
|
||
font-size: 10px;
|
||
padding: 2px 6px;
|
||
border-radius: 10px;
|
||
margin-top: var(--spacing-xs);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.status-normal {
|
||
background: #C6F6D5;
|
||
color: #22543D;
|
||
}
|
||
|
||
.status-warning {
|
||
background: #FEFCBF;
|
||
color: #744210;
|
||
}
|
||
|
||
.status-critical {
|
||
background: #FED7D7;
|
||
color: #742A2A;
|
||
}
|
||
|
||
.medical-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.medical-table th {
|
||
background: #EDF2F7;
|
||
padding: var(--spacing-sm);
|
||
text-align: left;
|
||
font-weight: bold;
|
||
color: #2D3748;
|
||
font-size: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.medical-table td {
|
||
padding: var(--spacing-sm);
|
||
border-bottom: 1px solid #E2E8F0;
|
||
font-size: 14px;
|
||
color: #4A5568;
|
||
}
|
||
|
||
.medical-table tr:hover {
|
||
background: #F7FAFC;
|
||
}
|
||
|
||
.treatment-item {
|
||
padding: var(--spacing-md);
|
||
border-bottom: 1px solid #E2E8F0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.treatment-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.treatment-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.treatment-name {
|
||
font-weight: bold;
|
||
color: #2D3748;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.treatment-details {
|
||
font-size: 14px;
|
||
color: #718096;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.treatment-date {
|
||
font-size: 12px;
|
||
color: #A0AEC0;
|
||
white-space: nowrap;
|
||
margin-left: var(--spacing-md);
|
||
}
|
||
|
||
.alert-box {
|
||
background: #FED7D7;
|
||
border: 1px solid #FEB2B2;
|
||
border-radius: var(--radius-md);
|
||
padding: var(--spacing-md);
|
||
margin: var(--spacing-md);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-sm);
|
||
}
|
||
|
||
.alert-icon {
|
||
font-size: 20px;
|
||
color: #E53E3E;
|
||
}
|
||
|
||
.alert-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.alert-title {
|
||
font-weight: bold;
|
||
color: #742A2A;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.alert-message {
|
||
font-size: 14px;
|
||
color: #742A2A;
|
||
}
|
||
|
||
.medical-actions {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--spacing-sm);
|
||
padding: var(--spacing-md);
|
||
background: #F7FAFC;
|
||
}
|
||
|
||
.medical-btn {
|
||
background: #2C5282;
|
||
color: white;
|
||
border: none;
|
||
padding: var(--spacing-md);
|
||
border-radius: var(--radius-md);
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.medical-btn:hover {
|
||
background: #2A4365;
|
||
}
|
||
|
||
.medical-btn.secondary {
|
||
background: #4A5568;
|
||
}
|
||
|
||
.medical-btn.emergency {
|
||
background: #E53E3E;
|
||
}
|
||
|
||
.chart-placeholder {
|
||
height: 120px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: var(--radius-md);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-weight: bold;
|
||
margin: var(--spacing-md);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container medical-container">
|
||
<!-- 医疗头部 -->
|
||
<div class="medical-header">
|
||
<div class="header-top">
|
||
<div class="patient-id">患者编号: PET-2024-001</div>
|
||
<button class="emergency-btn">🚨 紧急联系</button>
|
||
</div>
|
||
|
||
<div class="patient-info">
|
||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiNGRjhBODAiLz4KPHRleHQgeD0iNTAiIHk9IjU1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7wn5GBPC90ZXh0Pgo8L3N2Zz4K"
|
||
alt="小橘" class="patient-avatar">
|
||
<div class="patient-details">
|
||
<h1>小橘</h1>
|
||
<div class="patient-meta">
|
||
品种: 橘猫 (Felis catus)<br>
|
||
性别: 雄性 (已绝育)<br>
|
||
年龄: 2岁3个月 | 体重: 4.2kg<br>
|
||
主治医师: 张医生 | 建档日期: 2022-04-20
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 医疗标签页 -->
|
||
<div class="medical-tabs">
|
||
<div class="tab-item active">概览</div>
|
||
<div class="tab-item">生命体征</div>
|
||
<div class="tab-item">治疗记录</div>
|
||
<div class="tab-item">检查报告</div>
|
||
<div class="tab-item">用药记录</div>
|
||
</div>
|
||
|
||
<!-- 重要提醒 -->
|
||
<div class="alert-box">
|
||
<div class="alert-icon">⚠️</div>
|
||
<div class="alert-content">
|
||
<div class="alert-title">驱虫提醒</div>
|
||
<div class="alert-message">距离上次驱虫已超过3个月，建议尽快安排驱虫治疗</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 生命体征 -->
|
||
<div class="medical-section">
|
||
<div class="section-header">
|
||
<div class="section-title">
|
||
<span>📊</span>
|
||
<span>生命体征监测</span>
|
||
</div>
|
||
<button class="section-action">更新数据</button>
|
||
</div>
|
||
|
||
<div class="vital-signs">
|
||
<div class="vital-item">
|
||
<div class="vital-value">4.2</div>
|
||
<div class="vital-label">体重 (kg)</div>
|
||
<div class="vital-status status-normal">正常</div>
|
||
</div>
|
||
<div class="vital-item">
|
||
<div class="vital-value">38.5</div>
|
||
<div class="vital-label">体温 (°C)</div>
|
||
<div class="vital-status status-normal">正常</div>
|
||
</div>
|
||
<div class="vital-item">
|
||
<div class="vital-value">85</div>
|
||
<div class="vital-label">健康评分</div>
|
||
<div class="vital-status status-normal">良好</div>
|
||
</div>
|
||
<div class="vital-item">
|
||
<div class="vital-value">120</div>
|
||
<div class="vital-label">心率 (bpm)</div>
|
||
<div class="vital-status status-warning">偏高</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 体重趋势图 -->
|
||
<div class="chart-placeholder">
|
||
📈 体重趋势图 (近30天)
|
||
</div>
|
||
|
||
<!-- 疫苗记录 -->
|
||
<div class="medical-section">
|
||
<div class="section-header">
|
||
<div class="section-title">
|
||
<span>💉</span>
|
||
<span>疫苗接种记录</span>
|
||
</div>
|
||
<button class="section-action">添加记录</button>
|
||
</div>
|
||
|
||
<table class="medical-table">
|
||
<thead>
|
||
<tr>
|
||
<th>疫苗类型</th>
|
||
<th>接种日期</th>
|
||
<th>有效期</th>
|
||
<th>状态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>狂犬疫苗</td>
|
||
<td>2024-01-18</td>
|
||
<td>2025-01-18</td>
|
||
<td><span class="vital-status status-normal">有效</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>猫三联疫苗</td>
|
||
<td>2023-12-15</td>
|
||
<td>2024-12-15</td>
|
||
<td><span class="vital-status status-normal">有效</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>猫瘟疫苗</td>
|
||
<td>2023-11-20</td>
|
||
<td>2024-11-20</td>
|
||
<td><span class="vital-status status-warning">即将到期</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 治疗记录 -->
|
||
<div class="medical-section">
|
||
<div class="section-header">
|
||
<div class="section-title">
|
||
<span>🏥</span>
|
||
<span>最近治疗记录</span>
|
||
</div>
|
||
<button class="section-action">查看全部</button>
|
||
</div>
|
||
|
||
<div class="treatment-item">
|
||
<div class="treatment-info">
|
||
<div class="treatment-name">狂犬疫苗接种</div>
|
||
<div class="treatment-details">
|
||
接种狂犬疫苗第二针，患者配合良好，无不良反应。
|
||
建议观察24小时，如有异常及时联系。
|
||
</div>
|
||
</div>
|
||
<div class="treatment-date">2024-01-18</div>
|
||
</div>
|
||
|
||
<div class="treatment-item">
|
||
<div class="treatment-info">
|
||
<div class="treatment-name">常规体检</div>
|
||
<div class="treatment-details">
|
||
全面体检，各项指标正常。体重增长良好，
|
||
建议继续保持现有饮食和运动习惯。
|
||
</div>
|
||
</div>
|
||
<div class="treatment-date">2024-01-15</div>
|
||
</div>
|
||
|
||
<div class="treatment-item">
|
||
<div class="treatment-info">
|
||
<div class="treatment-name">驱虫治疗</div>
|
||
<div class="treatment-details">
|
||
体内外驱虫，使用拜耳驱虫药。
|
||
下次驱虫时间建议3个月后。
|
||
</div>
|
||
</div>
|
||
<div class="treatment-date">2023-10-20</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 医疗操作 -->
|
||
<div class="medical-actions">
|
||
<button class="medical-btn" onclick="interactions.handleButtonClick('addRecord')">
|
||
📝 添加记录
|
||
</button>
|
||
<button class="medical-btn secondary" onclick="interactions.handleButtonClick('healthChart')">
|
||
📊 健康报告
|
||
</button>
|
||
<button class="medical-btn" onclick="interactions.handleButtonClick('aiChat')">
|
||
🤖 AI诊断
|
||
</button>
|
||
<button class="medical-btn emergency" onclick="interactions.handleButtonClick('emergency')">
|
||
🚨 紧急求助
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="assets/js/common.js"></script>
|
||
<script>
|
||
// 专业医疗式特有交互
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 标签页切换
|
||
const tabs = document.querySelectorAll('.tab-item');
|
||
tabs.forEach(tab => {
|
||
tab.addEventListener('click', function() {
|
||
tabs.forEach(t => t.classList.remove('active'));
|
||
this.classList.add('active');
|
||
interactions.showToast(`切换到${this.textContent}页面`);
|
||
});
|
||
});
|
||
|
||
// 生命体征数值动画
|
||
const vitalValues = document.querySelectorAll('.vital-value');
|
||
vitalValues.forEach((value, index) => {
|
||
const finalValue = value.textContent;
|
||
value.textContent = '0';
|
||
|
||
setTimeout(() => {
|
||
let current = 0;
|
||
const target = parseFloat(finalValue);
|
||
const increment = target / 20;
|
||
|
||
const timer = setInterval(() => {
|
||
current += increment;
|
||
if (current >= target) {
|
||
current = target;
|
||
clearInterval(timer);
|
||
}
|
||
value.textContent = current.toFixed(1);
|
||
}, 50);
|
||
}, index * 200);
|
||
});
|
||
|
||
// 表格行悬停效果
|
||
const tableRows = document.querySelectorAll('.medical-table tr');
|
||
tableRows.forEach(row => {
|
||
row.addEventListener('mouseenter', function() {
|
||
this.style.backgroundColor = '#EDF2F7';
|
||
});
|
||
|
||
row.addEventListener('mouseleave', function() {
|
||
this.style.backgroundColor = '';
|
||
});
|
||
});
|
||
|
||
console.log('专业医疗式原型已加载');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|