Hugging Face's logo

Spaces:
maomaobj
/
atom1
Running

App Files Community
maomaobj commited on
Commit
ff26b24
·
verified ·
1 Parent(s): e8d42b8

设计一个面向科研人员的“科研知识门户”Web 页面，主题为“原子能科学研究”，页面风格现代、专业，配色以蓝白为主，简洁清晰。页面支持响应式设计（PC + 移动端），整体布局清晰。请基于以下结构与内容进行页面生成，并使用原子能研究的真实示例填充数据。 页面结构设计： 顶部导航栏（Top Navbar） LOGO：“中国原子能科学研究院” 导航项：科研首页、知识检索、成果分析、科研数据、大模型服务、我的空间 登录区域：用户头像 + 欢迎语 轮播区域（焦点图+理念介绍 Banner Carousel） ✅ 新增模块 位于页面顶部横幅位置 三张自动轮播大图，每张图展示一条平台理念或焦点资讯 示例内容： 图1：「聚焦核能未来」——赋能原子能科技创新的数据智能平台 图2：「135TB科研数据集中管理」——统一、可信、安全的数据底座 图3：「国产大模型+科研场景融合」——打造智能科研助手新范式 每张图包含：背景图（高科技蓝调风格）、简短宣传语、引导按钮（了解更多） 知识推荐区域（智能推荐） 内容卡片展示相关文献与成果 示例文献：“钍基熔盐堆关键技术综述”、“钚-239裂变横截面实验分析”等 展示：标题、作者、单位、关键词、摘要、引用按钮 科研数据浏览区（分类数据） 展示类型：原子能论文、专利、项目数据、实验数据、评论分析等 示例： “一种低压氚提取装置的设计专利” “乏燃料中锶-90的分布实验数据” “高通量反应堆数据管理策略” 大模型智能问答区（AI问答） 提问输入框 + 对话窗口展示 示例提问：“中子俘获反应在快堆中的作用是什么？” 答案由大模型生成，并引用相关论文内容（显示出处） 科研动态（资讯/态势跟踪） 最新科研资讯轮播区域 示例新闻： “我国首座快堆实验堆进入调试阶段” “原子能院发布2025年度研究计划” 底部信息区（Footer） 单位信息、联系方式、系统备案号、数据声明等 风格说明： 页面风格参考国家科技平台、学术门户，强调专业性与技术感 使用浅蓝+白为主色调，图标、按钮简洁圆润 保持排版留白，支持图谱组件与智能问答模块嵌入 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +751 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Atom1
3
- emoji: ⚡
4
- colorFrom: green
5
- colorTo: pink
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: atom1
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
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,751 @@
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: '#0c4a6e',
15
+ secondary: '#0284c7',
16
+ accent: '#0891b2',
17
+ light: '#e0f2fe',
18
+ dark: '#082f49'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
26
+ body {
27
+ font-family: 'Noto Sans SC', sans-serif;
28
+ background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
29
+ }
30
+ .carousel {
31
+ transition: transform 0.5s ease-in-out;
32
+ }
33
+ .slide {
34
+ transition: opacity 0.5s ease-in-out;
35
+ }
36
+ .knowledge-card:hover {
37
+ transform: translateY(-5px);
38
+ box-shadow: 0 10px 25px rgba(2, 132, 199, 0.15);
39
+ }
40
+ .chat-entry {
41
+ animation: fadeIn 0.3s ease-in;
42
+ }
43
+ @keyframes fadeIn {
44
+ from { opacity: 0; transform: translateY(10px); }
45
+ to { opacity: 1; transform: translateY(0); }
46
+ }
47
+ .news-scroll {
48
+ animation: scroll 20s linear infinite;
49
+ }
50
+ @keyframes scroll {
51
+ 0% { transform: translateY(0); }
52
+ 100% { transform: translateY(-50%); }
53
+ }
54
+ .pulse {
55
+ animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
56
+ }
57
+ @keyframes pulse {
58
+ 50% { opacity: 0.5; }
59
+ }
60
+ .logo-gradient {
61
+ background: linear-gradient(45deg, #082f49, #0891b2);
62
+ -webkit-background-clip: text;
63
+ -webkit-text-fill-color: transparent;
64
+ }
65
+ .atom-icon {
66
+ position: relative;
67
+ width: 32px;
68
+ height: 32px;
69
+ }
70
+ .atom-core {
71
+ position: absolute;
72
+ width: 12px;
73
+ height: 12px;
74
+ background: #0284c7;
75
+ border-radius: 50%;
76
+ top: 10px;
77
+ left: 10px;
78
+ }
79
+ .electron {
80
+ position: absolute;
81
+ width: 6px;
82
+ height: 6px;
83
+ background: #0ea5e9;
84
+ border-radius: 50%;
85
+ animation: orbit 5s linear infinite;
86
+ }
87
+ .electron-1 {
88
+ top: 3px;
89
+ left: 3px;
90
+ animation-delay: 0s;
91
+ }
92
+ .electron-2 {
93
+ top: 3px;
94
+ left: 23px;
95
+ animation-delay: -1.25s;
96
+ }
97
+ .electron-3 {
98
+ top: 23px;
99
+ left: 3px;
100
+ animation-delay: -2.5s;
101
+ }
102
+ .electron-4 {
103
+ top: 23px;
104
+ left: 23px;
105
+ animation-delay: -3.75s;
106
+ }
107
+ @keyframes orbit {
108
+ 0% {
109
+ transform: rotate(0deg) translateX(10px) rotate(0deg);
110
+ }
111
+ 100% {
112
+ transform: rotate(360deg) translateX(10px) rotate(-360deg);
113
+ }
114
+ }
115
+ </style>
116
+ </head>
117
+ <body class="min-h-screen flex flex-col">
118
+ <!-- 顶部导航栏 -->
119
+ <header class="sticky top-0 z-50 bg-white shadow-md">
120
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
121
+ <div class="flex items-center space-x-3">
122
+ <div class="atom-icon">
123
+ <div class="atom-core"></div>
124
+ <div class="electron electron-1"></div>
125
+ <div class="electron electron-2"></div>
126
+ <div class="electron electron-3"></div>
127
+ <div class="electron electron-4"></div>
128
+ </div>
129
+ <h1 class="text-xl font-bold logo-gradient">中国原子能科学研究院</h1>
130
+ </div>
131
+
132
+ <!-- 桌面端导航 -->
133
+ <nav class="hidden md:flex space-x-8">
134
+ <a href="#" class="text-primary font-medium hover:text-secondary transition">科研���页</a>
135
+ <a href="#" class="text-gray-600 hover:text-primary transition">知识检索</a>
136
+ <a href="#" class="text-gray-600 hover:text-primary transition">成果分析</a>
137
+ <a href="#" class="text-gray-600 hover:text-primary transition">科研数据</a>
138
+ <a href="#" class="text-gray-600 hover:text-primary transition">大模型服务</a>
139
+ <a href="#" class="text-gray-600 hover:text-primary transition">我的空间</a>
140
+ </nav>
141
+
142
+ <!-- 登录区域 -->
143
+ <div class="flex items-center space-x-4">
144
+ <div class="hidden sm:flex items-center space-x-2">
145
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div>
146
+ <span class="text-sm text-gray-600">欢迎，张研究员</span>
147
+ </div>
148
+ <button class="md:hidden text-gray-600">
149
+ <i class="fas fa-bars text-xl"></i>
150
+ </button>
151
+ </div>
152
+ </div>
153
+ </header>
154
+
155
+ <main class="flex-grow">
156
+ <!-- 轮播区域 -->
157
+ <section class="relative overflow-hidden h-[450px] md:h-[500px]">
158
+ <div class="carousel absolute inset-0 flex transition-transform duration-500">
159
+ <!-- 轮播图1 -->
160
+ <div class="slide min-w-full flex-shrink-0 relative">
161
+ <div class="absolute inset-0 bg-gradient-to-r from-primary/80 to-accent/70"></div>
162
+ <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJuZXV0cm9uIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjEiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4xIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI25ldXRyb24pIi8+PC9zdmc+')]"></div>
163
+
164
+ <div class="container mx-auto h-full flex flex-col justify-center px-6 relative z-10 text-white">
165
+ <h2 class="text-3xl md:text-5xl font-bold mb-4 animate-fadeIn">聚焦核能未来</h2>
166
+ <p class="text-xl md:text-2xl max-w-2xl mb-8">赋能原子能科技创新的数据智能平台</p>
167
+ <button class="bg-white text-primary hover:bg-light hover:text-primary-dark px-6 py-3 rounded-full font-bold shadow-lg w-fit transition">
168
+ 了解更多 <i class="fas fa-arrow-right ml-2"></i>
169
+ </button>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- 轮播图2 -->
174
+ <div class="slide min-w-full flex-shrink-0 relative">
175
+ <div class="absolute inset-0 bg-gradient-to-r from-dark/80 to-secondary/80"></div>
176
+ <div class="absolute inset-0 opacity-30 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJkYXRhLXBhdHRlcm4iIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+PGNpcmNsZSBjeD0iMjUiIGN5PSIyNSIgcj0iMyIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDUpIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZGF0YS1wYXR0ZXJuKSIvPjwvc3ZnPg==')]"></div>
177
+
178
+ <div class="container mx-auto h-full flex flex-col justify-center px-6 relative z-10 text-white">
179
+ <h2 class="text-3xl md:text-5xl font-bold mb-4">135TB科研数据集中管理</h2>
180
+ <p class="text-xl md:text-2xl max-w-2xl mb-8">统一、可信、安全的数据底座</p>
181
+ <button class="bg-white text-primary hover:bg-light hover:text-primary-dark px-6 py-3 rounded-full font-bold shadow-lg w-fit transition">
182
+ 浏览数据 <i class="fas fa-database ml-2"></i>
183
+ </button>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- 轮播图3 -->
188
+ <div class="slide min-w-full flex-shrink-0 relative">
189
+ <div class="absolute inset-0 bg-gradient-to-r from-accent/80 to-primary/80"></div>
190
+ <div class="absolute inset-0 opacity-20 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJhaS1wYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPjxwYXRoIGQ9Ik04LDBMIDAsMTAgMjAsMzAgMzAsMjAgMTAsMCBaIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDcpIi8+PHBhdGggZD0iTTAsMjAgTDIwLDAgNDAsMjAgMjAsNDAgWiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA3KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNhaS1wYXR0ZXJuKSIvPjwvc3ZnPg==')]"></div>
191
+
192
+ <div class="container mx-auto h-full flex flex-col justify-center px-6 relative z-10 text-white">
193
+ <h2 class="text-3xl md:text-5xl font-bold mb-4">国产大模型+科研场景融合</h2>
194
+ <p class="text-xl md:text-2xl max-w-2xl mb-8">打造智能科研助手新范式</p>
195
+ <button class="bg-white text-primary hover:bg-light hover:text-primary-dark px-6 py-3 rounded-full font-bold shadow-lg w-fit transition">
196
+ 体验AI助手 <i class="fas fa-robot ml-2"></i>
197
+ </button>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- 轮播指示器 -->
203
+ <div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-2 z-10">
204
+ <button class="w-3 h-3 rounded-full bg-white opacity-60 indicator-btn" data-index="0"></button>
205
+ <button class="w-3 h-3 rounded-full bg-white opacity-60 indicator-btn" data-index="1"></button>
206
+ <button class="w-3 h-3 rounded-full bg-white opacity-60 indicator-btn" data-index="2"></button>
207
+ </div>
208
+
209
+ <!-- 左右切换按钮 -->
210
+ <button class="absolute left-4 top-1/2 transform -translate-y-1/2 text-white text-2xl z-10 carousel-prev">
211
+ <i class="fas fa-chevron-left"></i>
212
+ </button>
213
+ <button class="absolute right-4 top-1/2 transform -translate-y-1/2 text-white text-2xl z-10 carousel-next">
214
+ <i class="fas fa-chevron-right"></i>
215
+ </button>
216
+ </section>
217
+
218
+ <!-- 知识推荐区域 -->
219
+ <section class="py-16 bg-light/30">
220
+ <div class="container mx-auto px-4">
221
+ <h2 class="text-3xl font-bold text-center mb-12 text-primary">推荐文献与成果</h2>
222
+
223
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
224
+ <!-- 文献卡片1 -->
225
+ <div class="knowledge-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
226
+ <div class="p-6 pb-4">
227
+ <div class="flex justify-between items-start">
228
+ <h3 class="text-xl font-bold text-primary mb-2">钍基熔盐堆关键技术综述</h3>
229
+ <span class="bg-accent/10 text-accent text-xs px-2 py-1 rounded-md">热点文献</span>
230
+ </div>
231
+ <p class="text-gray-600 text-sm mb-3">张明远, 李建国, 王立新 | 中国原子能科学研究院</p>
232
+ <div class="flex flex-wrap gap-2 mb-4">
233
+ <span class="bg-light text-primary text-xs px-2 py-1 rounded">第四代核反应堆</span>
234
+ <span class="bg-light text-primary text-xs px-2 py-1 rounded">熔盐堆技术</span>
235
+ <span class="bg-light text-primary text-xs px-2 py-1 rounded">核燃料循环</span>
236
+ </div>
237
+ <p class="text-gray-700 mb-4">本文系统总结了钍基熔盐堆在燃料循环、材料耐腐蚀性、系统安全设计等方面的最新研究成果，分析了未来商业化应用面临的技术挑战和发展路径...</p>
238
+ <div class="flex justify-between items-center">
239
+ <button class="text-secondary font-medium flex items-center">
240
+ <i class="fas fa-bookmark mr-2"></i> 收藏文献
241
+ </button>
242
+ <button class="px-4 py-2 bg-secondary hover:bg-primary text-white rounded-full text-sm transition">
243
+ 引用 <i class="fas fa-quote-right ml-1"></i>
244
+ </button>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- 文献卡片2 -->
250
+ <div class="knowledge-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
251
+ <div class="p-6 pb-4">
252
+ <div class="flex justify-between items-start">
253
+ <h3 class="text-xl font-bold text-primary mb-2">钚-239裂变横截面实验分析</h3>
254
+ <span class="bg-secondary/10 text-secondary text-xs px-2 py-1 rounded-md">最新成果</span>
255
+ </div>
256
+ <p class="text-gray-600 text-sm mb-3">陈志伟, 刘晓波, 杨振华 | 核物理研究所</p>
257
+ <div class="flex flex-wrap gap-2 mb-4">
258
+ <span class="bg-light text-primary text-xs px-2 py-1 rounded">裂变截面</span>
259
+ <span class="bg-light text-primary text-xs px-2 py-1 rounded">中子物理</span>
260
+ <span class="bg-light text-primary text-xs px-2 py-1 rounded">核数据测量</span>
261
+ </div>
262
+ <p class="text-gray-700 mb-4">基于中国先进研究堆(CARR)的高通量中子束流，研究团队对钚-239在0.1-20MeV能区的裂变截面进行了精确测量，实验数据填补了国内相关核数据库的空白...</p>
263
+ <div class="flex justify-between items-center">
264
+ <button class="text-secondary font-medium flex items-center">
265
+ <i class="fas fa-bookmark mr-2"></i> 收藏文献
266
+ </button>
267
+ <button class="px-4 py-2 bg-secondary hover:bg-primary text-white rounded-full text-sm transition">
268
+ 引用 <i class="fas fa-quote-right ml-1"></i>
269
+ </button>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- 文献卡片3 -->
275
+ <div class="knowledge-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
276
+ <div class="p-6 pb-4">
277
+ <div class="flex justify-between items-start">
278
+ <h3 class="text-xl font-bold text-primary mb-2">快堆乏燃料后处理技术进展</h3>
279
+ <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-md">高引用文献</span>
280
+ </div>
281
+ <p class="text-gray-600 text-sm mb-3">赵建华, 孙宏宇, 周伟 | 核燃料循环研究所</p>
282
+ <div class="flex flex-wrap gap-2 mb-4">
283
+ <span class="bg-light text-primary text-xs px-2 py-1 rounded">乏燃料处理</span>
284
+ <span class="bg-light text-primary text-xs px-2 py-1 rounded">快中子反应堆</span>
285
+ <span class="bg-light text-primary text-xs px-2 py-1 rounded">PUREX流程</span>
286
+ </div>
287
+ <p class="text-gray-700 mb-4">本文综述了快堆乏燃料后处理领域的技术进展，重点分析了高燃耗燃料溶解、锕系元素分离、高放废液处理等关键技术的发展现状，提出了适合中国快堆燃料循环的技术路线...</p>
288
+ <div class="flex justify-between items-center">
289
+ <button class="text-secondary font-medium flex items-center">
290
+ <i class="fas fa-bookmark mr-2"></i> 收藏文献
291
+ </button>
292
+ <button class="px-4 py-2 bg-secondary hover:bg-primary text-white rounded-full text-sm transition">
293
+ 引用 <i class="fas fa-quote-right ml-1"></i>
294
+ </button>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </section>
301
+
302
+ <!-- 科研数据浏览区 -->
303
+ <section class="py-16">
304
+ <div class="container mx-auto px-4">
305
+ <h2 class="text-3xl font-bold text-center mb-12 text-primary">科研数据资源</h2>
306
+
307
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
308
+ <!-- 数据类别1 -->
309
+ <div class="bg-white rounded-xl shadow-md p-6 flex items-start">
310
+ <div class="mr-4 text-secondary">
311
+ <i class="fas fa-file-alt text-3xl"></i>
312
+ </div>
313
+ <div>
314
+ <h3 class="text-xl font-bold text-primary mb-2">原子能论文</h3>
315
+ <p class="text-gray-600 mb-4">收录核心期刊论文、会议论文及技术报告</p>
316
+ <div class="bg-light rounded-lg p-4">
317
+ <div class="flex justify-between items-center mb-2">
318
+ <span class="font-medium">一种低压氚提取装置的设计专利</span>
319
+ <span class="text-xs text-gray-500">2023-07</span>
320
+ </div>
321
+ <p class="text-sm text-gray-600">新型氚提取装置设计，适用于聚变堆燃料循环系统</p>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- 数据类别2 -->
327
+ <div class="bg-white rounded-xl shadow-md p-6 flex items-start">
328
+ <div class="mr-4 text-secondary">
329
+ <i class="fas fa-flask text-3xl"></i>
330
+ </div>
331
+ <div>
332
+ <h3 class="text-xl font-bold text-primary mb-2">实验数据</h3>
333
+ <p class="text-gray-600 mb-4">反应堆运行数据、材料实验数据、辐射测量数据</p>
334
+ <div class="bg-light rounded-lg p-4">
335
+ <div class="flex justify-between items-center mb-2">
336
+ <span class="font-medium">乏燃料中锶-90的分布实验数据</span>
337
+ <span class="text-xs text-gray-500">2023-09</span>
338
+ </div>
339
+ <p class="text-sm text-gray-600">不同冷却时间下乏燃料中放射性核素分布数据集</p>
340
+ </div>
341
+ </div>
342
+ </div>
343
+
344
+ <!-- 数据类别3 -->
345
+ <div class="bg-white rounded-xl shadow-md p-6 flex items-start">
346
+ <div class="mr-4 text-secondary">
347
+ <i class="fas fa-project-diagram text-3xl"></i>
348
+ </div>
349
+ <div>
350
+ <h3 class="text-xl font-bold text-primary mb-2">项目数据</h3>
351
+ <p class="text-gray-600 mb-4">国家级科研项目、国际合作项目、企业委托项目</p>
352
+ <div class="bg-light rounded-lg p-4">
353
+ <div class="flex justify-between items-center mb-2">
354
+ <span class="font-medium">高通量反应堆数据管理策略</span>
355
+ <span class="text-xs text-gray-500">2023-11</span>
356
+ </div>
357
+ <p class="text-sm text-gray-600">面向新型研究堆的全生命周期数据管理解决方案</p>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <!-- 数据类别4 -->
363
+ <div class="bg-white rounded-xl shadow-md p-6 flex items-start">
364
+ <div class="mr-4 text-secondary">
365
+ <i class="fas fa-chart-bar text-3xl"></i>
366
+ </div>
367
+ <div>
368
+ <h3 class="text-xl font-bold text-primary mb-2">分析评论</h3>
369
+ <p class="text-gray-600 mb-4">技术评论、行业分析、政策解读</p>
370
+ <div class="bg-light rounded-lg p-4">
371
+ <div class="flex justify-between items-center mb-2">
372
+ <span class="font-medium">小型模块化反应堆经济性分析报告</span>
373
+ <span class="text-xs text-gray-500">2023-10</span>
374
+ </div>
375
+ <p class="text-sm text-gray-600">SMR在不同应用场景下的经济性建模与比较分析</p>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </section>
382
+
383
+ <!-- 大模型智能问答区 -->
384
+ <section class="py-16 bg-gradient-to-br from-light to-blue-50">
385
+ <div class="container mx-auto px-4">
386
+ <div class="max-w-4xl mx-auto">
387
+ <h2 class="text-3xl font-bold text-center mb-12 text-primary">原子能大模型智能助手</h2>
388
+
389
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden">
390
+ <!-- 问答历史区域 -->
391
+ <div class="h-96 overflow-y-auto p-6 space-y-4" id="chat-container">
392
+ <div class="chat-entry">
393
+ <div class="flex items-start">
394
+ <div class="mr-3">
395
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div>
396
+ </div>
397
+ <div>
398
+ <p class="font-medium text-gray-700">科研助手</p>
399
+ <div class="bg-light rounded-lg p-4 mt-2">
400
+ <p>您好！我是原子能科研助手，专注于核科学与技术领域。您可以向我咨询反应堆物理、辐射防护、核燃料循环、核技术应用等方面的问题。</p>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="chat-entry">
407
+ <div class="flex items-start justify-end">
408
+ <div class="ml-3">
409
+ <div class="flex items-center">
410
+ <p class="font-medium text-gray-700 mr-2">张研究员</p>
411
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div>
412
+ </div>
413
+ <div class="bg-primary/10 rounded-lg p-4 mt-2">
414
+ <p>中子俘获反应在快堆中的作用是什么？</p>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="chat-entry">
421
+ <div class="flex items-start">
422
+ <div class="mr-3">
423
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div>
424
+ </div>
425
+ <div>
426
+ <p class="font-medium text-gray-700">科研助手</p>
427
+ <div class="bg-light rounded-lg p-4 mt-2">
428
+ <p class="mb-3">在快堆中，中子俘获反应主要有以下作用：</p>
429
+ <ul class="list-disc pl-5 space-y-2 mb-3">
430
+ <li><strong>增殖核燃料</strong>：通过U-238中子俘获产生Pu-239，实现燃料增殖</li>
431
+ <li><strong>控制反应性</strong>：某些材料（如B-10）的中子俘获用于反应性控制</li>
432
+ <li><strong>嬗变长寿命核素</strong>：通过俘获中子将长寿命裂变产物转变为短寿命或稳定核素</li>
433
+ <li><strong>结构材料活化</strong>：堆内材料的中子俘获产生放射性核素，影响辐射防护</li>
434
+ </ul>
435
+ <div class="bg-accent/5 border-l-4 border-accent pl-4 py-2 text-sm">
436
+ <p class="font-medium">参考文献：</p>
437
+ <p>李宏刚等. "快堆中子物理特性研究"《核科学与工程》, 2022, 42(3): 421-428.</p>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+
445
+ <!-- 输入区域 -->
446
+ <div class="border-t p-4 bg-white">
447
+ <div class="flex">
448
+ <input type="text" id="question-input" placeholder="输入原子能相关问题..." class="flex-grow border rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-secondary">
449
+ <button id="ask-button" class="bg-secondary hover:bg-primary text-white px-6 py-3 rounded-r-lg font-medium transition flex items-center">
450
+ 提问 <i class="fas fa-paper-plane ml-2"></i>
451
+ </button>
452
+ </div>
453
+ <div class="mt-3 flex flex-wrap gap-2">
454
+ <button class="text-xs bg-light hover:bg-secondary/10 text-primary px-3 py-1 rounded-full transition">燃料循环技术</button>
455
+ <button class="text-xs bg-light hover:bg-secondary/10 text-primary px-3 py-1 rounded-full transition">反应堆安全分析</button>
456
+ <button class="text-xs bg-light hover:bg-secondary/10 text-primary px-3 py-1 rounded-full transition">辐射防护标准</button>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </section>
463
+
464
+ <!-- 科研动态 -->
465
+ <section class="py-16">
466
+ <div class="container mx-auto px-4">
467
+ <h2 class="text-3xl font-bold text-center mb-12 text-primary">最新科研动态</h2>
468
+
469
+ <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
470
+ <!-- 动态卡片1 -->
471
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
472
+ <div class="h-48 bg-gradient-to-r from-primary to-accent relative">
473
+ <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJkeW5hbWljIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPjxwYXRoIGQ9Ik0wLDBMMzAsMCAzMCwzMCAwLDMwIFoiIGZpbGw9InJnYmEoMCwxMjYsMTg0LDAuMDUpIi8+PHBhdGggZD0iTTEwLDEwIEwyMCwxMCAyMCwyMCAxMCwyMCBaIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZHluYW1pYykiLz48L3N2Zz4=')]"></div>
474
+ <div class="absolute bottom-4 left-4 text-white">
475
+ <span class="text-sm bg-white/20 backdrop-blur-sm px-2 py-1 rounded">项目进展</span>
476
+ </div>
477
+ </div>
478
+ <div class="p-6">
479
+ <h3 class="text-xl font-bold text-primary mb-2">我国首座快堆实验堆进入调试阶段</h3>
480
+ <p class="text-gray-600 mb-4">中国实验快堆二期工程顺利完成主体建设，进入系统调试阶段，标志着我国第四代核能技术取得重要突破...</p>
481
+ <div class="flex justify-between items-center text-sm text-gray-500">
482
+ <span>2023-11-15</span>
483
+ <a href="#" class="text-secondary font-medium">阅读更多</a>
484
+ </div>
485
+ </div>
486
+ </div>
487
+
488
+ <!-- 动态卡片2 -->
489
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
490
+ <div class="h-48 bg-gradient-to-r from-secondary to-accent relative">
491
+ <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwbGFuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjUwIiB5Mj0iNTAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjA3KSIgc3Ryb2tlLXdpZHRoPSIyIi8+PGxpbmUgeDE9IjUwIiB5MT0iMCIgeDI9IjAiIHkyPSI1MCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDcpIiBzdHJva2Utd2lkdGg9IjIiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGxhbikiLz48L3N2Zz4=')]"></div>
492
+ <div class="absolute bottom-4 left-4 text-white">
493
+ <span class="text-sm bg-white/20 backdrop-blur-sm px-2 py-1 rounded">发展规划</span>
494
+ </div>
495
+ </div>
496
+ <div class="p-6">
497
+ <h3 class="text-xl font-bold text-primary mb-2">原子能院发布2025年度研究计划</h3>
498
+ <p class="text-gray-600 mb-4">研究院公布2025年重点研究方向，包括先进燃料循环、小型模块化反应堆、核聚变工程材料等六大领域...</p>
499
+ <div class="flex justify-between items-center text-sm text-gray-500">
500
+ <span>2023-11-08</span>
501
+ <a href="#" class="text-secondary font-medium">阅读更多</a>
502
+ </div>
503
+ </div>
504
+ </div>
505
+
506
+ <!-- 动态卡片3 -->
507
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
508
+ <div class="h-48 bg-gradient-to-r from-accent to-primary relative">
509
+ <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJjb2xhYiIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIj48Y2lyY2xlIGN4PSIyNSIgY3k9IjI1IiByPSIxNSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDcpIiBzdHJva2Utd2lkdGgPSIyIiBmaWxsPSJub25lIi8+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iNSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDcpIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiLz48Y2lyY2xlIGN4PSIzNSIgY3k9IjM1IiByPSI1IiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wNykiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNjb2xhYikiLz48L3N2Zz4=')]"></div>
510
+ <div class="absolute bottom-4 left-4 text-white">
511
+ <span class="text-sm bg-white/20 backdrop-blur-sm px-2 py-1 rounded">国际合作</span>
512
+ </div>
513
+ </div>
514
+ <div class="p-6">
515
+ <h3 class="text-xl font-bold text-primary mb-2">中俄签署先进核能技术合作协议</h3>
516
+ <p class="text-gray-600 mb-4">两国将在快堆燃料闭式循环、核聚变工程材料研发、核设施退役技术等领域开展深度合作...</p>
517
+ <div class="flex justify-between items-center text-sm text-gray-500">
518
+ <span>2023-10-27</span>
519
+ <a href="#" class="text-secondary font-medium">阅读更多</a>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ </section>
526
+ </main>
527
+
528
+ <!-- 底部信息区 -->
529
+ <footer class="bg-primary text-white pt-12 pb-8">
530
+ <div class="container mx-auto px-4">
531
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
532
+ <div>
533
+ <h3 class="text-xl font-bold mb-4">中国原子能科学研究院</h3>
534
+ <p class="text-light mb-4">致力于核能科学研究与技术创新的国家级综合研究机构</p>
535
+ <div class="flex space-x-4">
536
+ <a href="#" class="text-light hover:text-white transition"><i class="fab fa-weixin"></i></a>
537
+ <a href="#" class="text-light hover:text-white transition"><i class="fab fa-weibo"></i></a>
538
+ <a href="#" class="text-light hover:text-white transition"><i class="fab fa-linkedin"></i></a>
539
+ </div>
540
+ </div>
541
+
542
+ <div>
543
+ <h4 class="font-bold mb-4">快速链接</h4>
544
+ <ul class="space-y-2">
545
+ <li><a href="#" class="text-light hover:text-white transition">科研项目库</a></li>
546
+ <li><a href="#" class="text-light hover:text-white transition">数据中心</a></li>
547
+ <li><a href="#" class="text-light hover:text-white transition">开放实验室</a></li>
548
+ <li><a href="#" class="text-light hover:text-white transition">学术期刊</a></li>
549
+ </ul>
550
+ </div>
551
+
552
+ <div>
553
+ <h4 class="font-bold mb-4">相关资源</h4>
554
+ <ul class="space-y-2">
555
+ <li><a href="#" class="text-light hover:text-white transition">核工业标准</a></li>
556
+ <li><a href="#" class="text-light hover:text-white transition">安全法规</a></li>
557
+ <li><a href="#" class="text-light hover:text-white transition">国际合作</a></li>
558
+ <li><a href="#" class="text-light hover:text-white transition">教育培训</a></li>
559
+ </ul>
560
+ </div>
561
+
562
+ <div>
563
+ <h4 class="font-bold mb-4">联系我们</h4>
564
+ <ul class="space-y-2">
565
+ <li class="flex items-start">
566
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-light"></i>
567
+ <span>北京市房山区新镇三强路1号院</span>
568
+ </li>
569
+ <li class="flex items-center">
570
+ <i class="fas fa-phone-alt mr-3 text-light"></i>
571
+ <span>010-6935 7000</span>
572
+ </li>
573
+ <li class="flex items-center">
574
+ <i class="fas fa-envelope mr-3 text-light"></i>
575
+ <span>contact@ciae.ac.cn</span>
576
+ </li>
577
+ </ul>
578
+ </div>
579
+ </div>
580
+
581
+ <div class="pt-6 border-t border-light/20 text-center text-light text-sm">
582
+ <p class="mb-2">© 2023 中国原子能科学研究院 版权所有 | 京ICP备05039896号-12 | 京公网安备 110402000348号</p>
583
+ <p>本平台数据仅供科研使用，未经授权不得用于商业用途</p>
584
+ </div>
585
+ </div>
586
+ </footer>
587
+
588
+ <script>
589
+ // 轮播图功能
590
+ document.addEventListener('DOMContentLoaded', function() {
591
+ const carousel = document.querySelector('.carousel');
592
+ const slides = document.querySelectorAll('.slide');
593
+ const indicators = document.querySelectorAll('.indicator-btn');
594
+ const prevBtn = document.querySelector('.carousel-prev');
595
+ const nextBtn = document.querySelector('.carousel-next');
596
+
597
+ let currentIndex = 0;
598
+ const slideCount = slides.length;
599
+
600
+ // 更新轮播位置
601
+ function updateCarousel() {
602
+ carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
603
+
604
+ // 更新指示器
605
+ indicators.forEach((indicator, index) => {
606
+ if(index === currentIndex) {
607
+ indicator.classList.remove('opacity-60');
608
+ indicator.classList.add('opacity-100');
609
+ } else {
610
+ indicator.classList.add('opacity-60');
611
+ indicator.classList.remove('opacity-100');
612
+ }
613
+ });
614
+ }
615
+
616
+ // 切换到下一张
617
+ function nextSlide() {
618
+ currentIndex = (currentIndex + 1) % slideCount;
619
+ updateCarousel();
620
+ }
621
+
622
+ // 切换到上一张
623
+ function prevSlide() {
624
+ currentIndex = (currentIndex - 1 + slideCount) % slideCount;
625
+ updateCarousel();
626
+ }
627
+
628
+ // 自动轮播
629
+ let autoSlide = setInterval(nextSlide, 5000);
630
+
631
+ // 鼠标悬停时暂停自动轮播
632
+ carousel.parentElement.addEventListener('mouseenter', () => {
633
+ clearInterval(autoSlide);
634
+ });
635
+
636
+ // 鼠标离开时恢复自动轮播
637
+ carousel.parentElement.addEventListener('mouseleave', () => {
638
+ autoSlide = setInterval(nextSlide, 5000);
639
+ });
640
+
641
+ // 绑定事件
642
+ nextBtn.addEventListener('click', nextSlide);
643
+ prevBtn.addEventListener('click', prevSlide);
644
+
645
+ indicators.forEach(indicator => {
646
+ indicator.addEventListener('click', () => {
647
+ currentIndex = parseInt(indicator.getAttribute('data-index'));
648
+ updateCarousel();
649
+ });
650
+ });
651
+
652
+ // 初始化指示器
653
+ updateCarousel();
654
+
655
+ // 问答功能
656
+ const askButton = document.getElementById('ask-button');
657
+ const questionInput = document.getElementById('question-input');
658
+ const chatContainer = document.getElementById('chat-container');
659
+
660
+ askButton.addEventListener('click', function() {
661
+ const question = questionInput.value.trim();
662
+ if(question) {
663
+ // 添加用户问题
664
+ const userEntry = document.createElement('div');
665
+ userEntry.className = 'chat-entry';
666
+ userEntry.innerHTML = `
667
+ <div class="flex items-start justify-end">
668
+ <div class="ml-3">
669
+ <div class="flex items-center">
670
+ <p class="font-medium text-gray-700 mr-2">张研究员</p>
671
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div>
672
+ </div>
673
+ <div class="bg-primary/10 rounded-lg p-4 mt-2">
674
+ <p>${question}</p>
675
+ </div>
676
+ </div>
677
+ </div>
678
+ `;
679
+ chatContainer.appendChild(userEntry);
680
+
681
+ // 清空输入框
682
+ questionInput.value = '';
683
+
684
+ // 添加加载提示
685
+ const loadingEntry = document.createElement('div');
686
+ loadingEntry.className = 'chat-entry mt-4';
687
+ loadingEntry.innerHTML = `
688
+ <div class="flex items-start">
689
+ <div class="mr-3">
690
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div>
691
+ </div>
692
+ <div>
693
+ <p class="font-medium text-gray-700">科研助手</p>
694
+ <div class="bg-light rounded-lg p-4 mt-2">
695
+ <div class="flex space-x-2">
696
+ <div class="w-3 h-3 rounded-full bg-secondary pulse"></div>
697
+ <div class="w-3 h-3 rounded-full bg-secondary pulse" style="animation-delay: 0.2s"></div>
698
+ <div class="w-3 h-3 rounded-full bg-secondary pulse" style="animation-delay: 0.4s"></div>
699
+ </div>
700
+ </div>
701
+ </div>
702
+ </div>
703
+ `;
704
+ chatContainer.appendChild(loadingEntry);
705
+
706
+ // 滚动到底部
707
+ chatContainer.scrollTop = chatContainer.scrollHeight;
708
+
709
+ // 模拟AI响应（实际应用中会调用API）
710
+ setTimeout(() => {
711
+ // 移除加载提示
712
+ chatContainer.removeChild(loadingEntry);
713
+
714
+ // 添加AI响应
715
+ const aiEntry = document.createElement('div');
716
+ aiEntry.className = 'chat-entry';
717
+ aiEntry.innerHTML = `
718
+ <div class="flex items-start">
719
+ <div class="mr-3">
720
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8"></div>
721
+ </div>
722
+ <div>
723
+ <p class="font-medium text-gray-700">科研助手</p>
724
+ <div class="bg-light rounded-lg p-4 mt-2">
725
+ <p>您的问题 "<strong>${question}</strong>" 涉及原子能领域的专业知识。我正在查阅相关文献数据库，稍后会为您提供详细的解答。</p>
726
+ <div class="bg-secondary/5 rounded-lg p-3 mt-3 text-sm">
727
+ <p class="font-medium">提示：</p>
728
+ <p>您可以尝试更具体的问题，例如添加专业术语或指定研究方向，以获得更精准的回答。</p>
729
+ </div>
730
+ </div>
731
+ </div>
732
+ </div>
733
+ `;
734
+ chatContainer.appendChild(aiEntry);
735
+
736
+ // 滚动到底部
737
+ chatContainer.scrollTop = chatContainer.scrollHeight;
738
+ }, 1500);
739
+ }
740
+ });
741
+
742
+ // 支持回车键提问
743
+ questionInput.addEventListener('keypress', function(e) {
744
+ if(e.key === 'Enter') {
745
+ askButton.click();
746
+ }
747
+ });
748
+ });
749
+ </script>
750
+ <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/atom1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
751
+ </html>