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