-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhydrogen.html
More file actions
488 lines (440 loc) · 23.2 KB
/
Copy pathhydrogen.html
File metadata and controls
488 lines (440 loc) · 23.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
<!DOCTYPE html>
<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://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Tailwind配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36D399',
dark: '#1E293B',
light: '#F8FAFC',
'gray-light': '#F1F5F9'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.bg-gradient-primary {
background: linear-gradient(135deg, #165DFF 0%, #36D399 100%);
}
}
</style>
</head>
<body class="font-inter text-dark bg-light">
<!-- 导航栏 - 调整了高度、菜单间距和文字大小 -->
<header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-gray-800/90 backdrop-blur-md shadow-sm">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<a href="index.html" class="flex items-center">
<div class="h-12 w-40 bg-cover bg-center" style="background-image: url('https://s21.ax1x.com/2025/07/29/pVY2o4g.png')"></div>
</a>
<!-- 桌面导航 - 包含子菜单 -->
<nav class="hidden md:flex items-center space-x-12">
<a href="index.html#home" class="font-medium text-white hover:text-primary transition-colors px-2 py-1 text-lg">首页</a>
<!-- 公司介绍子菜单 -->
<div class="relative group">
<a href="" class="font-medium text-white hover:text-primary transition-colors px-2 py-1 text-lg flex items-center">
公司介绍
<i class="fa fa-angle-down ml-1 text-sm"></i>
</a>
<!-- 子菜单内容 -->
<div class="absolute left-0 mt-2 w-48 bg-gray-900 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform group-hover:translate-y-0 translate-y-2 z-50">
<div class="py-2">
<a href="company-introduction.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">公司简介</a>
<a href="team-introduction.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">团队介绍</a>
<a href="awards.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">企业资质</a>
<a href="collaboration.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">合作伙伴</a>
</div>
</div>
</div>
<!-- 核心产业子菜单 -->
<div class="relative group">
<a href="" class="font-medium text-white hover:text-primary transition-colors px-2 py-1 text-lg flex items-center">
核心产业
<i class="fa fa-angle-down ml-1 text-sm"></i>
</a>
<!-- 子菜单内容 -->
<div class="absolute left-0 mt-2 w-48 bg-gray-900 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform group-hover:translate-y-0 translate-y-2 z-50">
<div class="py-2">
<a href="solar-power.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">太阳能光伏发电</a>
<a href="wind-power.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">风力发电</a>
<a href="energy-storage.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">储能系统</a>
<a href="materials.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">新材料</a>
<a href="truck.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">新能源重卡</a>
<a href="hydrogen.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">氢能源</a>
<a href="medical.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">医疗</a>
</div>
</div>
</div>
<a href="index.html#contact" class="font-medium text-white hover:text-primary transition-colors px-2 py-1 text-lg">联系方式</a>
</nav>
<!-- 移动端菜单按钮 -->
<!-- 移动端菜单按钮 -->
<button id="menu-toggle" class="md:hidden text-white hover:text-primary">
<i class="fa fa-bars text-2xl"></i>
</button>
</div>
<!-- 移动端导航菜单 -->
<div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700 shadow-lg">
<div class="container mx-auto px-6 py-4">
<!-- 移动端菜单项带子菜单 -->
<div class="mb-4">
<a href="index.html#home" class="font-medium text-white hover:text-primary transition-colors py-3 text-lg block">首页</a>
</div>
<!-- 公司介绍移动端子菜单 -->
<div class="mb-4 border-b border-gray-700 pb-2">
<div class="flex justify-between items-center">
<a href="#about" class="font-medium text-white hover:text-primary transition-colors py-3 text-lg">公司介绍</a>
<button class="mobile-submenu-toggle text-white">
<i class="fa fa-angle-down"></i>
</button>
</div>
<div class="mobile-submenu hidden pl-4 mt-2">
<a href="company-introduction.html" class="block py-2 text-gray-300 hover:text-white">公司简介</a>
<a href="team-introduction.html" class="block py-2 text-gray-300 hover:text-white">团队介绍</a>
<a href="awards.html" class="block py-2 text-gray-300 hover:text-white">企业资质</a>
<a href="collaboration.html" class="block py-2 text-gray-300 hover:text-white">合作伙伴</a>
</div>
</div>
<!-- 核心产业移动端子菜单 -->
<div class="mb-4 border-b border-gray-700 pb-2">
<div class="flex justify-between items-center">
<a href="#industry" class="font-medium text-white hover:text-primary transition-colors py-3 text-lg">核心产业</a>
<button class="mobile-submenu-toggle text-white">
<i class="fa fa-angle-down"></i>
</button>
</div>
<div class="mobile-submenu hidden pl-4 mt-2">
<a href="solar-power.html" class="block py-2 text-gray-300 hover:text-white">太阳能光伏发电</a>
<a href="wind-power.html" class="block py-2 text-gray-300 hover:text-white">风力发电</a>
<a href="energy-storage.html" class="block py-2 text-gray-300 hover:text-white">储能系统</a>
<a href="materials.html" class="block py-2 text-gray-300 hover:text-white">新材料</a>
<a href="truck.html" class="block py-2 text-gray-300 hover:text-white">新能源重卡</a>
<a href="hydrogen.html" class="block py-2 text-gray-300 hover:text-white">氢能源</a>
<a href="medical.html" class="block py-2 text-gray-300 hover:text-white">医疗</a>
</div>
</div>
<!-- 技术与设备移动端子菜单 -->
<div class="mb-4">
<a href="index.html#contact" class="font-medium text-white hover:text-primary transition-colors py-3 text-lg block">联系方式</a>
</div>
</div>
</div>
</header>
<body class="font-inter text-dark bg-light pt-20">
<!-- 页面主体内容 -->
<main>
<!-- banner区域 -->
<section class="relative h-64 md:h-80 bg-gray-100 overflow-hidden pb-8"> <!-- 增加了pb-8 -->
<div class="absolute inset-0 z-0">
<img src="https://pic1.imgdb.cn/item/688b15b858cb8da5c8f456a3.png" alt="东弘科技企业形象" class="w-full h-full object-cover opacity-60">
<div class="absolute inset-0 bg-dark/40"></div>
</div>
<div class="container mx-auto px-6 relative z-10 h-full flex items-end pb-12"> <!-- 改为items-end并增加pb-12 -->
<div>
<h1 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-white mb-4">氢能源</h1>
<div class="flex items-center text-white/90">
<a href="index.html#home" class="hover:text-white transition-colors">首页</a>
<i class="fa fa-angle-right mx-3 text-sm"></i>
<a href="" class="hover:text-white transition-colors">核心产业</a>
<i class="fa fa-angle-right mx-3 text-sm"></i>
<span>氢能源</span>
</div>
</div>
</div>
</section>
<!-- 公司简介 -->
<!-- 氢能源详情区域 -->
<!-- 氢能源详情区域 -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<div class="flex flex-col lg:flex-row gap-12">
<div class="lg:w-100%">
<h2 class="text-3xl font-bold mb-6 text-dark">氢能源</h2>
<div class="w-16 h-1 bg-primary mb-8"></div>
<!-- 水蒸气金属裂解制氢技术 -->
<div class="mb-16">
<h3 class="text-xl font-bold mb-4 text-black"> 水蒸气金属裂解制氢技术</h3>
<div class="mb-6">
<p class="mb-4">该技术通过特殊工艺将多种常见金属及其合金制造成复合金属材料（裂解剂），在特制撬装设备中与160度左右的饱和水蒸气反应生产氢气。</p>
<h4 class="text-lg font-semibold mt-6 mb-3">制氢过程与应用</h4>
<ul class="list-disc pl-6 space-y-2 text-gray-700 mb-6">
<li>使用绿电或火电厂副产水蒸气作为热源</li>
<li>通过金属裂解反应设备生成氢气</li>
<li>应用于天然气管道掺氢、绿色甲醇制造、氢冶金等领域</li>
</ul>
<!-- 表格移至此处 -->
<h4 class="text-lg font-semibold mb-3">与碱性电解水制氢对比</h4>
<div class="overflow-x-auto mb-6 border rounded-lg">
<table class="min-w-full w-full border-collapse table-fixed">
<thead>
<tr class="bg-gray-100">
<th class="border border-gray-300 px-4 py-2 text-left w-1/4">项目</th>
<th class="border border-gray-300 px-4 py-2 text-left w-3/8">水蒸气金属制氢</th>
<th class="border border-gray-300 px-4 py-2 text-left w-3/8">碱性电解水制氢</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-gray-300 px-4 py-2">使用寿命</td>
<td class="border border-gray-300 px-4 py-2">≥15年</td>
<td class="border border-gray-300 px-4 py-2">主要部件寿命约5年</td>
</tr>
<tr class="bg-gray-50">
<td class="border border-gray-300 px-4 py-2">对水质要求</td>
<td class="border border-gray-300 px-4 py-2">要求低，普通水即可</td>
<td class="border border-gray-300 px-4 py-2">要求高，必须是去离子水</td>
</tr>
<tr>
<td class="border border-gray-300 px-4 py-2">产氢能耗</td>
<td class="border border-gray-300 px-4 py-2">＜2.0kwh/Nm³H₂</td>
<td class="border border-gray-300 px-4 py-2">＞5.0kwh/Nm³H₂</td>
</tr>
<tr class="bg-gray-50">
<td class="border border-gray-300 px-4 py-2">环保要求</td>
<td class="border border-gray-300 px-4 py-2">裂解剂回收，无三废问题；无排放无污染</td>
<td class="border border-gray-300 px-4 py-2">碱水需要加工处理</td>
</tr>
<tr>
<td class="border border-gray-300 px-4 py-2">制氢成本</td>
<td class="border border-gray-300 px-4 py-2">＜20元/KG，量产后可低至15元/kg</td>
<td class="border border-gray-300 px-4 py-2">电价0.43元时约34元/kg</td>
</tr>
<tr class="bg-gray-50">
<td class="border border-gray-300 px-4 py-2">制氢设备</td>
<td class="border border-gray-300 px-4 py-2">含蒸汽锅炉、制氢釜、氢气缓冲罐，组装灵活，维护简便，撬装式安全</td>
<td class="border border-gray-300 px-4 py-2">设备复杂，体积庞大</td>
</tr>
<tr>
<td class="border border-gray-300 px-4 py-2">制氢方式</td>
<td class="border border-gray-300 px-4 py-2">启停灵活，安全性高，适合制加氢一体化站，解决储运难题</td>
<td class="border border-gray-300 px-4 py-2">耗电量大，依赖稳定电网，无法快速启停</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 氢能重卡 -->
<div class="mb-16">
<h3 class="text-xl font-bold mb-4 text-black">氢能重卡</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h4 class="text-lg font-semibold mb-3">产品特点</h4>
<ul class="list-disc pl-6 space-y-2 text-gray-700">
<li>定制化设计：可根据需求定制技术功能、续航里程等，符合欧盟法规</li>
<li>新材料应用：采用玻璃钢或碳纤维车身蒙皮，轻量化设计</li>
<li>优质零部件：采用CATL、SIEMENS、ZF等国际知名品牌零部件</li>
<li>完善售后服务：代理商维保+厂家驻点支持双重保障</li>
</ul>
</div>
<div>
<img src="https://pic1.imgdb.cn/item/688b145358cb8da5c8f44610.png" alt="氢能重卡外观图" class="w-full h-64 object-contain rounded-lg" />
</div>
</div>
</div>
<!-- 储运氢 镁基固态储氢 -->
<div>
<h3 class="text-xl font-bold mb-4 text-black">储运氢 镁基固态储氢</h3>
<div class="flex flex-col lg:flex-row gap-8">
<div class="lg:w-1/2">
<img src="https://pic1.imgdb.cn/item/688b145358cb8da5c8f4460e.png" alt="镁基固态储氢设备展示" class="w-full h-64 object-contain rounded-lg" />
</div>
<div class="lg:w-1/2">
<h4 class="text-lg font-semibold mb-3">核心优势</h4>
<ul class="list-disc pl-6 space-y-2 text-gray-700">
<li>突破性镁基固态储氢技术：资源丰富、可回收、储氢性能稳定</li>
<li>全球领先的储运技术：首台吨级镁基固态储运氢车已落地</li>
<li>灵活运输方式：匹配铁路、公路、水上运输及多式联运</li>
<li>全产业链服务：提供加氢站设计安装、氢能车辆零碳方案等</li>
</ul>
<h4 class="text-lg font-semibold mt-6 mb-3">国际合作</h4>
<p>2024年11月，全球首例大型固态储氢设备出口东南亚；与马来西亚国有独资公司WHB签署谅解备忘录，共同推动马来西亚氢能市场发展。</p>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-dark text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div>
<!-- 替换为图片 -->
<div class="mb-6">
<img src="https://s21.ax1x.com/2025/07/29/pVY2o4g.png" alt="东弘科技Logo" class="h-12">
</div>
<p class="text-gray-400 mb-6">
东弘科技致力于新能源技术的研发与应用，为全球提供高效、清洁、可持续的能源解决方案。
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-weixin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-envelope"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-bold mb-6">目录</h4>
<ul class="space-y-3">
<li class="text-gray-400">首页</li>
<li class="text-gray-400">公司介绍</li>
<li class="text-gray-400">核心产业</li>
<li class="text-gray-400">联系方式</li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-6">核心产业</h4>
<ul class="space-y-3">
<li><a href="solar-power.html" class="text-gray-400 hover:text-white transition-colors">太阳能光伏发电</a></li>
<li><a href="wind-power.html" class="text-gray-400 hover:text-white transition-colors">风力发电</a></li>
<li><a href="energy-storage.html" class="text-gray-400 hover:text-white transition-colors">储能系统</a></li>
<li><a href="materials.html" class="text-gray-400 hover:text-white transition-colors">新材料</a></li>
<li><a href="truck.html" class="text-gray-400 hover:text-white transition-colors">新能源重卡</a></li>
<li><a href="hydrogen.html" class="text-gray-400 hover:text-white transition-colors">氢能源</a></li>
<li><a href="medical.html" class="text-gray-400 hover:text-white transition-colors">医疗</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-6">联系方式</h4>
<ul class="space-y-3">
<li class="flex items-start space-x-3">
<i class="fa fa-map-marker text-primary mt-1"></i>
<span class="text-gray-400">福建省厦门市湖里区高林中路535号万科云玺一号楼领航501室</span>
</li>
<li class="flex items-start space-x-3">
<i class="fa fa-phone text-primary mt-1"></i>
<span class="text-gray-400">+86 13850080767</span>
</li>
<li class="flex items-start space-x-3">
<i class="fa fa-envelope text-primary mt-1"></i>
<span class="text-gray-400">DOHO_Tech@163.com</span>
</li>
<li class="flex items-start space-x-3">
<i class="fa fa-clock-o text-primary mt-1"></i>
<span class="text-gray-400">周一至周五: 9:00 - 18:00</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm mb-4 md:mb-0">© 2025 东弘科技. 保留所有权利.</p>
</div>
</div>
</footer>
<!-- 回到顶部按钮 -->
<button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
<i class="fa fa-arrow-up"></i>
</button>
<!-- JavaScript -->
<script>
// 导航栏滚动效果
const navbar = document.getElementById('navbar');
const backToTop = document.getElementById('back-to-top');
window.addEventListener('scroll', function() {
if (window.scrollY > 100) {
navbar.classList.add('py-2', 'shadow-md', 'bg-gray-900/95');
navbar.classList.remove('py-3', 'shadow-sm', 'bg-gray-800/90');
backToTop.classList.remove('opacity-0', 'invisible');
backToTop.classList.add('opacity-100', 'visible');
} else {
navbar.classList.add('py-3', 'shadow-sm', 'bg-gray-800/90');
navbar.classList.remove('py-2', 'shadow-md', 'bg-gray-900/95');
backToTop.classList.add('opacity-0', 'invisible');
backToTop.classList.remove('opacity-100', 'visible');
}
});
// 移动端菜单切换
const menuToggle = document.getElementById('menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
if (mobileMenu.classList.contains('hidden')) {
menuToggle.innerHTML = '<i class="fa fa-bars text-xl"></i>';
} else {
menuToggle.innerHTML = '<i class="fa fa-times text-xl"></i>';
}
});
// 产品类型切换功能
const productTypeBtns = document.querySelectorAll('.product-type-btn');
const productSections = document.querySelectorAll('.product-section');
productTypeBtns.forEach((btn, index) => {
btn.addEventListener('click', function() {
// 更新按钮样式
productTypeBtns.forEach(b => {
b.classList.remove('bg-primary', 'text-white');
b.classList.add('bg-gray-light', 'text-dark');
});
this.classList.remove('bg-gray-light', 'text-dark');
this.classList.add('bg-primary', 'text-white');
// 显示对应的产品区域
productSections.forEach(section => section.classList.add('hidden'));
if (index < productSections.length) {
productSections[index].classList.remove('hidden');
}
});
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// 如果是移动端，点击导航链接后关闭菜单
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
menuToggle.innerHTML = '<i class="fa fa-bars text-xl"></i>';
}
}
});
});
// 回到顶部
backToTop.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 移动端子菜单切换
document.querySelectorAll('.mobile-submenu-toggle').forEach(toggle => {
toggle.addEventListener('click', function() {
const submenu = this.nextElementSibling || this.parentElement.nextElementSibling;
submenu.classList.toggle('hidden');
const icon = this.querySelector('i');
if (submenu.classList.contains('hidden')) {
icon.classList.remove('fa-angle-up');
icon.classList.add('fa-angle-down');
} else {
icon.classList.remove('fa-angle-down');
icon.classList.add('fa-angle-up');
}
});
});
</script>
</body>
</html>