console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能疾病诊断系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#00B42A',
danger: '#F53F3F',
warning: '#FF7D00',
dark: '#1D2129',
light: '#F2F3F5'
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.glass-effect {
backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.8);
}
.text-balance {
text-wrap: balance;
}
}
</style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
<header class="bg-white border-b border-gray-200 sticky top-0 z-50 transition-all duration-300" id="navbar">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<div class="flex items-center space-x-2">
<i class="fa fa-heartbeat text-primary text-2xl"></i>
<h1 class="text-xl font-bold text-primary">Health<span class="text-dark">Assistant</span></h1>
</div>
<nav class="hidden md:flex items-center space-x-6">
<a href="#" class="text-gray-700 hover:text-primary transition-colors duration-200 font-medium">首页</a>
<a href="#" class="text-gray-700 hover:text-primary transition-colors duration-200 font-medium">症状自查</a>
<a href="#" class="text-gray-700 hover:text-primary transition-colors duration-200 font-medium">疾病库</a>
<a href="#" class="text-gray-700 hover:text-primary transition-colors duration-200 font-medium">联系医生</a>
</nav>
<div class="flex items-center space-x-3">
<button class="hidden md:flex items-center space-x-1 text-gray-600 hover:text-primary transition-colors duration-200">
<i class="fa fa-history"></i>
<span>历史记录</span>
</button>
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md flex items-center space-x-2 transition-all duration-200 transform hover:scale-105">
<i class="fa fa-user-circle-o"></i>
<span>登录</span>
</button>
<button class="md:hidden text-gray-700 hover:text-primary" id="mobile-menu-button">
<i class="fa fa-bars text-xl"></i>
</button>
</div>
</div>
<div class="md:hidden hidden bg-white border-t border-gray-200" id="mobile-menu">
<div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
<a href="#" class="text-gray-700 hover:text-primary transition-colors duration-200 font-medium py-2">首页</a>
<a href="#" class="text-gray-700 hover:text-primary transition-colors duration-200 font-medium py-2">症状自查</a>
<a href="#" class="text-gray-700 hover:text-primary transition-colors duration-200 font-medium py-2">疾病库</a>
<a href="#" class="text-gray-700 hover:text-primary transition-colors duration-200 font-medium py-2">联系医生</a>
<button class="flex items-center space-x-1 text-gray-700 hover:text-primary transition-colors duration-200 py-2">
<i class="fa fa-history mr-2"></i>
<span>历史记录</span>
</button>
</div>
</div>
</header>
<main class="flex-1 container mx-auto px-4 py-6">
<section class="mb-8 text-center">
<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-3">智能疾病诊断系统</h2>
<p class="text-gray-600 max-w-2xl mx-auto text-balance">输入您的症状，获取初步诊断建议。请注意，本系统仅供参考，不能替代专业医疗建议。</p>
</section>
<section class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
<div class="p-6">
<h3 class="text-xl font-bold mb-6">症状自查</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="md:col-span-2">
<div class="bg-gray-50 rounded-lg p-4 mb-6">
<h4 class="font-semibold mb-4">选择您的症状</h4>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">主要症状</label>
<select class="w-full bg-white border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/50">
<option value="">请选择主要症状</option>
<option value="fever">发热</option>
<option value="cough">咳嗽</option>
<option value="headache">头痛</option>
<option value="fatigue">疲劳</option>
<option value="stomachache">胃痛</option>
<option value="diarrhea">腹泻</option>
<option value="rash">皮疹</option>
<option value="dizziness">头晕</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">次要症状 (可选)</label>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
<div class="flex items-center">
<input type="checkbox" id="symptom1" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="symptom1" class="ml-2 text-sm text-gray-700">流鼻涕</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="symptom2" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="symptom2" class="ml-2 text-sm text-gray-700">喉咙痛</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="symptom3" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="symptom3" class="ml-2 text-sm text-gray-700">恶心</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="symptom4" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="symptom4" class="ml-2 text-sm text-gray-700">呕吐</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="symptom5" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="symptom5" class="ml-2 text-sm text-gray-700">肌肉痛</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="symptom6" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="symptom6" class="ml-2 text-sm text-gray-700">关节痛</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="symptom7" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="symptom7" class="ml-2 text-sm text-gray-700">呼吸困难</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="symptom8" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="symptom8" class="ml-2 text-sm text-gray-700">胸痛</label>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">症状持续时间</label>
<select class="w-full bg-white border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/50">
<option value="">请选择持续时间</option>
<option value="less_than_1_day">少于1天</option>
<option value="1_to_3_days">1-3天</option>
<option value="4_to_7_days">4-7天</option>
<option value="1_to_2_weeks">1-2周</option>
<option value="more_than_2_weeks">超过2周</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">症状描述 (可选)</label>
<textarea rows="3" class="w-full bg-white border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="请详细描述您的症状..."></textarea>
</div>
</div>
</div>
<div class="flex justify-between">
<button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-6 py-2 rounded-md transition-colors duration-200">
重置
</button>
<button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-md transition-colors duration-200 flex items-center space-x-2" id="diagnose-btn">
<i class="fa fa-stethoscope"></i>
<span>开始诊断</span>
</button>
</div>
</div>
<div>
<div class="bg-primary/5 rounded-lg p-4 h-full">
<h4 class="font-semibold mb-4 flex items-center">
<i class="fa fa-clipboard-check text-primary mr-2"></i>
诊断结果
</h4>
<div id="diagnosis-result" class="space-y-4">
<div class="text-center py-8">
<div class="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
<i class="fa fa-stethoscope text-gray-400 text-2xl"></i>
</div>
<p class="text-gray-500">请选择您的症状并点击"开始诊断"</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mb-10">
<h3 class="text-xl font-bold mb-6">常见疾病</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100 group cursor-pointer">
<img src="https://picsum.photos/seed/cold/600/300" alt="感冒" class="w-full h-40 object-cover">
<div class="p-4">
<h4 class="font-semibold mb-2">普通感冒</h4>
<p class="text-gray-600 text-sm mb-3">由病毒引起的上呼吸道感染，常见症状包括鼻塞、流鼻涕、咳嗽等。</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded">常见</span>
<button class="text-primary hover:text-primary/80 text-sm font-medium">了解更多</button>
</div>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100 group cursor-pointer">
<img src="https://picsum.photos/seed/fever/600/300" alt="流感" class="w-full h-40 object-cover">
<div class="p-4">
<h4 class="font-semibold mb-2">流行性感冒</h4>
<p class="text-gray-600 text-sm mb-3">由流感病毒引起的急性呼吸道传染病，症状较普通感冒严重。</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-danger/10 text-danger px-2 py-0.5 rounded">需警惕</span>
<button class="text-primary hover:text-primary/80 text-sm font-medium">了解更多</button>
</div>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100 group cursor-pointer">
<img src="https://picsum.photos/seed/stomachache/600/300" alt="肠胃炎" class="w-full h-40 object-cover">
<div class="p-4">
<h4 class="font-semibold mb-2">急性肠胃炎</h4>
<p class="text-gray-600 text-sm mb-3">由病毒、细菌或寄生虫感染引起的肠胃炎症，常见症状包括腹痛、腹泻等。</p>
<div class="flex justify-between items-center">
<span class="text-xs bg-warning/10 text-warning px-2 py-0.5 rounded">需注意</span>
<button class="text-primary hover:text-primary/80 text-sm font-medium">了解更多</button>
</div>
</div>
</div>
</div>
</section>
<section class="bg-white rounded-xl shadow-lg p-6 mb-10">
<h3 class="text-xl font-bold mb-6">健康统计</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="text-sm font-medium text-gray-500 mb-3">常见症状分布</h4>
<div class="h-64">
<canvas id="symptomsChart"></canvas>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-500 mb-3">季节疾病趋势</h4>
<div class="h-64">
<canvas id="diseaseTrendChart"></canvas>
</div>
</div>
</div>
</section>
<section class="mb-10">
<h3 class="text-xl font-bold mb-6">在线咨询医生</h3>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100 group">
<img src="https://picsum.photos/seed/doctor1/300/300" alt="张医生" class="w-full h-48 object-cover">
<div class="p-4">
<h4 class="font-semibold mb-1">张医生</h4>
<p class="text-gray-500 text-sm mb-3">内科 • 主任医师</p>
<div class="flex items-center mb-3">
<div class="flex text-yellow-400">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<span class="text-gray-500 text-sm ml-2">4.8 (120条评价)</span>
</div>
<button class="w-full bg-primary/10 hover:bg-primary/20 text-primary px-4 py-2 rounded-md transition-colors duration-200 text-sm">
立即咨询
</button>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100 group">
<img src="https://picsum.photos/seed/doctor2/300/300" alt="李医生" class="w-full h-48 object-cover">
<div class="p-4">
<h4 class="font-semibold mb-1">李医生</h4>
<p class="text-gray-500 text-sm mb-3">儿科 • 副主任医师</p>
<div class="flex items-center mb-3">
<div class="flex text-yellow-400">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<span class="text-gray-500 text-sm ml-2">4.2 (98条评价)</span>
</div>
<button class="w-full bg-primary/10 hover:bg-primary/20 text-primary px-4 py-2 rounded-md transition-colors duration-200 text-sm">
立即咨询
</button>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100 group">
<img src="https://picsum.photos/seed/doctor3/300/300" alt="王医生" class="w-full h-48 object-cover">
<div class="p-4">
<h4 class="font-semibold mb-1">王医生</h4>
<p class="text-gray-500 text-sm mb-3">外科 • 主任医师</p>
<div class="flex items-center mb-3">
<div class="flex text-yellow-400">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="text-gray-500 text-sm ml-2">5.0 (156条评价)</span>
</div>
<button class="w-full bg-primary/10 hover:bg-primary/20 text-primary px-4 py-2 rounded-md transition-colors duration-200 text-sm">
立即咨询
</button>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100 group">
<img src="https://picsum.photos/seed/doctor4/300/300" alt="赵医生" class="w-full h-48 object-cover">
<div class="p-4">
<h4 class="font-semibold mb-1">赵医生</h4>
<p class="text-gray-500 text-sm mb-3">妇产科 • 副主任医师</p>
<div class="flex items-center mb-3">
<div class="flex text-yellow-400">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-o"></i>
</div>
<span class="text-gray-500 text-sm ml-2">3.7 (85条评价)</span>
</div>
<button class="w-full bg-primary/10 hover:bg-primary/20 text-primary px-4 py-2 rounded-md transition-colors duration-200 text-sm">
立即咨询
</button>
</div>
</div>
</div>
</section>
<section class="mb-10">
<h3 class="text-xl font-bold mb-6">用户反馈</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
<div class="flex text-yellow-400 mb-3">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<p class="text-gray-600 mb-4">"这个系统真的很有用！我最近一直感觉不舒服，通过这个系统进行了初步诊断，然后去看了医生，结果和系统预测的基本一致。"</p>
<div class="flex items-center">
<img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="w-10 h-10 rounded-full object-cover mr-3">
<div>
<h5 class="font-medium">陈女士</h5>
<p class="text-gray-500 text-sm">32岁</p>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
<div class="flex text-yellow-400 mb-3">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<p class="text-gray-600 mb-4">"界面很直观，操作简单，诊断结果也很详细。虽然不能完全替代医生，但可以帮助我更好地了解自己的症状，提前做好准备。"</p>
<div class="flex items-center">
<img src="https://picsum.photos/seed/user2/100/100" alt="用户头像" class="w-10 h-10 rounded-full object-cover mr-3">
<div>
<h5 class="font-medium">张先生</h5>
<p class="text-gray-500 text-sm">45岁</p>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
<div class="flex text-yellow-400 mb-3">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<p class="text-gray-600 mb-4">"作为一名医生，我推荐我的患者使用这个系统进行初步筛查。它能够提供有用的信息，帮助患者更好地向医生描述症状。"</p>
<div class="flex items-center">
<img src="https://picsum.photos/seed/user3/100/100" alt="用户头像" class="w-10 h-10 rounded-full object-cover mr-3">
<div>
<h5 class="font-medium">刘医生</h5>
<p class="text-gray-500 text-sm">内科主任医师</p>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-dark text-white py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<i class="fa fa-heartbeat text-primary text-2xl"></i>
<h2 class="text-xl font-bold">Health<span class="text-primary">Assistant</span></h2>
</div>
<p class="text-gray-400 mb-4">专业的疾病诊断辅助系统，帮助您更好地了解自己的健康状况。</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
<i class="fa fa-facebook text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
<i class="fa fa-twitter text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
<i class="fa fa-instagram text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
<i class="fa fa-linkedin text-xl"></i>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">功能</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">症状自查</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">疾病库</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">在线咨询</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">健康记录</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">资源</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">医疗指南</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">常见疾病</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">健康知识</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">专家文章</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">关于我们</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">公司介绍</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">联系我们</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">隐私政策</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">服务条款</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 text-sm mb-4 md:mb-0">© 2025 HealthAssistant. 保留所有权利。</p>
<p class="text-gray-500 text-sm">本系统仅供参考，不能替代专业医疗建议。如有不适，请及时就医。</p>
</div>
</div>
</footer>
<script>
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const mobileMenu = document.getElementById('mobile-menu');
mobileMenu.classList.toggle('hidden');
});
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 10) {
navbar.classList.add('py-2', 'shadow-md');
navbar.classList.remove('py-3');
} else {
navbar.classList.add('py-3');
navbar.classList.remove('py-2', 'shadow-md');
}
});
document.getElementById('diagnose-btn').addEventListener('click', function() {
const resultContainer = document.getElementById('diagnosis-result');
resultContainer.innerHTML = `
<div class="text-center py-8">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mx-auto mb-4"></div>
<p class="text-gray-600">正在分析您的症状，请稍候...</p>
</div>
`;
setTimeout(() => {
const mainSymptom = document.querySelector('select').value;
const secondarySymptoms = Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
.map(checkbox => checkbox.nextElementSibling.textContent);
let diagnosis = '';
let confidence = '';
let advice = '';
let colorClass = '';
if (mainSymptom === 'fever' && secondarySymptoms.includes('咳嗽') && secondarySymptoms.includes('喉咙痛')) {
diagnosis = '感冒或流感';
confidence = '85%';
advice = '建议多休息，多喝水，必要时可服用退烧药。如症状持续超过3天，请咨询医生。';
colorClass = 'bg-primary/10 text-primary';
} else if (mainSymptom === 'stomachache' && secondarySymptoms.includes('腹泻') && secondarySymptoms.includes('恶心')) {
diagnosis = '急性肠胃炎';
confidence = '90%';
advice = '建议清淡饮食，补充水分，避免脱水。如症状严重或持续超过2天，请就医。';
colorClass = 'bg-warning/10 text-warning';
} else if (mainSymptom === 'rash' && secondarySymptoms.includes('发热') && secondarySymptoms.includes('瘙痒')) {
diagnosis = '可能是过敏反应或病毒感染';
confidence = '75%';
advice = '避免接触可能的过敏原，保持皮肤清洁。如症状加重或伴有呼吸困难，请立即就医。';
colorClass = 'bg-danger/10 text-danger';
} else if (mainSymptom === 'headache' && secondarySymptoms.includes('恶心') && secondarySymptoms.includes('畏光')) {
diagnosis = '偏头痛';
confidence = '80%';
advice = '建议休息，避免强光和噪音刺激。如频繁发作或疼痛剧烈，请咨询医生。';
colorClass = 'bg-secondary/10 text-secondary';
} else {
diagnosis = '无法确定具体疾病';
confidence = '50%';
advice = '您选择的症状较少或不典型。建议提供更多症状信息，或直接咨询医生。';
colorClass = 'bg-gray-100 text-gray-700';
}
resultContainer.innerHTML = `
<div class="rounded-lg p-4 ${colorClass} mb-4">
<h5 class="font-semibold mb-2">初步诊断</h5>
<p class="font-medium">${diagnosis}</p>
<div class="flex items-center mt-2">
<span class="text-xs bg-white/80 px-2 py-0.5 rounded-full mr-2">置信度: ${confidence}</span>
</div>
</div>
<div class="rounded-lg p-4 bg-white border border-gray-200 mb-4">
<h5 class="font-semibold mb-2">建议</h5>
<p class="text-gray-700">${advice}</p>
</div>
<div class="rounded-lg p-4 bg-white border border-gray-200">
<h5 class="font-semibold mb-2">注意事项</h5>
<ul class="text-gray-700 text-sm space-y-1">
<li class="flex items-start">
<i class="fa fa-info-circle text-primary mt-0.5 mr-2"></i>
<span>本诊断仅供参考，不能替代专业医疗建议。</span>
</li>
<li class="flex items-start">
<i class="fa fa-info-circle text-primary mt-0.5 mr-2"></i>
<span>如果症状持续或加重，请及时就医。</span>
</li>
<li class="flex items-start">
<i class="fa fa-info-circle text-primary mt-0.5 mr-2"></i>
<span>如有紧急情况，请立即拨打急救电话。</span>
</li>
</ul>
</div>
<button class="w-full mt-4 bg-primary hover:bg-primary/90 text-white py-2 rounded-md transition-colors duration-200 text-sm flex items-center justify-center">
<i class="fa fa-user-md mr-2"></i>
联系专业医生
</button>
`;
}, 2000);
});
document.addEventListener('DOMContentLoaded', function() {
const symptomsCtx = document.getElementById('symptomsChart').getContext('2d');
new Chart(symptomsCtx, {
type: 'bar',
data: {
labels: ['发热', '咳嗽', '头痛', '疲劳', '胃痛', '腹泻', '皮疹', '头晕'],
datasets: [{
label: '症状出现频率',
data: [35, 28, 22, 18, 15, 12, 8, 7],
backgroundColor: [
'rgba(22, 93, 255, 0.7)',
'rgba(0, 180, 42, 0.7)',
'rgba(255, 125, 0, 0.7)',
'rgba(245, 63, 63, 0.7)',
'rgba(156, 39, 176, 0.7)',
'rgba(3, 169, 244, 0.7)',
'rgba(255, 193, 7, 0.7)',
'rgba(121, 85, 72, 0.7)'
],
borderWidth: 0,
borderRadius: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
display: true,
color: 'rgba(0, 0, 0, 0.05)'
}
},
x: {
grid: {
display: false
}
}
}
}
});
const trendCtx = document.getElementById('diseaseTrendChart').getContext('2d');
new Chart(trendCtx, {
type: 'line',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
datasets: [{
label: '感冒/流感',