Hugging Face's logo

Spaces:
maomaobj
/
search2
Running

App Files Community
maomaobj commited on
Commit
3aac2fb
·
verified ·
1 Parent(s): 123d66f

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

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +506 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Search2
3
- emoji: 🏆
4
- colorFrom: gray
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: search2
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,506 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>智研汇 · 科技知识平台</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#1A73E8',
15
+ slate: {
16
+ 100: '#f1f5f9',
17
+ 200: '#e2e8f0',
18
+ 700: '#334155',
19
+ 800: '#1e293b',
20
+ 900: '#0f172a'
21
+ }
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ .knowledge-graph {
29
+ transition: all 0.3s ease;
30
+ }
31
+ .graph-node {
32
+ transition: transform 0.2s ease;
33
+ }
34
+ .graph-node:hover {
35
+ transform: scale(1.05);
36
+ }
37
+ .tooltip {
38
+ visibility: hidden;
39
+ opacity: 0;
40
+ transition: opacity 0.3s, visibility 0.3s;
41
+ }
42
+ .graph-node:hover + .tooltip {
43
+ visibility: visible;
44
+ opacity: 1;
45
+ }
46
+ .expert-scroll {
47
+ scrollbar-width: thin;
48
+ scrollbar-color: #cbd5e1 #f1f5f9;
49
+ }
50
+ .expert-scroll::-webkit-scrollbar {
51
+ height: 6px;
52
+ }
53
+ .expert-scroll::-webkit-scrollbar-track {
54
+ background: #f1f5f9;
55
+ border-radius: 10px;
56
+ }
57
+ .expert-scroll::-webkit-scrollbar-thumb {
58
+ background: #cbd5e1;
59
+ border-radius: 10px;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="bg-slate-100 text-slate-800 font-sans">
64
+ <!-- Header -->
65
+ <header class="bg-white shadow-sm">
66
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
67
+ <div class="flex items-center space-x-10">
68
+ <h1 class="text-xl font-bold text-primary">智研汇 · 科技知识平台</h1>
69
+ <nav class="hidden md:flex space-x-6">
70
+ <a href="#" class="hover:text-primary transition">首页</a>
71
+ <a href="#" class="hover:text-primary transition">探索</a>
72
+ <a href="#" class="hover:text-primary transition">趋势</a>
73
+ <a href="#" class="hover:text-primary transition">专家</a>
74
+ <a href="#" class="hover:text-primary transition">项目</a>
75
+ <a href="#" class="hover:text-primary transition">AI问答</a>
76
+ </nav>
77
+ </div>
78
+ <div class="flex items-center space-x-4">
79
+ <button class="md:hidden text-slate-700">
80
+ <i class="fas fa-bars text-xl"></i>
81
+ </button>
82
+ <div class="relative">
83
+ <img src="https://ui-avatars.com/api/?name=User&background=1A73E8&color=fff" alt="User" class="w-10 h-10 rounded-full">
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </header>
88
+
89
+ <!-- Main Content -->
90
+ <main class="container mx-auto px-4 py-6">
91
+ <!-- Search Query -->
92
+ <div class="text-center mb-8">
93
+ <div class="inline-flex items-center bg-white rounded-full px-6 py-3 shadow-sm">
94
+ <span class="text-slate-700">搜索内容: <span class="font-semibold">碳纳米管增强复合材料的主要改性手段？</span></span>
95
+ <button class="ml-4 text-primary hover:text-blue-700 transition">
96
+ <i class="fas fa-edit"></i> 修改查询
97
+ </button>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Main Answer Summary -->
102
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8 border-l-4 border-primary">
103
+ <h2 class="text-xl font-bold text-slate-800 mb-4">主要改性方法概述（由AI总结）</h2>
104
+ <p class="text-slate-700 mb-4 leading-relaxed">
105
+ 碳纳米管增强复合材料的主要改性手段包括：表面功能化（如羧基化、氨基化）、等离子体处理、包覆聚合物、使用分散剂、接枝共聚等方法。这些手段旨在提高碳纳米管与基体的界面结合力、改善分散性和增强复合材料的力学性能。
106
+ </p>
107
+ <div class="flex space-x-2">
108
+ <span class="text-xs bg-slate-200 text-slate-700 px-2 py-1 rounded">来源 [1]</span>
109
+ <span class="text-xs bg-slate-200 text-slate-700 px-2 py-1 rounded">来源 [2]</span>
110
+ <span class="text-xs bg-slate-200 text-slate-700 px-2 py-1 rounded">来源 [3]</span>
111
+ </div>
112
+ </div>
113
+
114
+ <div class="flex flex-col lg:flex-row gap-8">
115
+ <!-- Left Column -->
116
+ <div class="lg:w-8/12">
117
+ <!-- Knowledge Method Cards -->
118
+ <div class="mb-10">
119
+ <h2 class="text-xl font-bold text-slate-800 mb-4">改性方法</h2>
120
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
121
+ <!-- Card 1 -->
122
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
123
+ <div class="p-5">
124
+ <div class="flex justify-between items-start">
125
+ <h3 class="font-bold text-lg text-primary mb-2">羧基化表面改性</h3>
126
+ <div class="flex space-x-2">
127
+ <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>
128
+ <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-flask mr-1"></i> 实验</span>
129
+ </div>
130
+ </div>
131
+ <p class="text-slate-600 mb-4">增加CNT亲水性，提高与树脂基体的界面粘附性。</p>
132
+ <div class="text-sm text-slate-500">
133
+ <span class="font-medium">相关材料:</span> 环氧树脂, 聚酰亚胺
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Card 2 -->
139
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
140
+ <div class="p-5">
141
+ <div class="flex justify-between items-start">
142
+ <h3 class="font-bold text-lg text-primary mb-2">等离子体处理</h3>
143
+ <div class="flex space-x-2">
144
+ <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>
145
+ <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-flask mr-1"></i> 实验</span>
146
+ </div>
147
+ </div>
148
+ <p class="text-slate-600 mb-4">改善分散性与活性，提高与聚合物的兼容性。</p>
149
+ <div class="text-sm text-slate-500">
150
+ <span class="font-medium">相关材料:</span> 聚乙烯, 聚丙烯
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Card 3 -->
156
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
157
+ <div class="p-5">
158
+ <div class="flex justify-between items-start">
159
+ <h3 class="font-bold text-lg text-primary mb-2">接枝共聚改性</h3>
160
+ <div class="flex space-x-2">
161
+ <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>
162
+ <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-flask mr-1"></i> 实验</span>
163
+ </div>
164
+ </div>
165
+ <p class="text-slate-600 mb-4">通过引入功能单体，提升CNT与基体的共价结合。</p>
166
+ <div class="text-sm text-slate-500">
167
+ <span class="font-medium">相关材料:</span> 聚苯乙烯, 聚甲基丙烯酸甲酯
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Card 4 -->
173
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
174
+ <div class="p-5">
175
+ <div class="flex justify-between items-start">
176
+ <h3 class="font-bold text-lg text-primary mb-2">聚合物包覆</h3>
177
+ <div class="flex space-x-2">
178
+ <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>
179
+ <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-flask mr-1"></i> 实验</span>
180
+ </div>
181
+ </div>
182
+ <p class="text-slate-600 mb-4">在CNT表面形成聚合物层，增强与基体的相容性。</p>
183
+ <div class="text-sm text-slate-500">
184
+ <span class="font-medium">相关材料:</span> 聚酰胺, 聚碳酸酯
185
+ </div>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- Card 5 -->
190
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
191
+ <div class="p-5">
192
+ <div class="flex justify-between items-start">
193
+ <h3 class="font-bold text-lg text-primary mb-2">分散剂辅助</h3>
194
+ <div class="flex space-x-2">
195
+ <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>
196
+ <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-flask mr-1"></i> 实验</span>
197
+ </div>
198
+ </div>
199
+ <p class="text-slate-600 mb-4">使用表面活性剂防止CNT团聚，改善分散均匀性。</p>
200
+ <div class="text-sm text-slate-500">
201
+ <span class="font-medium">相关材料:</span> 水性体系, 有机溶剂体系
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Card 6 -->
207
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
208
+ <div class="p-5">
209
+ <div class="flex justify-between items-start">
210
+ <h3 class="font-bold text-lg text-primary mb-2">氨基化改性</h3>
211
+ <div class="flex space-x-2">
212
+ <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>
213
+ <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded"><i class="fas fa-flask mr-1"></i> 实验</span>
214
+ </div>
215
+ </div>
216
+ <p class="text-slate-600 mb-4">引入氨基基团增强与环氧树脂等基体的反应性。</p>
217
+ <div class="text-sm text-slate-500">
218
+ <span class="font-medium">相关材料:</span> 环氧树脂, 聚氨酯
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Recommended Papers -->
226
+ <div class="mb-10">
227
+ <h2 class="text-xl font-bold text-slate-800 mb-4">相关论文推荐</h2>
228
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
229
+ <div class="p-5">
230
+ <div class="space-y-4">
231
+ <div class="flex items-start">
232
+ <div class="text-primary mr-3 mt-1">
233
+ <i class="fas fa-file-pdf"></i>
234
+ </div>
235
+ <div>
236
+ <h3 class="font-semibold">Functionalization of carbon nanotubes for polymer nanocomposites</h3>
237
+ <p class="text-slate-600 text-sm">Composites Science & Technology, 2020 | 被引次数: 342</p>
238
+ </div>
239
+ </div>
240
+
241
+ <div class="flex items-start">
242
+ <div class="text-primary mr-3 mt-1">
243
+ <i class="fas fa-file-pdf"></i>
244
+ </div>
245
+ <div>
246
+ <h3 class="font-semibold">Plasma surface treatment of carbon nanotubes to improve dispersion</h3>
247
+ <p class="text-slate-600 text-sm">Applied Surface Science, 2022 | 被引次数: 128</p>
248
+ </div>
249
+ </div>
250
+
251
+ <div class="flex items-start">
252
+ <div class="text-primary mr-3 mt-1">
253
+ <i class="fas fa-file-pdf"></i>
254
+ </div>
255
+ <div>
256
+ <h3 class="font-semibold">Grafting polymerization on carbon nanotubes for composite reinforcement</h3>
257
+ <p class="text-slate-600 text-sm">Polymer Chemistry, 2021 | 被引次数: 215</p>
258
+ </div>
259
+ </div>
260
+
261
+ <div class="flex items-start">
262
+ <div class="text-primary mr-3 mt-1">
263
+ <i class="fas fa-file-pdf"></i>
264
+ </div>
265
+ <div>
266
+ <h3 class="font-semibold">Dispersion strategies for carbon nanotube-polymer composites</h3>
267
+ <p class="text-slate-600 text-sm">Journal of Materials Science, 2019 | 被引次数: 287</p>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Expert Recommendations -->
276
+ <div class="mb-10">
277
+ <h2 class="text-xl font-bold text-slate-800 mb-4">相关研究专家</h2>
278
+ <div class="expert-scroll overflow-x-auto pb-4">
279
+ <div class="flex space-x-4" style="min-width: max-content;">
280
+ <!-- Expert 1 -->
281
+ <div class="bg-white rounded-xl shadow-md p-5 min-w-[280px]">
282
+ <div class="flex items-center mb-3">
283
+ <img src="https://ui-avatars.com/api/?name=王强&background=1A73E8&color=fff" alt="王强" class="w-12 h-12 rounded-full mr-3">
284
+ <div>
285
+ <h3 class="font-bold">王强</h3>
286
+ <p class="text-sm text-slate-600">清华大学 | 材料复合改性</p>
287
+ </div>
288
+ </div>
289
+ <div class="flex justify-between text-sm">
290
+ <div>
291
+ <span class="text-slate-500">近五年发文:</span>
292
+ <span class="font-semibold">21篇</span>
293
+ </div>
294
+ <div>
295
+ <span class="text-slate-500">H指数:</span>
296
+ <span class="font-semibold">18</span>
297
+ </div>
298
+ </div>
299
+ <button class="mt-3 w-full bg-slate-100 hover:bg-slate-200 text-slate-700 py-2 rounded-lg text-sm transition">
300
+ 查看专家主页
301
+ </button>
302
+ </div>
303
+
304
+ <!-- Expert 2 -->
305
+ <div class="bg-white rounded-xl shadow-md p-5 min-w-[280px]">
306
+ <div class="flex items-center mb-3">
307
+ <img src="https://ui-avatars.com/api/?name=李雪&background=1A73E8&color=fff" alt="李雪" class="w-12 h-12 rounded-full mr-3">
308
+ <div>
309
+ <h3 class="font-bold">李雪</h3>
310
+ <p class="text-sm text-slate-600">北航 | 表界面科学</p>
311
+ </div>
312
+ </div>
313
+ <div class="flex justify-between text-sm">
314
+ <div>
315
+ <span class="text-slate-500">代表作被引:</span>
316
+ <span class="font-semibold">1200+</span>
317
+ </div>
318
+ <div>
319
+ <span class="text-slate-500">H指数:</span>
320
+ <span class="font-semibold">32</span>
321
+ </div>
322
+ </div>
323
+ <button class="mt-3 w-full bg-slate-100 hover:bg-slate-200 text-slate-700 py-2 rounded-lg text-sm transition">
324
+ 查看专家主页
325
+ </button>
326
+ </div>
327
+
328
+ <!-- Expert 3 -->
329
+ <div class="bg-white rounded-xl shadow-md p-5 min-w-[280px]">
330
+ <div class="flex items-center mb-3">
331
+ <img src="https://ui-avatars.com/api/?name=张伟&background=1A73E8&color=fff" alt="张伟" class="w-12 h-12 rounded-full mr-3">
332
+ <div>
333
+ <h3 class="font-bold">张伟</h3>
334
+ <p class="text-sm text-slate-600">中科院 | 纳米复合材料</p>
335
+ </div>
336
+ </div>
337
+ <div class="flex justify-between text-sm">
338
+ <div>
339
+ <span class="text-slate-500">近五年发文:</span>
340
+ <span class="font-semibold">28篇</span>
341
+ </div>
342
+ <div>
343
+ <span class="text-slate-500">H指数:</span>
344
+ <span class="font-semibold">24</span>
345
+ </div>
346
+ </div>
347
+ <button class="mt-3 w-full bg-slate-100 hover:bg-slate-200 text-slate-700 py-2 rounded-lg text-sm transition">
348
+ 查看专家主页
349
+ </button>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <!-- Right Column - Knowledge Graph -->
357
+ <div class="lg:w-4/12">
358
+ <div class="bg-white rounded-xl shadow-md p-5 sticky top-6">
359
+ <div class="flex justify-between items-center mb-4">
360
+ <h2 class="text-xl font-bold text-slate-800">知识图谱</h2>
361
+ <button id="toggleGraph" class="text-primary text-sm">
362
+ <i class="fas fa-expand-alt mr-1"></i> 展开
363
+ </button>
364
+ </div>
365
+
366
+ <div class="knowledge-graph">
367
+ <div class="relative" style="height: 400px;">
368
+ <!-- Center Node -->
369
+ <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">
370
+ 碳纳米管复合材料
371
+ </div>
372
+
373
+ <!-- Connected Nodes -->
374
+ <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">
375
+ 改性方法
376
+ </div>
377
+
378
+ <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">
379
+ 羧基化
380
+ </div>
381
+
382
+ <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">
383
+ 等离子体
384
+ </div>
385
+
386
+ <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">
387
+ 表面接枝
388
+ </div>
389
+
390
+ <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">
391
+ 分散剂
392
+ </div>
393
+
394
+ <!-- Lines connecting nodes -->
395
+ <svg class="absolute top-0 left-0 w-full h-full pointer-events-none">
396
+ <line x1="50%" y1="50%" x2="25%" y2="25%" stroke="#cbd5e1" stroke-width="2" />
397
+ <line x1="50%" y1="50%" x2="75%" y2="33%" stroke="#cbd5e1" stroke-width="2" />
398
+ <line x1="50%" y1="50%" x2="33%" y2="66%" stroke="#cbd5e1" stroke-width="2" />
399
+ <line x1="50%" y1="50%" x2="66%" y2="75%" stroke="#cbd5e1" stroke-width="2" />
400
+ <line x1="50%" y1="50%" x2="75%" y2="25%" stroke="#cbd5e1" stroke-width="2" />
401
+ </svg>
402
+
403
+ <!-- Tooltip (example) -->
404
+ <div class="tooltip absolute bg-white p-4 rounded-lg shadow-lg w-64 z-10" style="top: 20%; left: 10%;">
405
+ <h4 class="font-bold text-primary mb-2">羧基化改性</h4>
406
+ <p class="text-sm text-slate-600 mb-2">通过强氧化处理在碳纳米管表面引入羧基基团，增强亲水性和反应活性。</p>
407
+ <div class="text-xs">
408
+ <a href="#" class="text-primary hover:underline">相关论文 [3]</a> |
409
+ <a href="#" class="text-primary hover:underline">实验方法</a>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="mt-6 text-center">
415
+ <button class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-lg text-sm transition">
416
+ <i class="fas fa-download mr-2"></i> 导出图谱
417
+ </button>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </main>
424
+
425
+ <!-- Footer -->
426
+ <footer class="bg-slate-800 text-slate-200 py-10">
427
+ <div class="container mx-auto px-4">
428
+ <div class="flex flex-col md:flex-row justify-between">
429
+ <div class="mb-6 md:mb-0">
430
+ <h3 class="text-xl font-bold text-white mb-4">智研汇 · 科技知识平台</h3>
431
+ <p class="max-w-md text-slate-400">连接科研智慧，加速科技创新。提供全面的科技知识服务与专家协作平台。</p>
432
+ </div>
433
+
434
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
435
+ <div>
436
+ <h4 class="text-white font-semibold mb-4">服务</h4>
437
+ <ul class="space-y-2">
438
+ <li><a href="#" class="text-slate-400 hover:text-white transition">API服务</a></li>
439
+ <li><a href="#" class="text-slate-400 hover:text-white transition">技术路线图</a></li>
440
+ <li><a href="#" class="text-slate-400 hover:text-white transition">专家合作</a></li>
441
+ <li><a href="#" class="text-slate-400 hover:text-white transition">反馈建议</a></li>
442
+ </ul>
443
+ </div>
444
+
445
+ <div>
446
+ <h4 class="text-white font-semibold mb-4">资源</h4>
447
+ <ul class="space-y-2">
448
+ <li><a href="#" class="text-slate-400 hover:text-white transition">研究数据库</a></li>
449
+ <li><a href="#" class="text-slate-400 hover:text-white transition">技术白皮书</a></li>
450
+ <li><a href="#" class="text-slate-400 hover:text-white transition">案例研究</a></li>
451
+ </ul>
452
+ </div>
453
+
454
+ <div>
455
+ <h4 class="text-white font-semibold mb-4">支持</h4>
456
+ <ul class="space-y-2">
457
+ <li><a href="#" class="text-slate-400 hover:text-white transition">帮助中心</a></li>
458
+ <li><a href="#" class="text-slate-400 hover:text-white transition">社区论坛</a></li>
459
+ <li><a href="#" class="text-slate-400 hover:text-white transition">联系我们</a></li>
460
+ </ul>
461
+ </div>
462
+
463
+ <div>
464
+ <h4 class="text-white font-semibold mb-4">关注我们</h4>
465
+ <div class="flex space-x-4">
466
+ <a href="#" class="text-slate-400 hover:text-white transition">
467
+ <i class="fab fa-weixin text-xl"></i>
468
+ </a>
469
+ <a href="#" class="text-slate-400 hover:text-white transition">
470
+ <i class="fab fa-weibo text-xl"></i>
471
+ </a>
472
+ <a href="#" class="text-slate-400 hover:text-white transition">
473
+ <i class="fab fa-linkedin text-xl"></i>
474
+ </a>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+
480
+ <div class="border-t border-slate-700 mt-8 pt-6 text-center text-slate-500 text-sm">
481
+ <p>© 2023 智研汇科技知识平台. 保留所有权利。</p>
482
+ </div>
483
+ </div>
484
+ </footer>
485
+
486
+ <script>
487
+ // Toggle knowledge graph expand
488
+ document.getElementById('toggleGraph').addEventListener('click', function() {
489
+ const graph = document.querySelector('.knowledge-graph');
490
+ const icon = this.querySelector('i');
491
+
492
+ if (graph.style.height === 'auto') {
493
+ graph.style.height = '400px';
494
+ icon.classList.remove('fa-compress-alt');
495
+ icon.classList.add('fa-expand-alt');
496
+ this.innerHTML = '<i class="fas fa-expand-alt mr-1"></i> 展开';
497
+ } else {
498
+ graph.style.height = 'auto';
499
+ icon.classList.remove('fa-expand-alt');
500
+ icon.classList.add('fa-compress-alt');
501
+ this.innerHTML = '<i class="fas fa-compress-alt mr-1"></i> 收起';
502
+ }
503
+ });
504
+ </script>
505
+ <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>
506
+ </html>