company-introduction.html

<!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://s21.ax1x.com/2025/07/23/pVG0vBd.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="index.html#about" 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-1/2">
                <h2 class="text-3xl font-bold mb-6 text-dark">关于东弘科技</h2>
                <div class="w-16 h-1 bg-primary mb-8"></div>
                
                <p class="text-gray-600 mb-6 leading-relaxed">
                厦门东弘科技有限公司是一家新能源产业的综合服务商。携手清华系资本所属的清大明韵基金公司，与政府共同构建产业基金，引领被投项目在产业中成功落地。通过与国家五大六小能源企业紧密协作，有效化解政府招商引资过程中产业基金资金短缺的难题，进而促成产业落地与政府资源的优势互补。

                </p>
                
                <p class="text-gray-600 mb-6 leading-relaxed">
                东弘科技投资布局的新能源产业涵盖广泛，其中包括风电、光伏、储能、氢能源、新能源重卡等产业，以及无废城市、场景物流无人驾驶、智算中心、AI大模型、低空经济等领域。为构建新质生产力的服务生态奋力前行！

                </p>
                
                <p class="text-gray-600 leading-relaxed">
                东弘科技近几年业务项目覆盖28个省，和各地县市政府关系合作密切，公司投资合作的产业都是由全国各地筛选出的优质项目，在双重保障下和东弘科技的合作项目可以在全国快速复制并落地。

                </p>
              </div>
              
              <div class="lg:w-1/2 flex justify-center">
                <div class="rounded-xl overflow-hidden shadow-lg">
                  <img src="https://s21.ax1x.com/2025/07/29/pVY2hHf.jpg" alt="东弘科技业务场景"
                       class="w-full h-96 object-cover">
                </div>
              </div>
              
            </div>
          </div>
        </section>

    <!-- 新增的东弘中纤介绍板块 -->
    <section class="py-16 bg-gray-50">
      <div class="container mx-auto px-6">
        <div class="flex flex-col lg:flex-row-reverse gap-12">
          <!-- 右侧文字区域（保持50%宽度） -->
          <div class="lg:w-1/2">
            <h2 class="text-3xl font-bold mb-6 text-dark">关于东弘中纤（厦门）先进结构材料研究院</h2>
            <div class="w-16 h-1 bg-primary mb-8"></div>
            
            <p class="text-gray-600 mb-6 leading-relaxed">
              东弘中纤研究院是东弘科技全资子公司，是东弘科技在新材料领域布局的关键一环，专注于纤维增强复合材料全产业链研发，建立了 “材料设计 - 结构优化 - 装备制造 - 工程应用” 一体化体系。依托华科研发平台，研究院拥有 10 项发明专利与 23 项实用新型专利，主导多项标准认证；公司在湖北、河南设有生产基地，具备规模化产能，是 FRP 材料及应用全流程解决方案供应商，核心竞争力在于以结构理论为根基，凭借独有专利配方与精准工艺技术，提供优质型材及配套服务。
            </p>
            
            <p class="text-gray-600 mb-6 leading-relaxed">
              经十五年技术创新，研究院已构建完整技术闭环，运营团队由多位专家和资深人士组成，在多个领域拥有丰富经验。其产品广泛应用于光伏支架、设施农业等诸多场景，市场潜力广阔，且与多家知名企业和院校保持深度合作，持续推动 FRP 材料的技术突破与产业落地。
            </p>

            
            <a href="zhongxian.html" class="inline-block mt-8 px-6 py-3 bg-primary text-white font-medium rounded-md hover:bg-primary/90 transition-colors duration-300">
              访问东弘中纤
            </a>
          </div>
          
          <!-- 左侧图片区域（50%宽度内实现横向拉长） -->
          <div class="lg:w-1/2 flex justify-center p-0"> <!-- 移除额外内边距，最大化可用宽度 -->
            <div class="rounded-xl overflow-hidden w-full h-full"> <!-- 容器占满50%宽度 -->
              <img src="https://pic1.imgdb.cn/item/68930df958cb8da5c8097713.png" alt="东弘中纤研究院业务场景"
                   class="w-full h-96 object-cover object-center"> <!-- 图片满宽显示，横向自然拉长 -->
            </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>