will0406.github.io/truck.html at main · will0406/will0406.github.io · GitHub

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
<!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/688addd258cb8da5c8f2fe20.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>

            <!-- 电动重卡核心优势 -->
            <h3 class="text-xl font-semibold mb-6 text-dark">电动重卡核心优势</h3>

            <p class="text-gray-600 mb-4 leading-relaxed">
              <strong class="text-dark">环保与可持续性：</strong>电动重卡采用电力驱动，实现了零排放或低排放，显著减少了空气污染和温室气体排放，是绿色交通的重要组成部分。
            </p>

            <p class="text-gray-600 mb-4 leading-relaxed">
              <strong class="text-dark">能源成本低：</strong>在电能价格相对稳定的情况下，电动重卡的能源成本远低于燃油重卡，降低企业的运营成本。
            </p>

            <p class="text-gray-600 mb-4 leading-relaxed">
              <strong class="text-dark">噪音低：</strong>电动驱动系统运行时噪音低，有助于改善司机和周围居民的生活质量，特别适合城市及厂区内作业。
            </p>

            <p class="text-gray-600 mb-4 leading-relaxed">
              <strong class="text-dark">驾驶体验好：</strong>电动重卡具有更平顺、更线性的动力输出，驾驶体验更为舒适，降低了驾驶员的疲劳程度。
            </p>

            <p class="text-gray-600 mb-8 leading-relaxed">
              <strong class="text-dark">维护成本低：</strong>电动重卡的结构相对简单，减少了机油更换、清洗机器等维护成本，降低了整体运营成本。同时享受更多政策支持和补贴。
            </p>

            <!-- 对比表格 -->
            <div class="overflow-x-auto mb-10">
              <table class="min-w-full border-collapse bg-white shadow-md">
                <thead>
                  <tr class="bg-gray-light">
                    <th class="py-3 px-4 text-left font-medium">项目</th>
                    <th class="py-3 px-4 text-left font-medium">电动重卡</th>
                    <th class="py-3 px-4 text-left font-medium">天然气重卡</th>
                    <th class="py-3 px-4 text-left font-medium">燃油重卡</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-t border-gray-200">
                    <td class="py-3 px-4">续航里程</td>
                    <td class="py-3 px-4 text-green-600">400-500公里</td>
                    <td class="py-3 px-4">1000公里以上</td>
                    <td class="py-3 px-4">1000公里以上</td>
                  </tr>
                  <tr class="border-t border-gray-200">
                    <td class="py-3 px-4">能耗（L/kwh/kg）</td>
                    <td class="py-3 px-4 text-green-600">1.5-2kwh/km</td>
                    <td class="py-3 px-4">0.36kg/km</td>
                    <td class="py-3 px-4">0.36L/km</td>
                  </tr>
                  <tr class="border-t border-gray-200">
                    <td class="py-3 px-4">单价</td>
                    <td class="py-3 px-4 text-green-600">1元/kwh</td>
                    <td class="py-3 px-4">6元/kg</td>
                    <td class="py-3 px-4">7.7元/L</td>
                  </tr>
                  <tr class="border-t border-gray-200">
                    <td class="py-3 px-4">每公里费用</td>
                    <td class="py-3 px-4 font-medium text-green-600">1元</td>
                    <td class="py-3 px-4">2.1元</td>
                    <td class="py-3 px-4">2.71元</td>
                  </tr>
                  <tr class="border-t border-gray-200">
                    <td class="py-3 px-4">是否是清洁能源</td>
                    <td class="py-3 px-4 text-green-600"><i class="fa fa-check"></i> 是</td>
                    <td class="py-3 px-4"><i class="fa fa-times"></i> 否</td>
                    <td class="py-3 px-4"><i class="fa fa-times"></i> 否</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- 氢能重卡特色 -->
            <h3 class="text-xl font-semibold mb-6 text-dark">氢能重卡特色</h3>

            <p class="text-gray-600 mb-4 leading-relaxed">
              <strong class="text-dark">定制化：</strong>根据客户的需求定制，满足客户的各种要求，包括但不限于技术功能、续航里程、外观设计、车辆尺寸、内部结构等。车辆将基于欧盟法规设计。
            </p>

            <p class="text-gray-600 mb-4 leading-relaxed">
              <strong class="text-dark">新材料：</strong>采用玻璃钢或碳纤维车身蒙皮，采用自行研发的复合材料地板，实现轻量化、易维护，降低能耗，减低车辆使用成本。
            </p>

            <p class="text-gray-600 mb-4 leading-relaxed">
              <strong class="text-dark">零部件：</strong>普遍采用国际知名品牌的零部件，如CATL、DANA、SIEMENS、DOGA、GERFOR、ZF等，保障车辆性能稳定。
            </p>

            <p class="text-gray-600 leading-relaxed">
              <strong class="text-dark">售后服务：</strong>将由代理商提供售后服务、车辆维保、配件供应，威驰腾也会派人驻点，提供培训、技术支持。
            </p>
          </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>