update CHANGELOG

CHANGELOG.md

@@ -0,0 +1,25 @@
+# v1.1.1
+```
+1，删除有关AI字段以及图片更换
+```
+# v1.1.0
+```
+1，汉晶添加中英文翻译
+2，更改所有页面中英文切换样式及JS功能代码 所有页面logo图片不切换
+3，芯片产品文字中英文翻译
+4，英文公司名称
+```
+# v1.0.3
+```
+1，主营业务-服务优势-技术工具 文字说明调整为：在采用标准 EDA 工具链的基础上，我们开发了定制化自动脚本，提升设计效率与验证覆盖率。
+```
+# v1.0.2
+```
+1，更新展望未来页面文字信息
+2，删除掉XYV2红外图像处理芯片、SND32高保真音频处理芯片、AGRO1农业环境监测芯片、HEALX2医疗级心电检测芯片、INDT5工业机器人控制芯片、VIDA-M微型AI识别芯片6款产品
+```
+# v1.0.1
+```
+1，更新汉晶 关于我们页面的文字信息
+2，调整展望未来页面文字信息
+```

css/aboutUs.css

@@ -77,7 +77,7 @@
  .bannertop{
     width: 100%;
     height:105vh;
-    background-image: url(../imgs/svg/企业文化理念\(BJF\).svg);
+    background-image: url(../imgs/us/corporateCultureConcept.svg);
     background-repeat: no-repeat;
     background-size:40vw;
     background-position:0vw 50%;  
@@ -260,6 +260,21 @@ html {
    scroll-margin-top: 10vh; 
 }
 
+/* 英文状态下样式 */
+.topBannerLeftTitle p.en:nth-child(1) {
+   font-size: 2vw;
+   letter-spacing: normal;
+   font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
+
+}
+
+.topBannerLeftTitle p.en:nth-child(2) {
+   font-size: 1vw;
+   letter-spacing: normal;
+   font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
+   
+}
+
 
 
 

css/approaching.css

@@ -96,7 +96,7 @@
 }
 .futureList li{
     width: 25%;
-    height: 75%;
+    height: 80%;
     /* background: palegoldenrod; */
     border: 4px solid #00EAEB;
     border-radius: 20px;
@@ -118,11 +118,12 @@
 }
 .futureContent p:nth-child(2){
     font-size: 1.2vw;
-    width: 85%;
+    width: 90%;
     margin: 0 auto;
     margin-top: 2vh;
     text-align: left;
     line-height: 4vh;
+    text-align: justify;
     
 }  
 
@@ -152,3 +153,58 @@
     padding: 1.2vw;
    
 }
+
+/* 英文状态下样式 */
+.topBannerLeftTitle p.en {
+    font-size: 2vw;  
+
+    letter-spacing: normal;
+    left: -3.5vw;
+}
+
+/* .futureList.en li {
+    font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
+    background: rgba(0,236,236,0.06);
+    border-radius: 12px;
+    margin-bottom: 2vw;
+    padding: 2vw 2vw 2vw 2vw;
+    color: #00ECEC;
+    box-shadow: 0 2px 8px rgba(0,236,236,0.08);
+    display: flex;
+    align-items: flex-start;
+    gap: 2vw;
+} */
+
+.futureList.en .futureContent p:nth-child(1) {
+    font-weight: bold;
+    font-size: 1.2vw;  
+    font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
+   
+}
+
+.futureList.en .futureContent p:nth-child(2) {
+    width: 96%;
+    /* font-weight: bold; */
+    font-size: 0.9vw;
+    text-align: left;
+    line-height: 2.7vh;
+    font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
+ 
+   
+}
+
+.futureList.en .futureCircleInner  {
+   font-size: 1vw;
+   
+}
+
+.textOne .Right p.en,
+.textTwo .Right p.en,
+.textThree .Right p.en {
+    font-family: 'Segoe UI', 'Arial', 'Helvetica Neue', sans-serif;
+   
+}
+
+
+
+

css/header.css

@@ -28,38 +28,44 @@
     width: 100%;
     height: 65%;
     display: flex;
-    align-items: start;
+    align-items: center;
-    justify-content: space-between;
+    /* justify-content: space-around; */
     /* background: palegoldenrod; */
 }
 .logo{
-    width: 20%;
+    width: 50%;
     height: 100%;
     display: flex;
     align-items: center;
-    justify-content: center;
+    padding-left: 10vw;
 }
-.logo img{
+.logo img{  
-    width: 3.5vw;
+    width: 4vw;   
     height: auto;
+    max-height: 4vw;
+    display: block;
+    object-fit: contain; /* 保证图片不变形 */
 }
 .header ul{
-    width: 45%;
+    width: auto;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     /* background: palevioletred; */
     margin-left: 5vw;
-    padding-right: 10vw;
+    /* padding-right: 10vw; */
 }
 .header ul li{
-    width: 100%;
+    /* width: 100%; */
+    min-width: 5vw;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.9vw;
+    margin-left: 1vw;
+    /* background: palegreen; */
   
    
 }
@@ -88,3 +94,111 @@
   bottom:  0;
   left: 0;
 }
+.language{
+    /* width: 10%; */
+    /* height: 100%; */
+    /* background: palegoldenrod; */
+    /* line-height:5vh; */
+    padding-bottom: 2vh;
+    border:none;
+    outline: none;
+    cursor: pointer;
+    color: #009FD1;
+    transition: all 0.2s ease;
+    font-weight: 600;
+    font-size: 1vw;
+    background: transparent;
+    margin-left: 1vw;
+    
+}
+.language:hover{
+    color: #fff;
+    text-shadow: 0 0 10px rgba(41, 111, 216, 0.5);
+}
+
+
+/* -------------------- */
+
+/* 语言切换下拉框样式 */
+.lang-dropdown {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    margin-bottom: 2vh;
+    margin-left: 8px;
+}
+
+.lang-btn {
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    color: #ffffff;
+    border: none;
+    cursor: pointer;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 0.8vw;
+    transition: all 0.3s ease;
+    font-weight: 600;
+}
+
+.lang-btn:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.lang-btn img {
+    width: 20px;
+    height: 14px;
+    margin-right: 8px;
+    border-radius: 2px;
+    object-fit: cover;
+}
+
+.lang-btn .arrow {
+    margin-left: 8px;
+    transition: transform 0.3s ease;
+}
+
+.lang-dropdown-content {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 100%; /* 确保设置了这个值 */
+    min-width: 120px;
+    background-color: #ffffff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    z-index: 1000;
+    overflow: hidden;
+}
+
+.lang-dropdown-content.show {
+    display: block;
+    animation: fadeIn 0.2s ease;
+}
+
+.lang-item {
+    display: flex;
+    align-items: center;
+    padding: 10px 12px;
+    color: #333;
+    text-decoration: none;
+    transition: all 0.2s ease;
+}
+
+.lang-item:hover {
+    background-color: #f5f5f5;
+}
+
+.lang-item img {
+    width: 20px;
+    height: 14px;
+    margin-right: 8px;
+    border-radius: 2px;
+    object-fit: cover;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}

css/index.css

@@ -418,7 +418,7 @@ body {
  .bannertop{
     width: 100%;
     height:105vh;
-    background-image: url(../imgs/home/mainBusiness.svg);
+    background-image: url(../imgs/home/mainBusiness.png);
     background-repeat: no-repeat;
     background-size:40vw;
     background-position:0vw 50%;  
@@ -444,7 +444,7 @@ body {
  }
  .textBox p{
     font-size: 1.2vw;
-    line-height: 6vh;
+    line-height: 5vh;
     margin-top: 5vh;
     
  }
@@ -549,7 +549,7 @@ body {
     width: 100%;
     height: 108vh;
     position: relative;
-    background-image: url(../imgs/png/关于我们.png);
+    background-image: url(../imgs/home/aboutUs.png);
     background-repeat: no-repeat;
     background-size:40vw;
     background-position:0vw 50%;
@@ -680,6 +680,25 @@ body {
    
 }
 
+/* 英文样式 */
+.textBox.en {
+   width: 32vw;
+   font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
+
+  }
+.textBox.en h1{
+  font-size: 1.3vw;
+  font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
+
+}
+
+.textBox.en p{
+    font-size: 1.3vw;
+    font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
+  
+  }
+
+
 
 
 

css/mainBusiness.css

@@ -287,4 +287,46 @@
 
 
 
-/* ----------------- */
+/* ----------------- */
+
+/* 英文状态下样式 */
+.topBannerLeft.en{
+    width: 34%;
+}
+.topBannerLeftTitle p:nth-child(1).en
+ {
+    font-size: 1.8vw; 
+  font-weight: 600;
+  letter-spacing: normal; 
+  text-align: left;
+    
+   
+}
+
+.topBannerLeftTitle p:nth-child(2).en{
+    font-size: 1.1vw;
+    letter-spacing: normal;
+    text-align: left;
+    font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
+
+   
+}
+
+/* 英文状态下样式 */
+.bannerBottomList li.en {
+    font-size: 1.1vw;
+   
+    letter-spacing: normal; /* 英文去除字间距 */
+ 
+    /* 其它英文专属样式 */
+}
+
+.bannerBottomList li.en p:nth-child(3) {
+    font-size: 0.9vw;
+  
+    letter-spacing: normal; /* 英文去除字间距 */
+    width: 100%;
+    line-height: 1.7;
+    text-align: left;
+    font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
+}

css/ourProducts.css

@@ -446,3 +446,13 @@ html {
     transform: translateX(10px);
 }
 
+/* 英文状态下样式 */
+#topBannerLeftTitle1.en,
+#topBannerLeftTitle2.en {
+    font-size: 2.3vw; 
+  font-weight: 600;
+  letter-spacing: normal; 
+    
+   
+}
+

css/technicalSupport.css

@@ -20,7 +20,7 @@
     /* background: #00316B; */
     color: #fff;
     position: absolute;
-    top: 5vh;
+    top: 9vh;
     left: 16vw;
 }
 
@@ -146,3 +146,10 @@
     top: 0vh;
     left: 20vw;  
 }
+/* 英文状态下样式 */
+.topBannerLeftTitle p.en:nth-child(1) {
+    font-size: 2vw;
+  
+   
+    letter-spacing: normal;
+}

html/aboutUs.html

@@ -13,31 +13,64 @@
             securityJsCode: 'd7d163684cbe3ea85f182a42cd1b8880',
         }
     </script>
-    <script src="https://webapi.amap.com/maps?v=2.0&key=d8d0391f0356497ccdc1c0f13d4a8c33&callback=initMap"></script>
+    <script src="https://webapi.amap.com/maps?v=2.0&key=d8d0391f0356497ccdc1c0f13d4a8c33&plugin=AMap.Geocoder,AMap.ToolBar,AMap.Scale"></script>    <script src="../js/aboutUs.js"></script>
-    <script src="../js/aboutUs.js"></script>
+    <script src="../js/header.js"></script>
-    <title>深圳汉晶电子信息有限公司</title>
+    <title id="title">深圳汉晶电子信息有限公司</title>
+
 </head>
 <body>
-    <header class="header">
+
+
+     <header class="header">
         <div class="container">
          <div class="logo">
-            <img src="../imgs/svg/logo.svg" alt="logo">
+             <img id="logo-img" src="../imgs/svg/logo.svg" alt="logo">
-
          </div>
          <ul>
-             <li> <a href="../index.html"> 首页</a></li>
+             <li> <a id="nav-home"  href="../index.html"> 首页</a></li>
-             <li> <a href="./mainBusiness.html"> 主营业务</a></li>      
+             <li> <a id="nav-business" href="./mainBusiness.html"> 主营业务</a></li>             
-             <li> <a href="./ourProducts.html"> 产品案例</a></li>
+             <li> <a id="nav-products" href="./ourProducts.html"> 产品案例</a></li>
-             <li> <a href="./technicalSupport.html"> 技术支持</a></li>
+             <li> <a id="nav-support" href="./technicalSupport.html"> 技术支持</a></li>
-             <li> <a href="./approaching.html"> 展望未来</a></li>
+             <li> <a id="nav-future" href="./approaching.html"> 展望未来</a></li>
-             <li> <a class="actives" href="#" style="color: #fff;"> 关于我们</a></li>
+             <li> <a id="nav-about"  class="actives" href="#" style="color: #fff;"> 关于我们</a></li>
          </ul>
+         <!-- <button class="language" id="lang-toggle" aria-label="切换语言" tabindex="0">English</button> -->
+      
+         <div class="lang-dropdown">
+            <button class="lang-btn" id="lang-btn" aria-label="选择语言" tabindex="0">
+                <img id="current-flag" src="../imgs/flags/zh.svg" alt="中文">
+                <span id="current-lang">简体中文</span>
+                <span class="arrow">▼</span>
+            </button>
+            <div class="lang-dropdown-content" id="lang-dropdown">
+                <div class="lang-item" data-lang="zh">
+                    <img src="../imgs/flags/zh.svg" alt="中文">
+                    <span>简体中文</span>
+                </div>
+                <div class="lang-item" data-lang="en">
+                    <img src="../imgs/flags/en.svg" alt="English">
+                    <span>English</span>
+                </div>
+            </div>
+        </div>
+       
+      
+      
+      
         </div>
         <!-- <div class="bg">
-            <img src="../imgs/svg/点纹.svg" alt="背景">
+            <img src="./imgs/svg/点纹.svg" alt="背景">
         </div> -->
+      
      </header>
 
+
+
+
+
+
+
+
      <section class="topBanner">
         <div class="topBannerLeft">
             <div class="topBannerLeftTitle">
@@ -64,7 +97,7 @@
                  </div>
                  <div class="Right">
                     <p>我们的愿景</p>
-                    <p>成为受人尊敬的电子信息科技公司</p>
+                    <p>聚焦高性能芯片设计，打造全球竞争力核心，以技术创新驱动产业升级，引领智能生态新未来。</p>
                  </div>
                  
                </div>
@@ -75,9 +108,8 @@
                   <div class="Right">
                      <p>我们的使命</p>
                      <p>通过在集成电路设计、应用解决方案和人工智能技术的持续创新,
-                        我们提供高可靠、智能的产品和服务，为客户创造价值，让人们
+                        我们提供高可靠、智能的产品和服务，为客户创造价值，让人们的生活更加美好!
-                        我们提供高可靠、
+                     </p>
-                        的生活更加美好!</p>
                   </div>
 
                </div>
@@ -138,8 +170,8 @@
     <footer class="footer" style=" background-color: #020A4C !important;  ">
         <section class="emailBox">
             <div class="emailLeft">
-                <p>我们准备好了</p>
+                <p class="emailLeftTitle">我们准备好了</p>
-                <p>如果您有更多的需求，请联系我们</p>
+                <p class="emailLeftText">如果您有更多的需求，请联系我们</p>
             </div>
             <div class="emailRight">
                <div class="email"  onclick="window.location.href='mailto:fu.bin@hjsilicon.com'">
@@ -153,10 +185,10 @@
 
         <section class="footerBox" >
             <div class="footerBoxLeft">
-                <img src="../imgs/svg/logo.svg" alt="logo">
+                <img id="footerLogo" src="../imgs/svg/logo.svg" alt="logo">
             </div>
             <div class="footerBoxRight">
-                <p>Copyright &copy深圳汉晶电子信息有限公司 &nbsp;&nbsp; <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
+                <p>Copyright &copy <span class="footerBoxRightTitle">深圳汉晶电子信息有限公司</span> &nbsp;&nbsp; <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
 
             </div>
         </section>

html/approaching.html

@@ -8,29 +8,54 @@
     <link rel="stylesheet" href="../css/base.css">
     <link rel="stylesheet" href="../css/footer.css">
     <link rel="stylesheet" href="../css/header.css">
-    <title>深圳汉晶电子信息有限公司</title>
+    <script src="../js/header.js"></script>
+    <script src="../js/approaching.js"></script>
+    <title id="title">深圳汉晶电子信息有限公司</title>
 </head>
 <body>
     <header class="header">
         <div class="container">
          <div class="logo">
-            <img src="../imgs/svg/logo.svg" alt="logo">
+             <img id="logo-img" src="../imgs/svg/logo.svg" alt="logo">
-
          </div>
          <ul>
-             <li> <a href="../index.html"> 首页</a></li>
+             <li> <a  id="nav-home"  href="../index.html"> 首页</a></li>
-             <li> <a href="./mainBusiness.html"> 主营业务</a></li>      
+             <li> <a id="nav-business" href="./mainBusiness.html"> 主营业务</a></li>             
-             <li> <a href="./ourProducts.html"> 产品案例</a></li>
+             <li> <a id="nav-products" href="./ourProducts.html"> 产品案例</a></li>
-             <li> <a href="./technicalSupport.html"> 技术支持</a></li>
+             <li> <a id="nav-support" href="./technicalSupport.html"> 技术支持</a></li>
-             <li> <a class="actives" href="#" style="color: #fff;"> 展望未来</a></li>
+             <li> <a id="nav-future"  class="actives" href="#" style="color: #fff;"> 展望未来</a></li>
-             <li> <a href="./aboutUs.html"> 关于我们</a></li>
+             <li> <a id="nav-about" href="./aboutUs.html"> 关于我们</a></li>
          </ul>
+         <!-- <button class="language" id="lang-toggle" aria-label="切换语言" tabindex="0">English</button> -->
+         <div class="lang-dropdown">
+            <button class="lang-btn" id="lang-btn" aria-label="选择语言" tabindex="0">
+                <img id="current-flag" src="../imgs/flags/zh.svg" alt="中文">
+                <span id="current-lang">简体中文</span>
+                <span class="arrow">▼</span>
+            </button>
+            <div class="lang-dropdown-content" id="lang-dropdown">
+                <div class="lang-item" data-lang="zh">
+                    <img src="../imgs/flags/zh.svg" alt="中文">
+                    <span>简体中文</span>
+                </div>
+                <div class="lang-item" data-lang="en">
+                    <img src="../imgs/flags/en.svg" alt="English">
+                    <span>English</span>
+                </div>
+            </div>
+        </div>
+       
+       
+       
+       
         </div>
         <!-- <div class="bg">
-            <img src="../imgs/svg/点纹.svg" alt="背景">
+            <img src="./imgs/svg/点纹.svg" alt="背景">
         </div> -->
+      
      </header>
 
+
      <section class="topBanner">
         <div class="topBannerLeft">
             <div class="topBannerLeftTitle">
@@ -50,10 +75,10 @@
      <section class="future">
         <ul class="futureList">
             <li>
-                <img class="futureImg" src="../imgs/approaching/ai.png" alt="AI加速芯片">
+                <img class="futureImg" src="../imgs/approaching/ai.png" alt="定制加速芯片">
                 <div class="futureContent">
-                    <p>AI加速芯片</p>
+                    <p>持续迭代与优化</p>
-                    <p>AI芯片在智能硬件、自动驾驶工业互联网、智慧医疗等领域的需求越来越大。我们正在研发支持深度学习加速的定制芯片，助力AI技术的商业化应用。</p>
+                    <p>聚焦定制加速芯片的高效能、低延迟与低功耗优化，支持智能终端、边缘计算和行业应用的多场景落地。持续推进自研IP核、算子优化和软硬件协同设计，提升芯片整体性能与能效比。</p>
                 </div>
                 <div class="futureCircle">
                     <div class="futureCircleInner">
@@ -64,8 +89,8 @@
             <li>
                 <img class="futureImg" src="../imgs/approaching/quantum.png" alt="量子计算芯片">
                 <div class="futureContent"          >
