Design a modern and structured web results page for a Science & Technology Knowledge Platform. ### Context: The user has searched: “碳纳米管增强复合材料的主要改性手段？” The layout should show structured and intelligent results, including cards, references, expert names, and visual elements. ### Layout Elements: 1. **Header Bar** - Title: "智研汇 · 科技知识平台" - Navigation: [Home] [Explore] [Trends] [Experts] [Projects] [Ask AI] - User avatar (top right) 2. **Search Query Display (top center)** - Label: “Search results for: 碳纳米管增强复合材料的主要改性手段？” - [✏️ Modify Query] button on the right 3. **Main Answer Summary Box (Top section)** - Box title: "主要改性方法概述（由AI总结）" - Text inside: - “碳纳米管增强复合材料的主要改性手段包括：表面功能化（如羧基化、氨基化）、等离子体处理、包覆聚合物、使用分散剂、接枝共聚等方法。这些手段旨在提高碳纳米管与基体的界面结合力、改善分散性和增强复合材料的力学性能。” - Source references shown as [1] [2] [3] 4. **Knowledge Method Cards Grid (3 per row)** - Each card contains: - Method name (e.g., “羧基化表面改性”) - Brief description (1–2 lines) - Tag icons (e.g., [📄论文] [🔬实验]) - Related Materials: “环氧树脂, 聚酰亚胺” - Example Cards: - **羧基化表面改性** - 增加CNT亲水性，提高与树脂基体的界面粘附性。 - **等离子体处理** - 改善分散性与活性，提高与聚合物的兼容性。 - **接枝共聚改性** - 通过引入功能单体，提升CNT与基体的共价结合。 5. **Recommended Papers Section** - Title: “相关论文推荐” - Vertical list with 3–5 papers: - Example: - “Functionalization of carbon nanotubes for polymer nanocomposites” – *Composites Science & Technology, 2020* - “Plasma surface treatment of carbon nanotubes to improve dispersion” – *Applied Surface Science, 2022* 6. **Expert Recommendations** - Title: “相关研究专家” - Horizontal scroll cards: - 王强（清华大学）| 材料复合改性 | 近五年发文：21篇 - 李雪（北航）| 表界面科学 | 代表作被引：1200+ 7. **Related Knowledge Graph (on the right side)** - Small expandable graph showing: - Center: “碳纳米管复合材料” - Linked nodes: “改性方法” → “羧基化” / “等离子体” / “表面接枝” / “分散剂” - Mouseover shows tooltip with summary and links 8. **Footer** - Quick links: [API服务] [技术路线图] [专家合作] [反馈建议] ### Style Guide: - Clean light theme - Accent color: Blue (#1A73E8) and Slate Gray - Rounded cards, shadowed panels - Use of scientific icons (e.g., beaker, paper, graph) - Initial Deployment
3aac2fb 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> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1A73E8', | |
| slate: { | |
| 100: '#f1f5f9', | |
| 200: '#e2e8f0', | |
| 700: '#334155', | |
| 800: '#1e293b', | |
| 900: '#0f172a' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .knowledge-graph { | |
| transition: all 0.3s ease; | |
| } | |
| .graph-node { | |
| transition: transform 0.2s ease; | |
| } | |
| .graph-node:hover { | |
| transform: scale(1.05); | |
| } | |
| .tooltip { | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: opacity 0.3s, visibility 0.3s; | |
| } | |
| .graph-node:hover + .tooltip { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .expert-scroll { | |
| scrollbar-width: thin; | |
| scrollbar-color: #cbd5e1 #f1f5f9; | |
| } | |
| .expert-scroll::-webkit-scrollbar { | |
| height: 6px; | |
| } | |
| .expert-scroll::-webkit-scrollbar-track { | |
| background: #f1f5f9; | |
| border-radius: 10px; | |
| } | |
| .expert-scroll::-webkit-scrollbar-thumb { | |
| background: #cbd5e1; | |
| border-radius: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-100 text-slate-800 font-sans"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-10"> | |
| <h1 class="text-xl font-bold text-primary">智研汇 · 科技知识平台</h1> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-primary transition">首页</a> | |
| <a href="#" class="hover:text-primary transition">探索</a> | |
| <a href="#" class="hover:text-primary transition">趋势</a> | |
| <a href="#" class="hover:text-primary transition">专家</a> | |
| <a href="#" class="hover:text-primary transition">项目</a> | |
| <a href="#" class="hover:text-primary transition">AI问答</a> | |
| </nav> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="md:hidden text-slate-700"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <div class="relative"> | |
| <img src="https://ui-avatars.com/api/?name=User&background=1A73E8&color=fff" alt="User" class="w-10 h-10 rounded-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Search Query --> | |
| <div class="text-center mb-8"> | |
| <div class="inline-flex items-center bg-white rounded-full px-6 py-3 shadow-sm"> | |
| <span class="text-slate-700">搜索内容: <span class="font-semibold">碳纳米管增强复合材料的主要改性手段？</span></span> | |
| <button class="ml-4 text-primary hover:text-blue-700 transition"> | |
| <i class="fas fa-edit"></i> 修改查询 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Answer Summary --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8 border-l-4 border-primary"> | |
| <h2 class="text-xl font-bold text-slate-800 mb-4">主要改性方法概述（由AI总结）</h2> | |
| <p class="text-slate-700 mb-4 leading-relaxed"> | |
| 碳纳米管增强复合材料的主要改性手段包括：表面功能化（如羧基化、氨基化）、等离子体处理、包覆聚合物、使用分散剂、接枝共聚等方法。这些手段旨在提高碳纳米管与基体的界面结合力、改善分散性和增强复合材料的力学性能。 | |
| </p> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-slate-200 text-slate-700 px-2 py-1 rounded">来源 [1]</span> | |
| <span class="text-xs bg-slate-200 text-slate-700 px-2 py-1 rounded">来源 [2]</span> | |
| <span class="text-xs bg-slate-200 text-slate-700 px-2 py-1 rounded">来源 [3]</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Left Column --> | |
| <div class="lg:w-8/12"> | |
| <!-- Knowledge Method Cards --> | |
| <div class="mb-10"> | |
| <h2 class="text-xl font-bold text-slate-800 mb-4">改性方法</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Card 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg text-primary mb-2">羧基化表面改性</h3> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-file-alt mr-1"></i> 论文</span> | |
| <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-flask mr-1"></i> 实验</span> | |
| </div> | |
| </div> | |
| <p class="text-slate-600 mb-4">增加CNT亲水性，提高与树脂基体的界面粘附性。</p> | |
| <div class="text-sm text-slate-500"> | |
| <span class="font-medium">相关材料:</span> 环氧树脂, 聚酰亚胺 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg text-primary mb-2">等离子体处理</h3> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-file-alt mr-1"></i> 论文</span> | |
| <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-flask mr-1"></i> 实验</span> | |
| </div> | |
| </div> | |
| <p class="text-slate-600 mb-4">改善分散性与活性，提高与聚合物的兼容性。</p> | |
| <div class="text-sm text-slate-500"> | |
| <span class="font-medium">相关材料:</span> 聚乙烯, 聚丙烯 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg text-primary mb-2">接枝共聚改性</h3> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-file-alt mr-1"></i> 论文</span> | |
| <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-flask mr-1"></i> 实验</span> | |
| </div> | |
| </div> | |
| <p class="text-slate-600 mb-4">通过引入功能单体，提升CNT与基体的共价结合。</p> | |
| <div class="text-sm text-slate-500"> | |
| <span class="font-medium">相关材料:</span> 聚苯乙烯, 聚甲基丙烯酸甲酯 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 4 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg text-primary mb-2">聚合物包覆</h3> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-file-alt mr-1"></i> 论文</span> | |
| <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-flask mr-1"></i> 实验</span> | |
| </div> | |
| </div> | |
| <p class="text-slate-600 mb-4">在CNT表面形成聚合物层，增强与基体的相容性。</p> | |
| <div class="text-sm text-slate-500"> | |
| <span class="font-medium">相关材料:</span> 聚酰胺, 聚碳酸酯 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 5 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg text-primary mb-2">分散剂辅助</h3> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-file-alt mr-1"></i> 论文</span> | |
| <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-flask mr-1"></i> 实验</span> | |
| </div> | |
| </div> | |
| <p class="text-slate-600 mb-4">使用表面活性剂防止CNT团聚，改善分散均匀性。</p> | |
| <div class="text-sm text-slate-500"> | |
| <span class="font-medium">相关材料:</span> 水性体系, 有机溶剂体系 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 6 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg text-primary mb-2">氨基化改性</h3> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-file-alt mr-1"></i> 论文</span> | |
| <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-flask mr-1"></i> 实验</span> | |
| </div> | |
| </div> | |
| <p class="text-slate-600 mb-4">引入氨基基团增强与环氧树脂等基体的反应性。</p> | |
| <div class="text-sm text-slate-500"> | |
| <span class="font-medium">相关材料:</span> 环氧树脂, 聚氨酯 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recommended Papers --> | |
| <div class="mb-10"> | |
| <h2 class="text-xl font-bold text-slate-800 mb-4">相关论文推荐</h2> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-5"> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="text-primary mr-3 mt-1"> | |
| <i class="fas fa-file-pdf"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">Functionalization of carbon nanotubes for polymer nanocomposites</h3> | |
| <p class="text-slate-600 text-sm">Composites Science & Technology, 2020 | 被引次数: 342</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-primary mr-3 mt-1"> | |
| <i class="fas fa-file-pdf"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">Plasma surface treatment of carbon nanotubes to improve dispersion</h3> | |
| <p class="text-slate-600 text-sm">Applied Surface Science, 2022 | 被引次数: 128</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-primary mr-3 mt-1"> | |
| <i class="fas fa-file-pdf"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">Grafting polymerization on carbon nanotubes for composite reinforcement</h3> | |
| <p class="text-slate-600 text-sm">Polymer Chemistry, 2021 | 被引次数: 215</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-primary mr-3 mt-1"> | |
| <i class="fas fa-file-pdf"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">Dispersion strategies for carbon nanotube-polymer composites</h3> | |
| <p class="text-slate-600 text-sm">Journal of Materials Science, 2019 | 被引次数: 287</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Expert Recommendations --> | |
| <div class="mb-10"> | |
| <h2 class="text-xl font-bold text-slate-800 mb-4">相关研究专家</h2> | |
| <div class="expert-scroll overflow-x-auto pb-4"> | |
| <div class="flex space-x-4" style="min-width: max-content;"> | |
| <!-- Expert 1 --> | |
| <div class="bg-white rounded-xl shadow-md p-5 min-w-[280px]"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://ui-avatars.com/api/?name=王强&background=1A73E8&color=fff" alt="王强" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h3 class="font-bold">王强</h3> | |
| <p class="text-sm text-slate-600">清华大学 | 材料复合改性</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <div> | |
| <span class="text-slate-500">近五年发文:</span> | |
| <span class="font-semibold">21篇</span> | |
| </div> | |
| <div> | |
| <span class="text-slate-500">H指数:</span> | |
| <span class="font-semibold">18</span> | |
| </div> | |
| </div> | |
| <button class="mt-3 w-full bg-slate-100 hover:bg-slate-200 text-slate-700 py-2 rounded-lg text-sm transition"> | |
| 查看专家主页 | |
| </button> | |
| </div> | |
| <!-- Expert 2 --> | |
| <div class="bg-white rounded-xl shadow-md p-5 min-w-[280px]"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://ui-avatars.com/api/?name=李雪&background=1A73E8&color=fff" alt="李雪" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h3 class="font-bold">李雪</h3> | |
| <p class="text-sm text-slate-600">北航 | 表界面科学</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <div> | |
| <span class="text-slate-500">代表作被引:</span> | |
| <span class="font-semibold">1200+</span> | |
| </div> | |
| <div> | |
| <span class="text-slate-500">H指数:</span> | |
| <span class="font-semibold">32</span> | |
| </div> | |
| </div> | |
| <button class="mt-3 w-full bg-slate-100 hover:bg-slate-200 text-slate-700 py-2 rounded-lg text-sm transition"> | |
| 查看专家主页 | |
| </button> | |
| </div> | |
| <!-- Expert 3 --> | |
| <div class="bg-white rounded-xl shadow-md p-5 min-w-[280px]"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://ui-avatars.com/api/?name=张伟&background=1A73E8&color=fff" alt="张伟" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <h3 class="font-bold">张伟</h3> | |
| <p class="text-sm text-slate-600">中科院 | 纳米复合材料</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <div> | |
| <span class="text-slate-500">近五年发文:</span> | |
| <span class="font-semibold">28篇</span> | |
| </div> | |
| <div> | |
| <span class="text-slate-500">H指数:</span> | |
| <span class="font-semibold">24</span> | |
| </div> | |
| </div> | |
| <button class="mt-3 w-full bg-slate-100 hover:bg-slate-200 text-slate-700 py-2 rounded-lg text-sm transition"> | |
| 查看专家主页 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Knowledge Graph --> | |
| <div class="lg:w-4/12"> | |
| <div class="bg-white rounded-xl shadow-md p-5 sticky top-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-slate-800">知识图谱</h2> | |
| <button id="toggleGraph" class="text-primary text-sm"> | |
| <i class="fas fa-expand-alt mr-1"></i> 展开 | |
| </button> | |
| </div> | |
| <div class="knowledge-graph"> | |
| <div class="relative" style="height: 400px;"> | |
| <!-- Center Node --> | |
| <div class="graph-node absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-24 h-24 bg-primary rounded-full flex items-center justify-center text-white font-bold text-center p-2 cursor-pointer shadow-lg"> | |
| 碳纳米管复合材料 | |
| </div> | |
| <!-- Connected Nodes --> | |
| <div class="graph-node absolute top-1/4 left-1/4 w-20 h-20 bg-slate-200 rounded-full flex items-center justify-center text-slate-800 font-semibold text-center p-2 cursor-pointer shadow-md hover:bg-slate-300"> | |
| 改性方法 | |
| </div> | |
| <div class="graph-node absolute top-1/3 right-1/4 w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-blue-800 font-semibold text-sm text-center p-2 cursor-pointer shadow-sm hover:bg-blue-200"> | |
| 羧基化 | |
| </div> | |
| <div class="graph-node absolute top-2/3 left-1/3 w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-blue-800 font-semibold text-sm text-center p-2 cursor-pointer shadow-sm hover:bg-blue-200"> | |
| 等离子体 | |
| </div> | |
| <div class="graph-node absolute top-3/4 right-1/3 w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-blue-800 font-semibold text-sm text-center p-2 cursor-pointer shadow-sm hover:bg-blue-200"> | |
| 表面接枝 | |
| </div> | |
| <div class="graph-node absolute bottom-1/4 right-1/4 w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-blue-800 font-semibold text-sm text-center p-2 cursor-pointer shadow-sm hover:bg-blue-200"> | |
| 分散剂 | |
| </div> | |
| <!-- Lines connecting nodes --> | |
| <svg class="absolute top-0 left-0 w-full h-full pointer-events-none"> | |
| <line x1="50%" y1="50%" x2="25%" y2="25%" stroke="#cbd5e1" stroke-width="2" /> | |
| <line x1="50%" y1="50%" x2="75%" y2="33%" stroke="#cbd5e1" stroke-width="2" /> | |
| <line x1="50%" y1="50%" x2="33%" y2="66%" stroke="#cbd5e1" stroke-width="2" /> | |
| <line x1="50%" y1="50%" x2="66%" y2="75%" stroke="#cbd5e1" stroke-width="2" /> | |
| <line x1="50%" y1="50%" x2="75%" y2="25%" stroke="#cbd5e1" stroke-width="2" /> | |
| </svg> | |
| <!-- Tooltip (example) --> | |
| <div class="tooltip absolute bg-white p-4 rounded-lg shadow-lg w-64 z-10" style="top: 20%; left: 10%;"> | |
| <h4 class="font-bold text-primary mb-2">羧基化改性</h4> | |
| <p class="text-sm text-slate-600 mb-2">通过强氧化处理在碳纳米管表面引入羧基基团，增强亲水性和反应活性。</p> | |
| <div class="text-xs"> | |
| <a href="#" class="text-primary hover:underline">相关论文 [3]</a> | | |
| <a href="#" class="text-primary hover:underline">实验方法</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <button class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-lg text-sm transition"> | |
| <i class="fas fa-download mr-2"></i> 导出图谱 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-slate-800 text-slate-200 py-10"> | |
| <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 text-white mb-4">智研汇 · 科技知识平台</h3> | |
| <p class="max-w-md text-slate-400">连接科研智慧，加速科技创新。提供全面的科技知识服务与专家协作平台。</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">服务</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-slate-400 hover:text-white transition">API服务</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white transition">技术路线图</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white transition">专家合作</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white transition">反馈建议</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">资源</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-slate-400 hover:text-white transition">研究数据库</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white transition">技术白皮书</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white transition">案例研究</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">支持</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-slate-400 hover:text-white transition">帮助中心</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white transition">社区论坛</a></li> | |
| <li><a href="#" class="text-slate-400 hover:text-white transition">联系我们</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">关注我们</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-slate-400 hover:text-white transition"> | |
| <i class="fab fa-weixin text-xl"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-white transition"> | |
| <i class="fab fa-weibo text-xl"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-slate-700 mt-8 pt-6 text-center text-slate-500 text-sm"> | |
| <p>© 2023 智研汇科技知识平台. 保留所有权利。</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Toggle knowledge graph expand | |
| document.getElementById('toggleGraph').addEventListener('click', function() { | |
| const graph = document.querySelector('.knowledge-graph'); | |
| const icon = this.querySelector('i'); | |
| if (graph.style.height === 'auto') { | |
| graph.style.height = '400px'; | |
| icon.classList.remove('fa-compress-alt'); | |
| icon.classList.add('fa-expand-alt'); | |
| this.innerHTML = '<i class="fas fa-expand-alt mr-1"></i> 展开'; | |
| } else { | |
| graph.style.height = 'auto'; | |
| icon.classList.remove('fa-expand-alt'); | |
| icon.classList.add('fa-compress-alt'); | |
| this.innerHTML = '<i class="fas fa-compress-alt mr-1"></i> 收起'; | |
| } | |
| }); | |
| </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/search2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |