Spaces:

maomaobj
/

ctexperts

Running

App Files Files Community

ctexperts / index.html

maomaobj

请将专家分布热力图的图标和标题都移到上部，把每个热力点的文字，都显示出来。 - Follow Up Deployment

e14f4c9 verified 10 months ago

raw

history blame contribute delete

55.3 kB

	<!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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	medicinal: {
	blue: '#0066cc',
	lightblue: '#e6f2ff',
	darkblue: '#004080',
	slate: '#f8fafc',
	}
	}
	}
	}
	}
	</script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

	body {
	font-family: 'Noto Sans SC', sans-serif;
	}

	.expert-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 102, 204, 0.15);
	}

	.map-container {
	height: 500px;
	background: linear-gradient(135deg, #e6f2ff 0%, #b3d9ff 100%);
	border-radius: 10px;
	}

	.map-placeholder {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	}

	.map-controls {
	position: absolute;
	top: 20px;
	right: 20px;
	background: white;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.tab-active {
	color: #0066cc;
	border-bottom: 3px solid #0066cc;
	}

	.filter-tag {
	transition: all 0.2s ease;
	}

	.filter-tag:hover {
	background-color: #0066cc;
	color: white;
	}

	.modal-content {
	max-height: 80vh;
	overflow-y: auto;
	}

	/* Custom scrollbar for modal */
	.modal-content::-webkit-scrollbar {
	width: 6px;
	}

	.modal-content::-webkit-scrollbar-track {
	background: #f1f1f1;
	}

	.modal-content::-webkit-scrollbar-thumb {
	background: #0066cc;
	border-radius: 3px;
	}
	</style>
	</head>
	<body class="bg-medicinal-slate min-h-screen">
	<!-- Header -->
	<header class="bg-white shadow-lg border-b border-gray-200">
	<div class="container mx-auto px-6 py-8">
	<div class="flex flex-col md:flex-row justify-between items-start md:items-center">
	<div>
	<h1 class="text-4xl font-extrabold text-medicinal-blue">临床试验专家库</h1>
	<p class="mt-2 text-lg text-gray-600">专业匹配系统 · 智能筛查平台 · 数据可视化分析</p>
	</div>
	<div class="mt-4 md:mt-0 flex items-center space-x-4">
	<div class="bg-blue-50 rounded-lg px-4 py-2 flex items-center">
	<i class="fas fa-database text-medicinal-blue mr-2"></i>
	<span class="text-sm font-medium">当前专家数: <span class="font-bold">1,284</span></span>
	</div>
	<div class="bg-green-50 rounded-lg px-4 py-2 flex items-center">
	<i class="fas fa-map-marked-alt text-green-600 mr-2"></i>
	<span class="text-sm font-medium">覆盖医院: <span class="font-bold">362</span></span>
	</div>
	</div>
	</div>

	<div class="mt-6 flex flex-wrap gap-4">
	<div class="bg-medicinal-blue text-white px-4 py-2 rounded-full flex items-center text-sm">
	<i class="fas fa-search mr-2"></i> 支持专家画像
	</div>
	<div class="bg-medicinal-blue text-white px-4 py-2 rounded-full flex items-center text-sm">
	<i class="fas fa-map-marker-alt mr-2"></i> 地图分布热力图
	</div>
	<div class="bg-medicinal-blue text-white px-4 py-2 rounded-full flex items-center text-sm">
	<i class="fas fa-project-diagram mr-2"></i> 智能项目匹配
	</div>
	<div class="bg-medicinal-blue text-white px-4 py-2 rounded-full flex items-center text-sm">
	<i class="fas fa-chart-line mr-2"></i> 入组效率分析
	</div>
	</div>
	</div>
	</header>

	<!-- Main Content -->
	<main class="container mx-auto px-4 py-8">
	<!-- Map Section -->
	<div class="relative mb-8 rounded-xl shadow-lg overflow-hidden">
	<!-- Map Header -->
	<div class="bg-medicinal-blue text-white p-4 flex items-center">
	<i class="fas fa-map-marked-alt text-3xl mr-3"></i>
	<div>
	<h3 class="text-2xl font-bold">专家分布热力图</h3>
	<p class="text-sm opacity-90">可视化展示全国临床试验专家分布情况，点击区域可查看详情</p>
	</div>
	</div>

	<div class="map-container relative">

	<!-- Map Controls -->
	<div class="map-controls">
	<div class="flex flex-col space-y-2">
	<div class="flex items-center">
	<div class="w-4 h-4 rounded-full bg-red-500 mr-2"></div>
	<span class="text-sm">肿瘤领域</span>
	</div>
	<div class="flex items-center">
	<div class="w-4 h-4 rounded-full bg-green-500 mr-2"></div>
	<span class="text-sm">心血管</span>
	</div>
	<div class="flex items-center">
	<div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
	<span class="text-sm">内分泌</span>
	</div>
	<div class="flex items-center">
	<div class="w-4 h-4 rounded-full bg-purple-500 mr-2"></div>
	<span class="text-sm">神经科学</span>
	</div>
	</div>
	</div>

	<!-- Map Hotspots with labels -->
	<div class="absolute top-[15%] left-[20%] group">
	<div class="w-16 h-16 rounded-full bg-red-500 bg-opacity-70 border-2 border-white cursor-pointer group-hover:bg-opacity-90"></div>
	<div class="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-white px-2 py-1 rounded-md text-sm font-medium shadow-md whitespace-nowrap">北京 86位</div>
	</div>
	<div class="absolute top-[25%] right-[20%] group">
	<div class="w-14 h-14 rounded-full bg-blue-500 bg-opacity-70 border-2 border-white cursor-pointer group-hover:bg-opacity-90"></div>
	<div class="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-white px-2 py-1 rounded-md text-sm font-medium shadow-md whitespace-nowrap">上海 72位</div>
	</div>
	<div class="absolute bottom-[25%] left-[30%] group">
	<div class="w-18 h-18 rounded-full bg-red-500 bg-opacity-70 border-2 border-white cursor-pointer group-hover:bg-opacity-90"></div>
	<div class="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-white px-2 py-1 rounded-md text-sm font-medium shadow-md whitespace-nowrap">广州 94位</div>
	</div>
	<div class="absolute top-[45%] right-[30%] group">
	<div class="w-10 h-10 rounded-full bg-green-500 bg-opacity-70 border-2 border-white cursor-pointer group-hover:bg-opacity-90"></div>
	<div class="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-white px-2 py-1 rounded-md text-sm font-medium shadow-md whitespace-nowrap">成都 45位</div>
	</div>
	<div class="absolute top-[30%] left-[5%] group">
	<div class="w-8 h-8 rounded-full bg-red-500 bg-opacity-70 border-2 border-white cursor-pointer group-hover:bg-opacity-90"></div>
	<div class="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-white px-2 py-1 rounded-md text-sm font-medium shadow-md whitespace-nowrap">西安 32位</div>
	</div>
	<div class="absolute top-[40%] right-[5%] group">
	<div class="w-12 h-12 rounded-full bg-blue-500 bg-opacity-70 border-2 border-white cursor-pointer group-hover:bg-opacity-90"></div>
	<div class="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-white px-2 py-1 rounded-md text-sm font-medium shadow-md whitespace-nowrap">南京 68位</div>
	</div>
	<div class="absolute bottom-[15%] left-[15%] group">
	<div class="w-6 h-6 rounded-full bg-green-500 bg-opacity-70 border-2 border-white cursor-pointer group-hover:bg-opacity-90"></div>
	<div class="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-white px-2 py-1 rounded-md text-sm font-medium shadow-md whitespace-nowrap">武汉 28位</div>
	</div>
	<div class="absolute bottom-[40%] right-[15%] group">
	<div class="w-14 h-14 rounded-full bg-purple-500 bg-opacity-70 border-2 border-white cursor-pointer group-hover:bg-opacity-90"></div>
	<div class="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-white px-2 py-1 rounded-md text-sm font-medium shadow-md whitespace-nowrap">杭州 79位</div>
	</div>
	<div class="absolute top-[60%] left-[45%] group">
	<div class="w-10 h-10 rounded-full bg-blue-500 bg-opacity-70 border-2 border-white cursor-pointer group-hover:bg-opacity-90"></div>
	<div class="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-white px-2 py-1 rounded-md text-sm font-medium shadow-md whitespace-nowrap">长沙 42位</div>
	</div>
	<div class="absolute top-[25%] left-[40%] group">
	<div class="w-8 h-8 rounded-full bg-green-500 bg-opacity-70 border-2 border-white cursor-pointer group-hover:bg-opacity-90"></div>
	<div class="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-white px-2 py-1 rounded-md text-sm font-medium shadow-md whitespace-nowrap">郑州 36位</div>
	</div>
	<div class="absolute bottom-[20%] right-[40%] group">
	<div class="w-16 h-16 rounded-full bg-red-500 bg-opacity-70 border-2 border-white cursor-pointer group-hover:bg-opacity-90"></div>
	<div class="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-white px-2 py-1 rounded-md text-sm font-medium shadow-md whitespace-nowrap">深圳 88位</div>
	</div>
	<div class="absolute top-[55%] right-[55%] group">
	<div class="w-12 h-12 rounded-full bg-purple-500 bg-opacity-70 border-2 border-white cursor-pointer group-hover:bg-opacity-90"></div>
	<div class="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-white px-2 py-1 rounded-md text-sm font-medium shadow-md whitespace-nowrap">天津 62位</div>
	</div>
	<div class="absolute top-[35%] left-[60%] group">
	<div class="w-6 h-6 rounded-full bg-blue-500 bg-opacity-70 border-2 border-white cursor-pointer group-hover:bg-opacity-90"></div>
	<div class="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-white px-2 py-1 rounded-md text-sm font-medium shadow-md whitespace-nowrap">济南 24位</div>
	</div>
	<div class="absolute bottom-[30%] left-[55%] group">
	<div class="w-10 h-10 rounded-full bg-green-500 bg-opacity-70 border-2 border-white cursor-pointer group-hover:bg-opacity-90"></div>
	<div class="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-white px-2 py-1 rounded-md text-sm font-medium shadow-md whitespace-nowrap">福州 45位</div>
	</div>
	<div class="absolute bottom-[50%] right-[50%] group">
	<div class="w-8 h-8 rounded-full bg-purple-500 bg-opacity-70 border-2 border-white cursor-pointer group-hover:bg-opacity-90"></div>
	<div class="absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-white px-2 py-1 rounded-md text-sm font-medium shadow-md whitespace-nowrap">石家庄 38位</div>
	</div>
	</div>

	<!-- Quick View Button -->
	<div class="absolute bottom-4 right-4">
	<button class="bg-white text-medicinal-blue px-4 py-2 rounded-lg shadow-md flex items-center">
	<i class="fas fa-list-ul mr-2"></i> 查看全国专家列表
	</button>
	</div>
	</div>

	<!-- Enhanced Filter Section -->
	<div class="bg-white rounded-xl shadow-md p-6 mb-8 border border-gray-100">
	<div class="flex items-center justify-between mb-4">
	<h3 class="text-lg font-bold text-gray-700 flex items-center">
	<i class="fas fa-filter text-medicinal-blue mr-2"></i> 高级筛选条件
	</h3>
	<div class="text-sm text-gray-500">
	<span class="font-medium text-medicinal-blue">24</span> 位专家匹配当前筛选
	</div>
	</div>
	<div class="flex flex-wrap gap-4 items-center">
	<div class="flex-1 min-w-[200px]">
	<label class="block text-sm font-medium text-gray-700 mb-1">疾病方向</label>
	<select class="w-full rounded-md border border-gray-300 py-2 px-3 focus:outline-none focus:ring-2 focus:ring-medicinal-blue">
	<option>全部</option>
	<option>肿瘤</option>
	<option>心血管</option>
	<option>内分泌</option>
	<option>神经科学</option>
	<option>呼吸系统</option>
	</select>
	</div>

	<div class="flex-1 min-w-[200px]">
	<label class="block text-sm font-medium text-gray-700 mb-1">医疗中心</label>
	<select class="w-full rounded-md border border-gray-300 py-2 px-3 focus:outline-none focus:ring-2 focus:ring-medicinal-blue text-sm">
	<option>全部医院</option>
	<option>北京协和医院</option>
	<option>上海瑞金医院</option>
	<option>广州中山医院</option>
	<option>四川华西医院</option>
	<option>华中科技大学同济医院</option>
	<option>中国人民解放军总医院</option>
	</select>
	</div>

	<div class="flex-1 min-w-[300px]">
	<label class="block text-sm font-medium text-gray-700 mb-1">项目经验</label>
	<div class="flex flex-wrap gap-2">
	<button class="filter-tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">I期</button>
	<button class="filter-tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">II期</button>
	<button class="filter-tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">III期</button>
	<button class="filter-tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">多中心</button>
	<button class="filter-tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">高入组率</button>
	</div>
	</div>

	<div class="flex-1 min-w-[200px]">
	<label class="block text-sm font-medium text-gray-700 mb-1">专家角色</label>
	<select class="w-full rounded-md border border-gray-300 py-2 px-3 focus:outline-none focus:ring-2 focus:ring-medicinal-blue">
	<option>全部</option>
	<option>主要研究者 (PI)</option>
	<option>次要研究者 (Sub-I)</option>
	<option>DSMB委员</option>
	</select>
	</div>

	<div>
	<button class="mt-6 bg-medicinal-blue text-white px-4 py-2 rounded-md hover:bg-medicinal-darkblue transition">
	筛选
	</button>
	<button class="mt-6 ml-2 bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-300 transition">
	重置
	</button>
	</div>
	</div>
	</div>

	<!-- Expert List and Recommendations Section -->
	<div class="flex flex-col lg:flex-row gap-8">
	<!-- Expert List -->
	<div class="lg:w-2/3">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-xl font-bold text-gray-800">专家搜索结果 (24位)</h2>
	<div class="flex items-center">
	<span class="text-sm mr-2">排序: </span>
	<select class="border rounded-md py-1 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-medicinal-blue">
	<option>匹配度优先</option>
	<option>研究经验</option>
	<option>入组效率</option>
	<option>合规评级</option>
	</select>
	</div>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<!-- Expert Card 1 -->
	<div class="expert-card bg-white rounded-xl shadow-md p-6 transition duration-300 cursor-pointer" onclick="openExpertModal('expert1')">
	<div class="flex items-start">
	<div class="flex-shrink-0">
	<div class="w-16 h-16 rounded-full bg-medicinal-lightblue flex items-center justify-center text-medicinal-blue text-2xl font-bold">张</div>
	</div>
	<div class="ml-4 flex-1">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="text-lg font-bold">张明远教授</h3>
	<p class="text-sm text-gray-600">北京协和医院</p>
	</div>
	<div class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">合规评级: A</div>
	</div>

	<div class="mt-2">
	<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mr-1 mb-1">肿瘤</span>
	<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mr-1 mb-1">I期研究</span>
	<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mr-1 mb-1">免疫治疗</span>
	</div>

	<p class="mt-2 text-sm text-gray-700">
	已参与12个项目，其中I期5个，III期4个
	</p>

	<div class="mt-3 flex items-center justify-between">
	<div>
	<div class="text-yellow-400 mr-1 inline-flex items-center">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star-half-alt"></i>
	<span class="text-sm text-gray-600 ml-1">入组效率</span>
	</div>
	</div>
	<div class="flex items-center">
	<div class="h-2.5 bg-gray-200 rounded-full w-16 mr-2">
	<div class="h-2.5 bg-green-500 rounded-full" style="width: 85%"></div>
	</div>
	<span class="text-xs font-medium">85%</span>
	</div>
	</div>

	<div class="mt-3 p-2 bg-blue-50 rounded-md">
	<p class="text-sm text-blue-800 font-medium">
	<i class="fas fa-lightbulb text-yellow-400 mr-1"></i> 推荐理由: 近3年完成3个PD-1相关I期研究
	</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Expert Card 2 -->
	<div class="expert-card bg-white rounded-xl shadow-md p-6 transition duration-300 cursor-pointer" onclick="openExpertModal('expert2')">
	<div class="flex items-start">
	<div class="flex-shrink-0">
	<div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 text-2xl font-bold">李</div>
	</div>
	<div class="ml-4 flex-1">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="text-lg font-bold">李芳华主任医师</h3>
	<p class="text-sm text-gray-600">上海瑞金医院</p>
	</div>
	<div class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">合规评级: A+</div>
	</div>

	<div class="mt-2">
	<span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded mr-1 mb-1">心血管</span>
	<span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded mr-1 mb-1">III期研究</span>
	<span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded mr-1 mb-1">国际多中心</span>
	</div>

	<p class="mt-2 text-sm text-gray-700">
	已参与28个项目，其中III期16个，多中心12个
	</p>

	<div class="mt-3 flex items-center">
	<div class="text-yellow-400 mr-1">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	<span class="text-sm text-gray-600 ml-1">入组效率</span>
	</div>

	<div class="mt-3 p-2 bg-green-50 rounded-md">
	<p class="text-sm text-green-800 font-medium">
	<i class="fas fa-lightbulb text-yellow-400 mr-1"></i> 推荐理由: 心衰III期研究入组率TOP5%专家
	</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Expert Card 3 -->
	<div class="expert-card bg-white rounded-xl shadow-md p-6 transition duration-300 cursor-pointer" onclick="openExpertModal('expert3')">
	<div class="flex items-start">
	<div class="flex-shrink-0">
	<div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 text-2xl font-bold">王</div>
	</div>
	<div class="ml-4 flex-1">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="text-lg font-bold">王立新教授</h3>
	<p class="text-sm text-gray-600">广州中山医院</p>
	</div>
	<div class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">合规评级: B+</div>
	</div>

	<div class="mt-2">
	<span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded mr-1 mb-1">内分泌</span>
	<span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded mr-1 mb-1">II期研究</span>
	<span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded mr-1 mb-1">糖尿病</span>
	</div>

	<p class="mt-2 text-sm text-gray-700">
	已参与18个项目，其中II期9个，国际多中心7个
	</p>

	<div class="mt-3 flex items-center">
	<div class="text-yellow-400 mr-1">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="far fa-star"></i>
	</div>
	<span class="text-sm text-gray-600 ml-1">入组效率</span>
	</div>

	<div class="mt-3 p-2 bg-purple-50 rounded-md">
	<p class="text-sm text-purple-800 font-medium">
	<i class="fas fa-lightbulb text-yellow-400 mr-1"></i> 推荐理由: 2型糖尿病新型治疗方案专家
	</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Expert Card 4 -->
	<div class="expert-card bg-white rounded-xl shadow-md p-6 transition duration-300 cursor-pointer" onclick="openExpertModal('expert4')">
	<div class="flex items-start">
	<div class="flex-shrink-0">
	<div class="w-16 h-16 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 text-2xl font-bold">陈</div>
	</div>
	<div class="ml-4 flex-1">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="text-lg font-bold">陈海涛主任医师</h3>
	<p class="text-sm text-gray-600">四川华西医院</p>
	</div>
	<div class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">合规评级: A</div>
	</div>

	<div class="mt-2">
	<span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded mr-1 mb-1">肿瘤</span>
	<span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded mr-1 mb-1">III期研究</span>
	<span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded mr-1 mb-1">肺癌</span>
	</div>

	<p class="mt-2 text-sm text-gray-700">
	已参与22个项目，其中III期14个，国际多中心9个
	</p>

	<div class="mt-3 flex items-center">
	<div class="text-yellow-400 mr-1">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	<span class="text-sm text-gray-600 ml-1">入组效率</span>
	</div>

	<div class="mt-3 p-2 bg-red-50 rounded-md">
	<p class="text-sm text-red-800 font-medium">
	<i class="fas fa-lightbulb text-yellow-400 mr-1"></i> 推荐理由: 晚期NSCLC一线治疗专家
	</p>
	</div>
	</div>
	</div>
	</div>

	<!-- View More Button -->
	<div class="md:col-span-2 flex justify-center mt-4">
	<button class="bg-white border border-medicinal-blue text-medicinal-blue px-6 py-2 rounded-md hover:bg-medicinal-lightblue transition">
	加载更多...
	</button>
	</div>
	</div>
	</div>

	<!-- Recommendations Section -->
	<div class="lg:w-1/3">
	<div class="bg-white rounded-xl shadow-md p-6 sticky top-4">
	<div class="border-b pb-4 mb-4">
	<h2 class="text-xl font-bold text-gray-800 flex items-center">
	<i class="fas fa-robot text-medicinal-blue mr-2"></i> 智能推荐 Top5
	</h2>
	<p class="text-sm text-gray-500 mt-1">基于当前项目需求与专家匹配算法生成</p>
	</div>
	<div class="flex items-center text-xs text-gray-500 mb-3">
	<div class="flex-1 text-center">匹配度</div>
	<div class="flex-1 text-center">研究相似度</div>
	<div class="flex-1 text-center">入组预测</div>
	</div>

	<div class="space-y-4">
	<!-- Recommendation 1 -->
	<div class="p-4 bg-blue-50 rounded-lg border border-blue-100">
	<div class="flex items-start">
	<div class="text-blue-500 mr-3 mt-1">
	<i class="fas fa-user-md text-xl"></i>
	</div>
	<div>
	<h4 class="font-bold text-blue-800">张明远教授</h4>
	<p class="text-sm text-blue-600 mt-1">在广东地区肿瘤方向中具有III期招募经验，入组率超过同期研究平均值30%</p>
	<button class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center" onclick="scrollToExpert('expert1')">
	查看详情 <i class="fas fa-chevron-right ml-1 text-xs"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Recommendation 2 -->
	<div class="p-4 bg-green-50 rounded-lg border border-green-100">
	<div class="flex items-start">
	<div class="text-green-500 mr-3 mt-1">
	<i class="fas fa-user-md text-xl"></i>
	</div>
	<div>
	<h4 class="font-bold text-green-800">李芳华主任医师</h4>
	<p class="text-sm text-green-600 mt-1">具备器械项目经验，稽查记录为优秀，最近3个项目均获得免稽查资格</p>
	<button class="mt-2 text-green-600 hover:text-green-800 text-sm font-medium flex items-center" onclick="scrollToExpert('expert2')">
	查看详情 <i class="fas fa-chevron-right ml-1 text-xs"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Recommendation 3 -->
	<div class="p-4 bg-purple-50 rounded-lg border border-purple-100">
	<div class="flex items-start">
	<div class="text-purple-500 mr-3 mt-1">
	<i class="fas fa-user-md text-xl"></i>
	</div>
	<div>
	<h4 class="font-bold text-purple-800">王立新教授</h4>
	<p class="text-sm text-purple-600 mt-1">糖尿病领域专家，具有GCP检查员资格，擅长复杂方案设计</p>
	<button class="mt-2 text-purple-600 hover:text-purple-800 text-sm font-medium flex items-center" onclick="scrollToExpert('expert3')">
	查看详情 <i class="fas fa-chevron-right ml-1 text-xs"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Recommendation 4 -->
	<div class="p-4 bg-orange-50 rounded-lg border border-orange-100">
	<div class="flex items-start">
	<div class="text-orange-500 mr-3 mt-1">
	<i class="fas fa-user-md text-xl"></i>
	</div>
	<div>
	<h4 class="font-bold text-orange-800">陈海涛主任医师</h4>
	<p class="text-sm text-orange-600 mt-1">肺癌方向国际多中心研究经验丰富，5个项目获得FDA快速审批通道</p>
	<button class="mt-2 text-orange-600 hover:text-orange-800 text-sm font-medium flex items-center" onclick="scrollToExpert('expert4')">
	查看详情 <i class="fas fa-chevron-right ml-1 text-xs"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Recommendation 5 -->
	<div class="p-4 bg-indigo-50 rounded-lg border border-indigo-100">
	<div class="flex items-start">
	<div class="text-indigo-500 mr-3 mt-1">
	<i class="fas fa-user-md text-xl"></i>
	</div>
	<div>
	<h4 class="font-bold text-indigo-800">赵晓峰教授</h4>
	<p class="text-sm text-indigo-600 mt-1">神经退行性疾病专家，I期安全性研究记录优秀，零重大不良事件</p>
	<button class="mt-2 text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">
	查看详情 <i class="fas fa-chevron-right ml-1 text-xs"></i>
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Project Matching Button -->
	<div class="mt-6">
	<button class="w-full bg-medicinal-blue text-white py-3 rounded-lg font-medium hover:bg-medicinal-darkblue transition flex items-center justify-center">
	<i class="fas fa-project-diagram mr-2"></i> 智能项目匹配
	</button>
	</div>
	</div>
	</div>
	</div>
	</main>

	<!-- Expert Detail Modal -->
	<div id="expertModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
	<div class="bg-white rounded-xl w-11/12 md:w-3/4 lg:w-2/3 max-w-5xl modal-content">
	<!-- Modal Header -->
	<div class="border-b p-6 flex justify-between items-start">
	<div>
	<h2 class="text-2xl font-bold text-gray-800">专家详情</h2>
	<p class="text-sm text-gray-500">查看完整信息与推荐理由</p>
	</div>
	<button onclick="closeExpertModal()" class="text-gray-400 hover:text-gray-600">
	<i class="fas fa-times text-xl"></i>
	</button>
	</div>

	<!-- Modal Body -->
	<div class="p-6">
	<!-- Basic Info Row -->
	<div class="flex flex-col md:flex-row gap-6 mb-8">
	<div class="w-32 h-32 rounded-full bg-medicinal-lightblue flex items-center justify-center text-medicinal-blue text-4xl font-bold md:flex-shrink-0">
	张
	</div>
	<div class="flex-1">
	<div class="flex flex-wrap justify-between items-start">
	<div class="mb-4">
	<h3 class="text-xl font-bold">张明远教授</h3>
	<p class="text-gray-600">主任医师 \| 肿瘤内科</p>
	<p class="text-gray-700 mt-1"><i class="fas fa-hospital mr-2 text-medicinal-blue"></i> 北京协和医院肿瘤中心</p>
	<div class="flex items-center mt-2">
	<div class="text-yellow-400 mr-2">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star-half-alt"></i>
	</div>
	<span class="text-sm text-gray-600">综合评分: 4.7/5.0</span>
	</div>
	</div>
	<div class="flex space-x-2">
	<button class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">PI</button>
	<button class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">DSMB</button>
	</div>
	</div>

	<div class="flex flex-wrap gap-2 mt-4">
	<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">肿瘤</span>
	<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">I期研究</span>
	<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">免疫治疗</span>
	<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">PD-1/PD-L1</span>
	<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">实体瘤</span>
	</div>
	</div>
	</div>

	<!-- Tabs -->
	<div class="border-b border-gray-200">
	<nav class="flex space-x-8">
	<button class="tab-active py-4 px-1 text-sm font-medium">履历摘要</button>
	<button class="text-gray-500 hover:text-gray-700 py-4 px-1 text-sm font-medium">研究经历</button>
	<button class="text-gray-500 hover:text-gray-700 py-4 px-1 text-sm font-medium">合规情况</button>
	<button class="text-gray-500 hover:text-gray-700 py-4 px-1 text-sm font-medium">擅长领域</button>
	<button class="text-gray-500 hover:text-gray-700 py-4 px-1 text-sm font-medium">推荐理由</button>
	</nav>
	</div>

	<!-- Tab Content -->
	<div class="py-6">
	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<!-- Summary Card 1 -->
	<div class="bg-gray-50 p-4 rounded-lg">
	<h4 class="font-bold text-gray-800 mb-3 flex items-center">
	<i class="fas fa-briefcase-medical text-medicinal-blue mr-2"></i> 项目经验
	</h4>
	<div class="space-y-3">
	<div>
	<p class="text-sm text-gray-600">总参与项目数</p>
	<p class="text-xl font-bold text-medicinal-blue">18</p>
	</div>
	<div class="grid grid-cols-3 gap-2">
	<div class="text-center">
	<p class="text-sm text-gray-600">I期</p>
	<p class="font-bold text-blue-800">6</p>
	</div>
	<div class="text-center">
	<p class="text-sm text-gray-600">II期</p>
	<p class="font-bold text-blue-800">5</p>
	</div>
	<div class="text-center">
	<p class="text-sm text-gray-600">III期</p>
	<p class="font-bold text-blue-800">7</p>
	</div>
	</div>
	<div class="pt-2">
	<p class="text-sm text-gray-600">国际多中心</p>
	<p class="text-lg font-bold text-medicinal-blue">8个项目</p>
	</div>
	</div>
	</div>

	<!-- Summary Card 2 -->
	<div class="bg-gray-50 p-4 rounded-lg">
	<h4 class="font-bold text-gray-800 mb-3 flex items-center">
	<i class="fas fa-chart-line text-green-500 mr-2"></i> 入组效率
	</h4>
	<div class="space-y-3">
	<div>
	<p class="text-sm text-gray-600">平均入组速度</p>
	<p class="text-xl font-bold text-green-600">+15%</p>
	<p class="text-xs text-gray-500">快于行业基准</p>
	</div>
	<div>
	<p class="text-sm text-gray-600">筛选成功率</p>
	<div class="flex items-center">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-green-600 h-2.5 rounded-full" style="width: 72%"></div>
	</div>
	<span class="text-xs font-medium ml-2 text-gray-700">72%</span>
	</div>
	</div>
	<div>
	<p class="text-sm text-gray-600">患者保留率</p>
	<div class="flex items-center">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-green-600 h-2.5 rounded-full" style="width: 89%"></div>
	</div>
	<span class="text-xs font-medium ml-2 text-gray-700">89%</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Summary Card 3 -->
	<div class="bg-gray-50 p-4 rounded-lg">
	<h4 class="font-bold text-gray-800 mb-3 flex items-center">
	<i class="fas fa-clipboard-check text-purple-500 mr-2"></i> 合规记录
	</h4>
	<div class="space-y-3">
	<div>
	<p class="text-sm text-gray-600">稽查评级</p>
	<p class="text-xl font-bold text-green-600">A+</p>
	</div>
	<div>
	<p class="text-sm text-gray-600">最近3年稽查</p>
	<p class="font-bold text-gray-800">4次 (2次免检)</p>
	</div>
	<div>
	<p class="text-sm text-gray-600">典型问题</p>
	<ul class="text-xs text-gray-600 list-disc list-inside">
	<li>源文件记录不及时(1次)</li>
	<li>知情同意版本错误(0次)</li>
	</ul>
	</div>
	</div>
	</div>
	</div>

	<!-- Expertise Summary -->
	<div class="mt-8">
	<h4 class="font-bold text-gray-800 mb-3">专家专长</h4>
	<p class="text-gray-700">
	张教授专注肿瘤免疫治疗领域15年，特别擅长PD-1/PD-L1抑制剂相关临床研究。作为主要研究者(PI)完成5个I期首次人体试验，其中2个获得FDA突破性疗法认证。在晚期实体瘤患者的招募与保留方面经验丰富，其研究中心在多个国际多中心项目中入组速度排名前10%。
	</p>
	</div>

	<!-- System Recommendation -->
	<div class="mt-8 p-4 bg-blue-50 rounded-lg">
	<h4 class="font-bold text-blue-800 mb-2 flex items-center">
	<i class="fas fa-robot text-blue-500 mr-2"></i> 系统推荐理由
	</h4>
	<p class="text-blue-900">
	基于您的项目筛查条件(肿瘤I期研究，免疫检查点抑制剂)，张明远教授匹配度达到92%。张教授在近3年内完成3个类似机制研究，患者筛选成功率达到72%，高于同类研究平均水平(58%)。其研究中心的稽查记录优秀，最近2个项目均获得免稽查资格，有利于缩短项目启动周期约2-3周。
	</p>
	<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
	<div class="bg-white p-3 rounded-md">
	<p class="text-xs text-gray-500">匹配度</p>
	<div class="flex items-center">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-blue-600 h-2.5 rounded-full" style="width: 92%"></div>
	</div>
	<span class="text-xs font-medium ml-2 text-blue-700">92%</span>
	</div>
	</div>
	<div class="bg-white p-3 rounded-md">
	<p class="text-xs text-gray-500">研究相似度</p>
	<p class="font-bold text-blue-800">88%</p>
	</div>
	<div class="bg-white p-3 rounded-md">
	<p class="text-xs text-gray-500">预计入组速度</p>
	<p class="font-bold text-blue-800">快15-20%</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Modal Footer -->
	<div class="border-t p-4 flex justify-end space-x-3">
	<button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
	<i class="far fa-file-pdf mr-1"></i> 生成报告
	</button>
	<button class="px-4 py-2 bg-medicinal-blue text-white rounded-md hover:bg-medicinal-darkblue">
	<i class="fas fa-user-plus mr-1"></i> 加入专家池
	</button>
	<button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">
	<i class="fas fa-envelope mr-1"></i> 发起邀请
	</button>
	</div>
	</div>
	</div>

	<script>
	// Mock function for expert modal - in a real app this would fetch actual data
	function openExpertModal(expertId) {
	document.getElementById('expertModal').classList.remove('hidden');
	document.body.style.overflow = 'hidden';
	}

	function closeExpertModal() {
	document.getElementById('expertModal').classList.add('hidden');
	document.body.style.overflow = 'auto';
	}

	function scrollToExpert(expertId) {
	// In a real app, implement smooth scrolling to the specific expert card
	alert('在当前应用中，这将平滑滚动到选定的专家卡片');
	closeExpertModal();
	}

	// Add active state to filter tags when clicked
	document.querySelectorAll('.filter-tag').forEach(tag => {
	tag.addEventListener('click', function() {
	this.classList.toggle('bg-gray-100');
	this.classList.toggle('text-gray-800');
	this.classList.toggle('bg-medicinal-blue');
	this.classList.toggle('text-white');
	});
	});

	// Tab switching functionality
	document.querySelectorAll('nav button').forEach(tab => {
	tab.addEventListener('click', function() {
	// Remove active class from all tabs
	document.querySelectorAll('nav button').forEach(t => {
	t.classList.remove('tab-active');
	t.classList.add('text-gray-500', 'hover:text-gray-700');
	});

	// Add active class to clicked tab
	this.classList.add('tab-active');
	this.classList.remove('text-gray-500', 'hover:text-gray-700');
	});
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maomaobj/ctexperts" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>