请为我设计一个“医学机构展示页面”，用于在临床试验知识平台中展示全国或区域内的医疗研究机构信息。页面需支持多维筛选、品牌展示、机构实力评分、研究方向标签化和合作推荐功能。整体风格专业清晰、蓝白配色，参考医疗科研信息系统，具备良好的展示性和交互性。 页面结构如下： 1️⃣ 页面顶部（概览 + 搜索） 页面主标题：“医学机构库” 子标题说明：“展示临床研究机构在科研能力、专业方向和试验经验方面的综合实力” 一个搜索框 + 快速筛选区域（可筛地区、专病方向） 2️⃣ 左侧垂直筛选栏（支持多选） 地区筛选：按省份/城市分层 机构类型：三级医院 / 医学院附属 / 疾控中心 / 民营机构 / 药物研发基地 专病方向：肿瘤 / 心血管 / 内分泌 / 精神神经 / 儿科 等 研究能力等级：I级 / II级 / III级（可依据内评标准） 数据中心接入能力：EDC / eSource / 远程稽查支持 3️⃣ 主内容区域：机构列表展示（卡片式） 每家机构以卡片形式展示，内容包括： 医院/研究中心名称（如：北京协和医院） LOGO 或代表性建筑图片 所在地区（城市 + 医疗区域标签） 机构等级：三级甲等 / 国家临床重点专科 核心专病方向标签（如：乳腺癌 / 胰腺癌 / 自身免疫疾病） 历史参与项目数（如：“累计完成62项I–III期试验”） 平均入组周期 / 伦理通过时间（如有） 合作评分（⭐️⭐️⭐️⭐️） 卡片下方可设置操作按钮：[查看详情] [推荐专家] [收藏] 4️⃣ 单个机构详情弹窗/页面（建议跳转） 点击某一机构后跳转详情页（可在提示词中表明页面联动），包含： 机构简介 研究平台/伦理信息/影像中心等基础能力 已完成的代表性项目 当前专家团队列表 项目管理联系人信息 智能匹配结果：适合哪些项目阶段 / 研究病种 5️⃣ 数据可视化推荐模块（可选） 放在页面右上角或顶部横幅： 地图模式切换按钮：“查看地图” → 全国医学机构热力图 数据图表： “热门研究方向机构数量分布” “入组效率前10机构柱状图” 6️⃣ 智能推荐区（页面底部） 模块名称：“智能推荐机构” 推荐理由自动生成，如： “推荐：华西医院（肺癌方向，PI经验丰富，伦理通过时间短）” “推荐：XX大学附属医院（心血管重点试验基地）” 💡 页面风格建议 蓝白灰主色调，卡片边角圆润、图标简洁 使用图标/标签辅助识别（如🏥代表医院，📍代表地区） 强调“机构实力”、“研究方向”、“合作便利度”可视化 - Follow Up Deployment
dfa8495 verified | <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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"> | |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| medblue: '#0d7ea0', | |
| lightblue: '#e6f3f8', | |
| darkblue: '#085b75', | |
| accent: '#4cb7c8' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .map-container { height: 300px; } | |
| .institution-card { | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); | |
| } | |
| .institution-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .filter-section { | |
| transition: all 0.3s ease; | |
| } | |
| .filter-section.collapsed .filter-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| } | |
| .tag { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 3px 8px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| } | |
| .card-divider { | |
| height: 1px; | |
| background: linear-gradient(to right, transparent, rgba(13, 126, 160, 0.3), transparent); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-700"> | |
| <!-- 头部区域 --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center gap-6"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-medblue">医学机构库</h1> | |
| <p class="text-gray-600 mt-2">展示临床研究机构在科研能力、专业方向和试验经验方面的综合实力</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <div id="visualization-toggle" class="mr-4 hidden md:block"> | |
| <button class="bg-medblue hover:bg-darkblue text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-map-marked-alt mr-2"></i>查看地图 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 搜索和快速筛选 --> | |
| <div class="mt-6"> | |
| <div class="relative"> | |
| <input type="text" placeholder="搜索机构名称、城市或专病方向..." | |
| class="w-full p-4 pr-12 rounded-xl border border-gray-300 focus:outline-none focus:ring-2 focus:ring-medblue focus:border-transparent"> | |
| <button class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-medblue text-white p-2 rounded-lg hover:bg-darkblue"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <div class="text-gray-600 flex items-center mr-2"> | |
| <i class="fas fa-filter mr-1"></i>快速筛选： | |
| </div> | |
| <button class="bg-lightblue text-medblue px-3 py-1 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-1"></i>北京 | |
| </button> | |
| <button class="bg-lightblue text-medblue px-3 py-1 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-stethoscope mr-1"></i>肿瘤 | |
| </button> | |
| <button class="bg-lightblue text-medblue px-3 py-1 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-star mr-1"></i>Ⅲ级机构 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- 主体内容区域 --> | |
| <main class="container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6"> | |
| <!-- 左侧筛选栏 --> | |
| <aside class="w-full lg:w-1/4 bg-white rounded-xl shadow-sm p-4 h-fit sticky top-4"> | |
| <h2 class="text-xl font-semibold text-medblue mb-4">筛选条件</h2> | |
| <!-- 地区筛选 --> | |
| <div class="filter-section mb-4"> | |
| <div class="flex justify-between items-center cursor-pointer filter-header"> | |
| <h3 class="font-medium text-gray-700"><i class="fas fa-map-marker-alt mr-2 text-medblue"></i>地区</h3> | |
| <i class="fas fa-chevron-down text-gray-400"></i> | |
| </div> | |
| <div class="filter-content mt-3 ml-1"> | |
| <div class="space-y-2"> | |
| <div> | |
| <button class="flex items-center justify-between w-full text-left py-1 px-2 rounded hover:bg-lightblue"> | |
| <span>北京市</span> | |
| <span class="text-xs text-gray-500 bg-gray-100 rounded-full w-6 h-6 flex items-center justify-center">38</span> | |
| </button> | |
| </div> | |
| <div> | |
| <button class="flex items-center justify-between w-full text-left py-1 px-2 rounded hover:bg-lightblue"> | |
| <span>上海市</span> | |
| <span class="text-xs text-gray-500 bg-gray-100 rounded-full w-6 h-6 flex items-center justify-center">32</span> | |
| </button> | |
| </div> | |
| <div> | |
| <button class="flex items-center justify-between w-full text-left py-1 px-2 rounded hover:bg-lightblue"> | |
| <span>广东省</span> | |
| <span class="text-xs text-gray-500 bg-gray-100 rounded-full w-6 h-6 flex items-center justify-center">28</span> | |
| </button> | |
| </div> | |
| <button class="text-medblue text-sm mt-2 flex items-center"> | |
| <i class="fas fa-plus-circle mr-1"></i> 全部省份 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 机构类型 --> | |
| <div class="filter-section mb-4"> | |
| <div class="flex justify-between items-center cursor-pointer filter-header"> | |
| <h3 class="font-medium text-gray-700"><i class="fas fa-hospital mr-2 text-medblue"></i>机构类型</h3> | |
| <i class="fas fa-chevron-down text-gray-400"></i> | |
| </div> | |
| <div class="filter-content mt-3 ml-1"> | |
| <div class="space-y-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-medblue focus:ring-medblue"> | |
| <span class="ml-2">三级医院</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-medblue focus:ring-medblue"> | |
| <span class="ml-2">医学院附属</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-medblue focus:ring-medblue"> | |
| <span class="ml-2">疾控中心</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-medblue focus:ring-medblue"> | |
| <span class="ml-2">民营机构</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-medblue focus:ring-medblue"> | |
| <span class="ml-2">药物研发基地</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 专病方向 --> | |
| <div class="filter-section mb-4"> | |
| <div class="flex justify-between items-center cursor-pointer filter-header"> | |
| <h3 class="font-medium text-gray-700"><i class="fas fa-disease mr-2 text-medblue"></i>专病方向</h3> | |
| <i class="fas fa-chevron-down text-gray-400"></i> | |
| </div> | |
| <div class="filter-content mt-3 ml-1"> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="tag bg-blue-100 text-blue-800">肿瘤</button> | |
| <button class="tag bg-red-100 text-red-800">心血管</button> | |
| <button class="tag bg-green-100 text-green-800">内分泌</button> | |
| <button class="tag bg-purple-100 text-purple-800">精神神经</button> | |
| <button class="tag bg-yellow-100 text-yellow-800">儿科</button> | |
| <button class="tag bg-teal-100 text-teal-800">呼吸</button> | |
| <button class="tag bg-pink-100 text-pink-800">消化</button> | |
| <button class="tag bg-indigo-100 text-indigo-800">免疫疾病</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 研究能力等级 --> | |
| <div class="filter-section mb-4"> | |
| <div class="flex justify-between items-center cursor-pointer filter-header"> | |
| <h3 class="font-medium text-gray-700"><i class="fas fa-chart-line mr-2 text-medblue"></i>研究能力等级</h3> | |
| <i class="fas fa-chevron-down text-gray-400"></i> | |
| </div> | |
| <div class="filter-content mt-3 ml-1"> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="tag bg-gray-100 text-gray-800 flex items-center"> | |
| <span class="w-3 h-3 bg-gray-400 rounded-full mr-1"></span>Ⅰ级 | |
| </button> | |
| <button class="tag bg-blue-100 text-blue-800 flex items-center"> | |
| <span class="w-3 h-3 bg-medblue rounded-full mr-1"></span>Ⅱ级 | |
| </button> | |
| <button class="tag bg-medblue text-white flex items-center"> | |
| <span class="w-3 h-3 bg-white rounded-full mr-1"></span>Ⅲ级 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 数据中心接入能力 --> | |
| <div class="filter-section"> | |
| <div class="flex justify-between items-center cursor-pointer filter-header"> | |
| <h3 class="font-medium text-gray-700"><i class="fas fa-database mr-2 text-medblue"></i>数据中心接入能力</h3> | |
| <i class="fas fa-chevron-down text-gray-400"></i> | |
| </div> | |
| <div class="filter-content mt-3 ml-1"> | |
| <div class="space-y-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-medblue focus:ring-medblue"> | |
| <span class="ml-2">EDC接入</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-medblue focus:ring-medblue"> | |
| <span class="ml-2">eSource支持</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-medblue focus:ring-medblue"> | |
| <span class="ml-2">远程稽查支持</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 bg-medblue text-white py-2 rounded-lg hover:bg-darkblue transition"> | |
| <i class="fas fa-filter mr-2"></i>应用筛选条件 | |
| </button> | |
| </aside> | |
| <!-- 主内容区域 --> | |
| <div class="w-full lg:w-3/4"> | |
| <!-- 地图热力图容器（默认隐藏） --> | |
| <div id="map-view" class="hidden bg-white rounded-xl shadow-sm p-4 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-medblue">全国医学机构分布热力图</h2> | |
| <button id="close-map" class="text-gray-500 hover:text-medblue"> | |
| <i class="fas fa-times"></i> 关闭地图 | |
| </button> | |
| </div> | |
| <div id="map" class="map-container rounded-lg"></div> | |
| </div> | |
| <!-- 结果统计和排序 --> | |
| <div class="bg-white rounded-xl shadow-sm p-4 mb-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div> | |
| <span class="text-gray-600">找到</span> | |
| <span class="font-bold text-medblue text-lg">58</span> | |
| <span class="text-gray-600">家医学机构</span> | |
| </div> | |
| <div class="flex items-center mt-2 md:mt-0"> | |
| <span class="text-gray-600 mr-2">排序：</span> | |
| <select class="border rounded-lg p-2 focus:ring-medblue focus:border-medblue"> | |
| <option>合作评分最高</option> | |
| <option>科研能力最强</option> | |
| <option>入组效率最高</option> | |
| <option>临床试验最多</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 机构卡片列表 --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-8"> | |
| <!-- 机构卡片示例 1 --> | |
| <div class="institution-card bg-white rounded-xl overflow-hidden"> | |
| <div class="relative"> | |
| <div class="h-36 bg-gradient-to-r from-medblue to-cyan-500 flex items-center justify-center"> | |
| <div class="bg-white rounded-full p-3 w-20 h-20 flex items-center justify-center"> | |
| <i class="fas fa-hospital text-medblue text-4xl"></i> | |
| </div> | |
| </div> | |
| <div class="absolute top-3 right-3"> | |
| <span class="bg-white text-medblue font-semibold px-3 py-1 rounded-full text-sm flex items-center"> | |
| <span class="w-2 h-2 bg-medblue rounded-full mr-1"></span>Ⅲ级机构 | |
| </span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-lg font-bold text-medblue">北京协和医院</h3> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| <div class="flex items-center text-gray-600 mt-1"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> | |
| <span>北京市 | 三级甲等 | 国家临床重点专科</span> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="font-medium text-sm">核心专病方向：</div> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| <span class="tag bg-rose-100 text-rose-800">乳腺癌</span> | |
| <span class="tag bg-rose-100 text-rose-800">胰腺癌</span> | |
| <span class="tag bg-emerald-100 text-emerald-800">自身免疫疾病</span> | |
| </div> | |
| </div> | |
| <div class="card-divider my-4"></div> | |
| <div class="grid grid-cols-2 gap-3 text-sm"> | |
| <div class="flex flex-col"> | |
| <span class="text-gray-500">完成试验</span> | |
| <span class="font-semibold text-medblue">62项</span> | |
| </div> | |
| <div class="flex flex-col"> | |
| <span class="text-gray-500">平均入组</span> | |
| <span class="font-semibold text-medblue">21周</span> | |
| </div> | |
| <div class="flex flex-col"> | |
| <span class="text-gray-500">伦理通过</span> | |
| <span class="font-semibold text-medblue">平均4.5周</span> | |
| </div> | |
| <div class="flex flex-col"> | |
| <span class="text-gray-500">支持远程</span> | |
| <span class="font-semibold text-medblue">已开通</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-5"> | |
| <button class="text-medblue hover:text-darkblue text-sm font-medium"> | |
| <i class="far fa-bookmark mr-1"></i>收藏 | |
| </button> | |
| <button class="bg-medblue text-white px-4 py-1 rounded-lg text-sm hover:bg-darkblue"> | |
| 查看详情 <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| <button class="text-medblue hover:text-darkblue text-sm font-medium"> | |
| 推荐专家 <i class="fas fa-user-md ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 机构卡片示例 2 --> | |
| <div class="institution-card bg-white rounded-xl overflow-hidden"> | |
| <div class="relative"> | |
| <div class="h-36 bg-gradient-to-r from-accent to-cyan-400 flex items-center justify-center"> | |
| <div class="bg-white rounded-full p-3 w-20 h-20 flex items-center justify-center"> | |
| <i class="fas fa-hospital text-accent text-4xl"></i> | |
| </div> | |
| </div> | |
| <div class="absolute top-3 right-3"> | |
| <span class="bg-white text-accent font-semibold px-3 py-1 rounded-full text-sm flex items-center"> | |
| <span class="w-2 h-2 bg-accent rounded-full mr-1"></span>Ⅱ级机构 | |
| </span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-lg font-bold text-medblue">中山大学附属肿瘤医院</h3> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| <div class="flex items-center text-gray-600 mt-1"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> | |
| <span>广州市 | 三级甲等 | 肿瘤专科</span> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="font-medium text-sm">核心专病方向：</div> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| <span class="tag bg-rose-100 text-rose-800">肺癌</span> | |
| <span class="tag bg-rose-100 text-rose-800">肝癌</span> | |
| <span class="tag bg-rose-100 text-rose-800">结直肠癌</span> | |
| <span class="tag bg-rose-100 text-rose-800">鼻咽癌</span> | |
| </div> | |
| </div> | |
| <div class="card-divider my-4"></div> | |
| <div class="grid grid-cols-2 gap-3 text-sm"> | |
| <div class="flex flex-col"> | |
| <span class="text-gray-500">完成试验</span> | |
| <span class="font-semibold text-medblue">48项</span> | |
| </div> | |
| <div class="flex flex-col"> | |
| <span class="text-gray-500">平均入组</span> | |
| <span class="font-semibold text-medblue">17周</span> | |
| </div> | |
| <div class="flex flex-col"> | |
| <span class="text-gray-500">伦理通过</span> | |
| <span class="font-semibold text-medblue">平均3.8周</span> | |
| </div> | |
| <div class="flex flex-col"> | |
| <span class="text-gray-500">支持远程</span> | |
| <span class="font-semibold text-medblue">已开通</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-5"> | |
| <button class="text-medblue hover:text-darkblue text-sm font-medium"> | |
| <i class="far fa-bookmark mr-1"></i>收藏 | |
| </button> | |
| <button class="bg-medblue text-white px-4 py-1 rounded-lg text-sm hover:bg-darkblue"> | |
| 查看详情 <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| <button class="text-medblue hover:text-darkblue text-sm font-medium"> | |
| 推荐专家 <i class="fas fa-user-md ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 机构卡片示例 3 --> | |
| <div class="institution-card bg-white rounded-xl overflow-hidden"> | |
| <div class="relative"> | |
| <div class="h-36 bg-gradient-to-r from-cyan-600 to-cyan-400 flex items-center justify-center"> | |
| <div class="bg-white rounded-full p-3 w-20 h-20 flex items-center justify-center"> | |
| <i class="fas fa-heartbeat text-cyan-600 text-4xl"></i> | |
| </div> | |
| </div> | |
| <div class="absolute top-3 right-3"> | |
| <span class="bg-white text-cyan-600 font-semibold px-3 py-1 rounded-full text-sm flex items-center"> | |
| <span class="w-2 h-2 bg-cyan-600 rounded-full mr-1"></span>Ⅲ级机构 | |
| </span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-lg font-bold text-medblue">上海瑞金医院</h3> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| <div class="flex items-center text-gray-600 mt-1"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> | |
| <span>上海市 | 三级甲等 | 国家代谢病重点中心</span> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="font-medium text-sm">核心专病方向：</div> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| <span class="tag bg-emerald-100 text-emerald-800">内分泌</span> | |
| <span class="tag bg-rose-100 text-rose-800">血液肿瘤</span> | |
| <span class="tag bg-red-100 text-red-800">心血管</span> | |
| </div> | |
| </div> | |
| <div class="card-divider my-4"></div> | |
| <div class="grid grid-cols-2 gap-3 text-sm"> | |
| <div class="flex flex-col"> | |
| <span class="text-gray-500">完成试验</span> | |
| <span class="font-semibold text-medblue">77项</span> | |
| </div> | |
| <div class="flex flex-col"> | |
| <span class="text-gray-500">平均入组</span> | |
| <span class="font-semibold text-medblue">19周</span> | |
| </div> | |
| <div class="flex flex-col"> | |
| <span class="text-gray-500">伦理通过</span> | |
| <span class="font-semibold text-medblue">平均4.2周</span> | |
| </div> | |
| <div class="flex flex-col"> | |
| <span class="text-gray-500">支持远程</span> | |
| <span class="font-semibold text-medblue">部分支持</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-5"> | |
| <button class="text-medblue hover:text-darkblue text-sm font-medium"> | |
| <i class="far fa-bookmark mr-1"></i>收藏 | |
| </button> | |
| <button class="bg-medblue text-white px-4 py-1 rounded-lg text-sm hover:bg-darkblue"> | |
| 查看详情 <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| <button class="text-medblue hover:text-darkblue text-sm font-medium"> | |
| 推荐专家 <i class="fas fa-user-md ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 数据可视化模块 --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-8"> | |
| <h2 class="text-xl font-semibold text-medblue mb-6">研究机构数据分析</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- 热门研究方向分布 --> | |
| <div> | |
| <h3 class="font-medium text-gray-800 flex items-center"> | |
| <i class="fas fa-chart-pie mr-2 text-medblue"></i>热门研究方向机构分布 | |
| </h3> | |
| <div class="mt-4"> | |
| <canvas id="diseaseChart" height="250"></canvas> | |
| </div> | |
| </div> | |
| <!-- 入组效率Top10 --> | |
| <div> | |
| <h3 class="font-medium text-gray-800 flex items-center"> | |
| <i class="fas fa-chart-bar mr-2 text-medblue"></i>入组效率Top10机构 | |
| </h3> | |
| <div class="mt-4"> | |
| <canvas id="efficiencyChart" height="250"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 智能推荐区域 --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h2 class="text-xl font-semibold text-medblue mb-4 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2 text-yellow-400"></i>智能推荐机构 | |
| </h2> | |
| <div class="space-y-4"> | |
| <!-- 推荐1 --> | |
| <div class="flex items-start p-4 border border-lightblue rounded-lg"> | |
| <div class="bg-medblue w-8 h-8 rounded-full flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg">华西医院</h3> | |
| <p class="text-gray-700 mt-1">推荐理由：肺癌方向临床试验领先，PI经验丰富（张教授从业20年），伦理委员会通过时间短（平均3周）</p> | |
| </div> | |
| </div> | |
| <!-- 推荐2 --> | |
| <div class="flex items-start p-4 border border-lightblue rounded-lg"> | |
| <div class="bg-medblue w-8 h-8 rounded-full flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-heartbeat"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg">北京大学第三医院</h3> | |
| <p class="text-gray-700 mt-1">推荐理由：心血管重点试验基地（参与50+心血管临床试验），拥有国家心血管生物样本库，入组效率行业前10%</p> | |
| </div> | |
| </div> | |
| <!-- 推荐3 --> | |
| <div class="flex items-start p-4 border border-lightblue rounded-lg"> | |
| <div class="bg-medblue w-8 h-8 rounded-full flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg">湘雅医院</h3> | |
| <p class="text-gray-700 mt-1">推荐理由：精神神经科临床研究中心全国Top5，II/III期试验项目经验丰富，提供远程稽查支持服务</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- 底部信息 --> | |
| <footer class="bg-medblue text-white mt-12 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between"> | |
| <div class="mb-6 md:mb-0"> | |
| <h3 class="text-xl font-bold mb-4">医学机构库</h3> | |
| <p class="max-w-md">提供全国医疗研究机构综合信息服务，助力临床研究合作伙伴高效匹配</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h4 class="font-bold mb-3">快速链接</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-cyan-200">机构数据概览</a></li> | |
| <li><a href="#" class="hover:text-cyan-200">伦理委员会系统</a></li> | |
| <li><a href="#" class="hover:text-cyan-200">专家库查询</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-3">联系我们</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone mr-2"></i>400-888-1234 | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2"></i>contact@clinical-research.cn | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-cyan-200 mt-8 pt-6 text-center text-cyan-100"> | |
| <p>© 2023 临床试验知识平台 | 提供专业医疗研究信息服务</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // 初始化筛选折叠功能 | |
| document.querySelectorAll('.filter-header').forEach(header => { | |
| header.addEventListener('click', () => { | |
| const section = header.closest('.filter-section'); | |
| section.classList.toggle('collapsed'); | |
| const icon = header.querySelector('.fa-chevron-down'); | |
| icon.classList.toggle('fa-chevron-up'); | |
| }); | |
| }); | |
| // 地图显示/隐藏功能 | |
| const mapBtn = document.getElementById('visualization-toggle'); | |
| const mapView = document.getElementById('map-view'); | |
| const closeMap = document.getElementById('close-map'); | |
| if(mapBtn) { | |
| mapBtn.addEventListener('click', () => { | |
| mapView.classList.remove('hidden'); | |
| // 初始化地图 | |
| const map = L.map('map').setView([35.8617, 104.1954], 4); | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| // 模拟的机构位置 | |
| const locations = [ | |
| { name: "北京协和医院", lat: 39.9042, lng: 116.4074, count: 15 }, | |
| { name: "华西医院", lat: 30.5728, lng: 104.0668, count: 12 }, | |
| { name: "瑞金医院", lat: 31.2304, lng: 121.4737, count: 14 }, | |
| { name: "中山肿瘤医院", lat: 23.1291, lng: 113.2644, count: 9 }, | |
| { name: "湘雅医院", lat: 28.2135, lng: 112.9838, count: 7 } | |
| ]; | |
| // 添加标记点 | |
| locations.forEach(loc => { | |
| const marker = L.marker([loc.lat, loc.lng]).addTo(map) | |
| .bindPopup(`<b>${loc.name}</b><br>${loc.count}家研究机构`); | |
| // 模拟热力点 | |
| for(let i = 0; i < loc.count; i++) { | |
| const offset = 0.05 * Math.random(); | |
| L.circleMarker([ | |
| loc.lat + offset * (Math.random() - 0.5), | |
| loc.lng + offset * (Math.random() - 0.5) | |
| ], { | |
| radius: 5, | |
| color: '#0d7ea0', | |
| fillColor: '#0d7ea0', | |
| opacity: 0.7, | |
| fillOpacity: 0.5 | |
| }).addTo(map); | |
| } | |
| }); | |
| }); | |
| } | |
| if(closeMap) { | |
| closeMap.addEventListener('click', () => { | |
| mapView.classList.add('hidden'); | |
| }); | |
| } | |
| // 初始化图表 | |
| window.onload = function() { | |
| // 研究方向分布饼图 | |
| const diseaseCtx = document.getElementById('diseaseChart').getContext('2d'); | |
| const diseaseChart = new Chart(diseaseCtx, { | |
| type: 'pie', | |
| data: { | |
| labels: ['肿瘤研究', '心血管病', '内分泌病', '精神神经', '儿科疾病', '其他'], | |
| datasets: [{ | |
| data: [32, 18, 15, 12, 10, 13], | |
| backgroundColor: [ | |
| '#e53e3e', '#3182ce', '#38a169', '#6b46c1', '#dd6b20', '#4a5568' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'bottom', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return `${context.label}: ${context.parsed}%`; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // 入组效率柱状图 | |
| const efficiencyCtx = document.getElementById('efficiencyChart').getContext('2d'); | |
| const efficiencyChart = new Chart(efficiencyCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['华西医院', '瑞金医院', '湘雅医院', '协和医院', '中山医院', '仁济医院', '华山医院', '华西医院', '瑞金医院', '协和医院'], | |
| datasets: [{ | |
| label: '平均入组时间(周)', | |
| data: [14, 15, 15, 16, 17, 17, 18, 18, 19, 20], | |
| backgroundColor: '#0d7ea0', | |
| borderColor: '#0d7ea0', | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| indexAxis: 'y', | |
| responsive: true, | |
| scales: { | |
| x: { | |
| beginAtZero: true, | |
| title: { | |
| display: true, | |
| text: '平均入组时间(周)' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| }; | |
| </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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=maomaobj/rencai1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |