请为我设计一个集人才查询、智能问答、趋势分析、数据图谱展示于一体的“人才数据智能服务页面”，用于在临床试验知识平台中实现对专家人才信息的快速获取与智能分析。 页面整体风格为蓝白医疗科技风，结构清晰，功能聚焦“找人 + 懂人 + 比人”，具备以下模块结构和示例内容： 1️⃣ 页面顶部（搜索 + AI入口） 页面主标题：人才数据智能服务 子标题：通过AI分析和可视化技术，帮助你高效发现、理解并使用临床研究人才数据 搜索框（提示词：“请输入专家姓名、研究方向、机构或关键词”） AI对话入口按钮：【我想找专家】【谁适合我的项目？】 2️⃣ 模块一：AI问答助手（可置右侧浮窗或中部） 模块标题：🤖 AI智能问人助手 示例提问： “推荐3位擅长乳腺癌的PI” “张伟医生是否做过III期项目？” “哪位专家做过CAR-T和肺癌？” 返回内容： 专家简要信息卡片 + 项目列表 + 推荐理由 + 合规评级 3️⃣ 模块二：人才列表展示区（卡片式，含筛选） 每张专家卡片包含以下字段： 姓名 / 头像 / 医院 / 科室 / 职称 专业方向标签（如：肿瘤 / 心血管 / 中枢神经） 项目经历摘要：主持3项I–III期项目 学术成果（如：近5年发文12篇，h-index=21） 合规等级：A（近3年无稽查问题） 操作按钮：[查看详情] [生成报告] [项目匹配] 支持筛选字段： 地区 / 专业方向 / 项目经验阶段 / 是否PI / 合规等级 / 是否有海外合作经验 4️⃣ 模块三：人才趋势与活跃度图表（右侧/中下方） 用于展示数据洞察，图形可选雷达图 / 柱状图 / 气泡图： 当前平台前10专业人才分布（柱状图） 某研究领域专家年度增长趋势（折线图） 各地区专家数量与稽查风险对比（热力气泡） 发文/项目双强专家分布（雷达图） 5️⃣ 模块四：专家比较分析（双栏或多栏对比） 标题：“专家对比助手” 功能：用户选择任意2–3位专家，页面自动生成对比图卡 对比字段： 项目经历 / 合作单位数量 / 发文水平 / 稽查表现 / 平均入组周期 示例： | 专家 | 李明东 | 张颖 | |------------|-------------------------|-------------------------| | 项目主持 | 4项（肿瘤） | 2项（心血管） | | 论文篇数 | 12篇 / h-index=18 | 9篇 / h-index=15 | | 稽查评级 | A（0次违规） | B（1次轻度缺陷） | | 推荐匹配度 | ✅（95%） | ✅（84%） | 6️⃣ 页面底部推荐区 标题：“你可能感兴趣的专家” 横向滑动列表展示系统推荐专家卡片（基于浏览行为/项目领域） 支持一键收藏 / 加入专家池 / 发送合作邀约 🎨 页面风格要求： 医疗科技风格，信息模块清晰可切换 专家卡片信息统一，标签颜色有区分 图表区域保持简洁，重点突出趋势与评分 AI问答入口始终可见（浮动/锚点） 每个数据支持“来源说明”与“引用生成” - Initial Deployment
73ff33c
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"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#f0fdf4', | |
| 100: '#dcfce7', | |
| 200: '#bbf7d0', | |
| 300: '#86efac', | |
| 400: '#4ade80', | |
| 500: '#22c55e', | |
| 600: '#16a34a', | |
| 700: '#15803d', | |
| 800: '#166534', | |
| 900: '#14532d', | |
| }, | |
| medical: { | |
| blue: '#0072BC', | |
| lightBlue: '#E6F7FF', | |
| teal: '#00A8B5', | |
| gray: '#F5F7FA' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </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; | |
| background-color: #F5F7FA; | |
| } | |
| .medical-header { | |
| background: linear-gradient(135deg, #0072BC 0%, #00A8B5 100%); | |
| } | |
| .expert-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 114, 188, 0.1); | |
| } | |
| .expert-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 114, 188, 0.15); | |
| } | |
| .compliance-A { | |
| background-color: rgba(22, 163, 74, 0.1); | |
| color: #16a34a; | |
| } | |
| .compliance-B { | |
| background-color: rgba(245, 158, 11, 0.1); | |
| color: #d97706; | |
| } | |
| .ai-assistant { | |
| box-shadow: 0 4px 12px rgba(0, 114, 188, 0.2); | |
| } | |
| .tag-oncology { | |
| background-color: rgba(220, 38, 38, 0.1); | |
| color: #dc2626; | |
| } | |
| .tag-cardio { | |
| background-color: rgba(14, 165, 233, 0.1); | |
| color: #0ea5e9; | |
| } | |
| .tag-neuro { | |
| background-color: rgba(168, 85, 247, 0.1); | |
| color: #8b5cf6; | |
| } | |
| .tag-immune { | |
| background-color: rgba(5, 150, 105, 0.1); | |
| color: #059669; | |
| } | |
| .tab-active { | |
| color: #0072BC; | |
| border-bottom: 3px solid #0072BC; | |
| } | |
| .chart-container { | |
| background-color: white; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .scroll-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-medical-gray min-h-screen"> | |
| <!-- 头部 --> | |
| <header class="medical-header text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-3xl md:text-4xl font-bold mb-2">人才数据智能服务</h1> | |
| <p class="text-xl md:text-2xl text-blue-100 mb-6 max-w-3xl"> | |
| 通过AI分析和可视化技术，帮助你高效发现、理解并使用临床研究人才数据 | |
| </p> | |
| <!-- 搜索区 --> | |
| <div class="flex flex-col md:flex-row gap-4 items-center"> | |
| <div class="relative w-full md:w-2/3"> | |
| <input | |
| type="text" | |
| placeholder="请输入专家姓名、研究方向、机构或关键词" | |
| class="w-full py-4 px-6 rounded-lg bg-white text-gray-700 shadow-md focus:outline-none focus:ring-2 focus:ring-primary-500" | |
| > | |
| <button class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-primary-500 hover:bg-primary-600 text-white p-2 rounded-lg"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="flex gap-3 w-full md:w-auto"> | |
| <button class="flex-1 md:flex-none bg-white text-primary-700 hover:bg-medical-lightBlue py-4 px-6 rounded-lg font-medium flex items-center justify-center gap-2 transition"> | |
| <i class="fas fa-user-md"></i> 我想找专家 | |
| </button> | |
| <button class="flex-1 md:flex-none bg-secondary-500 hover:bg-secondary-600 py-4 px-6 rounded-lg font-medium flex items-center justify-center gap-2 transition"> | |
| <i class="fas fa-clipboard-list"></i> 谁适合我的项目？ | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- 主体内容 --> | |
| <main class="container mx-auto px-4 py-8 relative"> | |
| <!-- AI助手浮窗 --> | |
| <div class="ai-assistant fixed right-8 bottom-8 z-50 w-96 bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="bg-primary-600 text-white py-3 px-4 flex justify-between items-center"> | |
| <div class="flex items-center gap-3"> | |
| <i class="fas fa-robot text-xl"></i> | |
| <h3 class="text-lg font-medium">🤖 AI智能问人助手</h3> | |
| </div> | |
| <button class="bg-primary-800 hover:bg-primary-700 w-8 h-8 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 bg-medical-lightBlue max-h-80 overflow-y-auto"> | |
| <div class="text-sm text-gray-500 mb-3">示例提问：</div> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| <button class="bg-white border border-primary-200 text-primary-700 text-sm px-3 py-1 rounded-full hover:bg-primary-50"> | |
| “推荐3位擅长乳腺癌的PI” | |
| </button> | |
| <button class="bg-white border border-primary-200 text-primary-700 text-sm px-3 py-1 rounded-full hover:bg-primary-50"> | |
| “张伟医生是否做过III期项目？” | |
| </button> | |
| <button class="bg-white border border-primary-200 text-primary-700 text-sm px-3 py-1 rounded-full hover:bg-primary-50"> | |
| “哪位专家做过CAR-T和肺癌？” | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-2"> | |
| <div class="text-sm text-gray-500">输入您的问题：</div> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-shield-alt"></i> 安全加密 | |
| </div> | |
| </div> | |
| <div class="flex gap-2"> | |
| <input | |
| type="text" | |
| placeholder="请输入关于专家的问题..." | |
| class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-primary-500" | |
| > | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white w-10 h-10 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="ai-response mt-4"> | |
| <div class="text-sm text-gray-500 mb-2">AI回复：</div> | |
| <div class="bg-white p-4 rounded-lg mb-3"> | |
| <div class="font-medium mb-1">基于您的问题，推荐3位乳腺癌专家：</div> | |
| <div class="text-sm pl-2 border-l-2 border-primary-500"> | |
| 1. <span class="font-medium">李芳教授</span> - 北京协和医院肿瘤科主任医师<br> | |
| <span class="text-xs text-gray-600">➤ 主持5项II-III期乳腺癌试验</span><br> | |
| <span class="text-xs text-gray-600">➤ 近3年发表乳腺癌相关论文8篇</span> | |
| </div> | |
| </div> | |
| <div class="text-xs text-gray-500 flex justify-end"> | |
| <span>来源: ClinicalTrials.gov | PubMed | 医院数据库</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- 左侧栏 - 筛选区 --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-white rounded-xl p-6 shadow-md"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center gap-2"> | |
| <i class="fas fa-filter text-primary-600"></i> 筛选专家 | |
| </h3> | |
| <div class="space-y-5"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">地区</label> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary-600"> | |
| <span class="ml-2 text-sm">全国</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary-600"> | |
| <span class="ml-2 text-sm">华北</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary-600"> | |
| <span class="ml-2 text-sm">华东</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary-600"> | |
| <span class="ml-2 text-sm">华南</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">专业方向</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="tag-oncology text-xs px-3 py-1 rounded-full">肿瘤</button> | |
| <button class="tag-cardio text-xs px-3 py-1 rounded-full">心血管</button> | |
| <button class="tag-neuro text-xs px-3 py-1 rounded-full">神经科</button> | |
| <button class="tag-immune text-xs px-3 py-1 rounded-full">免疫学</button> | |
| <button class="bg-gray-100 text-xs px-3 py-1 rounded-full">传染病</button> | |
| <button class="bg-gray-100 text-xs px-3 py-1 rounded-full">罕见病</button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">项目经验阶段</label> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary-600"> | |
| <span class="ml-2 text-sm">I期</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary-600"> | |
| <span class="ml-2 text-sm">II期</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary-600"> | |
| <span class="ml-2 text-sm">III期</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary-600"> | |
| <span class="ml-2 text-sm">IV期</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary-600"> | |
| <span class="ml-2 text-sm">上市后</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">角色</label> | |
| <div class="flex gap-3"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary-600"> | |
| <span class="ml-2 text-sm">PI（主要研究者）</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-primary-600"> | |
| <span class="ml-2 text-sm">Sub-I</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">合规等级</label> | |
| <div class="flex gap-3"> | |
| <button class="compliance-A text-xs px-3 py-1 rounded-full">A级</button> | |
| <button class="compliance-B text-xs px-3 py-1 rounded-full">B级</button> | |
| <button class="bg-gray-100 text-xs px-3 py-1 rounded-full">C级</button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">海外合作经验</label> | |
| <div class="flex gap-4"> | |
| <label class="flex items-center"> | |
| <input type="radio" name="overseas" class="text-primary-600"> | |
| <span class="ml-2 text-sm">不限</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="overseas" class="text-primary-600"> | |
| <span class="ml-2 text-sm">有经验</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="overseas" class="text-primary-600"> | |
| <span class="ml-2 text-sm">无经验</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="flex gap-3 pt-3"> | |
| <button class="flex-1 bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-lg"> | |
| 应用筛选 | |
| </button> | |
| <button class="flex-1 border border-gray-300 text-gray-700 py-2 rounded-lg"> | |
| 重置 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 右侧主内容区 --> | |
| <div class="lg:col-span-2"> | |
| <!-- 人才列表标题和切换 --> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">专家人才数据库</h2> | |
| <div class="flex border-b border-gray-200"> | |
| <button class="tab-active px-4 pb-3 font-medium text-sm">智能推荐</button> | |
| <button class="px-4 pb-3 text-gray-500 font-medium text-sm hover:text-primary-600">最新加入</button> | |
| <button class="px-4 pb-3 text-gray-500 font-medium text-sm hover:text-primary-600">高活跃度</button> | |
| <button class="px-4 pb-3 text-gray-500 font-medium text-sm hover:text-primary-600">高合规度</button> | |
| </div> | |
| </div> | |
| <!-- 人才卡片列表 --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8"> | |
| <!-- 专家卡片1 --> | |
| <div class="expert-card bg-white rounded-xl p-5 flex flex-col"> | |
| <div class="flex items-start mb-3"> | |
| <div class="w-16 h-16 rounded-full bg-gray-200 border-2 border-white shadow mr-4 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="李明东" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">李明东 教授</h3> | |
| <p class="text-gray-600 text-sm mt-1">北京协和医院 • 肿瘤科</p> | |
| </div> | |
| <span class="compliance-A px-2 py-1 rounded-full text-xs">合规A级</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="tag-oncology text-xs px-3 py-1 rounded-full">肿瘤学</span> | |
| <span class="tag-cardio text-xs px-3 py-1 rounded-full">肺癌</span> | |
| <span class="tag-immune text-xs px-3 py-1 rounded-full">CAR-T</span> | |
| </div> | |
| <div class="text-sm text-gray-700 space-y-2 mb-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-clinic-medical text-gray-400 mr-2 w-5"></i> | |
| <span>主持3项I–III期项目 (辉瑞、罗氏)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-book-open text-gray-400 mr-2 w-5"></i> | |
| <span>近5年发文12篇 • h-index=21</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-globe-asia text-gray-400 mr-2 w-5"></i> | |
| <span>有海外合作经验 (美国MD安德森)</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between gap-2 mt-auto pt-2"> | |
| <button class="flex-1 bg-medical-lightBlue hover:bg-primary-100 text-primary-700 py-2 rounded-lg text-sm"> | |
| <i class="fas fa-eye mr-1"></i> 查看详情 | |
| </button> | |
| <button class="flex-1 bg-white border border-primary-300 text-primary-700 hover:bg-primary-50 py-2 rounded-lg text-sm"> | |
| <i class="fas fa-chart-bar mr-1"></i> 生成报告 | |
| </button> | |
| <button class="flex-1 bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-lg text-sm"> | |
| <i class="fas fa-project-diagram mr-1"></i> 项目匹配 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 专家卡片2 --> | |
| <div class="expert-card bg-white rounded-xl p-5 flex flex-col"> | |
| <div class="flex items-start mb-3"> | |
| <div class="w-16 h-16 rounded-full bg-gray-200 border-2 border-white shadow mr-4 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="张颖" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">张颖 主任</h3> | |
| <p class="text-gray-600 text-sm mt-1">上海瑞金医院 • 心血管科</p> | |
| </div> | |
| <span class="compliance-B px-2 py-1 rounded-full text-xs">合规B级</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="tag-cardio text-xs px-3 py-1 rounded-full">心血管</span> | |
| <span class="tag-oncology text-xs px-3 py-1 rounded-full">代谢疾病</span> | |
| </div> | |
| <div class="text-sm text-gray-700 space-y-2 mb-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-clinic-medical text-gray-400 mr-2 w-5"></i> | |
| <span>主持2项III期项目 (诺华、拜耳)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-book-open text-gray-400 mr-2 w-5"></i> | |
| <span>近5年发文9篇 • h-index=15</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-user-md text-gray-400 mr-2 w-5"></i> | |
| <span>擅长跨国多中心临床研究</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between gap-2 mt-auto pt-2"> | |
| <button class="flex-1 bg-medical-lightBlue hover:bg-primary-100 text-primary-700 py-2 rounded-lg text-sm"> | |
| <i class="fas fa-eye mr-1"></i> 查看详情 | |
| </button> | |
| <button class="flex-1 bg-white border border-primary-300 text-primary-700 hover:bg-primary-50 py-2 rounded-lg text-sm"> | |
| <i class="fas fa-chart-bar mr-1"></i> 生成报告 | |
| </button> | |
| <button class="flex-1 bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-lg text-sm"> | |
| <i class="fas fa-project-diagram mr-1"></i> 项目匹配 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 人才趋势与活跃度图表 --> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">人才趋势与活跃度分析</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8"> | |
| <div class="chart-container p-4"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-3">专业人才分布</h4> | |
| <div class="w-full h-64"> | |
| <canvas id="specialtyChart"></canvas> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-2 flex justify-end"> | |
| <span>数据来源：平台数据库 (更新于2023-10)</span> | |
| </div> | |
| </div> | |
| <div class="chart-container p-4"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-3">专家增长趋势</h4> | |
| <div class="w-full h-64"> | |
| <canvas id="growthChart"></canvas> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-2 flex justify-end"> | |
| <span>数据来源：平台年度统计</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 专家比较分析 --> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">专家对比助手</h3> | |
| <div class="bg-white rounded-xl p-5 mb-8 shadow"> | |
| <div class="flex justify-between mb-4"> | |
| <div class="flex gap-2"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-200 mr-3"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="李明东" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <span class="font-medium">李明东</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-200 mr-3"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="张颖" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <span class="font-medium">张颖</span> | |
| </div> | |
| <button class="flex items-center text-primary-600 ml-3"> | |
| <i class="fas fa-plus-circle"></i> | |
| <span class="ml-1 text-sm">添加对比专家</span> | |
| </button> | |
| </div> | |
| <button class="text-primary-600 hover:text-primary-800 text-sm"> | |
| <i class="fas fa-file-export mr-1"></i> 导出对比报告 | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-sm"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="p-2 text-left text-gray-700 w-1/4">对比维度</th> | |
| <th class="p-2 text-left">李明东 教授</th> | |
| <th class="p-2 text-left">张颖 主任</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-200"> | |
| <td class="p-2 font-medium">项目主持</td> | |
| <td class="p-2">4项（肿瘤）</td> | |
| <td class="p-2">2项（心血管）</td> | |
| </tr> | |
| <tr class="border-b border-gray-200"> | |
| <td class="p-2 font-medium">论文篇数</td> | |
| <td class="p-2">12篇 / h-index=18</td> | |
| <td class="p-2">9篇 / h-index=15</td> | |
| </tr> | |
| <tr class="border-b border-gray-200"> | |
| <td class="p-2 font-medium">合作单位</td> | |
| <td class="p-2">18家医院/机构</td> | |
| <td class="p-2">12家医院/机构</td> | |
| </tr> | |
| <tr class="border-b border-gray-200"> | |
| <td class="p-2 font-medium">稽查评级</td> | |
| <td class="p-2"> | |
| <span class="compliance-A px-2 py-1 rounded-full text-xs">A级</span> | |
| <span class="text-xs">（0次违规）</span> | |
| </td> | |
| <td class="p-2"> | |
| <span class="compliance-B px-2 py-1 rounded-full text-xs">B级</span> | |
| <span class="text-xs">（1次轻度缺陷）</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="p-2 font-medium">推荐匹配度</td> | |
| <td class="p-2"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full font-medium">✅ 95%</span> | |
| </td> | |
| <td class="p-2"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full font-medium">✅ 84%</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- 页脚推荐区 --> | |
| <footer class="bg-white border-t border-gray-200 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-6">你可能感兴趣的专家</h3> | |
| <div class="relative"> | |
| <div class="overflow-x-auto pb-4 scroll-hide"> | |
| <div class="flex space-x-4" style="min-width: max-content;"> | |
| <!-- 推荐专家卡片1 --> | |
| <div class="expert-card bg-white rounded-lg p-4 shadow border border-gray-100 flex flex-col min-w-[280px]"> | |
| <div class="flex mb-3"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 mr-3"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="专家" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">王莉 教授</h4> | |
| <p class="text-gray-600 text-sm">复旦大学华山医院 • 神经科</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-2 mb-3"> | |
| <span class="tag-neuro text-xs px-2 py-1 rounded-full">神经科</span> | |
| <span class="tag-oncology text-xs px-2 py-1 rounded-full">肿瘤免疫</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3"> | |
| 主持AD治疗II期研究 • h-index=24<br> | |
| <span class="compliance-A inline-block px-2 py-1 rounded-full text-xs mt-2">合规A级</span> | |
| </p> | |
| <div class="flex gap-2 mt-auto"> | |
| <button class="flex-1 bg-medical-lightBlue text-primary-700 text-xs py-1.5 rounded"> | |
| <i class="fas fa-star mr-1"></i> 收藏 | |
| </button> | |
| <button class="flex-1 bg-primary-50 border border-primary-200 text-primary-700 text-xs py-1.5 rounded"> | |
| 邀约 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 推荐专家卡片2 --> | |
| <div class="expert-card bg-white rounded-lg p-4 shadow border border-gray-100 flex flex-col min-w-[280px]"> | |
| <div class="flex mb-3"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 mr-3"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="专家" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">陈明 主任</h4> | |
| <p class="text-gray-600 text-sm">中山大学肿瘤中心 • 肿瘤科</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-2 mb-3"> | |
| <span class="tag-oncology text-xs px-2 py-1 rounded-full">肿瘤学</span> | |
| <span class="tag-immune text-xs px-2 py-1 rounded-full">免疫治疗</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3"> | |
| 参与全球多中心III期试验 • h-index=31<br> | |
| <span class="compliance-A inline-block px-2 py-1 rounded-full text-xs mt-2">合规A级</span> | |
| </p> | |
| <div class="flex gap-2 mt-auto"> | |
| <button class="flex-1 bg-medical-lightBlue text-primary-700 text-xs py-1.5 rounded"> | |
| <i class="fas fa-star mr-1"></i> 收藏 | |
| </button> | |
| <button class="flex-1 bg-primary-50 border border-primary-200 text-primary-700 text-xs py-1.5 rounded"> | |
| 邀约 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 推荐专家卡片3 --> | |
| <div class="expert-card bg-white rounded-lg p-4 shadow border border-gray-100 flex flex-col min-w-[280px]"> | |
| <div class="flex mb-3"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 mr-3"> | |
| <img src="https://randomuser.me/api/portraits/women/23.jpg" alt="专家" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">刘娟 教授</h4> | |
| <p class="text-gray-600 text-sm">四川大学华西医院 • 心血管</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-2 mb-3"> | |
| <span class="tag-cardio text-xs px-2 py-1 rounded-full">心血管</span> | |
| <span class="bg-gray-100 text-xs px-2 py-1 rounded-full">代谢疾病</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3"> | |
| 主持心血管III期研究 • h-index=22<br> | |
| <span class="compliance-A inline-block px-2 py-1 rounded-full text-xs mt-2">合规A级</span> | |
| </p> | |
| <div class="flex gap-2 mt-auto"> | |
| <button class="flex-1 bg-medical-lightBlue text-primary-700 text-xs py-1.5 rounded"> | |
| <i class="fas fa-star mr-1"></i> 收藏 | |
| </button> | |
| <button class="flex-1 bg-primary-50 border border-primary-200 text-primary-700 text-xs py-1.5 rounded"> | |
| 邀约 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 推荐专家卡片4 --> | |
| <div class="expert-card bg-white rounded-lg p-4 shadow border border-gray-100 flex flex-col min-w-[280px]"> | |
| <div class="flex mb-3"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 mr-3"> | |
| <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="专家" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">赵健 主任</h4> | |
| <p class="text-gray-600 text-sm">武汉同济医院 • 风湿免疫科</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-2 mb-3"> | |
| <span class="tag-immune text-xs px-2 py-1 rounded-full">免疫学</span> | |
| <span class="bg-gray-100 text-xs px-2 py-1 rounded-full">罕见病</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3"> | |
| 主导两项创新药物试验 • h-index=19<br> | |
| <span class="compliance-A inline-block px-2 py-1 rounded-full text-xs mt-2">合规A级</span> | |
| </p> | |
| <div class="flex gap-2 mt-auto"> | |
| <button class="flex-1 bg-medical-lightBlue text-primary-700 text-xs py-1.5 rounded"> | |
| <i class="fas fa-star mr-1"></i> 收藏 | |
| </button> | |
| <button class="flex-1 bg-primary-50 border border-primary-200 text-primary-700 text-xs py-1.5 rounded"> | |
| 邀约 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // 初始化图表 | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // 专业分布柱状图 | |
| const specialtyCtx = document.getElementById('specialtyChart').getContext('2d'); | |
| const specialtyChart = new Chart(specialtyCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['肿瘤', '心血管', '神经科', '免疫学', '代谢疾病', '传染病', '罕见病', '呼吸', '肾病', '消化'], | |
| datasets: [{ | |
| label: '专家数量', | |
| data: [125, 87, 68, 54, 42, 39, 28, 36, 31, 26], | |
| backgroundColor: [ | |
| 'rgba(220, 38, 38, 0.7)', | |
| 'rgba(14, 165, 233, 0.7)', | |
| 'rgba(139, 92, 246, 0.7)', | |
| 'rgba(5, 150, 105, 0.7)', | |
| 'rgba(234, 179, 8, 0.7)', | |
| 'rgba(59, 130, 246, 0.7)', | |
| 'rgba(249, 115, 22, 0.7)', | |
| 'rgba(168, 85, 247, 0.7)', | |
| 'rgba(6, 182, 212, 0.7)', | |
| 'rgba(251, 191, 36, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgb(220, 38, 38)', | |
| 'rgb(14, 165, 233)', | |
| 'rgb(139, 92, 246)', | |
| 'rgb(5, 150, 105)', | |
| 'rgb(234, 179, 8)', | |
| 'rgb(59, 130, 246)', | |
| 'rgb(249, 115, 22)', | |
| 'rgb(168, 85, 247)', | |
| 'rgb(6, 182, 212)', | |
| 'rgb(251, 191, 36)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(0,0,0,0.05)' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // 专家增长折线图 | |
| const growthCtx = document.getElementById('growthChart').getContext('2d'); | |
| const growthChart = new Chart(growthCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['2018', '2019', '2020', '2021', '2022', '2023'], | |
| datasets: [{ | |
| label: '肿瘤专家数量', | |
| data: [65, 78, 90, 102, 118, 145], | |
| borderColor: 'rgb(220, 38, 38)', | |
| backgroundColor: 'rgba(220, 38, 38, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, { | |
| label: '心血管专家数量', | |
| data: [42, 48, 53, 61, 73, 87], | |
| borderColor: 'rgb(14, 165, 233)', | |
| backgroundColor: 'rgba(14, 165, 233, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| grid: { | |
| color: 'rgba(0,0,0,0.05)' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| color: 'rgba(0,0,0,0.05)' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| </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/expert2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |