Design a structured, modular results page for a Science & Technology Knowledge Service Platform. ### Page context: User asked the question: “碳纳米管增强复合材料的主要改性手段？” ### Layout structure: Use a consistent block layout for all result modules, with the following sections: --- ### 1. **Header (Top Bar)** - Logo: "智研汇 · 科技知识平台" - Navigation: [首页] [知识检索] [专家库] [智能问答] [我的收藏] - User avatar at top right --- ### 2. **Query Banner** - Box displaying user question: **“碳纳米管增强复合材料的主要改性手段？”** - Subheading below: “系统识别为『方法类问题』，为您找到以下 4 类结果” --- ### 3. **Modular Result Area (4 unified blocks, stack layout)** Use consistent card-based layout across all modules. Each block includes: - Title - Summary/lead text - Structured data cards (with icon, label, button) - Optional action: [查看更多] or [引用] #### ✅ Block 1: 📌 AI 快速总结 - Text box: “碳纳米管增强复合材料的常用改性手段包括：羧基化、氨基化、溶液分散、等离子体处理与聚合物包覆。每种方法改善的性能略有差异，需结合材料目标选择。” - Reference tags: [论文链接1] [项目报告] --- #### ✅ Block 2: 🔬 改性方法卡片 - Grid of 3 method cards: 1. **羧基化处理** “引入COOH基团提升亲水性和界面键合力” Tags: [化学改性] [增强结合力] 2. **聚合物包覆** “表面包覆环氧树脂提升均匀性与界面结合” Tags: [复合增强] [工程应用] 3. **等离子体改性** “提高表面能，改善分散性与润湿性” Tags: [表面处理] [实验性强] --- #### ✅ Block 3: 📚 推荐论文列表 - Vertical list layout: - **Title**: “Functionalization of carbon nanotube-based composites: A review” Authors: Zhang H. et al. | Journal: Advanced Materials, 2022 [查看全文] - **Title**: “Effects of plasma treatment on interfacial bonding in CNT composites” Authors: Lee C. et al. | Journal: Composite Interfaces, 2021 [阅读全文] --- #### ✅ Block 4: 👨🔬 推荐专家 - Horizontal scroll cards: 1. **王 强 教授** 清华大学 · 材料科学与工程 研究方向：界面改性、高性能复材 [查看成果] 2. **李 雪 研究员** 中科院宁波材料所 · 纳米材料 擅长：碳纳米材料功能化 [联系专家] --- ### 4. **Bottom Assistant** - Floating chat icon (bottom-right corner): Text: “❓ 有更多问题？问我吧” --- ### Visual style: - Light theme with blue + gray accents - Rounded cards with shadows - Icons for each block: summary 📌, methods 🔬, papers 📚, experts 👨🔬 - Font: Inter or Roboto - Initial Deployment
c18336f
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 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> | |
| <style> | |
| :root { | |
| --primary-blue: #2563eb; | |
| --light-blue: #eff6ff; | |
| --dark-blue: #1d4ed8; | |
| --accent-gray: #f3f4f6; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background-color: #f9fafb; | |
| color: #1f2937; | |
| } | |
| .floating-btn { | |
| box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .floating-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 18px rgba(0, 118, 255, 0.4); | |
| } | |
| .scrollable-cards { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .scrollable-cards::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .tag-line::after { | |
| content: ""; | |
| flex: 1; | |
| margin-left: 0.5rem; | |
| height: 1px; | |
| background-color: #e5e7eb; | |
| } | |
| </style> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'primary-blue': '#2563eb', | |
| 'light-blue': '#eff6ff', | |
| 'accent-gray': '#f3f4f6', | |
| 'dark-blue': '#1d4ed8', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- 顶部导航栏 --> | |
| <header class="sticky top-0 z-50 bg-white shadow-sm"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex items-center justify-between py-3"> | |
| <!-- 左侧Logo --> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-600 text-white w-10 h-10 rounded-lg flex items-center justify-center mr-2"> | |
| <i class="fas fa-atom text-xl"></i> | |
| </div> | |
| <h1 class="text-xl font-bold tracking-tight text-gray-800">智研汇 · 科技知识平台</h1> | |
| </div> | |
| <!-- 导航链接 --> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-blue-600 font-medium border-b-2 border-blue-600 py-2">首页</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600 transition py-2">知识检索</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600 transition py-2">专家库</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-500 transition py-2">智能问答</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600 transition py-2">我的收藏</a> | |
| </div> | |
| <!-- 用户头像 --> | |
| <div class="flex items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="relative"> | |
| <button class="text-gray-500 hover:text-blue-600 transition"> | |
| <i class="fas fa-bell text-xl"></i> | |
| </button> | |
| <span class="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-500"></span> | |
| </div> | |
| <div class="relative"> | |
| <button class="text-gray-500 hover:text-blue-600 transition"> | |
| <i class="fas fa-user-circle text-3xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 移动端导航 --> | |
| <div class="flex md:hidden py-3 border-t border-gray-200"> | |
| <div class="flex justify-around w-full"> | |
| <a href="#" class="text-sm px-2 text-blue-600 font-medium"><i class="fas fa-home mb-1 block text-center w-full"></i>首页</a> | |
| <a href="#" class="text-sm px-2 text-gray-600"><i class="fas fa-search mb-1 block text-center w-full"></i>检索</a> | |
| <a href="#" class="text-sm px-2 text-gray-600"><i class="fas fa-users mb-1 block text-center w-full"></i>专家</a> | |
| <a href="#" class="text-sm px-2 text-gray-600"><i class="fas fa-comments mb-1 block text-center w-full"></i>问答</a> | |
| <a href="#" class="text-sm px-2 text-gray-600"><i class="fas fa-bookmark mb-1 block text-center w-full"></i>收藏</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- 主内容区 --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- 查询横幅 --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">方法类问题</span> | |
| <button class="flex items-center text-blue-600"> | |
| <i class="fas fa-star mr-1 text-sm"></i> 收藏问题 | |
| </button> | |
| </div> | |
| <h1 class="text-2xl font-bold text-gray-800 mb-3 leading-tight">“碳纳米管增强复合材料的主要改性手段？”</h1> | |
| <div class="text-gray-600 mb-4">系统识别为『方法类问题』，为您找到以下<span class="text-blue-600 font-medium"> 4 类结果</span></div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm text-gray-600">材料科学</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm text-gray-600">纳米技术</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm text-gray-600">复合材料</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm text-gray-600">表面改性</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 内容卡片区域 --> | |
| <div class="grid grid-cols-1 gap-8 max-w-4xl mx-auto"> | |
| <!-- Block 1: AI快速总结 --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200 flex items-center"> | |
| <div class="bg-blue-100 w-10 h-10 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-lightbulb text-blue-700 text-lg"></i> | |
| </div> | |
| <h2 class="text-xl font-bold text-gray-800">AI 快速总结</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="bg-blue-50 border-l-4 border-blue-600 p-4 rounded mb-4"> | |
| <p class="text-gray-700 leading-relaxed"> | |
| “碳纳米管增强复合材料的常用改性手段包括：羧基化、氨基化、溶液分散、等离子体处理与聚合物包覆。每种方法改善的性能略有差异，需结合材料目标选择。” | |
| </p> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="#" class="bg-blue-100 text-blue-700 px-3 py-1 rounded text-sm hover:bg-blue-200 transition">论文链接1</a> | |
| <a href="#" class="bg-blue-100 text-blue-700 px-3 py-1 rounded text-sm hover:bg-blue-200 transition">项目报告</a> | |
| </div> | |
| </div> | |
| <div class="px-6 pb-6 flex justify-end"> | |
| <button class="text-blue-600 hover:text-blue-800 flex items-center"> | |
| <i class="fas fa-clipboard mr-1"></i> 复制总结 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Block 2: 改性方法卡片 --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200 flex items-center"> | |
| <div class="bg-green-100 w-10 h-10 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-flask text-green-700 text-lg"></i> | |
| </div> | |
| <h2 class="text-xl font-bold text-gray-800">改性方法详情</h2> | |
| </div> | |
| <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- 卡片1 --> | |
| <div class="border border-gray-200 rounded-xl hover:border-blue-300 transition-all"> | |
| <div class="p-5"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-blue-100 text-blue-800 w-8 h-8 rounded-full flex items-center justify-center mr-2"> | |
| <span class="font-bold">1</span> | |
| </div> | |
| <h3 class="font-semibold text-gray-800">羧基化处理</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| 引入COOH基团提升亲水性和界面键合力 | |
| </p> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs">化学改性</span> | |
| <span class="bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs">增强结合力</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-3 border-t border-gray-100 rounded-b-xl"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-xs"> | |
| <i class="fas fa-chart-line text-blue-600 mr-1"></i> | |
| <span class="text-gray-500">应用率: 78%</span> | |
| </div> | |
| <button class="text-xs text-blue-600 hover:text-blue-800">查看详情</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 卡片2 --> | |
| <div class="border border-gray-200 rounded-xl hover:border-blue-300 transition-all"> | |
| <div class="p-5"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-green-100 text-green-800 w-8 h-8 rounded-full flex items-center justify-center mr-2"> | |
| <span class="font-bold">2</span> | |
| </div> | |
| <h3 class="font-semibold text-gray-800">聚合物包覆</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| 表面包覆环氧树脂提升均匀性与界面结合 | |
| </p> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs">复合增强</span> | |
| <span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs">工程应用</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-3 border-t border-gray-100 rounded-b-xl"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-xs"> | |
| <i class="fas fa-chart-line text-green-500 mr-1"></i> | |
| <span class="text-gray-500">应用率: 65%</span> | |
| </div> | |
| <button class="text-xs text-blue-600 hover:text-blue-800">查看详情</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 卡片3 --> | |
| <div class="border border-gray-200 rounded-xl hover:border-blue-300 transition-all"> | |
| <div class="p-5"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-purple-100 text-purple-800 w-8 h-8 rounded-full flex items-center justify-center mr-2"> | |
| <span class="font-bold">3</span> | |
| </div> | |
| <h3 class="font-semibold text-gray-800">等离子体改性</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| 提高表面能，改善分散性与润湿性 | |
| </p> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded text-xs">表面处理</span> | |
| <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded text-xs">实验性强</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-5 py-3 border-t border-gray-100 rounded-b-xl"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-xs"> | |
| <i class="fas fa-chart-line text-purple-500 mr-1"></i> | |
| <span class="text-gray-500">应用率: 42%</span> | |
| </div> | |
| <button class="text-xs text-blue-600 hover:text-blue-800">查看详情</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 pb-4 border-t border-gray-100 pt-4"> | |
| <div class="flex items-center text-blue-600"> | |
| <span class="mr-2">其他相关方法</span> | |
| <i class="fas fa-chevron-right text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Block 3: 推荐论文列表 --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200 flex items-center"> | |
| <div class="bg-orange-100 w-10 h-10 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-book text-orange-700 text-lg"></i> | |
| </div> | |
| <h2 class="text-xl font-bold text-gray-800">推荐科研论文</h2> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Paper 1 --> | |
| <div class="pb-6 mb-6 border-b border-gray-100 last:mb-0 last:pb-0 last:border-none"> | |
| <div class="flex items-start"> | |
| <div class="mr-4 mt-1"> | |
| <span class="bg-blue-100 text-blue-700 w-8 h-8 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-file-pdf"></i> | |
| </span> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Functionalization of carbon nanotube-based composites: A review</h3> | |
| <div class="flex flex-wrap gap-x-4 gap-y-1 mb-2 text-sm text-gray-600"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-user-circle mr-1 text-gray-500"></i> | |
| <span>Zhang H. et al.</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-book mr-1 text-gray-500"></i> | |
| <span>Advanced Materials, 2022</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-eye mr-1 text-gray-500"></i> | |
| <span>684 次阅读</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| 本文系统综述了碳纳米管表面功能化方法的最新研究进展，阐述了各类改性手段对碳纳米管/聚合物复合材料界面相互作用及力学性能的影响机理。 | |
| </p> | |
| <div class="flex justify-between flex-wrap gap-4"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-orange-100 text-orange-800 px-2 py-1 rounded text-xs">界面工程</span> | |
| <span class="bg-orange-100 text-orange-800 px-2 py-1 rounded text-xs">表面改性</span> | |
| <span class="bg-orange-100 text-orange-800 px-2 py-1 rounded text-xs">力学性能</span> | |
| </div> | |
| <div> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition">查看全文</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Paper 2 --> | |
| <div class="pb-6 mb-6 border-b border-gray-100 last:mb-0 last:pb-0 last:border-none"> | |
| <div class="flex items-start"> | |
| <div class="mr-4 mt-1"> | |
| <span class="bg-green-100 text-green-700 w-8 h-8 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-file-alt"></i> | |
| </span> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Effects of plasma treatment on interfacial bonding in CNT composites</h3> | |
| <div class="flex flex-wrap gap-x-4 gap-y-1 mb-2 text-sm text-gray-600"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-user-circle mr-1 text-gray-500"></i> | |
| <span>Lee C. et al.</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-book mr-1 text-gray-500"></i> | |
| <span>Composite Interfaces, 2021</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-eye mr-1 text-gray-500"></i> | |
| <span>452 次阅读</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| 详细研究了等离子体处理技术在碳纳米管表面改性中的应用，分析处理后碳管表面化学组成的变化及其对复合材料界面粘结性能的影响规律。 | |
| </p> | |
| <div class="flex justify-between flex-wrap gap-4"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">等离子处理</span> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">界面性能</span> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">实验研究</span> | |
| </div> | |
| <div> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition">阅读全文</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Block 4: 推荐专家 --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200 flex items-center"> | |
| <div class="bg-purple-100 w-10 h-10 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-user-friends text-purple-700 text-lg"></i> | |
| </div> | |
| <h2 class="text-xl font-bold text-gray-800">推荐领域专家</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="scrollable-cards flex gap-6 overflow-x-auto pb-4 mb-4 -mx-2 pl-2"> | |
| <!-- Expert 1 --> | |
| <div class="flex-shrink-0 w-72 border border-gray-200 rounded-xl bg-white"> | |
| <div class="p-5"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-blue-200 w-16 h-16 rounded-lg flex items-center justify-center text-blue-800 font-bold text-xl mr-4"> | |
| 王 | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800">王强 教授</h3> | |
| <div class="text-sm text-gray-600 flex items-center mt-1"> | |
| <i class="fas fa-university mr-1 text-gray-500"></i> | |
| <span>清华大学 · 材料科学与工程</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 rounded-lg p-4 mb-4"> | |
| <p class="text-sm text-gray-700"> | |
| 研究方向: 碳纳米材料界面改性、高性能复合材料设计、聚合物基底增强 | |
| </p> | |
| </div> | |
| <div class="flex flex-wrap gap-1 mb-4"> | |
| <span class="bg-blue-100 text-blue-700 px-2 py-1 rounded-full text-xs">界面改性</span> | |
| <span class="bg-blue-100 text-blue-700 px-2 py-1 rounded-full text-xs">高性能复材</span> | |
| <span class="bg-blue-100 text-blue-700 px-2 py-1 rounded-full text-xs">聚合物基</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="bg-blue-50 text-blue-700 px-4 py-2 rounded-lg text-sm hover:bg-blue-100 transition">查看成果</button> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm">展开合作</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Expert 2 --> | |
| <div class="flex-shrink-0 w-72 border border-gray-200 rounded-xl bg-white"> | |
| <div class="p-5"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-purple-200 w-16 h-16 rounded-lg flex items-center justify-center text-purple-800 font-bold text-xl mr-4"> | |
| 李 | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800">李雪 研究员</h3> | |
| <div class="text-sm text-gray-600 flex items-center mt-1"> | |
| <i class="fas fa-university mr-1 text-gray-500"></i> | |
| <span>中科院宁波材料所 · 纳米材料</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 rounded-lg p-4 mb-4"> | |
| <p class="text-sm text-gray-700"> | |
| 擅长: 碳纳米材料表面功能化、复合材料界面控制、增强机理研究 | |
| </p> | |
| </div> | |
| <div class="flex flex-wrap gap-1 mb-4"> | |
| <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded-full text-xs">功能化</span> | |
| <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded-full text-xs">界面控制</span> | |
| <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded-full text-xs">增强机理</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="bg-blue-50 text-blue-700 px-4 py-2 rounded-lg text-sm hover:bg-blue-100 transition">联系专家</button> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.92/5</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Expert 3 --> | |
| <div class="flex-shrink-0 w-72 border border-gray-200 rounded-xl bg-white"> | |
| <div class="p-5"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-green-200 w-16 h-16 rounded-lg flex items-center justify-center text-green-800 font-bold text-xl mr-4"> | |
| 张 | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800">张立波 教授</h3> | |
| <div class="text-sm text-gray-600 flex items-center mt-1"> | |
| <i class="fas fa-university mr-1 text-gray-500"></i> | |
| <span>上海交通大学 · 材料学院</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 rounded-lg p-4 mb-4"> | |
| <p class="text-sm text-gray-700"> | |
| 研究领域: 纳米复合材料先进表征、改性工艺优化、多功能复合材料开发 | |
| </p> | |
| </div> | |
| <div class="flex flex-wrap gap-1 mb-4"> | |
| <span class="bg-green-100 text-green-700 px-2 py-1 rounded-full text-xs">工艺优化</span> | |
| <span class="bg-green-100 text-green-700 px-2 py-1 rounded-full text-xs">表征技术</span> | |
| <span class="bg-green-100 text-green-700 px-2 py-1 rounded-full text-xs">多功能复材</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="bg-blue-50 text-blue-700 px-4 py-2 rounded-lg text-sm hover:bg-blue-100 transition">学术主页</button> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm">预约咨询</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-2"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm flex items-center justify-center w-full"> | |
| <span>查看更多推荐专家</span> | |
| <i class="fas fa-angle-down ml-2 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- 底部浮动助手 --> | |
| <div class="fixed bottom-8 right-8"> | |
| <button class="floating-btn bg-blue-600 text-white rounded-full p-4 flex items-center justify-center shadow-lg"> | |
| <i class="fas fa-comment-alt text-2xl"></i> | |
| <div class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center">?</div> | |
| </button> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 py-8 mt-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center text-gray-600 text-sm"> | |
| <div class="mb-4"> | |
| <span class="inline-block mx-2">关于我们</span> | |
| <span class="inline-block mx-2">服务条款</span> | |
| <span class="inline-block mx-2">隐私政策</span> | |
| <span class="inline-block mx-2">联系我们</span> | |
| </div> | |
| <p>智研汇 · 科技知识平台 © 2023 版权所有</p> | |
| <p class="mt-2">提供最前沿的科研知识服务，助力科技创新</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <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/search3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |