will0406.github.io/wind-power.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
<!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/688ada1b58cb8da5c8f2de6f.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-4 text-dark">"千乡万村"驭风行动</h3>
            <div class="rounded-xl overflow-hidden shadow-lg mb-6">

            </div>
            <p class="text-gray-600 mb-6 leading-relaxed">
              国家发展改革委、国家能源局、农业农村部联合开展"千乡万村驭风行动"，旨在农村地区充分利用零散土地，因地制宜推动风电就地就近开发利用。这一行动对于壮大村集体经济、助力乡村振兴，促进农村能源绿色低碳转型、实现碳达峰碳中和具有重要意义。
            </p>
            <p class="text-gray-600 mb-6 leading-relaxed">
              "十四五"期间，将在具备条件的县（市、区、旗）域农村地区，以村为单位，建成一批就地就近开发利用的风电项目，原则上每个行政村不超过20兆瓦。通过探索"村企合作"的风电投资建设新模式和"共建共享"的收益分配新机制，推动构建"村里有风电、集体增收益、村民得实惠"的风电开发利用新格局。
            </p>
            <p class="text-gray-600 mb-6 leading-relaxed">
              政策支持方面，将优化审批程序，提供"一站式"服务；依法办理用地，充分利用农村零散非耕地；保障并网消纳，项目由电网企业实施保障性并网，以就近就地消纳为主；鼓励模式创新，依法通过土地使用权入股等方式共享项目收益；同时加强金融支持，落实绿色金融和乡村振兴金融政策，创新投融资方式。
            </p>

            <h3 class="text-xl font-semibold mb-4 mt-8 text-dark">风机制造基地</h3>
            <!-- 分为左右两栏的生产线图片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
              <div class="rounded-xl overflow-hidden">
                <img src="https://pic1.imgdb.cn/item/688ad94f58cb8da5c8f2dc09.png" alt="风电机组总装车间" class="w-full h-64">
              </div>
              <div class="rounded-xl overflow-hidden">
                <img src="https://pic1.imgdb.cn/item/688ad95158cb8da5c8f2dc0c.png" alt="风电叶片生产线" class="w-full h-64">
              </div>
            </div>
            <p class="text-gray-600 mb-6 leading-relaxed">
              东弘科技的风机制造基地分为三大生产线：风电机组总装、塔筒制造和叶片制造。总装车间采用三大跨设计，每跨包含零部件周转区域、机舱装配区域、轮毂装配区域三大功能模块，确保生产流程高效有序。
            </p>
            <p class="text-gray-600 mb-6 leading-relaxed">
              塔筒制造厂主要设置主材堆场、加工车间、制造车间、涂装车间等功能模块，满足塔筒生产的全流程需求。叶片制造基地以生产预埋型叶片为主，采用在线真空直注式灌注、在线涂胶、二次合模（一体式腹板组装为主）、人工打磨等基础工艺，同时实现UD预制、叶根预制、碳纤维大梁等新工艺的应用。生产过程中使用水性油漆，并设有专门的表面处理车间，用于表面油漆、贴膜、称重以及其它临时性表面处理等工序。
            </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>