更改所有页面中英文切换样式及JS功能代码 所有页面logo图片不切换
This commit is contained in:
parent
3923e4df10
commit
602ee741e0
|
|
@ -115,3 +115,90 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-shadow: 0 0 10px rgba(41, 111, 216, 0.5);
|
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); }
|
||||||
|
}
|
||||||
|
|
@ -34,7 +34,29 @@
|
||||||
<li> <a id="nav-future" href="./approaching.html"> 展望未来</a></li>
|
<li> <a id="nav-future" href="./approaching.html"> 展望未来</a></li>
|
||||||
<li> <a id="nav-about" class="actives" href="#" style="color: #fff;"> 关于我们</a></li>
|
<li> <a id="nav-about" class="actives" href="#" style="color: #fff;"> 关于我们</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<button class="language" id="lang-toggle" aria-label="切换语言" tabindex="0">English</button>
|
<!-- <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>
|
||||||
<!-- <div class="bg">
|
<!-- <div class="bg">
|
||||||
<img src="./imgs/svg/点纹.svg" alt="背景">
|
<img src="./imgs/svg/点纹.svg" alt="背景">
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,28 @@
|
||||||
<li> <a id="nav-future" class="actives" href="#" style="color: #fff;"> 展望未来</a></li>
|
<li> <a id="nav-future" class="actives" href="#" style="color: #fff;"> 展望未来</a></li>
|
||||||
<li> <a id="nav-about" 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>
|
<!-- <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>
|
||||||
<!-- <div class="bg">
|
<!-- <div class="bg">
|
||||||
<img src="./imgs/svg/点纹.svg" alt="背景">
|
<img src="./imgs/svg/点纹.svg" alt="背景">
|
||||||
|
|
@ -78,7 +99,7 @@
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img class="futureImg" src="../imgs/approaching/6g.png" alt="低功耗量子计算芯片">
|
<img class="futureImg" src="../imgs/approaching/future.png" alt="低功耗量子计算芯片">
|
||||||
<div class="futureContent">
|
<div class="futureContent">
|
||||||
<p>面向量产的工程化突破</p>
|
<p>面向量产的工程化突破</p>
|
||||||
<p>设计出功耗性能更优秀的定制化计算芯片。</p>
|
<p>设计出功耗性能更优秀的定制化计算芯片。</p>
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,29 @@
|
||||||
<li> <a id="nav-future" href="./approaching.html"> 展望未来</a></li>
|
<li> <a id="nav-future" href="./approaching.html"> 展望未来</a></li>
|
||||||
<li> <a id="nav-about" 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>
|
<!-- <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>
|
||||||
<!-- <div class="bg">
|
<!-- <div class="bg">
|
||||||
<img src="./imgs/svg/点纹.svg" alt="背景">
|
<img src="./imgs/svg/点纹.svg" alt="背景">
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,28 @@
|
||||||
<li> <a id="nav-future" href="./approaching.html"> 展望未来</a></li>
|
<li> <a id="nav-future" href="./approaching.html"> 展望未来</a></li>
|
||||||
<li> <a id="nav-about" 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>
|
<!-- <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>
|
||||||
<!-- <div class="bg">
|
<!-- <div class="bg">
|
||||||
<img src="./imgs/svg/点纹.svg" alt="背景">
|
<img src="./imgs/svg/点纹.svg" alt="背景">
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img id="logo-img" src="./imgs/svg/logo.svg" alt="logo">
|
<img id="logo-img" src="../imgs/svg/logo.svg" alt="logo">
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li> <a id="nav-home" href="../index.html"> 首页</a></li>
|
<li> <a id="nav-home" href="../index.html"> 首页</a></li>
|
||||||
|
|
@ -26,7 +26,27 @@
|
||||||
<li> <a id="nav-future" href="./approaching.html"> 展望未来</a></li>
|
<li> <a id="nav-future" href="./approaching.html"> 展望未来</a></li>
|
||||||
<li> <a id="nav-about" 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>
|
<!-- <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>
|
||||||
<!-- <div class="bg">
|
<!-- <div class="bg">
|
||||||
<img src="./imgs/svg/点纹.svg" alt="背景">
|
<img src="./imgs/svg/点纹.svg" alt="背景">
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.2 KiB |
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -26,7 +26,27 @@
|
||||||
<li> <a id="nav-future" href="./html/approaching.html"> 展望未来</a></li>
|
<li> <a id="nav-future" href="./html/approaching.html"> 展望未来</a></li>
|
||||||
<li> <a id="nav-about" href="./html/aboutUs.html"> 关于我们</a></li>
|
<li> <a id="nav-about" href="./html/aboutUs.html"> 关于我们</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<button class="language" id="lang-toggle" aria-label="切换语言" tabindex="0">English</button>
|
<!-- <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>
|
||||||
<!-- <div class="bg">
|
<!-- <div class="bg">
|
||||||
<img src="./imgs/svg/点纹.svg" alt="背景">
|
<img src="./imgs/svg/点纹.svg" alt="背景">
|
||||||
|
|
|
||||||
|
|
@ -7,12 +7,17 @@ let infoWindow = null;
|
||||||
const mapData = {
|
const mapData = {
|
||||||
address: {
|
address: {
|
||||||
zh: '广东省深圳市南山区粤海街道麻岭社区麻雀岭工业区M-6栋中钢大厦5A010',
|
zh: '广东省深圳市南山区粤海街道麻岭社区麻雀岭工业区M-6栋中钢大厦5A010',
|
||||||
en: '5A010, Zhonggang Building, M-6 Building, Maque Ridge Industrial Zone, Ma Ling Community, Yuehai Street, Nanshan District, Shenzhen, Guangdong Province'
|
en: 'A010, 5th Floor, Zhonggang Building, Block M-6, Maqueling Industrial Zone, Maling Community, Yuehai Street, Nanshan District, Shenzhen, Guangdong Province, China'
|
||||||
},
|
},
|
||||||
companyName: {
|
companyName: {
|
||||||
zh: '深圳汉晶电子信息有限公司',
|
zh: '深圳汉晶电子信息有限公司',
|
||||||
en: 'Shenzhen Hanjing Electronic Information Co., Ltd'
|
en: 'Shenzhen Hanjing Electronic Information Co., Ltd'
|
||||||
},
|
},
|
||||||
|
phone:{
|
||||||
|
zh: '13420976989',
|
||||||
|
en: '+86 13420976989'
|
||||||
|
},
|
||||||
|
|
||||||
contactInfo: {
|
contactInfo: {
|
||||||
zh: {
|
zh: {
|
||||||
address: '地址',
|
address: '地址',
|
||||||
|
|
@ -36,7 +41,7 @@ function createInfoWindowContent(lang) {
|
||||||
<strong>${mapData.contactInfo[lang].address}：</strong>${mapData.address[lang]}
|
<strong>${mapData.contactInfo[lang].address}：</strong>${mapData.address[lang]}
|
||||||
</p>
|
</p>
|
||||||
<p style="margin: 0 0 8px 0; font-size: 13px; color: #100B4E;">
|
<p style="margin: 0 0 8px 0; font-size: 13px; color: #100B4E;">
|
||||||
<strong>${mapData.contactInfo[lang].phone}：</strong>13420976989
|
<strong>${mapData.contactInfo[lang].phone}：</strong>${mapData.phone[lang]}
|
||||||
</p>
|
</p>
|
||||||
<p style="margin: 0; font-size: 13px; color: #100B4E;">
|
<p style="margin: 0; font-size: 13px; color: #100B4E;">
|
||||||
<strong>${mapData.contactInfo[lang].email}：</strong>fu.bin@hjsilicon.com
|
<strong>${mapData.contactInfo[lang].email}：</strong>fu.bin@hjsilicon.com
|
||||||
|
|
@ -64,6 +69,9 @@ function updateMapInfo(lang) {
|
||||||
// 初始化地图
|
// 初始化地图
|
||||||
function initAMap() {
|
function initAMap() {
|
||||||
try {
|
try {
|
||||||
|
// 获取当前语言
|
||||||
|
const currentLang = window.currentLang || localStorage.getItem('siteLang') || "zh";
|
||||||
|
|
||||||
// 先加载所需插件
|
// 先加载所需插件
|
||||||
AMap.plugin(['AMap.Geocoder', 'AMap.ToolBar', 'AMap.Scale'], function() {
|
AMap.plugin(['AMap.Geocoder', 'AMap.ToolBar', 'AMap.Scale'], function() {
|
||||||
const geocoder = new AMap.Geocoder({
|
const geocoder = new AMap.Geocoder({
|
||||||
|
|
@ -88,7 +96,7 @@ function initAMap() {
|
||||||
// 创建标记
|
// 创建标记
|
||||||
marker = new AMap.Marker({
|
marker = new AMap.Marker({
|
||||||
position: [lnglat.lng, lnglat.lat],
|
position: [lnglat.lng, lnglat.lat],
|
||||||
title: mapData.companyName[window.currentLang],
|
title: mapData.companyName[currentLang],
|
||||||
animation: 'AMAP_ANIMATION_DROP',
|
animation: 'AMAP_ANIMATION_DROP',
|
||||||
offset: new AMap.Pixel(-13, -30)
|
offset: new AMap.Pixel(-13, -30)
|
||||||
});
|
});
|
||||||
|
|
@ -97,7 +105,7 @@ function initAMap() {
|
||||||
|
|
||||||
// 创建信息窗体
|
// 创建信息窗体
|
||||||
infoWindow = new AMap.InfoWindow({
|
infoWindow = new AMap.InfoWindow({
|
||||||
content: createInfoWindowContent(window.currentLang),
|
content: createInfoWindowContent(currentLang),
|
||||||
offset: new AMap.Pixel(0, -30),
|
offset: new AMap.Pixel(0, -30),
|
||||||
closeWhenClickMap: true
|
closeWhenClickMap: true
|
||||||
});
|
});
|
||||||
|
|
@ -129,26 +137,26 @@ function initAMap() {
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
console.error('地址解析失败:', result);
|
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) {
|
} catch (error) {
|
||||||
console.error('地图初始化失败:', 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加载完成时初始化
|
// DOM加载完成时初始化
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
if (typeof AMap !== 'undefined') {
|
|
||||||
initAMap();
|
|
||||||
}
|
|
||||||
|
|
||||||
const langData = {
|
const langData = {
|
||||||
zh: {
|
zh: {
|
||||||
btn: "English",
|
btn: "English",
|
||||||
|
|
@ -167,7 +175,6 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
emailLeftTitle: "我们准备好了",
|
emailLeftTitle: "我们准备好了",
|
||||||
emailLeftText: "如果您有更多的需求，请联系我们",
|
emailLeftText: "如果您有更多的需求，请联系我们",
|
||||||
bannertopBG: "../imgs/us/corporateCultureConcept.svg",
|
bannertopBG: "../imgs/us/corporateCultureConcept.svg",
|
||||||
|
|
||||||
},
|
},
|
||||||
en: {
|
en: {
|
||||||
btn: "简体中文",
|
btn: "简体中文",
|
||||||
|
|
@ -186,100 +193,193 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
emailLeftTitle: "We're ready.",
|
emailLeftTitle: "We're ready.",
|
||||||
emailLeftText: "If you have more needs, please contact us!",
|
emailLeftText: "If you have more needs, please contact us!",
|
||||||
bannertopBG: "../imgs/us/corporateCultureConcept_en.svg",
|
bannertopBG: "../imgs/us/corporateCultureConcept_en.svg",
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 使用全局的 currentLang
|
// 使用全局的 currentLang
|
||||||
if (!window.currentLang) {
|
if (!window.currentLang) {
|
||||||
window.currentLang = localStorage.getItem('siteLang') || "zh";
|
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) {
|
function applyLang(lang) {
|
||||||
const data = langData[lang];
|
const data = langData[lang];
|
||||||
|
|
||||||
// logo
|
// logo
|
||||||
document.getElementById("logo-img").src = data.logo;
|
// const logoImg = document.getElementById("logo-img");
|
||||||
document.getElementById("footerLogo").src = data.logo;
|
// if (logoImg) logoImg.src = data.logo;
|
||||||
|
|
||||||
|
// const footerLogo = document.getElementById("footerLogo");
|
||||||
|
// if (footerLogo) footerLogo.src = data.logo;
|
||||||
|
|
||||||
// 页面标题
|
// 页面标题
|
||||||
document.title = data.title;
|
document.title = data.title;
|
||||||
document.querySelector(".footerBoxRightTitle").textContent = data.title;
|
|
||||||
|
const footerBoxRightTitle = document.querySelector(".footerBoxRightTitle");
|
||||||
|
if (footerBoxRightTitle) footerBoxRightTitle.textContent = data.title;
|
||||||
|
|
||||||
// 顶部标题和描述
|
// 顶部标题和描述
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(1)').textContent = data.topBannerTitle;
|
const topBannerTitle = document.querySelector('.topBannerLeftTitle p:nth-child(1)');
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(2)').textContent = data.topBannerDesc;
|
if (topBannerTitle) topBannerTitle.textContent = data.topBannerTitle;
|
||||||
|
|
||||||
|
const topBannerDesc = document.querySelector('.topBannerLeftTitle p:nth-child(2)');
|
||||||
|
if (topBannerDesc) topBannerDesc.textContent = data.topBannerDesc;
|
||||||
|
|
||||||
// 愿景
|
// 愿景
|
||||||
document.querySelector('.textOne .Right p:nth-child(1)').textContent = data.visionTitle;
|
const visionTitle = document.querySelector('.textOne .Right p:nth-child(1)');
|
||||||
document.querySelector('.textOne .Right p:nth-child(2)').textContent = data.visionDesc;
|
if (visionTitle) visionTitle.textContent = data.visionTitle;
|
||||||
|
|
||||||
|
const visionDesc = document.querySelector('.textOne .Right p:nth-child(2)');
|
||||||
|
if (visionDesc) visionDesc.textContent = data.visionDesc;
|
||||||
|
|
||||||
// 使命
|
// 使命
|
||||||
document.querySelector('.textTwo .Right p:nth-child(1)').textContent = data.missionTitle;
|
const missionTitle = document.querySelector('.textTwo .Right p:nth-child(1)');
|
||||||
document.querySelector('.textTwo .Right p:nth-child(2)').textContent = data.missionDesc;
|
if (missionTitle) missionTitle.textContent = data.missionTitle;
|
||||||
|
|
||||||
|
const missionDesc = document.querySelector('.textTwo .Right p:nth-child(2)');
|
||||||
|
if (missionDesc) missionDesc.textContent = data.missionDesc;
|
||||||
|
|
||||||
// 价值观
|
// 价值观
|
||||||
document.querySelector('.textThree .Right p:nth-child(1)').textContent = data.valueTitle;
|
const valueTitle = document.querySelector('.textThree .Right p:nth-child(1)');
|
||||||
document.querySelector('.textThree .Right p:nth-child(2)').textContent = data.valueDesc;
|
if (valueTitle) valueTitle.textContent = data.valueTitle;
|
||||||
|
|
||||||
|
const valueDesc = document.querySelector('.textThree .Right p:nth-child(2)');
|
||||||
|
if (valueDesc) valueDesc.textContent = data.valueDesc;
|
||||||
|
|
||||||
// 邮箱区
|
// 邮箱区
|
||||||
document.querySelector(".emailLeftTitle").textContent = data.emailLeftTitle;
|
const emailLeftTitle = document.querySelector(".emailLeftTitle");
|
||||||
document.querySelector(".emailLeftText").textContent = data.emailLeftText;
|
if (emailLeftTitle) emailLeftTitle.textContent = data.emailLeftTitle;
|
||||||
|
|
||||||
|
const emailLeftText = document.querySelector(".emailLeftText");
|
||||||
|
if (emailLeftText) emailLeftText.textContent = data.emailLeftText;
|
||||||
|
|
||||||
// 按钮文本
|
// 背景图片
|
||||||
document.getElementById("lang-toggle").textContent = data.btn;
|
const bannertop = document.querySelector('.bannertop');
|
||||||
document.querySelector('.bannertop').style.backgroundImage = `url(${data.bannertopBG})`;
|
if (bannertop) bannertop.style.backgroundImage = `url(${data.bannertopBG})`;
|
||||||
|
|
||||||
// 英文样式调整（如有需要可扩展）
|
// 英文样式调整
|
||||||
const visionPs = document.querySelectorAll('.textOne .Right p');
|
const visionPs = document.querySelectorAll('.textOne .Right p');
|
||||||
const missionPs = document.querySelectorAll('.textTwo .Right p');
|
const missionPs = document.querySelectorAll('.textTwo .Right p');
|
||||||
const valuePs = document.querySelectorAll('.textThree .Right p');
|
const valuePs = document.querySelectorAll('.textThree .Right p');
|
||||||
const allPs = [...visionPs, ...missionPs, ...valuePs];
|
|
||||||
|
if (visionPs && missionPs && valuePs) {
|
||||||
if (lang === 'en') {
|
const allPs = [...visionPs, ...missionPs, ...valuePs];
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(1)').classList.add('en');
|
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(2)').classList.add('en');
|
if (lang === 'en') {
|
||||||
allPs.forEach(p => p.classList.add('en'));
|
if (topBannerTitle) topBannerTitle.classList.add('en');
|
||||||
|
if (topBannerDesc) topBannerDesc.classList.add('en');
|
||||||
|
allPs.forEach(p => p.classList.add('en'));
|
||||||
} else {
|
} else {
|
||||||
allPs.forEach(p => p.classList.remove('en'));
|
if (topBannerTitle) topBannerTitle.classList.remove('en');
|
||||||
|
if (topBannerDesc) topBannerDesc.classList.remove('en');
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(1)').classList.remove('en');
|
allPs.forEach(p => p.classList.remove('en'));
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(2)').classList.remove('en');
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 更新地图信息
|
||||||
|
updateMapInfo(lang);
|
||||||
|
|
||||||
|
// 更新语言显示
|
||||||
|
updateLanguageDisplay(lang);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 修正的handleLangToggle函数，正确接收lang参数
|
||||||
|
function handleLangToggle(lang) {
|
||||||
// 语言切换处理函数
|
window.currentLang = lang;
|
||||||
function handleLangToggle() {
|
|
||||||
window.currentLang = window.currentLang === "zh" ? "en" : "zh";
|
|
||||||
localStorage.setItem('siteLang', window.currentLang);
|
localStorage.setItem('siteLang', window.currentLang);
|
||||||
applyLang(window.currentLang);
|
applyLang(window.currentLang);
|
||||||
updateMapInfo(window.currentLang);
|
updateLanguageDisplay(window.currentLang);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化语言和地图
|
||||||
|
applyLang(window.currentLang);
|
||||||
|
updateLanguageDisplay(window.currentLang);
|
||||||
|
|
||||||
|
if (typeof AMap !== 'undefined') {
|
||||||
|
initAMap();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化
|
// 获取语言切换相关的DOM元素
|
||||||
applyLang(window.currentLang);
|
const langBtn = document.getElementById('lang-btn');
|
||||||
|
const langDropdown = document.getElementById('lang-dropdown');
|
||||||
// 事件绑定
|
const langItems = document.querySelectorAll('.lang-item');
|
||||||
document.getElementById("lang-toggle").addEventListener("click", handleLangToggle);
|
|
||||||
document.getElementById("lang-toggle").addEventListener("keydown", e => {
|
// 切换下拉菜单显示/隐藏
|
||||||
if (e.key === "Enter" || e.key === " ") handleLangToggle();
|
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();
|
||||||
|
// });
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// 回调函数
|
// 回调函数
|
||||||
window.initMap = function() {
|
window.initMap = function() {
|
||||||
if (typeof AMap !== 'undefined') {
|
if (typeof AMap !== 'undefined') {
|
||||||
|
|
|
||||||
|
|
@ -63,20 +63,40 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
let currentLang = localStorage.getItem('siteLang') || "zh";
|
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) {
|
function applyLang(lang) {
|
||||||
const data = langData[lang];
|
const data = langData[lang];
|
||||||
|
|
||||||
// logo
|
// logo
|
||||||
|
// const footerLogo = document.getElementById("footerLogo");
|
||||||
document.getElementById("footerLogo").src = data.logo;
|
// if (footerLogo) footerLogo.src = data.logo;
|
||||||
|
|
||||||
// 页面标题
|
// 页面标题
|
||||||
document.title = data.title;
|
document.title = data.title;
|
||||||
|
|
||||||
// 顶部标题
|
// 顶部标题
|
||||||
document.querySelector('.topBannerLeftTitle p').textContent = data.topBannerTitle;
|
const topBannerTitle = document.querySelector('.topBannerLeftTitle p');
|
||||||
document.querySelector('.footerBoxRightTitle').textContent = data.title;
|
if (topBannerTitle) topBannerTitle.textContent = data.topBannerTitle;
|
||||||
|
|
||||||
|
const footerBoxRightTitle = document.querySelector('.footerBoxRightTitle');
|
||||||
|
if (footerBoxRightTitle) footerBoxRightTitle.textContent = data.title;
|
||||||
|
|
||||||
// 列表内容
|
// 列表内容
|
||||||
const futureList = document.querySelectorAll('.futureList > li');
|
const futureList = document.querySelectorAll('.futureList > li');
|
||||||
data.futureList.forEach((item, idx) => {
|
data.futureList.forEach((item, idx) => {
|
||||||
|
|
@ -84,50 +104,120 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||||
// 图片alt
|
// 图片alt
|
||||||
const img = futureList[idx].querySelector('.futureImg');
|
const img = futureList[idx].querySelector('.futureImg');
|
||||||
if (img) img.alt = item.imgAlt;
|
if (img) img.alt = item.imgAlt;
|
||||||
// 标题
|
|
||||||
|
// 标题和描述
|
||||||
const ps = futureList[idx].querySelectorAll('.futureContent p');
|
const ps = futureList[idx].querySelectorAll('.futureContent p');
|
||||||
if (ps[0]) ps[0].textContent = item.title;
|
if (ps[0]) ps[0].textContent = item.title;
|
||||||
if (ps[1]) ps[1].textContent = item.desc;
|
if (ps[1]) ps[1].textContent = item.desc;
|
||||||
|
|
||||||
// 圆圈
|
// 圆圈
|
||||||
const circle = futureList[idx].querySelector('.futureCircleInner');
|
const circle = futureList[idx].querySelector('.futureCircleInner');
|
||||||
if (circle) circle.textContent = item.circle;
|
if (circle) circle.textContent = item.circle;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 英文样式切换
|
// 英文样式切换
|
||||||
const futureList2 = document.querySelector('.futureList');
|
const futureList2 = document.querySelector('.futureList');
|
||||||
if (lang === 'en') {
|
if (futureList2) {
|
||||||
futureList2.classList.add('en');
|
if (lang === 'en') {
|
||||||
} else {
|
futureList2.classList.add('en');
|
||||||
futureList2.classList.remove('en');
|
} else {
|
||||||
|
futureList2.classList.remove('en');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 邮箱区
|
// 邮箱区
|
||||||
document.querySelector(".emailLeftTitle").textContent = data.emailLeftTitle;
|
const emailLeftTitle = document.querySelector(".emailLeftTitle");
|
||||||
document.querySelector(".emailLeftText").textContent = data.emailLeftText;
|
if (emailLeftTitle) emailLeftTitle.textContent = data.emailLeftTitle;
|
||||||
|
|
||||||
|
const emailLeftText = document.querySelector(".emailLeftText");
|
||||||
|
if (emailLeftText) emailLeftText.textContent = data.emailLeftText;
|
||||||
|
|
||||||
// 按钮文本
|
// 英文样式调整
|
||||||
document.getElementById("lang-toggle").textContent = data.btn;
|
|
||||||
|
|
||||||
// 英文样式调整（如有需要可扩展）
|
|
||||||
if (lang === 'en') {
|
if (lang === 'en') {
|
||||||
document.querySelector('.topBannerLeftTitle p').classList.add('en');
|
if (topBannerTitle) topBannerTitle.classList.add('en');
|
||||||
} else {
|
} else {
|
||||||
document.querySelector('.topBannerLeftTitle p').classList.remove('en');
|
if (topBannerTitle) topBannerTitle.classList.remove('en');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 更新语言显示
|
||||||
|
updateLanguageDisplay(lang);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleLangToggle() {
|
// 修正的handleLangToggle函数，正确接收lang参数
|
||||||
currentLang = currentLang === "zh" ? "en" : "zh";
|
function handleLangToggle(lang) {
|
||||||
|
currentLang = lang;
|
||||||
localStorage.setItem('siteLang', currentLang);
|
localStorage.setItem('siteLang', currentLang);
|
||||||
applyLang(currentLang);
|
applyLang(currentLang);
|
||||||
|
updateLanguageDisplay(currentLang);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化
|
// 初始化
|
||||||
applyLang(currentLang);
|
applyLang(currentLang);
|
||||||
|
updateLanguageDisplay(currentLang);
|
||||||
|
|
||||||
// 事件绑定
|
// 获取语言切换相关的DOM元素
|
||||||
document.getElementById("lang-toggle").addEventListener("click", handleLangToggle);
|
const langBtn = document.getElementById('lang-btn');
|
||||||
document.getElementById("lang-toggle").addEventListener("keydown", e => {
|
const langDropdown = document.getElementById('lang-dropdown');
|
||||||
if (e.key === "Enter" || e.key === " ") handleLangToggle();
|
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();
|
||||||
|
// });
|
||||||
});
|
});
|
||||||
|
|
@ -25,31 +25,136 @@ const headerLangData = {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
let currentLang = localStorage.getItem('siteLang') || "zh";
|
// 语言显示更新函数
|
||||||
|
function updateHeaderLanguageDisplay(lang) {
|
||||||
const handleHeaderLangToggle = () => {
|
const currentFlag = document.getElementById('current-flag');
|
||||||
currentLang = currentLang === "zh" ? "en" : "zh";
|
const currentLangText = document.getElementById('current-lang');
|
||||||
localStorage.setItem('siteLang', currentLang);
|
|
||||||
setHeaderLang(currentLang);
|
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) {
|
function setHeaderLang(lang) {
|
||||||
const data = headerLangData[lang];
|
const data = headerLangData[lang];
|
||||||
document.getElementById("nav-home").textContent = data.nav.home;
|
|
||||||
document.getElementById("nav-business").textContent = data.nav.business;
|
// 导航文本
|
||||||
document.getElementById("nav-products").textContent = data.nav.products;
|
const navHome = document.getElementById("nav-home");
|
||||||
document.getElementById("nav-support").textContent = data.nav.support;
|
if (navHome) navHome.textContent = data.nav.home;
|
||||||
document.getElementById("nav-future").textContent = data.nav.future;
|
|
||||||
document.getElementById("nav-about").textContent = data.nav.about;
|
const navBusiness = document.getElementById("nav-business");
|
||||||
document.getElementById("lang-toggle").textContent = data.btn;
|
if (navBusiness) navBusiness.textContent = data.nav.business;
|
||||||
document.getElementById("logo-img").src = data.logo;
|
|
||||||
|
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', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
document.getElementById("lang-toggle").addEventListener("click", handleHeaderLangToggle);
|
let currentLang = localStorage.getItem('siteLang') || "zh";
|
||||||
document.getElementById("lang-toggle").addEventListener("keydown", e => {
|
|
||||||
if (e.key === "Enter" || e.key === " ") handleHeaderLangToggle();
|
// 初始化语言
|
||||||
});
|
|
||||||
// 页面加载时自动切换到上次选择的语言
|
|
||||||
setHeaderLang(currentLang);
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -43,345 +43,429 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
observer.observe(element);
|
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();
|
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();
|
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();
|
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();
|
startAutoPlay();
|
||||||
});
|
|
||||||
|
|
||||||
// 开始自动播放
|
// --------------------------------
|
||||||
startAutoPlay();
|
|
||||||
|
|
||||||
// --------------------------------
|
const langData = {
|
||||||
|
zh: {
|
||||||
const langData = {
|
nav: {
|
||||||
zh: {
|
home: "首页",
|
||||||
nav: {
|
business: "主营业务",
|
||||||
home: "首页",
|
products: "产品案例",
|
||||||
business: "主营业务",
|
support: "技术支持",
|
||||||
products: "产品案例",
|
future: "展望未来",
|
||||||
support: "技术支持",
|
about: "关于我们"
|
||||||
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: "如果您有更多的需求，请联系我们",
|
||||||
},
|
},
|
||||||
btn: "English",
|
en: {
|
||||||
logo: "./imgs/svg/logo.svg",
|
nav: {
|
||||||
bannerBg: "../imgs/svg/背景纹（大）.svg",
|
home: "Home",
|
||||||
bannerListImgs: [
|
business: "Business",
|
||||||
"../imgs/home/mainBusiness.png",
|
products: "Products",
|
||||||
"../imgs/home/aboutUs.png",
|
support: "Support",
|
||||||
|
future: "Future",
|
||||||
],
|
about: "About Us"
|
||||||
CarouselImgs: [
|
},
|
||||||
"./imgs/home/Y100.jpg",
|
btn: "简体中文",
|
||||||
"./imgs/home/S6PRO.jpg",
|
logo: "./imgs/svg/logo_en.svg",
|
||||||
],
|
bannerBg: "../imgs/svg/bg_en.svg",
|
||||||
carouselText: "产品详情",
|
bannerListImgs: [
|
||||||
title: "深圳汉晶电子信息有限公司",
|
"../imgs/home/mainBusiness_en.png",
|
||||||
bannerBottom2Title: "为什么选择汉晶?",
|
"../imgs/home/aboutUs_en.png",
|
||||||
bannerBottomListOneTitle: "IC设计全生命周期一站式覆盖",
|
],
|
||||||
bannerBottomListTwoTitle: "独特的低功耗设计，让芯片更有竞争力",
|
CarouselImgs: [
|
||||||
bannerBottomListThreeTitle: "有稳定的芯片制造商合作关系",
|
"./imgs/home/Y100_en.jpg",
|
||||||
bannerBottomListFourTitle: "流片均一版成功，即流片成功率100%,助力客户赢得市场",
|
"./imgs/home/S6PRO_en.jpg",
|
||||||
bannertopTitle: "芯片设计技术服务",
|
],
|
||||||
bannertopText: "我们公司提供全方位的芯片设计技术服务，涵盖从需求讨论、系统设计、逻辑设计、FPGA原型验证到最终的芯片制造、测试与验证等各个环节。我们采用行业领先的工具和技术，确保芯片的性能、功耗、稳定性都能满足客户需求。",
|
carouselText: "Product Details",
|
||||||
bannerletfTextTitle: "Y100 服务器芯片",
|
title: "SZHJ Electronic Information Co., Ltd",
|
||||||
bannerletfTextTitle2: "S6PRO 运算加速芯片",
|
bannerBottom2Title: "Why Hanjing?",
|
||||||
bannerBottomTextTitle: "我们的目标",
|
bannerBottomListOneTitle: "One-stop coverage of the entire IC design life cycle",
|
||||||
bannerBottomTextText: "汇聚人才，共同创造突破性技术，为更加智能、更加安全、更有保障的科技世界保驾护航。",
|
bannerBottomListTwoTitle: "Unique low-power design makes the chip more competitive",
|
||||||
newBottomTitle: "研发团队",
|
bannerBottomListThreeTitle: "Stable relationships with chip makers",
|
||||||
newBottomText: "研究生学历",
|
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",
|
||||||
emailLeftTitle: "我们准备好了",
|
bannertopTitle: "Chip Design Technology Services",
|
||||||
emailLeftText: "如果您有更多的需求，请联系我们",
|
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!",
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 语言显示更新函数 - 移到外部作为独立函数
|
||||||
|
function updateLanguageDisplay(lang) {
|
||||||
|
const currentFlag = document.getElementById('current-flag');
|
||||||
|
const currentLangText = document.getElementById('current-lang');
|
||||||
|
|
||||||
},
|
if (currentFlag && currentLangText) {
|
||||||
en: {
|
if (lang === 'en') {
|
||||||
nav: {
|
currentFlag.src = './imgs/flags/en.svg';
|
||||||
home: "Home",
|
currentLangText.textContent = 'English';
|
||||||
business: "Business",
|
} else {
|
||||||
products: "Products",
|
currentFlag.src = './imgs/flags/zh.svg';
|
||||||
support: "Support",
|
currentLangText.textContent = '简体中文';
|
||||||
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!",
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let currentLang = localStorage.getItem('siteLang') || "zh";
|
|
||||||
|
|
||||||
function applyLang(lang) {
|
|
||||||
const data = langData[lang];
|
|
||||||
|
|
||||||
// 导航文本
|
|
||||||
document.getElementById("nav-home").textContent = data.nav.home;
|
|
||||||
document.getElementById("nav-business").textContent = data.nav.business;
|
|
||||||
document.getElementById("nav-products").textContent = data.nav.products;
|
|
||||||
document.getElementById("nav-support").textContent = data.nav.support;
|
|
||||||
document.getElementById("nav-future").textContent = data.nav.future;
|
|
||||||
document.getElementById("nav-about").textContent = data.nav.about;
|
|
||||||
|
|
||||||
// 按钮文本
|
|
||||||
document.getElementById("lang-toggle").textContent = data.btn;
|
|
||||||
// logo
|
|
||||||
document.getElementById("logo-img").src = data.logo;
|
|
||||||
document.getElementById("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;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 其它页面内容
|
|
||||||
document.querySelector('.bannerBottom2Title').textContent = data.bannerBottom2Title;
|
|
||||||
document.querySelector('.bannerBottomListOneTitle').textContent = data.bannerBottomListOneTitle;
|
|
||||||
document.querySelector('.bannerBottomListTwoTitle').textContent = data.bannerBottomListTwoTitle;
|
|
||||||
document.querySelector('.bannerBottomListThreeTitle').textContent = data.bannerBottomListThreeTitle;
|
|
||||||
document.querySelector('.bannerBottomListFourTitle').textContent = data.bannerBottomListFourTitle;
|
|
||||||
document.querySelector('.bannertopTitle').textContent = data.bannertopTitle;
|
|
||||||
document.querySelector('.bannertopText').textContent = data.bannertopText;
|
|
||||||
document.querySelector('.bannerletfTextTitle').textContent = data.bannerletfTextTitle;
|
|
||||||
document.querySelector('.bannerBottomTextTitle').textContent = data.bannerBottomTextTitle;
|
|
||||||
document.querySelector('.bannerBottomTextText').textContent = data.bannerBottomTextText;
|
|
||||||
document.querySelector('.newBottomTitle').textContent = data.newBottomTitle;
|
|
||||||
document.querySelector('.newBottomText').textContent = data.newBottomText;
|
|
||||||
document.querySelector('.emailLeftTitle').textContent = data.emailLeftTitle;
|
|
||||||
document.querySelector('.emailLeftText').textContent = data.emailLeftText;
|
|
||||||
document.querySelector('.footerBoxRightTitle').textContent = data.title;
|
|
||||||
document.querySelector('.title').textContent = data.title;
|
|
||||||
document.getElementById("bannerletfTextTitle2").textContent = data.bannerletfTextTitle2;
|
|
||||||
|
|
||||||
|
|
||||||
if (lang === 'en') {
|
|
||||||
document.querySelector('.textBox').classList.add('en');
|
|
||||||
|
|
||||||
|
|
||||||
} else {
|
|
||||||
document.querySelector('.textBox').classList.remove('en');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let currentLang = localStorage.getItem('siteLang') || "zh";
|
||||||
|
|
||||||
|
function applyLang(lang) {
|
||||||
|
try {
|
||||||
|
const data = langData[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;
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// bannerBottomList 背景图片
|
function handleLangToggle(lang) {
|
||||||
const bannerListClasses = [
|
currentLang = lang;
|
||||||
".bannertop",
|
localStorage.setItem('siteLang', currentLang);
|
||||||
".bannerBottom",
|
applyLang(currentLang);
|
||||||
];
|
updateLanguageDisplay(currentLang);
|
||||||
bannerListClasses.forEach((cls, idx) => {
|
|
||||||
const el = document.querySelector(cls);
|
// 如果在aboutUs页面，还需要更新地图信息
|
||||||
if (el) {
|
if (typeof updateMapInfo === 'function') {
|
||||||
el.style.backgroundImage = `url(${data.bannerListImgs[idx]})`;
|
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)';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
function handleLangToggle() {
|
|
||||||
currentLang = currentLang === "zh" ? "en" : "zh";
|
|
||||||
localStorage.setItem('siteLang', currentLang);
|
|
||||||
applyLang(currentLang);
|
|
||||||
}
|
|
||||||
// 初始化
|
|
||||||
applyLang(currentLang);
|
|
||||||
|
|
||||||
|
|
||||||
// 事件绑定
|
|
||||||
document.getElementById("lang-toggle").addEventListener("click", handleLangToggle);
|
|
||||||
document.getElementById("lang-toggle").addEventListener("keydown", e => {
|
|
||||||
if (e.key === "Enter" || e.key === " ") handleLangToggle();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
// 点击其他区域关闭下拉菜单
|
||||||
|
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)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -118,30 +118,50 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
|
||||||
|
|
||||||
let currentLang = localStorage.getItem('siteLang') || "zh";
|
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) {
|
function applyLang(lang) {
|
||||||
const data = langData[lang];
|
const data = langData[lang];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// logo
|
// logo
|
||||||
document.getElementById("footerLogo").src = data.logo;
|
// const footerLogo = document.getElementById("footerLogo");
|
||||||
|
// if (footerLogo) footerLogo.src = data.logo;
|
||||||
|
|
||||||
|
|
||||||
// 页面内容
|
// 页面内容
|
||||||
document.getElementById("title").textContent = data.title;
|
const titleElement = document.getElementById("title");
|
||||||
|
if (titleElement) titleElement.textContent = data.title;
|
||||||
|
|
||||||
// 顶部标题和描述
|
// 顶部标题和描述
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(1)').textContent = data.topBannerTitle;
|
const topBannerTitle = document.querySelector('.topBannerLeftTitle p:nth-child(1)');
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(2)').textContent = data.topBannerDesc;
|
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');
|
const accordionItems = document.querySelectorAll('.accordion-item');
|
||||||
data.accordion.forEach((item, idx) => {
|
data.accordion.forEach((item, idx) => {
|
||||||
if (accordionItems[idx]) {
|
if (accordionItems[idx]) {
|
||||||
accordionItems[idx].querySelector('.accordion-header h3').textContent = item.title;
|
const header = accordionItems[idx].querySelector('.accordion-header h3');
|
||||||
accordionItems[idx].querySelector('.accordion-content p').textContent = item.content;
|
if (header) header.textContent = item.title;
|
||||||
|
|
||||||
|
const content = accordionItems[idx].querySelector('.accordion-content p');
|
||||||
|
if (content) content.textContent = item.content;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -156,58 +176,123 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 优势列表样式切换
|
// 优势列表样式切换
|
||||||
bannerBottomList.forEach(li => {
|
bannerBottomList.forEach(li => {
|
||||||
if (lang === 'en') {
|
if (lang === 'en') {
|
||||||
li.classList.add('en');
|
li.classList.add('en');
|
||||||
} else {
|
} else {
|
||||||
li.classList.remove('en');
|
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})`;
|
||||||
|
|
||||||
document.querySelector(".emailLeftTitle").textContent = data.emailLeftTitle;
|
// 切换样式
|
||||||
document.querySelector(".emailLeftText").textContent = data.emailLeftText;
|
const topBannerLeftTitle = document.querySelector('.topBannerLeftTitle');
|
||||||
document.querySelector('.footerBoxRightTitle').textContent = data.title;
|
const topBannerLeft = document.querySelector('.topBannerLeft');
|
||||||
//背景图
|
|
||||||
document.querySelector('.bannertop').style.backgroundImage = `url(${data.bannertopBG})`;
|
if (lang === 'en') {
|
||||||
document.querySelector('.bannerBottom').style.backgroundImage = `url(${data.bannerBottomBG})`;
|
if (topBannerTitle) topBannerTitle.classList.add('en');
|
||||||
|
if (topBannerDesc) topBannerDesc.classList.add('en');
|
||||||
// 切换样式
|
if (topBannerLeft) topBannerLeft.classList.add('en');
|
||||||
if (lang === 'en') {
|
|
||||||
|
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(1)').classList.add('en');
|
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(2)').classList.add('en');
|
|
||||||
document.querySelector('.topBannerLeft').classList.add('en');
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
if (topBannerTitle) topBannerTitle.classList.remove('en');
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(1)').classList.remove('en');
|
if (topBannerDesc) topBannerDesc.classList.remove('en');
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(2)').classList.remove('en');
|
if (topBannerLeft) topBannerLeft.classList.remove('en');
|
||||||
document.querySelector('.topBannerLeft').classList.remove('en');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 更新下拉菜单显示
|
||||||
|
updateLanguageDisplay(lang);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleLangToggle() {
|
// 修正的handleLangToggle函数，正确接收lang参数
|
||||||
currentLang = currentLang === "zh" ? "en" : "zh";
|
function handleLangToggle(lang) {
|
||||||
|
currentLang = lang;
|
||||||
localStorage.setItem('siteLang', currentLang);
|
localStorage.setItem('siteLang', currentLang);
|
||||||
applyLang(currentLang);
|
applyLang(currentLang);
|
||||||
|
updateLanguageDisplay(currentLang);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化
|
// 初始化
|
||||||
applyLang(currentLang);
|
applyLang(currentLang);
|
||||||
|
updateLanguageDisplay(currentLang);
|
||||||
|
|
||||||
|
// 获取语言切换相关的DOM元素
|
||||||
// 事件绑定
|
const langBtn = document.getElementById('lang-btn');
|
||||||
document.getElementById("lang-toggle").addEventListener("click", handleLangToggle);
|
const langDropdown = document.getElementById('lang-dropdown');
|
||||||
document.getElementById("lang-toggle").addEventListener("keydown", e => {
|
const langItems = document.querySelectorAll('.lang-item');
|
||||||
if (e.key === "Enter" || e.key === " ") handleLangToggle();
|
|
||||||
|
// 切换下拉菜单显示/隐藏
|
||||||
|
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();
|
||||||
|
// });
|
||||||
});
|
});
|
||||||
|
|
@ -149,7 +149,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
product_item_titleVV10:"VV10 Information Security Chip",
|
product_item_titleVV10:"VV10 Information Security Chip",
|
||||||
OtherProducts:"Other Products",
|
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_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:"Technology highlights: Customized 22nm process with low power design.",
|
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_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: it uses a customized 12nm process, integrates multiple core modules, and improves AI computing power with a self-developed AI algorithm acceleration module.",
|
detail_info_textS6PRO2:"Technical highlights: it uses a customized 12nm process, integrates multiple core modules, and improves AI computing power with a self-developed AI algorithm acceleration module.",
|
||||||
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_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.",
|
||||||
|
|
@ -162,107 +162,190 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
detail_info_textGSEC82:"Technical Highlights: Supports state secret algorithms with CC EAL5+ certification and TRNG.",
|
detail_info_textGSEC82:"Technical Highlights: Supports state secret algorithms with CC EAL5+ certification and TRNG.",
|
||||||
emailLeftTitle:"We're ready.",
|
emailLeftTitle:"We're ready.",
|
||||||
emailLeftText:"If you have more needs, please contact us!",
|
emailLeftText:"If you have more needs, please contact us!",
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let currentLang = localStorage.getItem('siteLang') || "zh";
|
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) {
|
function applyLang(lang) {
|
||||||
const data = langData[lang];
|
const data = langData[lang];
|
||||||
|
|
||||||
|
// 检查元素是否存在，然后再设置
|
||||||
|
// // logo
|
||||||
|
// const footerLogo = document.getElementById("footerLogo");
|
||||||
// logo
|
// if (footerLogo) footerLogo.src = data.logo;
|
||||||
document.getElementById("footerLogo").src = data.logo;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 页面内容
|
// 页面内容
|
||||||
document.getElementById("title").textContent = data.title;
|
const titleElement = document.getElementById("title");
|
||||||
document.getElementById("topBannerLeftTitle1").textContent = data.topBannerLeftTitle1;
|
if (titleElement) titleElement.textContent = data.title;
|
||||||
document.getElementById("topBannerLeftTitle2").textContent = data.topBannerLeftTitle2;
|
|
||||||
document.querySelector(".topBannerBthSpan").textContent = data.topBannerBthSpan;
|
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 => {
|
document.querySelectorAll('.product_item_titleY100').forEach(el => {
|
||||||
el.textContent = data.product_item_titleY100;
|
if (el) el.textContent = data.product_item_titleY100;
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelectorAll('.product_item_titleS6PRO').forEach(el => {
|
document.querySelectorAll('.product_item_titleS6PRO').forEach(el => {
|
||||||
el.textContent = data.product_item_titleS6PRO;
|
if (el) el.textContent = data.product_item_titleS6PRO;
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelectorAll('.product_item_titleFX100').forEach(el => {
|
document.querySelectorAll('.product_item_titleFX100').forEach(el => {
|
||||||
el.textContent = data.product_item_titleFX100;
|
if (el) el.textContent = data.product_item_titleFX100;
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelectorAll('.product_item_titleGSEC8').forEach(el => {
|
document.querySelectorAll('.product_item_titleGSEC8').forEach(el => {
|
||||||
el.textContent = data.product_item_titleGSEC8;
|
if (el) el.textContent = data.product_item_titleGSEC8;
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelectorAll('.product_item_titleS1PRO').forEach(el => {
|
document.querySelectorAll('.product_item_titleS1PRO').forEach(el => {
|
||||||
el.textContent = data.product_item_titleS1PRO;
|
if (el) el.textContent = data.product_item_titleS1PRO;
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelectorAll('.product_item_titleVV10').forEach(el => {
|
document.querySelectorAll('.product_item_titleVV10').forEach(el => {
|
||||||
el.textContent = data.product_item_titleVV10;
|
if (el) el.textContent = data.product_item_titleVV10;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
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,
|
||||||
|
};
|
||||||
|
|
||||||
document.querySelector(".OtherProducts").textContent = data.OtherProducts;
|
// 遍历并应用文本
|
||||||
document.querySelector(".detail_info_textY1001").textContent = data.detail_info_textY1001;
|
for (const [selector, text] of Object.entries(elements)) {
|
||||||
document.querySelector(".detail_info_textY1002").textContent = data.detail_info_textY1002;
|
const element = document.querySelector(selector);
|
||||||
document.querySelector(".detail_info_textS6PRO1").textContent = data.detail_info_textS6PRO1;
|
if (element) element.textContent = text;
|
||||||
document.querySelector(".detail_info_textS6PRO2").textContent = data.detail_info_textS6PRO2;
|
}
|
||||||
document.querySelector(".detail_info_textS1PRO1").textContent = data.detail_info_textS1PRO1;
|
|
||||||
document.querySelector(".detail_info_textS1PRO2").textContent = data.detail_info_textS1PRO2;
|
const footerBoxRightTitle = document.querySelector('.footerBoxRightTitle');
|
||||||
document.querySelector(".detail_info_textVV101").textContent = data.detail_info_textVV101;
|
if (footerBoxRightTitle) footerBoxRightTitle.textContent = data.title;
|
||||||
document.querySelector(".detail_info_textVV102").textContent = data.detail_info_textVV102;
|
|
||||||
document.querySelector(".detail_info_textFX1001").textContent = data.detail_info_textFX1001;
|
|
||||||
document.querySelector(".detail_info_textFX1002").textContent = data.detail_info_textFX1002;
|
|
||||||
document.querySelector(".detail_info_textGSEC81").textContent = data.detail_info_textGSEC81;
|
|
||||||
document.querySelector(".detail_info_textGSEC82").textContent = data.detail_info_textGSEC82;
|
|
||||||
document.querySelector(".emailLeftTitle").textContent = data.emailLeftTitle;
|
|
||||||
document.querySelector(".emailLeftText").textContent = data.emailLeftText;
|
|
||||||
document.querySelector('.footerBoxRightTitle').textContent = data.title;
|
|
||||||
|
|
||||||
// 切换样式
|
// 切换样式
|
||||||
if (lang === 'en') {
|
if (lang === 'en') {
|
||||||
document.getElementById('topBannerLeftTitle1').classList.add('en');
|
if (topBannerLeftTitle1) topBannerLeftTitle1.classList.add('en');
|
||||||
document.getElementById('topBannerLeftTitle2').classList.add('en');
|
if (topBannerLeftTitle2) topBannerLeftTitle2.classList.add('en');
|
||||||
} else {
|
} else {
|
||||||
document.getElementById('topBannerLeftTitle1').classList.remove('en');
|
if (topBannerLeftTitle1) topBannerLeftTitle1.classList.remove('en');
|
||||||
document.getElementById('topBannerLeftTitle2').classList.remove('en');
|
if (topBannerLeftTitle2) topBannerLeftTitle2.classList.remove('en');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 更新语言显示
|
||||||
|
updateLanguageDisplay(lang);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleLangToggle() {
|
// 修正的handleLangToggle函数，正确接收lang参数
|
||||||
currentLang = currentLang === "zh" ? "en" : "zh";
|
function handleLangToggle(lang) {
|
||||||
|
currentLang = lang;
|
||||||
localStorage.setItem('siteLang', currentLang);
|
localStorage.setItem('siteLang', currentLang);
|
||||||
applyLang(currentLang);
|
applyLang(currentLang);
|
||||||
|
updateLanguageDisplay(currentLang);
|
||||||
}
|
}
|
||||||
// 初始化
|
|
||||||
|
// 初始化
|
||||||
applyLang(currentLang);
|
applyLang(currentLang);
|
||||||
|
updateLanguageDisplay(currentLang);
|
||||||
|
|
||||||
// 事件绑定
|
|
||||||
document.getElementById("lang-toggle").addEventListener("click", handleLangToggle);
|
|
||||||
document.getElementById("lang-toggle").addEventListener("keydown", e => {
|
|
||||||
if (e.key === "Enter" || e.key === " ") handleLangToggle();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 获取语言切换相关的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();
|
||||||
|
// });
|
||||||
});
|
});
|
||||||
|
|
@ -61,60 +61,158 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
let currentLang = localStorage.getItem('siteLang') || "zh";
|
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) {
|
function applyLang(lang) {
|
||||||
const data = langData[lang];
|
const data = langData[lang];
|
||||||
|
|
||||||
// logo
|
// logo
|
||||||
document.getElementById("footerLogo").src = data.logo;
|
// const footerLogo = document.getElementById("footerLogo");
|
||||||
document.querySelector('.footerBoxRightTitle').textContent = data.title;
|
// if (footerLogo) footerLogo.src = data.logo;
|
||||||
|
|
||||||
|
const footerBoxRightTitle = document.querySelector('.footerBoxRightTitle');
|
||||||
|
if (footerBoxRightTitle) footerBoxRightTitle.textContent = data.title;
|
||||||
|
|
||||||
// 页面标题
|
// 页面标题
|
||||||
document.title = data.title;
|
document.title = data.title;
|
||||||
|
|
||||||
// 顶部标题和描述
|
// 顶部标题和描述
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(1)').textContent = data.topBannerTitle;
|
const topBannerTitle = document.querySelector('.topBannerLeftTitle p:nth-child(1)');
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(2)').textContent = data.topBannerDesc;
|
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');
|
const serviceBoxes = document.querySelectorAll('.bannerBox > .bannerLeft, .bannerBox > .bannerRight');
|
||||||
data.service.forEach((item, idx) => {
|
data.service.forEach((item, idx) => {
|
||||||
if (serviceBoxes[idx]) {
|
if (serviceBoxes[idx]) {
|
||||||
serviceBoxes[idx].querySelector('.title').textContent = item.title;
|
const titleElement = serviceBoxes[idx].querySelector('.title');
|
||||||
serviceBoxes[idx].querySelector('.problem').textContent = item.desc;
|
if (titleElement) titleElement.textContent = item.title;
|
||||||
serviceBoxes[idx].querySelector('.report').childNodes[0].nodeValue = item.btn + " ";
|
|
||||||
|
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 + " ";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 邮箱区
|
// 邮箱区
|
||||||
document.querySelector(".emailLeftTitle").textContent = data.emailLeftTitle;
|
const emailLeftTitle = document.querySelector(".emailLeftTitle");
|
||||||
document.querySelector(".emailLeftText").textContent = data.emailLeftText;
|
if (emailLeftTitle) emailLeftTitle.textContent = data.emailLeftTitle;
|
||||||
|
|
||||||
|
const emailLeftText = document.querySelector(".emailLeftText");
|
||||||
|
if (emailLeftText) emailLeftText.textContent = data.emailLeftText;
|
||||||
|
|
||||||
// 按钮文本
|
|
||||||
document.getElementById("lang-toggle").textContent = data.btn;
|
|
||||||
// 背景图
|
// 背景图
|
||||||
document.querySelector('.topBanner').style.backgroundImage = `url(${data.topBannerBG})`;
|
const topBanner = document.querySelector('.topBanner');
|
||||||
// 英文样式调整（如有需要可扩展）
|
if (topBanner) topBanner.style.backgroundImage = `url(${data.topBannerBG})`;
|
||||||
|
|
||||||
|
// 英文样式调整
|
||||||
if (lang === 'en') {
|
if (lang === 'en') {
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(1)').classList.add('en');
|
if (topBannerTitle) topBannerTitle.classList.add('en');
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(2)').classList.add('en');
|
if (topBannerDesc) topBannerDesc.classList.add('en');
|
||||||
} else {
|
} else {
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(1)').classList.remove('en');
|
if (topBannerTitle) topBannerTitle.classList.remove('en');
|
||||||
document.querySelector('.topBannerLeftTitle p:nth-child(2)').classList.remove('en');
|
if (topBannerDesc) topBannerDesc.classList.remove('en');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 更新语言显示
|
||||||
|
updateLanguageDisplay(lang);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleLangToggle() {
|
// 修正的handleLangToggle函数，正确接收lang参数
|
||||||
currentLang = currentLang === "zh" ? "en" : "zh";
|
function handleLangToggle(lang) {
|
||||||
|
currentLang = lang;
|
||||||
localStorage.setItem('siteLang', currentLang);
|
localStorage.setItem('siteLang', currentLang);
|
||||||
applyLang(currentLang);
|
applyLang(currentLang);
|
||||||
|
updateLanguageDisplay(currentLang);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化
|
// 初始化
|
||||||
applyLang(currentLang);
|
applyLang(currentLang);
|
||||||
|
updateLanguageDisplay(currentLang);
|
||||||
|
|
||||||
// 事件绑定
|
// 获取语言切换相关的DOM元素
|
||||||
document.getElementById("lang-toggle").addEventListener("click", handleLangToggle);
|
const langBtn = document.getElementById('lang-btn');
|
||||||
document.getElementById("lang-toggle").addEventListener("keydown", e => {
|
const langDropdown = document.getElementById('lang-dropdown');
|
||||||
if (e.key === "Enter" || e.key === " ") handleLangToggle();
|
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();
|
||||||
|
// });
|
||||||
});
|
});
|
||||||
Loading…
Reference in New Issue