-                    <p>量子计算芯片</p>
+                    <p>从架构到后端全面升级</p>
-                    <p>随着量子计算的不断发展，我们的研发团队正在探索量子计算芯片的设计，致力于开发具有突破性的量子计算硬件平台，为未来的计算革命奠定基础。</p>
+                    <p>面向更极致能效目标，系统性优化芯片架构设计，探索异构计算、任务调度、功耗感知等关键技术。结合后端版图设计与工艺优化，打造具备竞争力的低功耗解决方案，助力智能设备与数据中心应用。</p>
                 </div>
                 <div class="futureCircle">
                     <div class="futureCircleInner">
@@ -74,10 +99,10 @@
                 </div>
             </li>
             <li>
-                <img class="futureImg" src="../imgs/approaching/6g.png" alt="5G/6G通信芯片">
+                <img class="futureImg" src="../imgs/approaching/future.png" alt="低功耗量子计算芯片">
                 <div class="futureContent">
-                    <p>5G/6G通信芯片</p>
+                    <p>面向量产的工程化突破</p>
-                    <p>5G、6G通信技术的普及将进一步推动通信芯片的革新。我 们计划设计更高效、低延迟更强抗干扰能力的通信芯片，支持全球网络的高速连接。</p>
+                    <p>设计出功耗性能更优秀的定制化计算芯片。</p>
                 </div>
                 <div class="futureCircle">
                     <div class="futureCircleInner">
@@ -92,8 +117,8 @@
      <footer class="footer" style=" background-color: #020A4C !important;  ">
         <section class="emailBox">
             <div class="emailLeft">
-                <p>我们准备好了</p>
+                <p class="emailLeftTitle">我们准备好了</p>
-                <p>如果您有更多的需求，请联系我们</p>
+                <p class="emailLeftText">如果您有更多的需求，请联系我们</p>
             </div>
             <div class="emailRight">
                <div class="email"  onclick="window.location.href='mailto:fu.bin@hjsilicon.com'">
@@ -107,10 +132,10 @@
 
         <section class="footerBox" >
             <div class="footerBoxLeft">
-                <img src="../imgs/svg/logo.svg" alt="logo">
+                <img id="footerLogo" src="../imgs/svg/logo.svg" alt="logo">
             </div>
             <div class="footerBoxRight">
-                <p>Copyright &copy深圳汉晶电子信息有限公司 &nbsp;&nbsp; <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
+                <p>Copyright &copy <span class="footerBoxRightTitle">深圳汉晶电子信息有限公司</span> &nbsp;&nbsp; <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
                 <!-- <p>Copyright &copy深圳汉晶电子信息有限公司 版权所有</p> -->
             </div>
         </section>

html/mainBusiness.html

@@ -9,27 +9,51 @@
     <link rel="stylesheet" href="../css/footer.css">
     <link rel="stylesheet" href="../css/header.css">
     <script src="../js/mainBusiness.js"></script>
-    <title>深圳汉晶电子信息有限公司</title>
+    <script src="../js/header.js"></script>
+    <title id="title">深圳汉晶电子信息有限公司</title>
 </head>
 <body>
     <header class="header">
         <div class="container">
          <div class="logo">
-            <img src="../imgs/svg/logo.svg" alt="logo">
+             <img id="logo-img" src="../imgs/svg/logo.svg" alt="logo">
-
          </div>
          <ul>
-             <li> <a href="../index.html"> 首页</a></li>
+             <li> <a  id="nav-home"  href="../index.html"> 首页</a></li>
-             <li> <a class="actives" href="#" style="color: #fff;"> 主营业务</a></li>      
+             <li> <a id="nav-business" href="#"  class="actives" style="color: #fff;"> 主营业务</a></li>             
-             <li> <a href="./ourProducts.html"> 产品案例</a></li>
+             <li> <a id="nav-products" href="./ourProducts.html"> 产品案例</a></li>
-             <li> <a href="./technicalSupport.html"> 技术支持</a></li>
+             <li> <a id="nav-support" href="./technicalSupport.html"> 技术支持</a></li>
-             <li> <a href="./approaching.html"> 展望未来</a></li>
+             <li> <a id="nav-future" href="./approaching.html"> 展望未来</a></li>
-             <li> <a href="./aboutUs.html"> 关于我们</a></li>
+             <li> <a id="nav-about" href="./aboutUs.html"> 关于我们</a></li>
          </ul>
+         <!-- <button class="language" id="lang-toggle" aria-label="切换语言" tabindex="0">English</button> -->
+         <div class="lang-dropdown">
+            <button class="lang-btn" id="lang-btn" aria-label="选择语言" tabindex="0">
+                <img id="current-flag" src="../imgs/flags/zh.svg" alt="中文">
+                <span id="current-lang">简体中文</span>
+                <span class="arrow">▼</span>
+            </button>
+            <div class="lang-dropdown-content" id="lang-dropdown">
+                <div class="lang-item" data-lang="zh">
+                    <img src="../imgs/flags/zh.svg" alt="中文">
+                    <span>简体中文</span>
+                </div>
+                <div class="lang-item" data-lang="en">
+                    <img src="../imgs/flags/en.svg" alt="English">
+                    <span>English</span>
+                </div>
+            </div>
+        </div>
+      
+      
+      
+      
+      
         </div>
         <!-- <div class="bg">
-            <img src="../imgs/svg/点纹.svg" alt="背景">
+            <img src="./imgs/svg/点纹.svg" alt="背景">
         </div> -->
+      
      </header>
 
      <section class="topBanner">
@@ -148,7 +172,7 @@
                 <li class="list bannerBottomListThree">
                     <img class="ListImg" src="../imgs/main/tool.png" alt="优势">
                     <p>技术工具</p>
-                    <p>采用业界公认的可靠的EDA工具链，保证设计功能正确和功耗、面积的准确性。</p>
+                    <p>在采用标准 EDA 工具链的基础上，我们开发了定制化自动脚本，提升设计效率与验证覆盖率。</p>
                 </li>   
                 <li class="list bannerBottomListFour">
                     <img class="ListImg" src="../imgs/main/workmanship.png" alt="优势"> 
@@ -165,8 +189,8 @@
    <footer class="footer" style=" background-color: #020A4C !important;  ">
         <section class="emailBox">
             <div class="emailLeft">
-                <p>我们准备好了</p>
+                <p class="emailLeftTitle">我们准备好了</p>
-                <p>如果您有更多的需求，请联系我们</p>
+                <p class="emailLeftText">如果您有更多的需求，请联系我们</p>
             </div>
             <div class="emailRight">
                <div class="email"  onclick="window.location.href='mailto:fu.bin@hjsilicon.com'">
@@ -180,10 +204,10 @@
 
         <section class="footerBox" >
             <div class="footerBoxLeft">
-                <img src="../imgs/svg/logo.svg" alt="logo">
+                <img id="footerLogo" src="../imgs/svg/logo.svg" alt="logo">
             </div>
             <div class="footerBoxRight">
-                <p>Copyright &copy深圳汉晶电子信息有限公司 &nbsp;&nbsp; <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
+                <p>Copyright &copy <span class="footerBoxRightTitle">深圳汉晶电子信息有限公司</span>&nbsp;&nbsp; <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
 
             </div>
         </section>

html/ourProducts.html

@@ -9,37 +9,61 @@
     <link rel="stylesheet" href="../css/footer.css">
     <link rel="stylesheet" href="../css/header.css">
     <script src="../js/ourProducts.js"></script>
-    <title>深圳汉晶电子信息有限公司</title>
+    <script src="../js/header.js"></script>
+    <title id="title">深圳汉晶电子信息有限公司</title>
 </head>
 <body>
     <header class="header">
         <div class="container">
          <div class="logo">
-             <img src="../imgs/svg/logo.svg" alt="logo">
+             <img id="logo-img" src="../imgs/svg/logo.svg" alt="logo">
          </div>
          <ul>
-            <li> <a href="../index.html"> 首页</a></li>
+             <li> <a id="nav-home"  href="../index.html"> 首页</a></li>
-            <li> <a href="./mainBusiness.html"> 主营业务</a></li>      
+             <li> <a id="nav-business" href="./mainBusiness.html"> 主营业务</a></li>             
-            <li> <a class="actives" href="#" style="color: #fff;"> 产品案例</a></li>
+             <li> <a id="nav-products"  class="actives"  href="#" style="color: #fff;"> 产品案例</a></li>
-            <li> <a href="./technicalSupport.html"> 技术支持</a></li>
+             <li> <a id="nav-support" href="./technicalSupport.html"> 技术支持</a></li>
-            <li> <a href="./approaching.html"> 展望未来</a></li>
+             <li> <a id="nav-future" href="./approaching.html"> 展望未来</a></li>
-            <li> <a href="./aboutUs.html" > 关于我们</a></li>
+             <li> <a id="nav-about" href="./aboutUs.html"> 关于我们</a></li>
-        </ul>
+         </ul>
+         <!-- <button class="language" id="lang-toggle" aria-label="切换语言" tabindex="0">English</button> -->
+      
+         <div class="lang-dropdown">
+            <button class="lang-btn" id="lang-btn" aria-label="选择语言" tabindex="0">
+                <img id="current-flag" src="../imgs/flags/zh.svg" alt="中文">
+                <span id="current-lang">简体中文</span>
+                <span class="arrow">▼</span>
+            </button>
+            <div class="lang-dropdown-content" id="lang-dropdown">
+                <div class="lang-item" data-lang="zh">
+                    <img src="../imgs/flags/zh.svg" alt="中文">
+                    <span>简体中文</span>
+                </div>
+                <div class="lang-item" data-lang="en">
+                    <img src="../imgs/flags/en.svg" alt="English">
+                    <span>English</span>
+                </div>
+            </div>
+        </div>
+       
+       
+       
         </div>
         <!-- <div class="bg">
-            <img src="../imgs/svg/点纹.svg" alt="背景">
+            <img src="./imgs/svg/点纹.svg" alt="背景">
         </div> -->
+      
      </header>
 
      <section class="topBanner">
         <div class="topBannerLeft">
             <div class="topBannerLeftTitle">
-                <p>成功的工艺</p>
+                <p id="topBannerLeftTitle1">成功的工艺</p>
-                <p>与产品案例</p>
+                <p id="topBannerLeftTitle2">与产品案例</p>
             </div>
             <div class="topBannerBth">
                <a href="mailto:fu.bin@hjsilicon.com">
-                <span>联系我们</span>
+                <span class="topBannerBthSpan">联系我们</span>
                 <img src="../imgs/svg/邮箱（白）.svg" alt="邮箱">
                </a>
             </div>
@@ -62,69 +86,69 @@
                     
                     <div class="category-header active">
                         <span class="dot"></span>
-                        <h3>芯片产品</h3>
+                        <h3 class="category-header-title">芯片产品</h3>
                     </div>
                     <div class="category-content show">
-                        <div class="product-item " data-product="YX1000">
+                        <div class="product-item " data-product="Y100">
-                            <img src="../imgs/products/YX1000.png" alt="YX1000服务器芯片">
+                            <img src="../imgs/products/Y100.png" alt="Y100服务器芯片">
-                            <p>YX1000 服务器芯片</p>
+                            <p class="product_item_titleY100">Y100 服务器芯片</p>
                         </div>
-                        <div class="product-item" data-product="KS6PRO">
+                        <div class="product-item" data-product="S6PRO">
-                            <img src="../imgs/products/K6PRO.png" alt="KS6PRO运算加速芯片">
+                            <img src="../imgs/products/K6PRO.png" alt="S6PRO运算加速芯片">
-                            <p>KS6PRO 运算加速芯片</p>
+                            <p class="product_item_titleS6PRO">S6PRO 运算加速芯片</p>
                         </div>
-                        <div class="product-item" data-product="KS1PRO">
+                        <div class="product-item" data-product="S1PRO">
-                            <img src="../imgs/products/KS1PRO.png" alt="KS6PRO运算加速芯片">
+                            <img src="../imgs/products/S1PRO.png" alt="S1PRO运算加速芯片">
-                            <p>KS1PRO 运算加速芯片</p>
+                            <p class="product_item_titleS1PRO">S1PRO 运算加速芯片</p>
                         </div>
                         <div class="product-item" data-product="VV10">
-                            <img src="../imgs/products/VV10.png" alt="KS6PRO运算加速芯片">
+                            <img src="../imgs/products/VV10.png" alt="S6PRO运算加速芯片">
-                            <p>VV10 信息安全芯片</p>
+                            <p class=" product_item_titleVV10">VV10 信息安全芯片</p>
                         </div>
                         <div class="product-item" data-product="FX100">
-                            <img src="../imgs/products/FX100.png" alt="KS6PRO运算加速芯片">
+                            <img src="../imgs/products/FX100.png" alt="S6PRO运算加速芯片">
-                            <p>FX100 MCU芯片</p>
+                            <p class="product_item_titleFX100">FX100 MCU芯片</p>
                         </div>
-                        <div class="product-item" data-product="XYV2">
+                        <!-- <div class="product-item" data-product="XYV2">
-                            <img src="../imgs/products/XYV2.png" alt="KS6PRO运算加速芯片">
+                            <img src="../imgs/products/XYV2.png" alt="S6PRO运算加速芯片">
                             <p>XYV2 红外图像处理芯片</p>
-                        </div>
+                        </div> -->
                         <!-- <div class="product-item" data-product="NAVT1">
-                            <img src="../imgs/products/NAVT1.png" alt="KS6PRO运算加速芯片">
+                            <img src="../imgs/products/NAVT1.png" alt="S6PRO运算加速芯片">
                             <p>NAVT1 自动驾驶视觉处理芯片</p>
                         </div> -->
                         <!-- <div class="product-item" data-product="BIOX1">
-                            <img src="../imgs/products/BIOX1.png" alt="KS6PRO运算加速芯片">
+                            <img src="../imgs/products/BIOX1.png" alt="S6PRO运算加速芯片">
                             <p>BIOX1 指纹识别芯片</p>
                         </div> -->
-                        <div class="product-item" data-product="SND32">
+                        <!-- <div class="product-item" data-product="SND32">
-                            <img src="../imgs/products/SND32.png" alt="KS6PRO运算加速芯片">
+                            <img src="../imgs/products/SND32.png" alt="S6PRO运算加速芯片">
                             <p>SND32 高保真音频处理芯片</p>
-                        </div>
+                        </div> -->
                         <!-- <div class="product-item" data-product="WIFI6-UC">
-                            <img src="../imgs/products/WIFI6-UC.png" alt="KS6PRO运算加速芯片">
+                            <img src="../imgs/products/WIFI6-UC.png" alt="S6PRO运算加速芯片">
                             <p>WIFI6-UC 通信协议芯片</p>
                         </div> -->
-                        <div class="product-item" data-product="AGRO1">
+                        <!-- <div class="product-item" data-product="AGRO1">
-                            <img src="../imgs/products/AGRO1.png" alt="KS6PRO运算加速芯片">
+                            <img src="../imgs/products/AGRO1.png" alt="S6PRO运算加速芯片">
                             <p>AGRO1 农业环境监测芯片</p>
-                        </div>
+                        </div> -->
-                        <div class="product-item" data-product="HEALX2">
+                        <!-- <div class="product-item" data-product="HEALX2">
-                            <img src="../imgs/products/HEALX2.png" alt="KS6PRO运算加速芯片">
+                            <img src="../imgs/products/HEALX2.png" alt="S6PRO运算加速芯片">
                             <p>HEALX2 医疗级心电检测芯片</p>
-                        </div>
+                        </div> -->
-                        <div class="product-item" data-product="INDT5">
+                        <!-- <div class="product-item" data-product="INDT5">
-                            <img src="../imgs/products/INDT5.png" alt="KS6PRO运算加速芯片">
+                            <img src="../imgs/products/INDT5.png" alt="S6PRO运算加速芯片">
                             <p>INDT5 工业机器人控制芯片</p>
-                        </div>
+                        </div> -->
                         <div class="product-item" data-product="GSEC8">
-                            <img src="../imgs/products/GSEC8.png" alt="KS6PRO运算加速芯片">
+                            <img src="../imgs/products/GSEC8.png" alt="S6PRO运算加速芯片">
-                            <p>GSEC8 安全加密芯片</p>
+                            <p class="product_item_titleGSEC8">GSEC8 安全加密芯片</p>
                         </div>
-                        <div class="product-item" data-product="VIDA-M">
+                        <!-- <div class="product-item" data-product="VIDA-M">
-                            <img src="../imgs/products/VIDA-M.png" alt="KS6PRO运算加速芯片">
+                            <img src="../imgs/products/VIDA-M.png" alt="S6PRO运算加速芯片">
                             <p>VIDA-M 微型AI识别芯片</p>
-                        </div>
+                        </div> -->
                     </div>
                 </div>
                 
@@ -132,7 +156,7 @@
                 <div class="product-category">
                     <div class="category-header">
                         <span class="dot"></span>
-                        <h3>其它产品</h3>
+                        <h3 class="OtherProducts">其它产品</h3>
                     </div>
                     <div class="category-content">
                         <!-- 其他产品内容 -->
@@ -142,43 +166,43 @@
         
             <!-- 右侧产品详情 -->
             <div class="product-detail">
-                <div class="detail-content" id="YX1000">
+                <div class="detail-content" id="Y100">
                     <div class="detail-image">
-                        <img src="../imgs/products/YX1000.png" alt="YX1000服务器芯片">
+                        <img src="../imgs/products/Y100.png" alt="Y100服务器芯片">
                     </div>
                     <div class="detail-info">
-                        <h2>YX1000 服务器芯片</h2>
+                        <h2 class="product_item_titleY100">Y100 服务器芯片</h2>
                         <div class="info-list">
                             <!-- <p>客户需求：客户要求为复杂计算且数据安全设计一款高性能低功耗芯片，能够在复杂环境下稳定工作。</p> -->
-                            <p>解决方案：我们通过对客户需求的深度研究，设计了一款集成了高速计算、信号处理单元和数据传输功能的芯片。</p>
+                            <p class="detail_info_textY1001">解决方案：我们通过对客户需求的深度研究，设计了一款集成了高速计算、信号处理单元和数据传输功能的芯片。</p>
-                            <p>技术亮点：采用了定制化的22nm工艺，低功耗设计。</p>
+                            <p class="detail_info_textY1002">技术亮点：采用了定制化的22nm工艺，低功耗设计。</p>
                         </div>
                     </div>
                 </div>        
-                <div class="detail-content" id="KS6PRO" style="display: none;">
+                <div class="detail-content" id="S6PRO" style="display: none;">
                     <div class="detail-image">
-                        <img src="../imgs/products/K6PRO.png" alt="KS6PRO运算加速芯片">
+                        <img src="../imgs/products/K6PRO.png" alt="S6PRO运算加速芯片">
                     </div>
                     <div class="detail-info">
-                        <h2>KS6PRO 运算加速芯片</h2>
+                        <h2 class="product_item_titleS6PRO">S6PRO 运算加速芯片</h2>
                         <div class="info-list">
-                            <!-- <p>客户需求：由于客户业务的急剧扩大，客户希望在KS1PRO基础上出一个性能更强、功耗更低的芯片。</p> -->
+                            <!-- <p>客户需求：由于客户业务的急剧扩大，客户希望在S1PRO基础上出一个性能更强、功耗更低的芯片。</p> -->
-                            <p>解决方案：在KS1PRO芯片的架构基础上进一步优化细节，缩减逻辑资源，节省面积。</p>
+                            <p class="detail_info_textS6PRO1">解决方案：在S1PRO芯片的架构基础上进一步优化细节，缩减逻辑资源，节省面积。</p>
-                            <p>技术亮点：使用了定制化的12nm工艺，集成了多个核心模块，并通过自研AI算法加速模块，提升了AI运算能力。</p>
+                            <p class="detail_info_textS6PRO2">技术亮点：使用了定制化的12nm工艺，集成了多个核心模块。</p>
                         
                         </div>
                     </div>
                 </div>
-                <div class="detail-content" id="KS1PRO" style="display: none;">
+                <div class="detail-content" id="S1PRO" style="display: none;">
                     <div class="detail-image">
-                        <img src="../imgs/products/KS1PRO.png" alt="KS1PRO">
+                        <img src="../imgs/products/S1PRO.png" alt="S1PRO">
                     </div>
                     <div class="detail-info">
-                        <h2>KS1PRO 运算加速芯片</h2>
+                        <h2 class=" product_item_titleS1PRO">S1PRO 运算加速芯片</h2>
                         <div class="info-list">
                             <!-- <p>客户需求：客户需要为云计算服务器设计一款高性能低功耗的SoC，支持AI加速处理。</p> -->
-                            <p>解决方案：我们根据客户的需求设计了一个集成soc和特定加速模块的系统级芯片。通过先进的架构和特定的低功耗设计，确保芯片在性能和功耗上的平衡。</p>
+                            <p class="detail_info_textS1PRO1">解决方案：我们根据客户的需求设计了一个集成soc和特定加速模块的系统级芯片。通过先进的架构和特定的低功耗设计，确保芯片在性能和功耗上的平衡。</p>
-                            <p>技术亮点：使用了定制化的22nm工艺，集成了多个核心模块，并通过自研AI算法加速模块，提升了AI运算能力。</p>
+                            <p class="detail_info_textS1PRO2">技术亮点：使用了定制化的22nm工艺，集成了多个核心模块，并通过自研AI算法加速模块，提升了AI运算能力。</p>
                         
                         </div>
                     </div>
@@ -189,11 +213,11 @@
                         <img src="../imgs/products/VV10.png" alt="VV10">
                     </div>
                     <div class="detail-info">
-                        <h2>VV10 信息安全芯片</h2>
+                        <h2 class="product_item_titleVV10">VV10 信息安全芯片</h2>
                         <div class="info-list">
                             <!-- <p>客户需求：客户需要为云计算服务器设计一款高性能低功耗的加密芯片，支持常规RSA加密算法。</p> -->
-                            <p>解决方案：我们根据客户的需求设计了一个由CPU核心处理器连接外部存储并通过私有总线扩展外设接口，内部包含两个RAM，具备ITCM和DTCM用于指令和数据存储。</p>
+                            <p class="detail_info_textVV101">解决方案：我们根据客户的需求设计了一个由CPU核心处理器连接外部存储并通过私有总线扩展外设接口，内部包含两个RAM，具备ITCM和DTCM用于指令和数据存储。</p>
-                            <p>技术亮点：EAI协处理器接口和AES算法核支持高效加解密运算，RSA算法核由控制、模乘和寄存器堆组成，实现高效RSA算法运算。</p>
+                            <p class="detail_info_textVV102">技术亮点：EAI协处理器接口和AES算法核支持高效加解密运算，RSA算法核由控制、模乘和寄存器堆组成，实现高效RSA算法运算。</p>
                         
                         </div>
                     </div>
@@ -203,29 +227,28 @@
                         <img src="../imgs/products/FX100.png" alt="FX100 MCU芯片">
                     </div>
                     <div class="detail-info">
-                        <h2>FX100 MCU芯片</h2>
+                        <h2 class="product_item_titleFX100">FX100 MCU芯片</h2>
                         <div class="info-list">
                             <!-- <p>客户需求：客户需要为医疗器械设计一款低功耗、多功能MCU芯片。</p> -->
-                            <p>解决方案：我们根据客户的需求设计了一个由两个Master和三个Slave组成，其中，两个Master分别是CPU内核和DMA控制器，三个Slave为内部SRAM，NVM和外设。</p>
+                            <p class="detail_info_textFX1001">解决方案：我们根据客户的需求设计了一个由两个Master和三个Slave组成，其中，两个Master分别是CPU内核和DMA控制器，三个Slave为内部SRAM，NVM和外设。</p>
-                            <p>技术亮点：FX100采用超低功耗休眠模式（μA级别），使得搭载该芯片的医疗器械在外部断电时依然可以通过内置电池继续工作。</p>
+                            <p class="detail_info_textFX1002">技术亮点：FX100采用超低功耗休眠模式（μA级别），使得搭载该芯片的医疗器械在外部断电时依然可以通过内置电池继续工作。</p>
                         
                         </div>
                     </div>
                 </div>
-                <div class="detail-content" id="XYV2" style="display: none;">
+                <!-- <div class="detail-content" id="XYV2" style="display: none;">
                     <div class="detail-image">
                         <img src="../imgs/products/XYV2.png" alt="XYV2">
                     </div>
                     <div class="detail-info">
                         <h2>XYV2 红外图像处理芯片</h2>
                         <div class="info-list">
-                            <!-- <p>客户需求：客户需要为自己品牌的安防系统设计一款高性能、低功耗的红外图像处理芯片。 </p> -->
                             <p>解决方案：我们根据客户的需求设计了一个红外成像器件接收红外辐射生成图像数据；图像增强模块优化图像质量；CPU协调系统运作；DSPs进行图像处理；ROM存储程序代码；通用IO连接外部设备；图像处理加速器完成非均匀校正等；DDR3存储数据；FLASH接口存储系统信息；视频输出显示图像；调试接口用于系统维护。</p>
                             <p>技术亮点：超低功耗可由内置电池供电，支持多种红外成像器件，图像处理速度快，功耗低，支持多种视频输出格式。</p>
                         
                         </div>
                     </div>
-                </div>
+                </div> -->
                 <!-- <div class="detail-content" id="NAVT1" style="display: none;">
                     <div class="detail-image">
                         <img src="../imgs/products/NAVT1.png" alt="NAVT1">
@@ -254,20 +277,19 @@
                         </div>
                     </div>
                 </div> -->
-                <div class="detail-content" id="SND32" style="display: none;">
+                <!-- <div class="detail-content" id="SND32" style="display: none;">
                     <div class="detail-image">
                         <img src="../imgs/products/SND32.png" alt="SND32">
                     </div>
                     <div class="detail-info">
                         <h2>SND32 高保真音频处理芯片</h2>
                         <div class="info-list">
-                            <!-- <p>客户需求：提升耳机或音响设备的音质体验。</p> -->
                             <p>解决方案：集成 DAC/ADC、3D 音效引擎，兼容蓝牙音频协议。</p>
                             <p>技术亮点：支持 192kHz/24bit，低失真率，音频处理延迟极低。</p>
                         
                         </div>
                     </div>
-                </div>
+                </div> -->
                 <!-- <div class="detail-content" id="WIFI6-UC" style="display: none;">
                     <div class="detail-image">
                         <img src="../imgs/products/WIFI6-UC.png" alt="WIFI6-UC">
@@ -282,76 +304,75 @@
                         </div>
                     </div>
                 </div> -->
-                <div class="detail-content" id="AGRO1" style="display: none;">
+                <!-- <div class="detail-content" id="AGRO1" style="display: none;">
                     <div class="detail-image">
                         <img src="../imgs/products/AGRO1.png" alt="AGRO1">
                     </div>
                     <div class="detail-info">
                         <h2>AGRO1 农业环境监测芯片</h2>
                         <div class="info-list">
-                            <!-- <p>客户需求：远程采集农田温湿光等环境信息。</p> -->
+                          
                             <p>解决方案：集成多种传感器与 LoRa 通信模块，太阳能供电支持。</p>
                             <p>技术亮点：超低功耗，传输距离远达 30km，工业级防护设计。</p>
                         
                         </div>
                     </div>
-                </div>
+                </div> -->
-                <div class="detail-content" id="HEALX2" style="display: none;">
+                <!-- <div class="detail-content" id="HEALX2" style="display: none;">
                     <div class="detail-image">
                         <img src="../imgs/products/HEALX2.png" alt="HEALX2">
                     </div>
                     <div class="detail-info">
                         <h2>HEALX2 医疗级心电检测芯片</h2>
                         <div class="info-list">
-                            <!-- <p>客户需求：便携心电检测仪实时采集和远程上传数据。</p> -->
                             <p>解决方案：支持12导联采集、蓝牙传输与噪声滤除处理。</p>
                             <p>技术亮点：高精度ADC，安卓/iOS SDK支持，内置实时预警机制。</p>
                         
                         </div>
                     </div>
-                </div>
+                </div> -->
-                <div class="detail-content" id="INDT5" style="display: none;">
+                <!-- <div class="detail-content" id="INDT5" style="display: none;">
                     <div class="detail-image">
                         <img src="../imgs/products/INDT5.png" alt="INDT5">
                     </div>
                     <div class="detail-info">
                         <h2>INDT5 工业机器人控制芯片</h2>
                         <div class="info-list">
-                            <!-- <p>客户需求：实现高精度机械臂多轴运动控制。</p> -->
+                         
                             <p>解决方案：内置PWM控制、编码器接口与路径预测引擎。</p>
                             <p>技术亮点：控制精度达0.01度，5us 指令周期，支持 EtherCAT。</p>
                         
                         </div>
                     </div>
-                </div>
+                </div> -->
                 <div class="detail-content" id="GSEC8" style="display: none;">
                     <div class="detail-image">
-                        <img src="../imgs/products/GSEC8.png" alt="GSEC8">
+                        <img  src="../imgs/products/GSEC8.png" alt="GSEC8">
                     </div>
                     <div class="detail-info">
-                        <h2>GSEC8 安全加密芯片</h2>
+                        <h2 class="product_item_titleGSEC8">GSEC8 安全加密芯片</h2>
                         <div class="info-list">
                             <!-- <p>客户需求：保障金融终端和智能设备数据安全。</p> -->
-                            <p>解决方案：集成 RSA/ECC 加速器，支持安全启动与防物理攻击。</p>
+                            <p class="detail_info_textGSEC81">解决方案：集成 RSA/ECC 加速器，支持安全启动与防物理攻击。</p>
-                            <p>技术亮点：支持国密算法，具备 CC EAL5+ 认证与 TRNG。</p>
+                            <p class="detail_info_textGSEC82">技术亮点：支持国密算法，具备 CC EAL5+ 认证与 TRNG。</p>
                         
                         </div>
                     </div>
                 </div>
-                <div class="detail-content" id="VIDA-M" style="display: none;">
+                <!-- <div class="detail-content" id="VIDA-M" style="display: none;">
                     <div class="detail-image">
                         <img src="../imgs/products/VIDA-M.png" alt="VIDA-M">
                     </div>
                     <div class="detail-info">
                         <h2>VIDA-M 微型AI识别芯片</h2>
                         <div class="info-list">
-                            <!-- <p>客户需求：摄像头内嵌芯片进行边缘端人脸与车辆识别。</p> -->
+                       
                             <p>解决方案：集成 CNN 加速器，支持模型压缩和 OTA 升级。</p>
                             <p>技术亮点：边缘推理延迟低，功耗仅 100mW，支持多对象识别。</p>
                         
                         </div>
                     </div>
-                </div>
+                </div> -->
 
 
 
@@ -403,8 +424,8 @@
     <footer class="footer" style=" background-color: #020A4C !important;  ">
         <section class="emailBox">
             <div class="emailLeft">
-                <p>我们准备好了</p>
+                <p class="emailLeftTitle">我们准备好了</p>
-                <p>如果您有更多的需求，请联系我们</p>
+                <p class="emailLeftText">如果您有更多的需求，请联系我们</p>
             </div>
             <div class="emailRight">
                <div class="email"  onclick="window.location.href='mailto:fu.bin@hjsilicon.com'">
@@ -418,10 +439,10 @@
 
         <section class="footerBox" >
             <div class="footerBoxLeft">
-                <img src="../imgs/svg/logo.svg" alt="logo">
+                <img id="footerLogo" src="../imgs/svg/logo.svg" alt="logo">
             </div>
             <div class="footerBoxRight">
-                <p>Copyright &copy深圳汉晶电子信息有限公司 &nbsp;&nbsp; <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
+                <p>Copyright &copy <span class="footerBoxRightTitle">深圳汉晶电子信息有限公司</span></span> &nbsp;&nbsp; <a class="record" href="https://beian.miit.gov.cn/"> <span class="recordTitle">粤ICP备2025405650号</span></a></p>
 
                 <!-- <p>Copyright &copy深圳汉晶电子信息有限公司 版权所有</p> -->
             </div>

html/technicalSupport.html

@@ -8,28 +8,52 @@
     <link rel="stylesheet" href="../css/base.css">
     <link rel="stylesheet" href="../css/footer.css">
     <link rel="stylesheet" href="../css/header.css">
-    <title>深圳汉晶电子信息有限公司</title>
+    <script src="../js/header.js"></script>
+    <script src="../js/technicalSupport.js"></script>
+    <title id="title">深圳汉晶电子信息有限公司</title>
 </head>
 <body>
     <header class="header">
         <div class="container">
          <div class="logo">
-            <img src="../imgs/svg/logo.svg" alt="logo">
+             <img id="logo-img" src="../imgs/svg/logo.svg" alt="logo">
-
          </div>
          <ul>
-             <li> <a href="../index.html"> 首页</a></li>
+             <li> <a  id="nav-home"  href="../index.html"> 首页</a></li>
-             <li> <a href="./mainBusiness.html"> 主营业务</a></li>      
+             <li> <a id="nav-business" href="./mainBusiness.html"> 主营业务</a></li>             
-             <li> <a href="./ourProducts.html"> 产品案例</a></li>
+             <li> <a id="nav-products" href="./ourProducts.html"> 产品案例</a></li>
-             <li> <a class="actives" href="#" style="color: #fff;"> 技术支持</a></li>
+             <li> <a id="nav-support" class="actives" href="#" style="color: #fff;"> 技术支持</a></li>
-             <li> <a href="./approaching.html"> 展望未来</a></li>
+             <li> <a id="nav-future" href="./approaching.html"> 展望未来</a></li>
-             <li> <a href="./aboutUs.html"> 关于我们</a></li>
+             <li> <a id="nav-about" href="./aboutUs.html"> 关于我们</a></li>
          </ul>
+         <!-- <button class="language" id="lang-toggle" aria-label="切换语言" tabindex="0">English</button> -->
+         <div class="lang-dropdown">
+            <button class="lang-btn" id="lang-btn" aria-label="选择语言" tabindex="0">
+                <img id="current-flag" src="../imgs/flags/zh.svg" alt="中文">
+                <span id="current-lang">简体中文</span>
+                <span class="arrow">▼</span>
+            </button>
+            <div class="lang-dropdown-content" id="lang-dropdown">
+                <div class="lang-item" data-lang="zh">
+                    <img src="../imgs/flags/zh.svg" alt="中文">
+                    <span>简体中文</span>
+                </div>
+                <div class="lang-item" data-lang="en">
+                    <img src="../imgs/flags/en.svg" alt="English">
+                    <span>English</span>
+                </div>
+            </div>
+        </div>
+       
+     
+     
         </div>
         <!-- <div class="bg">
-            <img src="../imgs/svg/点纹.svg" alt="背景">
+            <img src="./imgs/svg/点纹.svg" alt="背景">
         </div> -->
+      
      </header>
+
      <section class="topBanner">
         <div class="topBannerLeft">
             <div class="topBannerLeftTitle">
@@ -85,8 +109,8 @@
     <footer class="footer" style=" background-color: #020A4C !important;  ">
         <section class="emailBox">
             <div class="emailLeft">
-                <p>我们准备好了</p>
+                <p class="emailLeftTitle">我们准备好了</p>
-                <p>如果您有更多的需求，请联系我们</p>
+                <p class="emailLeftText">如果您有更多的需求，请联系我们</p>
             </div>
             <div class="emailRight">
                <div class="email"  onclick="window.location.href='mailto:fu.bin@hjsilicon.com'">
@@ -100,10 +124,10 @@
 
         <section class="footerBox" >
             <div class="footerBoxLeft">
-                <img src="../imgs/svg/logo.svg" alt="logo">
+                <img id="footerLogo" src="../imgs/svg/logo.svg" alt="logo">
             </div>
             <div class="footerBoxRight">
-                <p>Copyright &copy深圳汉晶电子信息有限公司 &nbsp;&nbsp; <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
+                <p>Copyright &copy <span class="footerBoxRightTitle">深圳汉晶电子信息有限公司</span> &nbsp;&nbsp; <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
                 <!-- <p>Copyright &copy深圳汉晶电子信息有限公司 版权所有</p> -->
             </div>
         </section>

imgs/flags/zh.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746690536424" class="icon" viewBox="0 0 1536 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7258" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200"><path d="M0 0h1536v1024H0z" fill="#D8231D" p-id="7259"></path><path d="M626.7392 261.5808a165.4784 165.4784 0 0 1 14.3872 14.0288l14.2848 15.0016 36.608-17.664a163.84 163.84 0 0 1-8.96 18.432c-3.072 6.0416-6.2976 11.9808-9.5232 18.176l28.8768 30.0032a25.6 25.6 0 0 1-3.072 0l-34.9184-6.5536c-3.3792-0.6144-3.3792-0.512-5.12 2.6112l-16.1792 30.72-1.9456 3.2256-1.2288-8.2944c-1.536-10.24-2.9184-20.48-4.3008-30.72-0.4096-2.4576-0.4096-2.5088-2.9184-3.0208l-35.84-6.5536a5.12 5.12 0 0 1-1.8432-0.7168c5.9904-3.3792 12.1344-6.144 18.176-9.1136l18.5344-8.9088-5.12-40.3968zM502.016 170.6496l0.6144-0.512 37.3248 15.36 26.7264-31.6416v4.3008l-2.304 33.9456c0 3.3792 0 3.3792 2.9184 4.608l32.7168 13.2096c0.768 0 1.3824 0.6144 2.7136 1.1776l-3.072 1.0752-34.56 8.448c-2.9184 0.6144-2.9184 0.6144-3.1744 3.6864l-2.4576 37.0176-0.3072 1.8432-2.0992-3.2256c-6.144-9.8304-12.288-19.712-18.5856-29.5424-1.6896-2.7648-1.792-2.7648-5.12-1.8944l-34.2016 8.3456-2.9184 0.5632c9.0624-10.9056 17.8176-21.1968 26.7264-31.7952l-21.0432-34.6112z m-63.488 144.0768L357.5808 374.4768l-1.9968 1.4848c-2.304 1.792-2.304 1.792-1.3824 4.6592l22.1184 67.584 10.24 31.4368 0.768 2.5088h-0.6144l-1.792-1.2288-86.016-62.976-0.768-0.4608h-0.7168L209.0496 482.4576l-0.6144-0.4608 33.5872-105.0112-88.4736-64.3584v-0.768h105.3184c4.608 0 3.84 0.5632 5.12-3.84l32.256-96.2048a9.472 9.472 0 0 1 1.6896-3.2768l33.536 103.2704c6.0416 0.3072 12.1344 0 18.1248 0h91.4432v0.6656z m161.2288 253.9008l-34.2528 8.2944-3.2256 0.9216-2.816 41.6768-1.9968-2.816-18.7392-29.7984c-1.792-2.816-1.8432-2.816-5.12-2.048l-34.1504 8.448-3.072 0.512 26.7776-31.8464-21.0432-34.56 0.4096-0.512c6.3488 2.1504 12.4416 5.12 18.688 7.424l18.8928 7.68 26.2144-31.1296h0.512v3.4816l-2.304 33.8432v1.2288a2.56 2.56 0 0 0 1.9968 3.1744l14.1312 5.6832 19.6608 7.8848 2.7136 1.1264-3.2256 1.0752z m99.1744-122.4704l-27.0336 21.0432c-2.6624 2.048-2.6624 2.048-1.536 5.12l11.6736 32.6144a6.4512 6.4512 0 0 1 0.3584 3.2256l-33.792-23.3984-32.4608 25.1904-0.512-0.4096 11.4176-39.4752-33.4848-23.04v-0.768c13.4144-0.6656 26.88-0.512 40.704-1.28l11.8272-38.8096h0.512l1.2288 3.072 11.52 32.3584c1.024 2.9184 1.024 2.9184 4.096 2.816l34.2528-1.024h3.2256v0.6144z" fill="#FFFA30" p-id="7260"></path></svg>

