Cheng Zhou
144 lines
8.5 KiB
HTML
144 lines
8.5 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>华邦制药 - 临床试验 AI 知识库</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* 简单的淡入动画 */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.5s ease-out forwards;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen bg-slate-50 relative overflow-hidden font-sans text-slate-700">
|
|
|
|
<div class="absolute inset-0" style="
|
|
background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
|
|
background-size: 30px 30px;
|
|
opacity: 0.5;
|
|
z-index: 0;
|
|
"></div>
|
|
|
|
<div class="relative z-10 flex justify-between items-center p-6 max-w-7xl mx-auto">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 flex items-center justify-center bg-teal-600 rounded-lg shadow-sm text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
|
|
</svg>
|
|
</div>
|
|
<span class="font-bold text-xl text-slate-800 tracking-tight">华邦制药</span>
|
|
</div>
|
|
<div class="text-xs font-medium text-slate-500 bg-white/80 backdrop-blur px-3 py-1.5 rounded-md shadow-sm border border-slate-200 cursor-default">
|
|
⌘ K 智能问答
|
|
</div>
|
|
</div>
|
|
|
|
<main class="relative z-10 flex flex-col items-center mt-24 md:mt-32 px-4 w-full">
|
|
|
|
<h1 class="text-3xl md:text-5xl font-bold text-teal-700 mb-12 tracking-wide text-center">
|
|
欢迎使用 临床试验 AI 知识库
|
|
</h1>
|
|
|
|
<div class="w-full max-w-3xl bg-white rounded-2xl shadow-xl border border-slate-100 p-2 transition-shadow hover:shadow-2xl">
|
|
<textarea
|
|
id="questionInput"
|
|
placeholder="请输入您的问题，例如：该药物的临床不良反应有哪些？"
|
|
class="w-full h-32 p-5 text-lg text-slate-700 placeholder:text-slate-300 outline-none resize-none rounded-xl bg-transparent"
|
|
></textarea>
|
|
|
|
<div class="flex justify-between items-center px-2 pb-2">
|
|
<div class="text-slate-300 text-sm px-3">Enter 发送</div>
|
|
<button
|
|
id="searchBtn"
|
|
onclick="simulateSearch()"
|
|
class="flex items-center gap-2 px-6 py-2 bg-teal-600 hover:bg-teal-700 text-white font-medium rounded-full shadow-md hover:shadow-lg transition-all active:scale-95"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
|
|
</svg>
|
|
AI 智能问答
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="loadingState" class="hidden mt-8 flex items-center gap-3 text-teal-600 bg-white/50 px-4 py-2 rounded-full">
|
|
<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span class="text-sm font-medium">正在检索华邦制药知识库...</span>
|
|
</div>
|
|
|
|
<div id="resultCard" class="hidden w-full max-w-3xl mt-8 bg-white/90 backdrop-blur rounded-xl p-8 border border-teal-100 shadow-lg animate-fade-in">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center shrink-0">
|
|
<span class="text-xl">🤖</span>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<h3 class="text-lg font-bold text-teal-800">AI 回答：</h3>
|
|
<p class="leading-relaxed text-slate-700">
|
|
根据临床试验数据库检索，该药物常见的不良反应主要包括：<br><br>
|
|
1. <strong>胃肠道反应</strong>：约 15% 的患者报告有轻度恶心、呕吐或腹泻症状，通常在服药后一周内自行缓解。<br>
|
|
2. <strong>神经系统</strong>：偶见头晕（3%）和嗜睡（2%）。<br>
|
|
3. <strong>实验室检查异常</strong>：极少数病例出现转氨酶轻度升高，建议用药期间定期监测肝功能。<br><br>
|
|
<span class="text-sm text-slate-400">数据来源：Ⅲ期临床试验报告文档 (Doc-2023-08)</span>
|
|
</p>
|
|
<div class="flex gap-2 mt-4">
|
|
<button class="text-xs bg-slate-100 hover:bg-slate-200 text-slate-600 px-3 py-1 rounded">复制答案</button>
|
|
<button class="text-xs bg-slate-100 hover:bg-slate-200 text-slate-600 px-3 py-1 rounded">不满意</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-12">
|
|
<button class="px-8 py-3 bg-teal-600/5 text-teal-700 rounded-lg hover:bg-teal-600 hover:text-white transition-colors font-medium border border-teal-600/20">
|
|
查看原始文档库
|
|
</button>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<script>
|
|
function simulateSearch() {
|
|
const input = document.getElementById('questionInput');
|
|
const btn = document.getElementById('searchBtn');
|
|
const loading = document.getElementById('loadingState');
|
|
const result = document.getElementById('resultCard');
|
|
|
|
if (!input.value.trim()) {
|
|
input.focus();
|
|
return;
|
|
}
|
|
|
|
// 1. 进入加载状态
|
|
btn.innerHTML = '思考中...';
|
|
btn.classList.add('opacity-75', 'cursor-not-allowed');
|
|
loading.classList.remove('hidden');
|
|
result.classList.add('hidden'); // 隐藏旧结果
|
|
|
|
// 2. 模拟网络延迟 (1.5秒)
|
|
setTimeout(() => {
|
|
// 3. 显示结果
|
|
loading.classList.add('hidden');
|
|
result.classList.remove('hidden');
|
|
|
|
// 恢复按钮
|
|
btn.innerHTML = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
|
|
</svg>
|
|
AI 智能问答
|
|
`;
|
|
btn.classList.remove('opacity-75', 'cursor-not-allowed');
|
|
}, 1500);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |