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