index.html

@@ -10,26 +10,48 @@
     <link rel="stylesheet" href="./css/header.css">
 
 
-    <title>深圳汉晶电子信息有限公司</title>
+    <title class="title">深圳汉晶电子信息有限公司</title>
 </head>
 <body class="body">
     <header class="header">
         <div class="container">
          <div class="logo">
-             <img src="./imgs/svg/logo.svg" alt="logo">
+             <img id="logo-img" src="./imgs/svg/logo.svg" alt="logo">
          </div>
          <ul>
-             <li> <a class="actives" href="#" style="color: #fff;"> 首页</a></li>
+             <li> <a class="actives" id="nav-home"  href="#" style="color: #fff;"> 首页</a></li>
-             <li> <a href="./html/mainBusiness.html"> 主营业务</a></li>             
+             <li> <a id="nav-business" href="./html/mainBusiness.html"> 主营业务</a></li>             
-             <li> <a href="./html/ourProducts.html"> 产品案例</a></li>
+             <li> <a id="nav-products" href="./html/ourProducts.html"> 产品案例</a></li>
-             <li> <a href="./html/technicalSupport.html"> 技术支持</a></li>
+             <li> <a id="nav-support" href="./html/technicalSupport.html"> 技术支持</a></li>
-             <li> <a href="./html/approaching.html"> 展望未来</a></li>
+             <li> <a id="nav-future" href="./html/approaching.html"> 展望未来</a></li>
-             <li> <a href="./html/aboutUs.html"> 关于我们</a></li>
+             <li> <a id="nav-about" href="./html/aboutUs.html"> 关于我们</a></li>
          </ul>
+         <!-- <button class="language" id="lang-toggle" aria-label="切换语言" tabindex="0">English</button> -->
+         <div class="lang-dropdown">
+            <button class="lang-btn" id="lang-btn" aria-label="选择语言" tabindex="0">
+                <img id="current-flag" src="./imgs/flags/zh.svg" alt="中文">
+                <span id="current-lang">简体中文</span>
+                <span class="arrow">▼</span>
+            </button>
+            <div class="lang-dropdown-content" id="lang-dropdown">
+                <div class="lang-item" data-lang="zh">
+                    <img src="./imgs/flags/zh.svg" alt="中文">
+                    <span>简体中文</span>
+                </div>
+                <div class="lang-item" data-lang="en">
+                    <img src="./imgs/flags/en.svg" alt="English">
+                    <span>English</span>
+                </div>
+            </div>
+        </div>
+      
+      
+      
         </div>
         <!-- <div class="bg">
             <img src="./imgs/svg/点纹.svg" alt="背景">
         </div> -->
+      
      </header>
 
  
@@ -53,19 +75,19 @@
                 <div class="carousel-list">
                     <!-- 第一张图片 - 左侧按钮 -->
                     <div class="carousel-item">
-                        <img src="./imgs/home/YX1000.jpg" alt="YX1000">
+                        <img id="Y100" src="./imgs/home/Y100.jpg" alt="Y100">
                         <div class="product-detail-btn left">
-                            <a href="./html/ourProducts.html" class="detail-link">
+                            <a href="./html/ourProducts.html" class="detail-link">                               
-                                <span>产品详情</span>                              
+                                <span class="carouselText">产品详情</span>                                  
                             </a>
                         </div>
                     </div>
                     <!-- 第二张图片 - 右侧按钮 -->
                     <div class="carousel-item">
-                        <img src="./imgs/home/KS6PRO.jpg" alt="KS6PRO">
+                        <img id="carousel2" src="./imgs/home/S6PRO.jpg" alt="S6PRO">
                         <div class="product-detail-btn right">
                             <a href="./html/ourProducts.html" class="detail-link">
-                                <span>产品详情</span>                            
+                                <span class="carouselText" >产品详情</span>                            
                             </a>
                         </div>
                     </div>
@@ -85,22 +107,22 @@
      <section class="banner">
 
         <div class="bannerBottom2">
-            <h1>为什么选择汉晶?</h1>
+            <h1 class="bannerBottom2Title">为什么选择汉晶?</h1>
             <ul class="bannerBottomList">
                 <li class="bannerBottomListOne">
                     <p></p> 
-                    <p> IC设计全生命周期一站式覆盖 </p>
+                    <p class="bannerBottomListOneTitle"> IC设计全生命周期一站式覆盖 </p>
                 </li>
                 <li class="bannerBottomListTwo">
-                    <p>独特的低功耗设计，让芯片更有竞争力</p>
+                    <p class="bannerBottomListTwoTitle">独特的低功耗设计，让芯片更有竞争力</p>
                     <p></p>
                 </li>
                 <li class="bannerBottomListThree">
                     <p></p>
-                    <p>有稳定的芯片制造商合作关系</p>
+                    <p class="bannerBottomListThreeTitle">有稳定的芯片制造商合作关系</p>
                 </li>
                 <li class="bannerBottomListFour">
-                    <p>流片均一版成功，即流片成功率100%,助力客户赢得市场</p>
+                    <p class="bannerBottomListFourTitle">流片均一版成功，即流片成功率100%,助力客户赢得市场</p>
                     <p></p>
                 </li>
               
@@ -112,8 +134,8 @@
 
          <div class="bannertop">
             <div class="textBox">
-                <h1>芯片设计技术服务</h1>
+                <h1 class="bannertopTitle">芯片设计技术服务</h1>
-                <p>我们公司提供全方位的芯片设计技术服务，涵盖从需求讨论、系统设计、逻辑设计、FPGA原型验证到最终的芯片制造、测试与验证等各个环节。我们采用行业领先的工具和技术，确保芯片的性能、功耗、稳定性都能满足客户需求。</p>
+                <p class="bannertopText">我们公司提供全方位的芯片设计技术服务，涵盖从需求讨论、系统设计、逻辑设计、FPGA原型验证到最终的芯片制造、测试与验证等各个环节。我们采用行业领先的工具和技术，确保芯片的性能、功耗、稳定性都能满足客户需求。</p>
                
             </div>
          </div>
@@ -123,16 +145,16 @@
                 <div class="bannerletf">
                     <img src="./imgs/png/chip.png" alt="芯片">
                     <div class="bannerletfText">
-                        <p>YX1000 服务器芯片</p>
+                        <p class="bannerletfTextTitle">Y100 服务器芯片</p>
-                        <a href="/html/ourProducts.html?product=YX1000">产品详情</a>
+                        <a class="carouselText" href="/html/ourProducts.html?product=Y100">产品详情</a>
                     </div>
                 </div>
                 <div class="bannerRight">
 
-                    <img src="./imgs/home/KS6PRO.png" alt="KS6PRO">
+                    <img src="./imgs/home/S6PRO.png" alt="S6PRO.">
                     <div class="bannerletfText">
-                        <p>KS6PRO 运算加速芯片</p>
+                        <p class="bannerletfTextTitle" id="bannerletfTextTitle2">S6PRO 运算加速芯片</p>
-                        <a href="./html/ourProducts.html?product=KS6PRO">产品详情</a>
+                        <a class="carouselText" href="./html/ourProducts.html?product=S6PRO">产品详情</a>
                     </div>
                 </div>
          </div>
@@ -140,17 +162,17 @@
 
             <div class="bannerBottomText">
                <div class="top2">
-                <h1>我们的目标</h1>
+                <h1 class="bannerBottomTextTitle">我们的目标</h1>
-                <p>汇聚人才，共同创造突破性技术，为更加智能、更加安全、更有保障的科技世界保驾护航。</p>
+                <p class="bannerBottomTextText">汇聚人才，共同创造突破性技术，为更加智能、更加安全、更有保障的科技世界保驾护航。</p>
                </div>
                <div class="newBottom">
-                    <h1>研发团队</h1>
+                    <h1 class="newBottomTitle">研发团队</h1>
                     <div class="teamBox">
                         <img class="teamImg" src="./imgs/home/team.png" alt="团队">
                         <div>
                             <!-- <p  class="perCent2" data-target="100">0%</p> -->
                             <p>100%</p>
-                            <p>研究生学历</p>
+                            <p class="newBottomText">研究生学历</p>
                           
                         </div>
                     </div>
@@ -178,8 +200,8 @@
      <footer class="footer">
         <section class="emailBox">
             <div class="emailLeft">
-                <p>我们准备好了</p>
+                <p class="emailLeftTitle">我们准备好了</p>
-                <p>如果您有更多的需求，请联系我们</p>
+                <p class="emailLeftText">如果您有更多的需求，请联系我们</p>
             </div>
             <div class="emailRight">
                <div class="email"  onclick="window.location.href='mailto:fu.bin@hjsilicon.com'">
@@ -193,10 +215,10 @@
 
         <section class="footerBox">
             <div class="footerBoxLeft">
-                <img src="./imgs/svg/logo.svg" alt="logo">
+                <img id="footerLogo" src="./imgs/svg/logo.svg" alt="logo">
             </div>
             <div class="footerBoxRight">
-                <p>Copyright &copy深圳汉晶电子信息有限公司 &nbsp;&nbsp; <a class="record" href="https://beian.miit.gov.cn/">粤ICP备2025405650号</a></p>
+                <p > Copyright &copy<span class="footerBoxRightTitle">深圳汉晶电子信息有限公司</span> &nbsp;&nbsp; <a class="record" href="https://beian.miit.gov.cn/"> <span class="recordTitle">粤ICP备2025405650号</span></a></p>
 
                 <!-- <p>Copyright &copy深圳汉晶电子信息有限公司 版权所有</p> -->
             </div>

js/aboutUs.js

@@ -1,23 +1,89 @@
+// 将地图相关的变量和函数提升到全局作用域
+let map = null;
+let marker = null;
+let infoWindow = null;
+
+// 地图数据配置
+const mapData = {
+    address: {
+        zh: '广东省深圳市南山区粤海街道麻岭社区麻雀岭工业区M-6栋中钢大厦5A010',
+        en: 'A010, 5th Floor, Zhonggang Building, Block M-6, Maqueling Industrial Zone, Maling Community, Yuehai Street, Nanshan District, Shenzhen, Guangdong Province, China'
+    },
+    companyName: {
+        zh: '深圳汉晶电子信息有限公司',
+        en: 'SZHJ Electronic Information Co., Ltd'
+    },
+    phone:{
+        zh: '13420976989',
+        en: '+86 13420976989'
+    },
+   
+    contactInfo: {
+        zh: {
+            address: '地址',
+            phone: '电话',
+            email: '邮箱'
+        },
+        en: {
+            address: 'Address',
+            phone: 'Phone',
+            email: 'Email'
+        }
+    }
+};
+
+// 创建信息窗体内容
+function createInfoWindowContent(lang) {
+    return `
+        <div class="info-content" style="padding: 15px;">
+            <h4 style="margin: 0 0 10px 0; color: #100B4E; font-size: 16px;">${mapData.companyName[lang]}</h4>
+            <p style="margin: 0 0 8px 0; font-size: 13px;color: #100B4E;">
+                <strong>${mapData.contactInfo[lang].address}：</strong>${mapData.address[lang]}
+            </p>
+            <p style="margin: 0 0 8px 0; font-size: 13px; color: #100B4E;">
+                <strong>${mapData.contactInfo[lang].phone}：</strong>${mapData.phone[lang]}
+            </p>
+            <p style="margin: 0; font-size: 13px; color: #100B4E;">
+                <strong>${mapData.contactInfo[lang].email}：</strong>fu.bin@hjsilicon.com
+            </p>
+        </div>
+    `;
+}
+
+// 更新地图信息
+function updateMapInfo(lang) {
+    if (marker && infoWindow) {
+        // 更新标记标题
+        marker.setTitle(mapData.companyName[lang]);
+        
+        // 更新信息窗体内容
+        infoWindow.setContent(createInfoWindowContent(lang));
+        
+        // 如果信息窗体是打开状态，重新打开以更新内容
+        if (infoWindow.getIsOpen()) {
+            infoWindow.open(map, marker.getPosition());
+        }
+    }
+}
+
+// 初始化地图
 function initAMap() {
     try {
-        // 更新为完整地址
+        // 获取当前语言
-        const address = '广东省深圳市南山区粤海街道麻岭社区麻雀岭工业区M-6栋中钢大厦5A010';
+        const currentLang = window.currentLang || localStorage.getItem('siteLang') || "zh";
-        const companyName = '深圳汉晶电子信息有限公司';
         
-        // 创建地图实例
+        // 先加载所需插件
-        let map = null;
+        AMap.plugin(['AMap.Geocoder', 'AMap.ToolBar', 'AMap.Scale'], function() {
-        
-        // 地址解析
-        AMap.plugin('AMap.Geocoder', function() {
             const geocoder = new AMap.Geocoder({
                 city: "深圳",
                 radius: 1000
             });
             
-            geocoder.getLocation(address, function(status, result) {
+            geocoder.getLocation(mapData.address.zh, function(status, result) {
                 if (status === 'complete' && result.info === 'OK') {
                     const lnglat = result.geocodes[0].location;
                     
+                    // 创建地图实例
                     map = new AMap.Map('mapContainer', {
                         zoom: 16,
                         center: [lnglat.lng, lnglat.lat],
@@ -27,35 +93,19 @@ function initAMap() {
                         mapStyle: 'amap://styles/normal'
                     });
                     
-                    // 更新标记信息
+                    // 创建标记
-                    const marker = new AMap.Marker({
+                    marker = new AMap.Marker({
                         position: [lnglat.lng, lnglat.lat],
-                        title: companyName,
+                        title: mapData.companyName[currentLang],
                         animation: 'AMAP_ANIMATION_DROP',
                         offset: new AMap.Pixel(-13, -30)
                     });
                     
                     map.add(marker);
                     
-                    // 更新信息窗体内容
-                    const content = `
-                        <div class="info-content" style="padding: 15px;">
-                            <h4 style="margin: 0 0 10px 0; color: #100B4E; font-size: 16px;">${companyName}</h4>
-                            <p style="margin: 0 0 8px 0; font-size: 13px;color: #100B4E;">
-                                <strong>地址：</strong>${address}
-                            </p>
-                            <p style="margin: 0 0 8px 0; font-size: 13px; color: #100B4E;">
-                                <strong>电话：</strong>13420976989
-                            </p>
-                            <p style="margin: 0; font-size: 13px; color: #100B4E;">
-                                <strong>Email：</strong>fu.bin@hjsilicon.com
-                            </p>
-                        </div>
-                    `;
-                    
                     // 创建信息窗体
-                    const infoWindow = new AMap.InfoWindow({
+                    infoWindow = new AMap.InfoWindow({
-                        content: content,
+                        content: createInfoWindowContent(currentLang),
                         offset: new AMap.Pixel(0, -30),
                         closeWhenClickMap: true
                     });
@@ -87,23 +137,247 @@ function initAMap() {
                     });
                 } else {
                     console.error('地址解析失败:', result);
-                    document.getElementById('mapContainer').innerHTML = 
+                    const mapContainer = document.getElementById('mapContainer');
-                        '<div style="text-align:center;padding:20px;color:#f00;">地址定位失败，请刷新重试</div>';
+                    if (mapContainer) {
+                        mapContainer.innerHTML = 
+                            '<div style="text-align:center;padding:20px;color:#f00;">地址定位失败，请刷新重试</div>';
+                    }
                 }
             });
         });
     } catch (error) {
         console.error('地图初始化失败:', error);
-        document.getElementById('mapContainer').innerHTML = 
+        const mapContainer = document.getElementById('mapContainer');
-            '<div style="text-align:center;padding:20px;color:#f00;">地图加载失败，请刷新重试</div>';
+        if (mapContainer) {
+            mapContainer.innerHTML = 
+                '<div style="text-align:center;padding:20px;color:#f00;">地图加载失败，请刷新重试</div>';
+        }
     }
 }
 
 // DOM加载完成时初始化
 document.addEventListener('DOMContentLoaded', function() {
+    const langData = {
+        zh: {
+            btn: "English",
+            logo: "../imgs/svg/logo.svg",
+            title: "深圳汉晶电子信息有限公司",
+            // 顶部
+            topBannerTitle: "公司介绍",
+            topBannerDesc: "我们是一家专注于集成电路设计的高科技公司,致力于为客户提供从芯片设计到量产的全流程服务。我们的团队拥有丰富的行业经验，采用最先进的工具和技术，为客户提供高品质的芯片解决方案。我们始终坚持以客户为中心，以技术为驱动，致力于推动集成电路行业的创新与发展。",
+            // 愿景/使命/价值观
+            visionTitle: "我们的愿景",
+            visionDesc: "聚焦高性能芯片设计，打造全球竞争力核心，以技术创新驱动产业升级，引领智能生态新未来。",
+            missionTitle: "我们的使命",
+            missionDesc: "通过在集成电路设计、应用解决方案和人工智能技术的持续创新,我们提供高可靠、智能的产品和服务，为客户创造价值，让人们的生活更加美好!",
+            valueTitle: "我们的核心价值观",
+            valueDesc: "客户至上、艰苦奋斗、创新卓越、合作共赢",
+            emailLeftTitle: "我们准备好了",
+            emailLeftText: "如果您有更多的需求，请联系我们",
+            bannertopBG: "../imgs/us/corporateCultureConcept.svg",
+        },
+        en: {
+            btn: "简体中文",
+            logo: "../imgs/svg/logo_en.svg",
+            title: "SZHJ Electronic Information Co., Ltd",
+            // 顶部
+            topBannerTitle: "Company Introduction",
+            topBannerDesc: "We are a high-tech company focused on integrated circuit design, dedicated to providing customers with full-process services from chip design to mass production. Our team has extensive industry experience and uses the most advanced tools and technologies to provide customers with high-quality chip solutions. We always adhere to a customer-centric and technology-driven approach, committed to promoting innovation and development in the integrated circuit industry.",
+            // 愿景/使命/价值观
+            visionTitle: "Our Vision",
+            visionDesc: "Focus on high-performance chip design, build globally competitive cores, drive industrial upgrading with technological innovation, and lead the new future of the intelligent ecosystem.",
+            missionTitle: "Our Mission",
+            missionDesc: "Through continuous innovation in integrated circuit design, application solutions, and artificial intelligence technology, we provide highly reliable and intelligent products and services, create value for customers, and make people's lives better!",
+            valueTitle: "Our Core Values",
+            valueDesc: "Customer First, Hard Work, Excellence in Innovation, Win-Win Cooperation",
+            emailLeftTitle: "We're ready.",
+            emailLeftText: "If you have more needs, please contact us!",
+            bannertopBG: "../imgs/us/corporateCultureConcept_en.svg",
+        }   
+    };
+
+    // 使用全局的 currentLang
+    if (!window.currentLang) {
+        window.currentLang = localStorage.getItem('siteLang') || "zh";
+    }
+    
+    // 语言显示更新函数
+    function updateLanguageDisplay(lang) {
+        const currentFlag = document.getElementById('current-flag');
+        const currentLangText = document.getElementById('current-lang');
+        
+        if (currentFlag && currentLangText) {
+            if (lang === 'en') {
+                currentFlag.src = '../imgs/flags/en.svg';
+                currentLangText.textContent = 'English';
+            } else {
+                currentFlag.src = '../imgs/flags/zh.svg';
+                currentLangText.textContent = '简体中文';
+            }
+        }
+    }
+
+    function applyLang(lang) {
+        const data = langData[lang];
+
+        // logo
+        // const logoImg = document.getElementById("logo-img");
+        // if (logoImg) logoImg.src = data.logo;
+        
+        // const footerLogo = document.getElementById("footerLogo");
+        // if (footerLogo) footerLogo.src = data.logo;
+
+        // 页面标题
+        document.title = data.title;
+        
+        const footerBoxRightTitle = document.querySelector(".footerBoxRightTitle");
+        if (footerBoxRightTitle) footerBoxRightTitle.textContent = data.title;
+
+        // 顶部标题和描述
+        const topBannerTitle = document.querySelector('.topBannerLeftTitle p:nth-child(1)');
+        if (topBannerTitle) topBannerTitle.textContent = data.topBannerTitle;
+        
+        const topBannerDesc = document.querySelector('.topBannerLeftTitle p:nth-child(2)');
+        if (topBannerDesc) topBannerDesc.textContent = data.topBannerDesc;
+
+        // 愿景
+        const visionTitle = document.querySelector('.textOne .Right p:nth-child(1)');
+        if (visionTitle) visionTitle.textContent = data.visionTitle;
+        
+        const visionDesc = document.querySelector('.textOne .Right p:nth-child(2)');
+        if (visionDesc) visionDesc.textContent = data.visionDesc;
+
+        // 使命
+        const missionTitle = document.querySelector('.textTwo .Right p:nth-child(1)');
+        if (missionTitle) missionTitle.textContent = data.missionTitle;
+        
+        const missionDesc = document.querySelector('.textTwo .Right p:nth-child(2)');
+        if (missionDesc) missionDesc.textContent = data.missionDesc;
+
+        // 价值观
+        const valueTitle = document.querySelector('.textThree .Right p:nth-child(1)');
+        if (valueTitle) valueTitle.textContent = data.valueTitle;
+        
+        const valueDesc = document.querySelector('.textThree .Right p:nth-child(2)');
+        if (valueDesc) valueDesc.textContent = data.valueDesc;
+
+        // 邮箱区
+        const emailLeftTitle = document.querySelector(".emailLeftTitle");
+        if (emailLeftTitle) emailLeftTitle.textContent = data.emailLeftTitle;
+        
+        const emailLeftText = document.querySelector(".emailLeftText");
+        if (emailLeftText) emailLeftText.textContent = data.emailLeftText;
+
+        // 背景图片
+        const bannertop = document.querySelector('.bannertop');
+        if (bannertop) bannertop.style.backgroundImage = `url(${data.bannertopBG})`;
+
+        // 英文样式调整
+        const visionPs = document.querySelectorAll('.textOne .Right p');
+        const missionPs = document.querySelectorAll('.textTwo .Right p');
+        const valuePs = document.querySelectorAll('.textThree .Right p');
+        
+        if (visionPs && missionPs && valuePs) {
+            const allPs = [...visionPs, ...missionPs, ...valuePs];
+        
+            if (lang === 'en') {
+                if (topBannerTitle) topBannerTitle.classList.add('en');
+                if (topBannerDesc) topBannerDesc.classList.add('en');
+                allPs.forEach(p => p.classList.add('en'));
+            } else {
+                if (topBannerTitle) topBannerTitle.classList.remove('en');
+                if (topBannerDesc) topBannerDesc.classList.remove('en');
+                allPs.forEach(p => p.classList.remove('en'));
+            }
+        }
+        
+        // 更新地图信息
+        updateMapInfo(lang);
+        
+        // 更新语言显示
+        updateLanguageDisplay(lang);
+    }
+
+    // 修正的handleLangToggle函数，正确接收lang参数
+    function handleLangToggle(lang) {
+        window.currentLang = lang;
+        localStorage.setItem('siteLang', window.currentLang);
+        applyLang(window.currentLang);
+        updateLanguageDisplay(window.currentLang);
+    }
+    
+    // 初始化语言和地图
+    applyLang(window.currentLang);
+    updateLanguageDisplay(window.currentLang);
+    
     if (typeof AMap !== 'undefined') {
         initAMap();
     }
+
+    // 获取语言切换相关的DOM元素
+    const langBtn = document.getElementById('lang-btn');
+    const langDropdown = document.getElementById('lang-dropdown');
+    const langItems = document.querySelectorAll('.lang-item');
+ 
+    // 切换下拉菜单显示/隐藏
+    if (langBtn) {
+        langBtn.addEventListener('click', function(e) {
+            console.log(`点击切换语言`);
+            e.stopPropagation(); // 阻止事件冒泡
+            
+            // 直接修改样式，而不是依赖 CSS 类
+            if (langDropdown.style.display === 'block') {
+                langDropdown.style.display = 'none';
+            } else {
+                langDropdown.style.display = 'block';
+                // 确保绝对定位和 z-index 正确设置
+                langDropdown.style.position = 'absolute';
+                langDropdown.style.top = '100%';
+                langDropdown.style.right = '0';
+                langDropdown.style.zIndex = '1000';
+            }
+            
+            // 旋转箭头
+            const arrow = langBtn.querySelector('.arrow');
+            if (arrow) {
+                arrow.style.transform = langDropdown.style.display === 'block' ? 'rotate(180deg)' : 'rotate(0)';
+            }
+        });
+    }
+ 
+    // 点击其他区域关闭下拉菜单
+    document.addEventListener('click', function(event) {
+        if (!event.target.closest('.lang-dropdown') && langDropdown) {
+            langDropdown.style.display = 'none';
+            const arrow = langBtn?.querySelector('.arrow');
+            if (arrow) {
+                arrow.style.transform = 'rotate(0)';
+            }
+        }
+    });
+ 
+    // 语言选择事件
+    if (langItems) {
+        langItems.forEach(item => {
+            item.addEventListener('click', function() {
+                const lang = this.getAttribute('data-lang');
+                if (lang !== window.currentLang) {
+                    handleLangToggle(lang);
+                }
+                if (langDropdown) langDropdown.style.display = 'none';
+                const arrow = langBtn?.querySelector('.arrow');
+                if (arrow) {
+                    arrow.style.transform = 'rotate(0)';
+                }
+            });
+        });
+    }
+
+    // 注释掉旧的事件绑定代码
+    // document.getElementById("lang-toggle").addEventListener("click", handleLangToggle);
+    // document.getElementById("lang-toggle").addEventListener("keydown", e => {
+    //     if (e.key === "Enter" || e.key === " ") handleLangToggle();
+    // });
 });
 
 // 回调函数

js/approaching.js

@@ -0,0 +1,223 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const langData = {
+        zh: {
+            btn: "English",
+            logo: "../imgs/svg/logo.svg",
+            title: "深圳汉晶电子信息有限公司",
+            // 顶部
+            topBannerTitle: "未来发展与技术趋势",
+            // 列表
+            futureList: [
+                {
+                    imgAlt: "定制加速芯片",
+                    title: "持续迭代与优化",
+                    desc: "聚焦定制加速芯片的高效能、低延迟与低功耗优化，支持智能终端、边缘计算和行业应用的多场景落地。持续推进自研IP核、算子优化和软硬件协同设计，提升芯片整体性能与能效比。",
+                    circle: "应用领域"
+                },
+                {
+                    imgAlt: "量子计算芯片",
+                    title: "从架构到后端全面升级",
+                    desc: "面向更极致能效目标，系统性优化芯片架构设计，探索异构计算、任务调度、功耗感知等关键技术。结合后端版图设计与工艺优化，打造具备竞争力的低功耗解决方案，助力智能设备与数据中心应用。",
+                    circle: "技术方向"
+                },
+                {
+                    imgAlt: "低功耗量子计算芯片",
+                    title: "面向量产的工程化突破",
+                    desc: "设计出功耗性能更优秀的定制化计算芯片。",
+                    circle: "未来规划"
+                }
+            ],
+            emailLeftTitle: "我们准备好了",
+            emailLeftText: "如果您有更多的需求，请联系我们",
+        },
+        en: {
+            btn: "简体中文",
+            logo: "../imgs/svg/logo_en.svg",
+            title: "SZHJ Electronic Information Co., Ltd",
+            // 顶部
+            topBannerTitle: "Future Development & Technology Trends",
+            // 列表
+            futureList: [
+                {
+                    imgAlt: "Customized acceleration chip",
+                    title: "Continuous Iteration & Optimization",
+                    desc: "Focusing on the high efficiency, low latency and low power optimization of customized acceleration chips, it supports the landing of intelligent terminals, edge computing and industrial applications in multiple scenarios. Continuously promote self-developed IP cores, operator optimization, and software hardware collaborative design to improve the overall performance and energy efficiency ratio of chips.",
+                    circle: "Application Field"
+                },
+                {
+                    imgAlt: "Quantum Computing Chip",
+                    title: "Comprehensive Upgrade from Architecture to Backend",
+                    desc: "Aiming for ultimate energy efficiency, systematically optimize chip architecture, explore key technologies such as heterogeneous computing, task scheduling, and power awareness. Combine backend layout design and process optimization to create competitive low-power solutions for smart devices and data centers.",
+                    circle: "Technology Direction"
+                },
+                {
+                    imgAlt: "Low Power Quantum Computing Chip",
+                    title: "Engineering Breakthroughs for Mass Production",
+                    desc: "Design customized computing chips with better power and performance.",
+                    circle: "Future Plan"
+                }
+            ],
+            emailLeftTitle: "We're ready.",
+            emailLeftText: "If you have more needs, please contact us!",
+        }
+    };
+
+    let currentLang = localStorage.getItem('siteLang') || "zh";
+    
+    // 语言显示更新函数
+    function updateLanguageDisplay(lang) {
+        const currentFlag = document.getElementById('current-flag');
+        const currentLangText = document.getElementById('current-lang');
+        
+        if (currentFlag && currentLangText) {
+            if (lang === 'en') {
+                currentFlag.src = '../imgs/flags/en.svg';
+                currentLangText.textContent = 'English';
+            } else {
+                currentFlag.src = '../imgs/flags/zh.svg';
+                currentLangText.textContent = '简体中文';
+            }
+        }
+    }
+
+    function applyLang(lang) {
+        const data = langData[lang];
+
+        // logo
+        // const footerLogo = document.getElementById("footerLogo");
+        // if (footerLogo) footerLogo.src = data.logo;
+
+        // 页面标题
+        document.title = data.title;
+
+        // 顶部标题
+        const topBannerTitle = document.querySelector('.topBannerLeftTitle p');
+        if (topBannerTitle) topBannerTitle.textContent = data.topBannerTitle;
+        
+        const footerBoxRightTitle = document.querySelector('.footerBoxRightTitle');
+        if (footerBoxRightTitle) footerBoxRightTitle.textContent = data.title;
+        
+        // 列表内容
+        const futureList = document.querySelectorAll('.futureList > li');
+        data.futureList.forEach((item, idx) => {
+            if (futureList[idx]) {
+                // 图片alt
+                const img = futureList[idx].querySelector('.futureImg');
+                if (img) img.alt = item.imgAlt;
+                
+                // 标题和描述
+                const ps = futureList[idx].querySelectorAll('.futureContent p');
+                if (ps[0]) ps[0].textContent = item.title;
+                if (ps[1]) ps[1].textContent = item.desc;
+                
+                // 圆圈
+                const circle = futureList[idx].querySelector('.futureCircleInner');
+                if (circle) circle.textContent = item.circle;
+            }
+        });
+        
+        // 英文样式切换
+        const futureList2 = document.querySelector('.futureList');
+        if (futureList2) {
+            if (lang === 'en') {
+                futureList2.classList.add('en');
+            } else {
+                futureList2.classList.remove('en');
+            }
+        }
+
+        // 邮箱区
+        const emailLeftTitle = document.querySelector(".emailLeftTitle");
+        if (emailLeftTitle) emailLeftTitle.textContent = data.emailLeftTitle;
+        
+        const emailLeftText = document.querySelector(".emailLeftText");
+        if (emailLeftText) emailLeftText.textContent = data.emailLeftText;
+
+        // 英文样式调整
+        if (lang === 'en') {
+            if (topBannerTitle) topBannerTitle.classList.add('en');
+        } else {
+            if (topBannerTitle) topBannerTitle.classList.remove('en');
+        }
+        
+        // 更新语言显示
+        updateLanguageDisplay(lang);
+    }
+    
+    // 修正的handleLangToggle函数，正确接收lang参数
+    function handleLangToggle(lang) {
+        currentLang = lang;
+        localStorage.setItem('siteLang', currentLang);
+        applyLang(currentLang);
+        updateLanguageDisplay(currentLang);
+    }
+    
+    // 初始化
+    applyLang(currentLang);
+    updateLanguageDisplay(currentLang);
+
+    // 获取语言切换相关的DOM元素
+    const langBtn = document.getElementById('lang-btn');
+    const langDropdown = document.getElementById('lang-dropdown');
+    const langItems = document.querySelectorAll('.lang-item');
+ 
+    // 切换下拉菜单显示/隐藏
+    if (langBtn) {
+        langBtn.addEventListener('click', function(e) {
+            console.log(`点击切换语言`);
+            e.stopPropagation(); // 阻止事件冒泡
+            
+            // 直接修改样式，而不是依赖 CSS 类
+            if (langDropdown.style.display === 'block') {
+                langDropdown.style.display = 'none';
+            } else {
+                langDropdown.style.display = 'block';
+                // 确保绝对定位和 z-index 正确设置
+                langDropdown.style.position = 'absolute';
+                langDropdown.style.top = '100%';
+                langDropdown.style.right = '0';
+                langDropdown.style.zIndex = '1000';
+            }
+            
+            // 旋转箭头
+            const arrow = langBtn.querySelector('.arrow');
+            if (arrow) {
+                arrow.style.transform = langDropdown.style.display === 'block' ? 'rotate(180deg)' : 'rotate(0)';
+            }
+        });
+    }
+ 
+    // 点击其他区域关闭下拉菜单
+    document.addEventListener('click', function(event) {
+        if (!event.target.closest('.lang-dropdown') && langDropdown) {
+            langDropdown.style.display = 'none';
+            const arrow = langBtn?.querySelector('.arrow');
+            if (arrow) {
+                arrow.style.transform = 'rotate(0)';
+            }
+        }
+    });
+ 
+    // 语言选择事件
+    if (langItems) {
+        langItems.forEach(item => {
+            item.addEventListener('click', function() {
+                const lang = this.getAttribute('data-lang');
+                if (lang !== currentLang) {
+                    handleLangToggle(lang);
+                }
+                if (langDropdown) langDropdown.style.display = 'none';
+                const arrow = langBtn?.querySelector('.arrow');
+                if (arrow) {
+                    arrow.style.transform = 'rotate(0)';
+                }
+            });
+        });
+    }
+
+    // 注释掉旧的事件绑定代码
+    // document.getElementById("lang-toggle").addEventListener("click", handleLangToggle);
+    // document.getElementById("lang-toggle").addEventListener("keydown", e => {
+    //     if (e.key === "Enter" || e.key === " ") handleLangToggle();
+    // });
+});

js/header.js

@@ -0,0 +1,160 @@
+const headerLangData = {
+    zh: {
+        nav: {
+            home: "首页",
+            business: "主营业务",
+            products: "产品案例",
+            support: "技术支持",
+            future: "展望未来",
+            about: "关于我们"
+        },
+        btn: "English",
+        logo: "../imgs/svg/logo.svg"
+    },
+    en: {
+        nav: {
+            home: "Home",
+            business: "Business",
+            products: "Products",
+            support: "Support",
+            future: "Future",
+            about: "About Us"
+        },
+        btn: "简体中文",
+        logo: "../imgs/svg/logo_en.svg"
+    }
+};
+
+// 语言显示更新函数
+function updateHeaderLanguageDisplay(lang) {
+    const currentFlag = document.getElementById('current-flag');
+    const currentLangText = document.getElementById('current-lang');
+    
+    if (currentFlag && currentLangText) {
+        // 检查图片路径是否需要调整
+        const isRootPage = window.location.pathname.includes('index.html') || 
+                           window.location.pathname.endsWith('/');
+        const imgPathPrefix = isRootPage ? './imgs/flags/' : '../imgs/flags/';
+        
+        if (lang === 'en') {
+            currentFlag.src = `${imgPathPrefix}en.svg`;
+            currentLangText.textContent = 'English';
+        } else {
+            currentFlag.src = `${imgPathPrefix}zh.svg`;
+            currentLangText.textContent = '简体中文';
+        }
+    }
+}
+
+function setHeaderLang(lang) {
+    const data = headerLangData[lang];
+    
+    // 导航文本
+    const navHome = document.getElementById("nav-home");
+    if (navHome) navHome.textContent = data.nav.home;
+    
+    const navBusiness = document.getElementById("nav-business");
+    if (navBusiness) navBusiness.textContent = data.nav.business;
+    
+    const navProducts = document.getElementById("nav-products");
+    if (navProducts) navProducts.textContent = data.nav.products;
+    
+    const navSupport = document.getElementById("nav-support");
+    if (navSupport) navSupport.textContent = data.nav.support;
+    
+    const navFuture = document.getElementById("nav-future");
+    if (navFuture) navFuture.textContent = data.nav.future;
+    
+    const navAbout = document.getElementById("nav-about");
+    if (navAbout) navAbout.textContent = data.nav.about;
+    
+    // logo
+    // const logoImg = document.getElementById("logo-img");
+    // if (logoImg) logoImg.src = data.logo;
+    
+    // 更新语言显示
+    updateHeaderLanguageDisplay(lang);
+}
+
+// 处理语言切换
+function handleHeaderLangToggle(lang) {
+    window.currentLang = lang;
+    localStorage.setItem('siteLang', lang);
+    setHeaderLang(lang);
+    
+    // 如果有页面特定的语言处理函数，也调用它
+    if (typeof applyLang === 'function') {
+        applyLang(lang);
+    }
+    
+    // 如果在aboutUs页面，还需要更新地图信息
+    if (typeof updateMapInfo === 'function') {
+        updateMapInfo(lang);
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    let currentLang = localStorage.getItem('siteLang') || "zh";
+    
+    // 初始化语言
+    setHeaderLang(currentLang);
+    
+    // 获取语言切换相关的DOM元素
+    const langBtn = document.getElementById('lang-btn');
+    const langDropdown = document.getElementById('lang-dropdown');
+    const langItems = document.querySelectorAll('.lang-item');
+    
+    if (langBtn) {
+        // 切换下拉菜单显示/隐藏
+        langBtn.addEventListener('click', function(e) {
+            e.stopPropagation(); // 阻止事件冒泡
+            langDropdown.classList.toggle('show');
+            const arrow = langBtn.querySelector('.arrow');
+            if (arrow) {
+                arrow.style.transform = langDropdown.classList.contains('show') ? 'rotate(180deg)' : 'rotate(0)';
+            }
+        });
+        
+        // 点击其他区域关闭下拉菜单
+        document.addEventListener('click', function(event) {
+            if (!event.target.closest('.lang-dropdown') && langDropdown) {
+                langDropdown.classList.remove('show');
+                const arrow = langBtn.querySelector('.arrow');
+                if (arrow) {
+                    arrow.style.transform = 'rotate(0)';
+                }
+            }
+        });
+        
+        // 语言选择事件
+        langItems.forEach(item => {
+            item.addEventListener('click', function() {
+                const lang = this.getAttribute('data-lang');
+                if (lang !== currentLang) {
+                    currentLang = lang;
+                    handleHeaderLangToggle(lang);
+                }
+                langDropdown.classList.remove('show');
+                const arrow = langBtn.querySelector('.arrow');
+                if (arrow) {
+                    arrow.style.transform = 'rotate(0)';
+                }
+            });
+        });
+    } else {
+        // 兼容旧版切换按钮
+        const langToggle = document.getElementById("lang-toggle");
+        if (langToggle) {
+            langToggle.addEventListener("click", () => {
+                currentLang = currentLang === "zh" ? "en" : "zh";
+                handleHeaderLangToggle(currentLang);
+            });
+            langToggle.addEventListener("keydown", e => {
+                if (e.key === "Enter" || e.key === " ") {
+                    currentLang = currentLang === "zh" ? "en" : "zh";
+                    handleHeaderLangToggle(currentLang);
+                }
+            });
+        }
+    }
+});

js/index.js

@@ -43,169 +43,429 @@ document.addEventListener('DOMContentLoaded', () => {
         observer.observe(element);
     });
 
-// ------------------------------
+    // ------------------------------
-// 获取所需的DOM元素
+    // 获取所需的DOM元素
-const container = document.querySelector('.carousel-container');
+    const container = document.querySelector('.carousel-container');
-const list = document.querySelector('.carousel-list');
+    const list = document.querySelector('.carousel-list');
-const items = document.querySelectorAll('.carousel-item');
+    const items = document.querySelectorAll('.carousel-item');
-const prevBtn = document.querySelector('.carousel-arrow-left');
+    const prevBtn = document.querySelector('.carousel-arrow-left');
-const nextBtn = document.querySelector('.carousel-arrow-right');
+    const nextBtn = document.querySelector('.carousel-arrow-right');
-const indicators = document.querySelectorAll('.indicator');
+    const indicators = document.querySelectorAll('.indicator');
 
-// 如果元素不存在，直接返回
+    // 如果元素不存在，直接返回
-if (!container || !list || !items.length) {
+    if (!container || !list || !items.length) {
-    console.error('轮播图元素不存在，初始化失败');
+        console.error('轮播图元素不存在，初始化失败');
-    return;
+        return;
-}
-
-// 克隆第一个和最后一个项目
-const firstClone = items[0].cloneNode(true);
-const lastClone = items[items.length - 1].cloneNode(true);
-
-// 将克隆的元素添加到列表中
-list.appendChild(firstClone);
-list.insertBefore(lastClone, list.firstChild);
-
-// 设置初始位置，因为添加了一个项目在前面，所以从1开始
-let currentIndex = 1;
-let interval = null;
-let isTransitioning = false;
-
-// 初始化位置
-updatePosition(false);
-
-// 更新位置的函数
-function updatePosition(withTransition = true) {
-    // 如果需要过渡动画
-    if (withTransition) {
-        list.style.transition = 'transform 0.5s ease';
-    } else {
-        list.style.transition = 'none';
     }
-    
-    // 计算位置并应用变换
-    const position = -currentIndex * 100;
-    list.style.transform = `translateX(${position}%)`;
-    
-    // 更新指示器状态，注意要减去1因为我们添加了克隆项目
-    updateIndicators();
-}
 
-// 更新指示器状态
+    // 克隆第一个和最后一个项目
-function updateIndicators() {
+    const firstClone = items[0].cloneNode(true);
-    // 考虑循环，将currentIndex转换回真实索引
+    const lastClone = items[items.length - 1].cloneNode(true);
-    const realIndex = currentIndex - 1;
-    // 使用模运算确保索引在有效范围内
-    const activeIndex = (realIndex + items.length) % items.length;
-    
-    indicators.forEach((indicator, i) => {
-        indicator.classList.toggle('active', i === activeIndex);
-    });
-}
 
-// 自动播放函数
+    // 将克隆的元素添加到列表中
-function startAutoPlay() {
+    list.appendChild(firstClone);
-    if (interval) clearInterval(interval);
+    list.insertBefore(lastClone, list.firstChild);
-    interval = setInterval(nextSlide, 3000);
-}
 
-// 暂停自动播放
+    // 设置初始位置，因为添加了一个项目在前面，所以从1开始
-function stopAutoPlay() {
+    let currentIndex = 1;
-    clearInterval(interval);
+    let interval = null;
-}
+    let isTransitioning = false;
 
-// 下一张函数
+    // 初始化位置
-function nextSlide() {
+    updatePosition(false);
-    if (isTransitioning) return;
-    isTransitioning = true;
-    
-    currentIndex++;
-    updatePosition();
-}
 
-// 上一张函数
+    // 更新位置的函数
-function prevSlide() {
+    function updatePosition(withTransition = true) {
-    if (isTransitioning) return;
+        // 如果需要过渡动画
-    isTransitioning = true;
+        if (withTransition) {
-    
+            list.style.transition = 'transform 0.5s ease';
-    currentIndex--;
+        } else {
-    updatePosition();
+            list.style.transition = 'none';
-}
+        }
-
+        
-// 处理过渡结束事件
+        // 计算位置并应用变换
-list.addEventListener('transitionend', () => {
+        const position = -currentIndex * 100;
-    isTransitioning = false;
+        list.style.transform = `translateX(${position}%)`;
-    
+        
-    // 如果到达了最后一个克隆项
+        // 更新指示器状态，注意要减去1因为我们添加了克隆项目
-    if (currentIndex >= items.length + 1) {
+        updateIndicators();
-        currentIndex = 1;
-        updatePosition(false);
     }
-    
+
-    // 如果到达了第一个克隆项
+    // 更新指示器状态
-    if (currentIndex <= 0) {
+    function updateIndicators() {
-        currentIndex = items.length;
+        // 考虑循环，将currentIndex转换回真实索引
-        updatePosition(false);
+        const realIndex = currentIndex - 1;
+        // 使用模运算确保索引在有效范围内
+        const activeIndex = (realIndex + items.length) % items.length;
+        
+        indicators.forEach((indicator, i) => {
+            indicator.classList.toggle('active', i === activeIndex);
+        });
     }
-});
 
-// // 绑定按钮事件
+    // 自动播放函数
-// prevBtn.addEventListener('click', () => {
+    function startAutoPlay() {
-//     prevSlide();
+        if (interval) clearInterval(interval);
-//     stopAutoPlay();
+        interval = setInterval(nextSlide, 3000);
-//     startAutoPlay();
+    }
-// });
 
-// nextBtn.addEventListener('click', () => {
+    // 暂停自动播放
-//     nextSlide();
+    function stopAutoPlay() {
-//     stopAutoPlay();
+        clearInterval(interval);
-//     startAutoPlay();
+    }
-// });
 
-// 绑定指示器点击事件
+    // 下一张函数
-indicators.forEach((indicator, index) => {
+    function nextSlide() {
-    indicator.addEventListener('click', () => {
+        if (isTransitioning) return;
-        currentIndex = index + 1; // +1因为我们添加了克隆项目
+        isTransitioning = true;
+        
+        currentIndex++;
         updatePosition();
+    }
+
+    // 上一张函数
+    function prevSlide() {
+        if (isTransitioning) return;
+        isTransitioning = true;
+        
+        currentIndex--;
+        updatePosition();
+    }
+
+    // 处理过渡结束事件
+    list.addEventListener('transitionend', () => {
+        isTransitioning = false;
+        
+        // 如果到达了最后一个克隆项
+        if (currentIndex >= items.length + 1) {
+            currentIndex = 1;
+            updatePosition(false);
+        }
+        
+        // 如果到达了第一个克隆项
+        if (currentIndex <= 0) {
+            currentIndex = items.length;
+            updatePosition(false);
+        }
+    });
+
+    // 绑定指示器点击事件
+    indicators.forEach((indicator, index) => {
+        indicator.addEventListener('click', () => {
+            currentIndex = index + 1; // +1因为我们添加了克隆项目
+            updatePosition();
+            stopAutoPlay();
+            startAutoPlay();
+        });
+    });
+
+    // 鼠标悬停暂停
+    container.addEventListener('mouseenter', stopAutoPlay);
+    container.addEventListener('mouseleave', startAutoPlay);
+
+    // 添加触摸滑动支持
+    let touchStartX = 0;
+    let touchEndX = 0;
+
+    container.addEventListener('touchstart', (e) => {
+        touchStartX = e.touches[0].clientX;
         stopAutoPlay();
+    });
+
+    container.addEventListener('touchend', (e) => {
+        touchEndX = e.changedTouches[0].clientX;
+        const difference = touchStartX - touchEndX;
+        
+        if (Math.abs(difference) > 50) {
+            if (difference > 0) {
+                nextSlide();
+            } else {
+                prevSlide();
+            }
+        }
+        
         startAutoPlay();
     });
-});
 
-// 鼠标悬停暂停
+    // 开始自动播放
-container.addEventListener('mouseenter', stopAutoPlay);
+    startAutoPlay();
-container.addEventListener('mouseleave', startAutoPlay);
 
-// 添加触摸滑动支持
+    // --------------------------------
-let touchStartX = 0;
-let touchEndX = 0;
 
-container.addEventListener('touchstart', (e) => {
+    const langData = {
-    touchStartX = e.touches[0].clientX;
+        zh: {
-    stopAutoPlay();
+            nav: {
-});
+                home: "首页",
+                business: "主营业务",
+                products: "产品案例",
+                support: "技术支持",
+                future: "展望未来",
+                about: "关于我们"
+            },
+            btn: "English",
+            logo: "./imgs/svg/logo.svg",
+            bannerBg: "../imgs/svg/背景纹（大）.svg",
+            bannerListImgs: [
+                "../imgs/home/mainBusiness.png",
+                "../imgs/home/aboutUs.png",
+            ],
+            CarouselImgs: [
+                "./imgs/home/Y100.jpg",
+                "./imgs/home/S6PRO.jpg",
+            ],
+            carouselText: "产品详情",
+            title: "深圳汉晶电子信息有限公司",
+            bannerBottom2Title: "为什么选择汉晶?",
+            bannerBottomListOneTitle: "IC设计全生命周期一站式覆盖",
+            bannerBottomListTwoTitle: "独特的低功耗设计，让芯片更有竞争力",
+            bannerBottomListThreeTitle: "有稳定的芯片制造商合作关系",
+            bannerBottomListFourTitle: "流片均一版成功，即流片成功率100%,助力客户赢得市场",
+            bannertopTitle: "芯片设计技术服务",
+            bannertopText: "我们公司提供全方位的芯片设计技术服务，涵盖从需求讨论、系统设计、逻辑设计、FPGA原型验证到最终的芯片制造、测试与验证等各个环节。我们采用行业领先的工具和技术，确保芯片的性能、功耗、稳定性都能满足客户需求。",
+            bannerletfTextTitle: "Y100 服务器芯片",
+            bannerletfTextTitle2: "S6PRO 运算加速芯片",
+            bannerBottomTextTitle: "我们的目标",
+            bannerBottomTextText: "汇聚人才，共同创造突破性技术，为更加智能、更加安全、更有保障的科技世界保驾护航。",
+            newBottomTitle: "研发团队",
+            newBottomText: "研究生学历",
+            emailLeftTitle: "我们准备好了",
+            emailLeftText: "如果您有更多的需求，请联系我们",
+        },
+        en: {
+            nav: {
+                home: "Home",
+                business: "Business",
+                products: "Products",
+                support: "Support",
+                future: "Future",
+                about: "About Us"
+            },
+            btn: "简体中文",
+            logo: "./imgs/svg/logo_en.svg",
+            bannerBg: "../imgs/svg/bg_en.svg",
+            bannerListImgs: [
+                "../imgs/home/mainBusiness_en.png",
+                "../imgs/home/aboutUs_en.png",
+            ],
+            CarouselImgs: [
+                "./imgs/home/Y100_en.jpg",
+                "./imgs/home/S6PRO_en.jpg",
+            ],
+            carouselText: "Product Details",
+            title: "SZHJ Electronic Information Co., Ltd",
+            bannerBottom2Title: "Why Hanjing?",
+            bannerBottomListOneTitle: "One-stop coverage of the entire IC design life cycle",
+            bannerBottomListTwoTitle: "Unique low-power design makes the chip more competitive",
+            bannerBottomListThreeTitle: "Stable relationships with chip makers",
+            bannerBottomListFourTitle: "Successful flow of the first version of the film, i.e., 100% success rate of the flow of the film, to help customers win the market",
+            bannertopTitle: "Chip Design Technology Services",
+            bannertopText: "Our company provides a full range of chip design technology services, covering all aspects from requirements discussion, system design, logic design, FPGA prototyping, to final chip manufacturing, testing and verification. We use industry-leading tools and technologies to ensure that the performance, power consumption, and stability of the chip meets customer requirements.",
+            bannerletfTextTitle: "Y100 Server Chips",
+            bannerletfTextTitle2: "S6PRO computing accelerator chip",
+            bannerBottomTextTitle: "Our Goals",
+            bannerBottomTextText: "Bringing together talents to create breakthrough technologies for a smarter, safer and more secure technological world.",
+            newBottomTitle: "R&D Team",
+            newBottomText: "postgraduate education",
+            emailLeftTitle: "We're ready.",
+            emailLeftText: "If you have more needs, please contact us!",
+        }
+    };
 
-container.addEventListener('touchend', (e) => {
+    // 语言显示更新函数 - 移到外部作为独立函数
-    touchEndX = e.changedTouches[0].clientX;
+    function updateLanguageDisplay(lang) {
-    const difference = touchStartX - touchEndX;
+        const currentFlag = document.getElementById('current-flag');
-    
+        const currentLangText = document.getElementById('current-lang');
-    if (Math.abs(difference) > 50) {
+        
-        if (difference > 0) {
+        if (currentFlag && currentLangText) {
-            nextSlide();
+            if (lang === 'en') {
-        } else {
+                currentFlag.src = './imgs/flags/en.svg';
-            prevSlide();
+                currentLangText.textContent = 'English';
+            } else {
+                currentFlag.src = './imgs/flags/zh.svg';
+                currentLangText.textContent = '简体中文';
+            }
         }
     }
+
+    let currentLang = localStorage.getItem('siteLang') || "zh";
+
+    function applyLang(lang) {
+        try {
+            const data = langData[lang];
     
-    startAutoPlay();
+            // 导航文本 - 使用常规的条件检查而不是可选链
-});
+            const navHome = document.getElementById("nav-home");
+            if (navHome) navHome.textContent = data.nav.home;
+            
+            const navBusiness = document.getElementById("nav-business");
+            if (navBusiness) navBusiness.textContent = data.nav.business;
+            
+            const navProducts = document.getElementById("nav-products");
+            if (navProducts) navProducts.textContent = data.nav.products;
+            
+            const navSupport = document.getElementById("nav-support");
+            if (navSupport) navSupport.textContent = data.nav.support;
+            
+            const navFuture = document.getElementById("nav-future");
+            if (navFuture) navFuture.textContent = data.nav.future;
+            
+            const navAbout = document.getElementById("nav-about");
+            if (navAbout) navAbout.textContent = data.nav.about;
+            
+            // logo
+            // const logoImg = document.getElementById("logo-img");
+            // if (logoImg) logoImg.src = data.logo;
+            
+            // const footerLogo = document.getElementById("footerLogo");
+            // if (footerLogo) footerLogo.src = data.logo;
+    
+            // 轮播图图片全部替换（包括克隆节点）
+            document.querySelectorAll('img[alt="S6PRO"]').forEach(img => {
+                img.src = data.CarouselImgs[1];
+            });
+            document.querySelectorAll('img[alt="Y100"]').forEach(img => {
+                img.src = data.CarouselImgs[0];
+            });
+    
+            // 轮播图详情按钮文本全部切换
+            document.querySelectorAll('.carouselText').forEach(span => {
+                span.textContent = data.carouselText;
+            });
+    
+            // 其它页面内容 - 单独处理每个元素
+            const bannerBottom2Title = document.querySelector('.bannerBottom2Title');
+            if (bannerBottom2Title) bannerBottom2Title.textContent = data.bannerBottom2Title;
+            
+            const bannerBottomListOneTitle = document.querySelector('.bannerBottomListOneTitle');
+            if (bannerBottomListOneTitle) bannerBottomListOneTitle.textContent = data.bannerBottomListOneTitle;
+            
+            const bannerBottomListTwoTitle = document.querySelector('.bannerBottomListTwoTitle');
+            if (bannerBottomListTwoTitle) bannerBottomListTwoTitle.textContent = data.bannerBottomListTwoTitle;
+            
+            const bannerBottomListThreeTitle = document.querySelector('.bannerBottomListThreeTitle');
+            if (bannerBottomListThreeTitle) bannerBottomListThreeTitle.textContent = data.bannerBottomListThreeTitle;
+            
+            const bannerBottomListFourTitle = document.querySelector('.bannerBottomListFourTitle');
+            if (bannerBottomListFourTitle) bannerBottomListFourTitle.textContent = data.bannerBottomListFourTitle;
+            
+            const bannertopTitle = document.querySelector('.bannertopTitle');
+            if (bannertopTitle) bannertopTitle.textContent = data.bannertopTitle;
+            
+            const bannertopText = document.querySelector('.bannertopText');
+            if (bannertopText) bannertopText.textContent = data.bannertopText;
+            
+            const bannerletfTextTitle = document.querySelector('.bannerletfTextTitle');
+            if (bannerletfTextTitle) bannerletfTextTitle.textContent = data.bannerletfTextTitle;
+            
+            const bannerBottomTextTitle = document.querySelector('.bannerBottomTextTitle');
+            if (bannerBottomTextTitle) bannerBottomTextTitle.textContent = data.bannerBottomTextTitle;
+            
+            const bannerBottomTextText = document.querySelector('.bannerBottomTextText');
+            if (bannerBottomTextText) bannerBottomTextText.textContent = data.bannerBottomTextText;
+            
+            const newBottomTitle = document.querySelector('.newBottomTitle');
+            if (newBottomTitle) newBottomTitle.textContent = data.newBottomTitle;
+            
+            const newBottomText = document.querySelector('.newBottomText');
+            if (newBottomText) newBottomText.textContent = data.newBottomText;
+            
+            const emailLeftTitle = document.querySelector('.emailLeftTitle');
+            if (emailLeftTitle) emailLeftTitle.textContent = data.emailLeftTitle;
+            
+            const emailLeftText = document.querySelector('.emailLeftText');
+            if (emailLeftText) emailLeftText.textContent = data.emailLeftText;
+            
+            // 页面标题
+            document.title = data.title;
+            
+            const footerTitle = document.querySelector('.footerBoxRightTitle');
+            if (footerTitle) footerTitle.textContent = data.title;
+            
+            const titleElement = document.querySelector('.title');
+            if (titleElement) titleElement.textContent = data.title;
+            
+            const bannerletfTextTitle2 = document.getElementById("bannerletfTextTitle2");
+            if (bannerletfTextTitle2) bannerletfTextTitle2.textContent = data.bannerletfTextTitle2;
+    
+            // 特定类的添加/移除
+            const textBox = document.querySelector('.textBox');
+            if (textBox) {
+                if (lang === 'en') {
+                    textBox.classList.add('en');
+                } else {
+                    textBox.classList.remove('en');
+                }
+            }
+    
+            // bannerBottomList 背景图片
+            const bannerTop = document.querySelector(".bannertop");
+            if (bannerTop && data.bannerListImgs[0]) {
+                bannerTop.style.backgroundImage = `url(${data.bannerListImgs[0]})`;
+            }
+            
+            const bannerBottom = document.querySelector(".bannerBottom");
+            if (bannerBottom && data.bannerListImgs[1]) {
+                bannerBottom.style.backgroundImage = `url(${data.bannerListImgs[1]})`;
+            }
+        } catch (error) {
+            console.error("语言切换出错:", error);
+        }
+    }
 
-// 开始自动播放
+    function handleLangToggle(lang) {
-startAutoPlay();
+        currentLang = lang;
+        localStorage.setItem('siteLang', currentLang);
+        applyLang(currentLang);
+        updateLanguageDisplay(currentLang);
+        
+        // 如果在aboutUs页面，还需要更新地图信息
+        if (typeof updateMapInfo === 'function') {
+            updateMapInfo(currentLang);
+        }
+    }
 
+    // 初始化语言
+    applyLang(currentLang);
+    updateLanguageDisplay(currentLang);
 
+    // 获取语言切换相关的DOM元素
+    const langBtn = document.getElementById('lang-btn');
+    const langDropdown = document.getElementById('lang-dropdown');
+    const langItems = document.querySelectorAll('.lang-item');
 
-});
+    // 切换下拉菜单显示/隐藏
-
+    langBtn?.addEventListener('click', function(e) {
+        e.stopPropagation(); // 阻止事件冒泡
+        langDropdown.classList.toggle('show');
+        const arrow = langBtn.querySelector('.arrow');
+        if (arrow) {
+            arrow.style.transform = langDropdown.classList.contains('show') ? 'rotate(180deg)' : 'rotate(0)';
+        }
+    });
 
+    // 点击其他区域关闭下拉菜单
+    document.addEventListener('click', function(event) {
+        if (!event.target.closest('.lang-dropdown') && langDropdown) {
+            langDropdown.classList.remove('show');
+            const arrow = langBtn?.querySelector('.arrow');
+            if (arrow) {
+                arrow.style.transform = 'rotate(0)';
+            }
+        }
+    });
 
+    // 语言选择事件
+    langItems?.forEach(item => {
+        item.addEventListener('click', function() {
+            const lang = this.getAttribute('data-lang');
+            if (lang !== currentLang) {
+                handleLangToggle(lang);
+            }
+            langDropdown.classList.remove('show');
+            const arrow = langBtn.querySelector('.arrow');
+            if (arrow) {
+                arrow.style.transform = 'rotate(0)';
+            }
+        });
+    });
+});

js/mainBusiness.js

@@ -1,28 +1,298 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
     const accordionItems = document.querySelectorAll('.accordion-item');
-    
+
     // 为每个手风琴项添加点击事件
     accordionItems.forEach((item, index) => {
         const header = item.querySelector('.accordion-header');
-        
+
         header.addEventListener('click', () => {
             // 获取当前是否激活
             const isActive = item.classList.contains('active');
-            
+
             // 关闭所有项
             accordionItems.forEach(item => {
                 item.classList.remove('active');
             });
-            
+
             // 如果点击的不是当前激活项，则展开它
             if (!isActive) {
                 item.classList.add('active');
             }
         });
-        
+
         // 默认展开第一项
         if (index === 0) {
             item.classList.add('active');
         }
     });
+
+
+    // ----------------------------------
+
+    const langData = {
+        zh: {
+            btn: "English",
+            logo: "../imgs/svg/logo.svg",       
+   
+            title: "深圳汉晶电子信息有限公司",
+            emailLeftTitle:"我们准备好了",
+            emailLeftText:"如果您有更多的需求，请联系我们",
+            // 顶部
+            topBannerTitle: "芯片设计技术服务",
+            topBannerDesc: "我们公司提供全方位的芯片设计技术服务，涵盖从需求讨论、  系统设计、  逻辑设计、 FPGA原型验证到最终的芯片制造、测试与验证等各个环节。我们采用行业领先的工具和技术,确保芯片的性能、功耗、稳定性都能满足客户需求。",
+            // 手风琴
+            accordion: [
+                { title: "1.需求分析与规划", content: "根据客户的应用场景，进行深度调研，分析产品需求，输出系统方案。" },
+                { title: "2.芯片架构设计", content: "从芯片框架设计到芯片核心模块设计，包括接口定义等，确保基于此架构就可以正常进行逻辑设计。" },
+                { title: "3.逻辑设计与验证", content: "使用先进的设计工具（如 Verilog）进行芯片逻辑设计，并通过仿真与验证工具（如 systemverilog）确保功能和性能的正确性。通过后仿确定芯片功耗、面积符合客户需求。" },
+                { title: "4.硬件设计与原理图", content: "在芯片封装设计时充分考虑到PCB板设计，不仅仅是考虑芯片本身，在芯片设计时就考虑产品的可靠性和稳定性。" },
+                { title: "5.制程与工艺", content: "团队与先进半导体制造厂有着长期的合作，对工艺细节了解充分，确保芯片生产过程中的质量控制与工艺优化，工艺良率达到业界领先水平。" },
+                { title: "6.测试与验证", content: "针对刚出厂的芯片，能对应设计开发测试板，提供包括功能测试、性能测试、功耗测试、热测试等全面的验证服务，保证客户收到的芯片都是合格产品。" },
+                { title: "7.量产与交付", content: "根据客户需求，我们提供从小批量试产到大规模量产的全程技术支持，并确保交付时效与质量。" }
+            ],
+            // 优势列表
+            bannerBottomList: [
+                {
+                    title: "全流程技术服务",
+                    desc: "从芯从客户需求沟通到量产交付，提供端到端的技术服务，确保客户需求得到全方位满足。"
+                },
+                {
+                    title: "行业经验",
+                    desc: "我们的团队拥有多年芯片前后端设计经验，所设计的芯片均流片成功，能够应对复杂的设计挑战，提供个性化解决方案，在低功耗方面有独到的设计方法学。"
+                },
+                {
+                    title: "技术工具",
+                    desc: "在采用标准 EDA 工具链的基础上，我们开发了定制化自动脚本，提升设计效率与验证覆盖率。"
+                },
+                {
+                    title: "稳定的芯片制造商合作关系",
+                    desc: "团队与SMIC、GF等芯片制造商有着良好的合作关系,在12nm、22nm等先进制程上均有流片并都是一版流片成功。"
+                }
+            ],
+            bannertopBG: "../imgs/main/content.svg",
+            bannerBottomBG: "../imgs/main/advantage.svg",
+        },
+        en: {
+            btn: "简体中文",
+            logo: "../imgs/svg/logo_en.svg",
+    
+            title: "SZHJ Electronic Information Co., Ltd",
+            emailLeftTitle:"We're ready.",
+            emailLeftText:"If you have more needs, please contact us!",
+            // 顶部
+            topBannerTitle: "Chip Design Technology Services",
+            topBannerDesc: "Our company provides comprehensive chip design technology services, covering all aspects from requirements discussion, system design, logic design, FPGA prototyping to final chip manufacturing, testing and verification. We use industry-leading tools and technologies to ensure that the chip's performance, power consumption, and stability meet customer requirements.",
+            // 手风琴
+            accordion: [
+                { title: "1. Requirement Analysis & Planning", content: "Conduct in-depth research based on customer application scenarios, analyze product requirements, and deliver system solutions." },
+                { title: "2. Chip Architecture Design", content: "From chip framework design to core module design, including interface definitions, ensuring that logic design can proceed smoothly based on this architecture." },
+                { title: "3. Logic Design & Verification", content: "Use advanced design tools (such as Verilog) for chip logic design, and ensure functional and performance correctness through simulation and verification tools (such as SystemVerilog). Post-simulation ensures that chip power and area meet customer requirements." },
+                { title: "4. Hardware Design & Schematics", content: "Fully consider PCB design during chip packaging, not only focusing on the chip itself, but also considering product reliability and stability during chip design." },
+                { title: "5. Process & Technology", content: "The team has long-term cooperation with advanced semiconductor manufacturers, is fully familiar with process details, and ensures quality control and process optimization during chip production, achieving industry-leading yield." },
+                { title: "6. Testing & Verification", content: "For newly manufactured chips, we can design and develop test boards, providing comprehensive verification services including functional, performance, power, and thermal tests to ensure all delivered chips are qualified." },
+                { title: "7. Mass Production & Delivery", content: "According to customer needs, we provide full technical support from small batch trial production to large-scale mass production, ensuring delivery timeliness and quality." }
+            ],
+            // 优势列表
+            bannerBottomList: [
+                {
+                    title: "Full-process Technical Service",
+                    desc: "From customer requirement communication to mass production and delivery, we provide end-to-end technical services to ensure all customer needs are fully met."
+                },
+                {
+                    title: "Industry Experience",
+                    desc: "Our team has many years of experience in front-end and back-end chip design. All designed chips have been successfully taped out, capable of handling complex design challenges, providing personalized solutions, and having unique methodologies in low-power design."
+                },
+                {
+                    title: "Technical Tools",
+                    desc: "Based on standard EDA toolchains, we have developed customized automation scripts to improve design efficiency and verification coverage."
+                },
+                {
+                    title: "Stable Partnerships with Chip Manufacturers",
+                    desc: "The team has good cooperation with SMIC, GF and other chip manufacturers, and has successfully taped out chips in advanced processes such as 12nm and 22nm in one go."
+                }
+            ],
+            bannertopBG: "../imgs/main/content_en.svg",
+            bannerBottomBG: "../imgs/main/advantage_en.svg",
+        }
+    };
+
+
+    let currentLang = localStorage.getItem('siteLang') || "zh";
+    
+    // 语言显示更新函数
+    function updateLanguageDisplay(lang) {
+        const currentFlag = document.getElementById('current-flag');
+        const currentLangText = document.getElementById('current-lang');
+        
+        if (currentFlag && currentLangText) {
+            if (lang === 'en') {
+                currentFlag.src = '../imgs/flags/en.svg';
+                currentLangText.textContent = 'English';
+            } else {
+                currentFlag.src = '../imgs/flags/zh.svg';
+                currentLangText.textContent = '简体中文';
+            }
+        }
+    }
+    
+    function applyLang(lang) {
+        const data = langData[lang];
+
+        // logo
+        // const footerLogo = document.getElementById("footerLogo");
+        // if (footerLogo) footerLogo.src = data.logo;
+
+        // 页面内容
+        const titleElement = document.getElementById("title");
+        if (titleElement) titleElement.textContent = data.title;
+        
+        // 顶部标题和描述
+        const topBannerTitle = document.querySelector('.topBannerLeftTitle p:nth-child(1)');
+        if (topBannerTitle) topBannerTitle.textContent = data.topBannerTitle;
+        
+        const topBannerDesc = document.querySelector('.topBannerLeftTitle p:nth-child(2)');
+        if (topBannerDesc) topBannerDesc.textContent = data.topBannerDesc;
+
+        // 手风琴
+        const accordionItems = document.querySelectorAll('.accordion-item');
+        data.accordion.forEach((item, idx) => {
+            if (accordionItems[idx]) {
+                const header = accordionItems[idx].querySelector('.accordion-header h3');
+                if (header) header.textContent = item.title;
+                
+                const content = accordionItems[idx].querySelector('.accordion-content p');
+                if (content) content.textContent = item.content;
+            }
+        });
+
+        // 优势列表
+        const bannerBottomList = document.querySelectorAll('.bannerBottomList li');
+        data.bannerBottomList.forEach((item, idx) => {
+            if (bannerBottomList[idx]) {
+                // 第一个p是标题，第二个p是描述
+                const ps = bannerBottomList[idx].querySelectorAll('p');
+                if (ps[0]) ps[0].textContent = item.title;
+                if (ps[1]) ps[1].textContent = item.desc;
+            }
+        });
+
+        // 优势列表样式切换
+        bannerBottomList.forEach(li => {
+            if (lang === 'en') {
+                li.classList.add('en');
+            } else {
+                li.classList.remove('en');
+            }
+        });
+
+        // 页脚和其他内容
+        const emailLeftTitle = document.querySelector(".emailLeftTitle");
+        if (emailLeftTitle) emailLeftTitle.textContent = data.emailLeftTitle;
+        
+        const emailLeftText = document.querySelector(".emailLeftText");
+        if (emailLeftText) emailLeftText.textContent = data.emailLeftText;
+        
+        const footerBoxRightTitle = document.querySelector('.footerBoxRightTitle');
+        if (footerBoxRightTitle) footerBoxRightTitle.textContent = data.title;
+        
+        // 背景图
+        const bannertop = document.querySelector('.bannertop');
+        if (bannertop) bannertop.style.backgroundImage = `url(${data.bannertopBG})`;
+        
+        const bannerBottom = document.querySelector('.bannerBottom');
+        if (bannerBottom) bannerBottom.style.backgroundImage = `url(${data.bannerBottomBG})`;
+
+        // 切换样式
+        const topBannerLeftTitle = document.querySelector('.topBannerLeftTitle');
+        const topBannerLeft = document.querySelector('.topBannerLeft');
+        
+        if (lang === 'en') {        
+            if (topBannerTitle) topBannerTitle.classList.add('en');
+            if (topBannerDesc) topBannerDesc.classList.add('en');
+            if (topBannerLeft) topBannerLeft.classList.add('en');
+        } else {
+            if (topBannerTitle) topBannerTitle.classList.remove('en');
+            if (topBannerDesc) topBannerDesc.classList.remove('en');
+            if (topBannerLeft) topBannerLeft.classList.remove('en');
+        }
+
+        // 更新下拉菜单显示
+        updateLanguageDisplay(lang);
+    }
+
+    // 修正的handleLangToggle函数，正确接收lang参数
+    function handleLangToggle(lang) {
+        currentLang = lang;
+        localStorage.setItem('siteLang', currentLang);
+        applyLang(currentLang);
+        updateLanguageDisplay(currentLang);
+    }
+    
+    // 初始化
+    applyLang(currentLang);
+    updateLanguageDisplay(currentLang);
+
+    // 获取语言切换相关的DOM元素
+    const langBtn = document.getElementById('lang-btn');
+    const langDropdown = document.getElementById('lang-dropdown');
+    const langItems = document.querySelectorAll('.lang-item');
+ 
+    // 切换下拉菜单显示/隐藏
+    if (langBtn) {
+        langBtn.addEventListener('click', function(e) {
+            console.log(`点击切换语言`);
+            e.stopPropagation(); // 阻止事件冒泡
+            
+            // 直接修改样式，而不是依赖 CSS 类
+            if (langDropdown.style.display === 'block') {
+                langDropdown.style.display = 'none';
+            } else {
+                langDropdown.style.display = 'block';
+                // 确保绝对定位和 z-index 正确设置
+                langDropdown.style.position = 'absolute';
+                langDropdown.style.top = '100%';
+                langDropdown.style.right = '0';
+                langDropdown.style.zIndex = '1000';
+            }
+            
+            console.log('修改后显示状态:', langDropdown.style.display);
+            
+            // 旋转箭头
+            const arrow = langBtn.querySelector('.arrow');
+            if (arrow) {
+                arrow.style.transform = langDropdown.style.display === 'block' ? 'rotate(180deg)' : 'rotate(0)';
+            }
+        });
+    }
+// 点击其他区域关闭下拉菜单
+document.addEventListener('click', function(event) {
+    if (!event.target.closest('.lang-dropdown') && langDropdown) {
+        langDropdown.style.display = 'none';
+        const arrow = langBtn?.querySelector('.arrow');
+        if (arrow) {
+            arrow.style.transform = 'rotate(0)';
+        }
+    }
+});
+ 
+    // 语言选择事件
+    langItems?.forEach(item => {
+        item.addEventListener('click', function() {
+            const lang = this.getAttribute('data-lang');
+            if (lang !== currentLang) {
+                handleLangToggle(lang); // 现在调用正确的函数
+            }
+            langDropdown.classList.remove('show');
+            const arrow = langBtn.querySelector('.arrow');
+            if (arrow) {
+                arrow.style.transform = 'rotate(0)';
+            }
+        });
+    });
+
+    // 注释掉旧的事件绑定代码
+    // document.getElementById("lang-toggle").addEventListener("click", handleLangToggle);
+    // document.getElementById("lang-toggle").addEventListener("keydown", e => {
+    //     if (e.key === "Enter" || e.key === " ") handleLangToggle();
+    // });
 });

js/ourProducts.js

@@ -95,4 +95,264 @@ document.addEventListener('DOMContentLoaded', function() {
             showProduct(event.state.productId, true);
         }
     });
+
+
+    // ----------------------
+
+
+    const langData = {
+        zh: {
+           
+            btn: "English",
+            logo: "../imgs/svg/logo.svg",       
+   
+            title: "深圳汉晶电子信息有限公司",
+            topBannerLeftTitle1:"成功的工艺",
+            topBannerLeftTitle2:"与产品案例",
+            topBannerBthSpan:"联系我们",
+            product_item_titleY100:"Y100 服务器芯片",
+            product_item_titleS6PRO:"S6PRO 运算加速芯片",
+            product_item_titleFX100:"FX100 MCU芯片",
+            product_item_titleGSEC8:"GSEC8 安全加密芯片",
+            product_item_titleS1PRO:"S1PRO 运算加速芯片",
+            product_item_titleVV10:"VV10 信息安全芯片",
+            OtherProducts:"其他产品",
+            detail_info_textY1001:"解决方案：我们通过对客户需求的深度研究，设计了一款集成了高速计算、信号处理单元和数据传输功能的芯片。",
+            detail_info_textY1002:"技术亮点：采用了定制化的22nm工艺，低功耗设计。",
+            detail_info_textS6PRO1:"解决方案：在S1PRO芯片的架构基础上进一步优化细节，缩减逻辑资源，节省面积。",
+            detail_info_textS6PRO2:"技术亮点：使用了定制化的12nm工艺，集成了多个核心模块，并通过自研算法加速模块，提升了运算能力。",
+            detail_info_textS1PRO1:"解决方案：我们根据客户的需求设计了一个集成soc和特定加速模块的系统级芯片。通过先进的架构和特定的低功耗设计，确保芯片在性能和功耗上的平衡。",
+            detail_info_textS1PRO2:"技术亮点：使用了定制化的22nm工艺，集成了多个核心模块，并通过自研算法加速模块，提升了运算能力。",
+            detail_info_textVV101:"解决方案：我们根据客户的需求设计了一个由CPU核心处理器连接外部存储并通过私有总线扩展外设接口，内部包含两个RAM，具备ITCM和DTCM用于指令和数据存储。",
+            detail_info_textVV102:"技术亮点：EAI协处理器接口和AES算法核支持高效加解密运算，RSA算法核由控制、模乘和寄存器堆组成，实现高效RSA算法运算。",
+            detail_info_textFX1001:"解决方案：我们根据客户的需求设计了一个由两个Master和三个Slave组成，其中，两个Master分别是CPU内核和DMA控制器，三个Slave为内部SRAM，NVM和外设。",
+            detail_info_textFX1002:"技术亮点：FX100采用超低功耗休眠模式（μA级别），使得搭载该芯片的医疗器械在外部断电时依然可以通过内置电池继续工作。",
+            detail_info_textGSEC81:"解决方案：集成 RSA/ECC 加速器，支持安全启动与防物理攻击。",
+            detail_info_textGSEC82:"技术亮点：支持国密算法，具备 CC EAL5+ 认证与 TRNG。",
+            emailLeftTitle:"我们准备好了",
+            emailLeftText:"如果您有更多的需求，请联系我们",
+            chipProducts:"芯片产品",
+
+        },
+        en: {
+           
+            btn: "简体中文",
+            logo: "../imgs/svg/logo_en.svg",
+    
+            title: "SZHJ Electronic Information Co., Ltd",
+            topBannerLeftTitle1:"Successful Processes",
+            topBannerLeftTitle2:"With product examples",
+            topBannerBthSpan:"Contact Us",
+            product_item_titleY100:"Y100 Server Chips",
+            product_item_titleS6PRO:"S6PRO computing accelerator chip",
+            product_item_titleFX100:"FX100 MCU chip",
+            product_item_titleGSEC8:"GSEC8 Secure encryption chip",
+            product_item_titleS1PRO:"S1PRO computing accelerator chip",
+            product_item_titleVV10:"VV10 Information Security Chip",
+            OtherProducts:"Other Products",
+            detail_info_textY1001:"Solution: We designed a chip that integrates high-speed computing, signal processing unit and data transmission functions through an in-depth study of customer requirements.",
+            detail_info_textY1002:"Technical highlight: Adopting customized 22nm process and low-power design.",
+            detail_info_textS6PRO1:"Solution: Further optimize the details based on the architecture of the S1PRO chip, reduce logic resources and save area.",
+            detail_info_textS6PRO2:"Technical highlights: Customized 12nm process is used, multiple core modules are integrated, and self-developed algorithm acceleration modules are used to enhance computing power.",
+            detail_info_textS1PRO1:"Solution: We designed a system-on-chip with integrated soc and specific acceleration modules according to the customer's requirements. The advanced architecture and specific low-power design ensure that the chip is balanced in terms of performance and power consumption.",
+            detail_info_textS1PRO2:"Technical highlights: Customized 12nm process is used, multiple core modules are integrated, and self-developed algorithm acceleration modules are used to enhance computing power.",
+            detail_info_textVV101:"Solution: According to the customer's requirements, we designed a CPU core processor to connect to external storage and extend the peripheral interface through a private bus, which contains two internal RAMs with ITCM and DTCM for instruction and data storage.",
+            detail_info_textVV102:"Technology highlights: EAI coprocessor interface and AES algorithm core support efficient encryption and decryption operations, RSA algorithm core consists of control, modulo multiplication and register stacks to realize efficient RSA algorithm operations.",
+            detail_info_textFX1001:"Solution: According to the customer's requirements, we designed a system consisting of two Masters and three Slaves, where the two Masters are the CPU core and the DMA controller, and the three Slaves are the internal SRAM, NVM and peripherals.",
+            detail_info_textFX1002:"Technical highlights: The FX100 utilizes an ultra-low power sleep mode (μA level), which allows medical devices equipped with the chip to continue to operate with the built-in battery even when external power is lost.",
+            detail_info_textGSEC81:"Solution: Integrated RSA/ECC gas pedal supports secure boot and physical attack prevention.",
+            detail_info_textGSEC82:"Technical Highlights: Supports state secret algorithms with CC EAL5+ certification and TRNG.",
+            emailLeftTitle:"We're ready.",
+            emailLeftText:"If you have more needs, please contact us!",
+            chipProducts:"Chip products",
+        }
+    };
+
+    let currentLang = localStorage.getItem('siteLang') || "zh";
+    
+    // 语言显示更新函数
+    function updateLanguageDisplay(lang) {
+        const currentFlag = document.getElementById('current-flag');
+        const currentLangText = document.getElementById('current-lang');
+        
+        if (currentFlag && currentLangText) {
+            if (lang === 'en') {
+                currentFlag.src = '../imgs/flags/en.svg';
+                currentLangText.textContent = 'English';
+            } else {
+                currentFlag.src = '../imgs/flags/zh.svg';
+                currentLangText.textContent = '简体中文';
+            }
+        }
+    }
+
+    function applyLang(lang) {
+        const data = langData[lang];
+        
+        // 检查元素是否存在，然后再设置
+        // // logo
+        // const footerLogo = document.getElementById("footerLogo");
+        // if (footerLogo) footerLogo.src = data.logo;
+    
+        // 页面内容
+        const titleElement = document.getElementById("title");
+        if (titleElement) titleElement.textContent = data.title;
+        
+        const topBannerLeftTitle1 = document.getElementById("topBannerLeftTitle1");
+        if (topBannerLeftTitle1) topBannerLeftTitle1.textContent = data.topBannerLeftTitle1;
+        
+        const topBannerLeftTitle2 = document.getElementById("topBannerLeftTitle2");
+        if (topBannerLeftTitle2) topBannerLeftTitle2.textContent = data.topBannerLeftTitle2;
+        
+        const topBannerBthSpan = document.querySelector(".topBannerBthSpan");
+        if (topBannerBthSpan) topBannerBthSpan.textContent = data.topBannerBthSpan;
+
+        // 使用querySelectorAll获取所有元素并检查每个元素
+        document.querySelectorAll('.product_item_titleY100').forEach(el => {
+            if (el) el.textContent = data.product_item_titleY100;
+        });
+        
+        document.querySelectorAll('.product_item_titleS6PRO').forEach(el => {
+            if (el) el.textContent = data.product_item_titleS6PRO;
+        });
+        
+        document.querySelectorAll('.product_item_titleFX100').forEach(el => {
+            if (el) el.textContent = data.product_item_titleFX100;
+        });
+        
+        document.querySelectorAll('.product_item_titleGSEC8').forEach(el => {
+            if (el) el.textContent = data.product_item_titleGSEC8;
+        });
+        
+        document.querySelectorAll('.product_item_titleS1PRO').forEach(el => {
+            if (el) el.textContent = data.product_item_titleS1PRO;
+        }); 
+        
+        document.querySelectorAll('.product_item_titleVV10').forEach(el => {
+            if (el) el.textContent = data.product_item_titleVV10;
+        });  
+
+        document.querySelectorAll('.category-header-title').forEach(el => {
+            if (el) el.textContent = data.chipProducts;
+        });  
+
+        const otherProducts = document.querySelector(".OtherProducts");
+        if (otherProducts) otherProducts.textContent = data.OtherProducts;
+        
+        // 解决方案和技术亮点文本
+        const elements = {
+            ".detail_info_textY1001": data.detail_info_textY1001,
+            ".detail_info_textY1002": data.detail_info_textY1002,
+            ".detail_info_textS6PRO1": data.detail_info_textS6PRO1,
+            ".detail_info_textS6PRO2": data.detail_info_textS6PRO2,
+            ".detail_info_textS1PRO1": data.detail_info_textS1PRO1,
+            ".detail_info_textS1PRO2": data.detail_info_textS1PRO2,
+            ".detail_info_textVV101": data.detail_info_textVV101,
+            ".detail_info_textVV102": data.detail_info_textVV102,
+            ".detail_info_textFX1001": data.detail_info_textFX1001,
+            ".detail_info_textFX1002": data.detail_info_textFX1002,
+            ".detail_info_textGSEC81": data.detail_info_textGSEC81,
+            ".detail_info_textGSEC82": data.detail_info_textGSEC82,
+            ".emailLeftTitle": data.emailLeftTitle,
+            ".emailLeftText": data.emailLeftText,
+        };
+
+        // 遍历并应用文本
+        for (const [selector, text] of Object.entries(elements)) {
+            const element = document.querySelector(selector);
+            if (element) element.textContent = text;
+        }
+        
+        const footerBoxRightTitle = document.querySelector('.footerBoxRightTitle');
+        if (footerBoxRightTitle) footerBoxRightTitle.textContent = data.title;
+
+        // 切换样式
+        if (lang === 'en') {
+            if (topBannerLeftTitle1) topBannerLeftTitle1.classList.add('en');
+            if (topBannerLeftTitle2) topBannerLeftTitle2.classList.add('en');
+        } else {
+            if (topBannerLeftTitle1) topBannerLeftTitle1.classList.remove('en');
+            if (topBannerLeftTitle2) topBannerLeftTitle2.classList.remove('en');
+        }
+        
+        // 更新语言显示
+        updateLanguageDisplay(lang);
+    }
+    
+    // 修正的handleLangToggle函数，正确接收lang参数
+    function handleLangToggle(lang) {
+        currentLang = lang;
+        localStorage.setItem('siteLang', currentLang);
+        applyLang(currentLang);
+        updateLanguageDisplay(currentLang);
+    }
+    
+    // 初始化
+    applyLang(currentLang);
+    updateLanguageDisplay(currentLang);
+
+    // 获取语言切换相关的DOM元素
+    const langBtn = document.getElementById('lang-btn');
+    const langDropdown = document.getElementById('lang-dropdown');
+    const langItems = document.querySelectorAll('.lang-item');
+ 
+    // 切换下拉菜单显示/隐藏
+    if (langBtn) {
+        langBtn.addEventListener('click', function(e) {
+            console.log(`点击切换语言`);
+            e.stopPropagation(); // 阻止事件冒泡
+            
+            // 直接修改样式，而不是依赖 CSS 类
+            if (langDropdown.style.display === 'block') {
+                langDropdown.style.display = 'none';
+            } else {
+                langDropdown.style.display = 'block';
+                // 确保绝对定位和 z-index 正确设置
+                langDropdown.style.position = 'absolute';
+                langDropdown.style.top = '100%';
+                langDropdown.style.right = '0';
+                langDropdown.style.zIndex = '1000';
+            }
+            
+            // 旋转箭头
+            const arrow = langBtn.querySelector('.arrow');
+            if (arrow) {
+                arrow.style.transform = langDropdown.style.display === 'block' ? 'rotate(180deg)' : 'rotate(0)';
+            }
+        });
+    }
+ 
+    // 点击其他区域关闭下拉菜单
+    document.addEventListener('click', function(event) {
+        if (!event.target.closest('.lang-dropdown') && langDropdown) {
+            langDropdown.style.display = 'none';
+            const arrow = langBtn?.querySelector('.arrow');
+            if (arrow) {
+                arrow.style.transform = 'rotate(0)';
+            }
+        }
+    });
+ 
+    // 语言选择事件
+    if (langItems) {
+        langItems.forEach(item => {
+            item.addEventListener('click', function() {
+                const lang = this.getAttribute('data-lang');
+                if (lang !== currentLang) {
+                    handleLangToggle(lang);
+                }
+                if (langDropdown) langDropdown.style.display = 'none';
+                const arrow = langBtn?.querySelector('.arrow');
+                if (arrow) {
+                    arrow.style.transform = 'rotate(0)';
+                }
+            });
+        });
+    }
+
+    // 注释掉旧的事件绑定代码，避免错误
+    // document.getElementById("lang-toggle").addEventListener("click", handleLangToggle);
+    // document.getElementById("lang-toggle").addEventListener("keydown", e => {
+    //     if (e.key === "Enter" || e.key === " ") handleLangToggle();
+    // });
 });

js/technicalSupport.js

@@ -0,0 +1,218 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const langData = {
+        zh: {
+            btn: "English",
+            logo: "../imgs/svg/logo.svg",
+            title: "深圳汉晶电子信息有限公司",
+            // 顶部
+            topBannerTitle: "技术支持",
+            topBannerDesc: "我们为您的项目提供技术指导。我们的技术销售代表和产品专家可以从技术角度解答您关于产品的问题",
+            // 三大服务
+            service: [
+                {
+                    title: "技术咨询",
+                    desc: "提供芯片设计前的需求分析、技术选型、系统架构建议。",
+                    btn: "提交服务帮助"
+                },
+                {
+                    title: "定制化开发",
+                    desc: "根据客户的特定需求，提供个性化定制的芯片设计服务，确保项目的高效实施。",
+                    btn: "定制需求"
+                },
+                {
+                    title: "产品维护与升级",
+                    desc: "提供持续的技术支持，定期为客户的芯片产品提供性能优化与功能升级。",
+                    btn: "立即升级"
+                }
+            ],
+            emailLeftTitle: "我们准备好了",
+            emailLeftText: "如果您有更多的需求，请联系我们",
+            topBannerBG: "../imgs/svg/技术支持图.svg",
+        },
+        en: {
+            btn: "简体中文",
+            logo: "../imgs/svg/logo_en.svg",
+            title: "SZHJ Electronic Information Co., Ltd",
+            // 顶部
+            topBannerTitle: "Technical Support",
+            topBannerDesc: "We provide technical guidance for your projects. Our technical sales representatives and product experts can answer your product questions from a technical perspective.",
+            // 三大服务
+            service: [
+                {
+                    title: "Technical Consulting",
+                    desc: "Provide pre-design requirement analysis, technical selection, and system architecture advice for chip design.",
+                    btn: "Submit Service Request"
+                },
+                {
+                    title: "Customized Development",
+                    desc: "Provide personalized chip design services according to customer needs, ensuring efficient project implementation.",
+                    btn: "Customization Request"
+                },
+                {
+                    title: "Product Maintenance & Upgrade",
+                    desc: "Provide continuous technical support and regularly optimize and upgrade customer chip products.",
+                    btn: "Upgrade Now"
+                }
+            ],
+            emailLeftTitle: "We're ready.",
+            emailLeftText: "If you have more needs, please contact us!",
+            topBannerBG: "../imgs/technology/technicalSupport_en.svg",
+        }
+    };
+
+    let currentLang = localStorage.getItem('siteLang') || "zh";
+    
+    // 语言显示更新函数
+    function updateLanguageDisplay(lang) {
+        const currentFlag = document.getElementById('current-flag');
+        const currentLangText = document.getElementById('current-lang');
+        
+        if (currentFlag && currentLangText) {
+            if (lang === 'en') {
+                currentFlag.src = '../imgs/flags/en.svg';
+                currentLangText.textContent = 'English';
+            } else {
+                currentFlag.src = '../imgs/flags/zh.svg';
+                currentLangText.textContent = '简体中文';
+            }
+        }
+    }
+
+    function applyLang(lang) {
+        const data = langData[lang];
+
+        // logo
+        // const footerLogo = document.getElementById("footerLogo");
+        // if (footerLogo) footerLogo.src = data.logo;
+        
+        const footerBoxRightTitle = document.querySelector('.footerBoxRightTitle');
+        if (footerBoxRightTitle) footerBoxRightTitle.textContent = data.title;
+        
+        // 页面标题
+        document.title = data.title;
+
+        // 顶部标题和描述
+        const topBannerTitle = document.querySelector('.topBannerLeftTitle p:nth-child(1)');
+        if (topBannerTitle) topBannerTitle.textContent = data.topBannerTitle;
+        
+        const topBannerDesc = document.querySelector('.topBannerLeftTitle p:nth-child(2)');
+        if (topBannerDesc) topBannerDesc.textContent = data.topBannerDesc;
+
+        // 三大服务
+        const serviceBoxes = document.querySelectorAll('.bannerBox > .bannerLeft, .bannerBox > .bannerRight');
+        data.service.forEach((item, idx) => {
+            if (serviceBoxes[idx]) {
+                const titleElement = serviceBoxes[idx].querySelector('.title');
+                if (titleElement) titleElement.textContent = item.title;
+                
+                const descElement = serviceBoxes[idx].querySelector('.problem');
+                if (descElement) descElement.textContent = item.desc;
+                
+                const reportElement = serviceBoxes[idx].querySelector('.report');
+                if (reportElement && reportElement.childNodes[0]) {
+                    reportElement.childNodes[0].nodeValue = item.btn + " ";
+                }
+            }
+        });
+
+        // 邮箱区
+        const emailLeftTitle = document.querySelector(".emailLeftTitle");
+        if (emailLeftTitle) emailLeftTitle.textContent = data.emailLeftTitle;
+        
+        const emailLeftText = document.querySelector(".emailLeftText");
+        if (emailLeftText) emailLeftText.textContent = data.emailLeftText;
+
+        // 背景图
+        const topBanner = document.querySelector('.topBanner');
+        if (topBanner) topBanner.style.backgroundImage = `url(${data.topBannerBG})`;
+        
+        // 英文样式调整
+        if (lang === 'en') {
+            if (topBannerTitle) topBannerTitle.classList.add('en');
+            if (topBannerDesc) topBannerDesc.classList.add('en');
+        } else {
+            if (topBannerTitle) topBannerTitle.classList.remove('en');
+            if (topBannerDesc) topBannerDesc.classList.remove('en');
+        }
+        
+        // 更新语言显示
+        updateLanguageDisplay(lang);
+    }
+    
+    // 修正的handleLangToggle函数，正确接收lang参数
+    function handleLangToggle(lang) {
+        currentLang = lang;
+        localStorage.setItem('siteLang', currentLang);
+        applyLang(currentLang);
+        updateLanguageDisplay(currentLang);
+    }
+    
+    // 初始化
+    applyLang(currentLang);
+    updateLanguageDisplay(currentLang);
+
+    // 获取语言切换相关的DOM元素
+    const langBtn = document.getElementById('lang-btn');
+    const langDropdown = document.getElementById('lang-dropdown');
+    const langItems = document.querySelectorAll('.lang-item');
+ 
+    // 切换下拉菜单显示/隐藏
+    if (langBtn) {
+        langBtn.addEventListener('click', function(e) {
+            console.log(`点击切换语言`);
+            e.stopPropagation(); // 阻止事件冒泡
+            
+            // 直接修改样式，而不是依赖 CSS 类
+            if (langDropdown.style.display === 'block') {
+                langDropdown.style.display = 'none';
+            } else {
+                langDropdown.style.display = 'block';
+                // 确保绝对定位和 z-index 正确设置
+                langDropdown.style.position = 'absolute';
+                langDropdown.style.top = '100%';
+                langDropdown.style.right = '0';
+                langDropdown.style.zIndex = '1000';
+            }
+            
+            // 旋转箭头
+            const arrow = langBtn.querySelector('.arrow');
+            if (arrow) {
+                arrow.style.transform = langDropdown.style.display === 'block' ? 'rotate(180deg)' : 'rotate(0)';
+            }
+        });
+    }
+ 
+    // 点击其他区域关闭下拉菜单
+    document.addEventListener('click', function(event) {
+        if (!event.target.closest('.lang-dropdown') && langDropdown) {
+            langDropdown.style.display = 'none';
+            const arrow = langBtn?.querySelector('.arrow');
+            if (arrow) {
+                arrow.style.transform = 'rotate(0)';
+            }
+        }
+    });
+ 
+    // 语言选择事件
+    if (langItems) {
+        langItems.forEach(item => {
+            item.addEventListener('click', function() {
+                const lang = this.getAttribute('data-lang');
+                if (lang !== currentLang) {
+                    handleLangToggle(lang);
+                }
+                if (langDropdown) langDropdown.style.display = 'none';
+                const arrow = langBtn?.querySelector('.arrow');
+                if (arrow) {
+                    arrow.style.transform = 'rotate(0)';
+                }
+            });
+        });
+    }
+
+    // 注释掉旧的事件绑定代码
+    // document.getElementById("lang-toggle").addEventListener("click", handleLangToggle);
+    // document.getElementById("lang-toggle").addEventListener("keydown", e => {
+    //     if (e.key === "Enter" || e.key === " ") handleLangToggle();
+    // });
+});