lizixuan/webs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更改所有页面中英文切换样式及JS功能代码 所有页面logo图片不切换

Browse Source
This commit is contained in:
yaoqin
2025-05-08 17:04:34 +08:00
parent 3923e4df10
commit 602ee741e0
17 changed files with 1443 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
hanJing/js/aboutUs.js
View File

@@ -7,12 +7,17 @@ let infoWindow = null;
const mapData = {
address: {
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: {
zh: '深圳汉晶电子信息有限公司',
en: 'Shenzhen Hanjing Electronic Information Co., Ltd'
},
phone:{
zh: '13420976989',
en: '+86 13420976989'
},
contactInfo: {
zh: {
address: '地址',
@@ -36,7 +41,7 @@ function createInfoWindowContent(lang) {
<strong>${mapData.contactInfo[lang].address}：</strong>${mapData.address[lang]}
</p>
<p style="margin: 0 0 8px 0; font-size: 13px; color: #100B4E;">
<strong>${mapData.contactInfo[lang].phone}：</strong>13420976989
<strong>${mapData.contactInfo[lang].phone}：</strong>${mapData.phone[lang]}
</p>
<p style="margin: 0; font-size: 13px; color: #100B4E;">
<strong>${mapData.contactInfo[lang].email}：</strong>fu.bin@hjsilicon.com
@@ -64,6 +69,9 @@ function updateMapInfo(lang) {
// 初始化地图
function initAMap() {
try {
// 获取当前语言
const currentLang = window.currentLang || localStorage.getItem('siteLang') || "zh";
// 先加载所需插件
AMap.plugin(['AMap.Geocoder', 'AMap.ToolBar', 'AMap.Scale'], function() {
const geocoder = new AMap.Geocoder({
@@ -88,7 +96,7 @@ function initAMap() {
// 创建标记
marker = new AMap.Marker({
position: [lnglat.lng, lnglat.lat],
title: mapData.companyName[window.currentLang],
title: mapData.companyName[currentLang],
animation: 'AMAP_ANIMATION_DROP',
offset: new AMap.Pixel(-13, -30)
});
@@ -97,7 +105,7 @@ function initAMap() {
// 创建信息窗体
infoWindow = new AMap.InfoWindow({
content: createInfoWindowContent(window.currentLang),
content: createInfoWindowContent(currentLang),
offset: new AMap.Pixel(0, -30),
closeWhenClickMap: true
});
@@ -129,26 +137,26 @@ function initAMap() {
});
} else {
console.error('地址解析失败:', result);
document.getElementById('mapContainer').innerHTML =
'<div style="text-align:center;padding:20px;color:#f00;">地址定位失败，请刷新重试</div>';
const mapContainer = document.getElementById('mapContainer');
if (mapContainer) {
mapContainer.innerHTML =
'<div style="text-align:center;padding:20px;color:#f00;">地址定位失败，请刷新重试</div>';
}
}
});
});
} catch (error) {
console.error('地图初始化失败:', error);
document.getElementById('mapContainer').innerHTML =
'<div style="text-align:center;padding:20px;color:#f00;">地图加载失败，请刷新重试</div>';
const mapContainer = document.getElementById('mapContainer');
if (mapContainer) {
mapContainer.innerHTML =
'<div style="text-align:center;padding:20px;color:#f00;">地图加载失败，请刷新重试</div>';
}
}
}
// DOM加载完成时初始化
document.addEventListener('DOMContentLoaded', function() {
if (typeof AMap !== 'undefined') {
initAMap();
}
const langData = {
zh: {
btn: "English",
@@ -167,7 +175,6 @@ document.addEventListener('DOMContentLoaded', function() {
emailLeftTitle: "我们准备好了",
emailLeftText: "如果您有更多的需求，请联系我们",
bannertopBG: "../imgs/us/corporateCultureConcept.svg",
},
en: {
btn: "简体中文",
@@ -186,100 +193,193 @@ document.addEventListener('DOMContentLoaded', function() {
emailLeftTitle: "We're ready.",
emailLeftText: "If you have more needs, please contact us!",
bannertopBG: "../imgs/us/corporateCultureConcept_en.svg",
}
};
// 使用全局的 currentLang
if (!window.currentLang) {
// 使用全局的 currentLang
if (!window.currentLang) {
window.currentLang = localStorage.getItem('siteLang') || "zh";
}
// 语言显示更新函数
function updateLanguageDisplay(lang) {
const currentFlag = document.getElementById('current-flag');
const currentLangText = document.getElementById('current-lang');
if (currentFlag && currentLangText) {
if (lang === 'en') {
currentFlag.src = '../imgs/flags/en.svg';
currentLangText.textContent = 'English';
} else {
currentFlag.src = '../imgs/flags/zh.svg';
currentLangText.textContent = '简体中文';
}
}
}
function applyLang(lang) {
const data = langData[lang];
// logo
document.getElementById("logo-img").src = data.logo;
document.getElementById("footerLogo").src = data.logo;
// const logoImg = document.getElementById("logo-img");
// if (logoImg) logoImg.src = data.logo;
// const footerLogo = document.getElementById("footerLogo");
// if (footerLogo) footerLogo.src = data.logo;
// 页面标题
document.title = data.title;
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;
document.querySelector('.topBannerLeftTitle p:nth-child(2)').textContent = data.topBannerDesc;
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;
// 愿景
document.querySelector('.textOne .Right p:nth-child(1)').textContent = data.visionTitle;
document.querySelector('.textOne .Right p:nth-child(2)').textContent = data.visionDesc;
const visionTitle = document.querySelector('.textOne .Right p:nth-child(1)');
if (visionTitle) visionTitle.textContent = data.visionTitle;
const visionDesc = document.querySelector('.textOne .Right p:nth-child(2)');
if (visionDesc) visionDesc.textContent = data.visionDesc;
// 使命
document.querySelector('.textTwo .Right p:nth-child(1)').textContent = data.missionTitle;
document.querySelector('.textTwo .Right p:nth-child(2)').textContent = data.missionDesc;
const missionTitle = document.querySelector('.textTwo .Right p:nth-child(1)');
if (missionTitle) missionTitle.textContent = data.missionTitle;
const missionDesc = document.querySelector('.textTwo .Right p:nth-child(2)');
if (missionDesc) missionDesc.textContent = data.missionDesc;
// 价值观
document.querySelector('.textThree .Right p:nth-child(1)').textContent = data.valueTitle;
document.querySelector('.textThree .Right p:nth-child(2)').textContent = data.valueDesc;
const valueTitle = document.querySelector('.textThree .Right p:nth-child(1)');
if (valueTitle) valueTitle.textContent = data.valueTitle;
const valueDesc = document.querySelector('.textThree .Right p:nth-child(2)');
if (valueDesc) valueDesc.textContent = data.valueDesc;
// 邮箱区
document.querySelector(".emailLeftTitle").textContent = data.emailLeftTitle;
document.querySelector(".emailLeftText").textContent = data.emailLeftText;
const emailLeftTitle = document.querySelector(".emailLeftTitle");
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('.bannertop').style.backgroundImage = `url(${data.bannertopBG})`;
// 背景图片
const bannertop = document.querySelector('.bannertop');
if (bannertop) bannertop.style.backgroundImage = `url(${data.bannertopBG})`;
// 英文样式调整（如有需要可扩展）
// 英文样式调整
const visionPs = document.querySelectorAll('.textOne .Right p');
const missionPs = document.querySelectorAll('.textTwo .Right p');
const valuePs = document.querySelectorAll('.textThree .Right p');
const allPs = [...visionPs, ...missionPs, ...valuePs];
if (lang === 'en') {
document.querySelector('.topBannerLeftTitle p:nth-child(1)').classList.add('en');
document.querySelector('.topBannerLeftTitle p:nth-child(2)').classList.add('en');
allPs.forEach(p => p.classList.add('en'));
} else {
allPs.forEach(p => p.classList.remove('en'));
document.querySelector('.topBannerLeftTitle p:nth-child(1)').classList.remove('en');
document.querySelector('.topBannerLeftTitle p:nth-child(2)').classList.remove('en');
if (visionPs && missionPs && valuePs) {
const allPs = [...visionPs, ...missionPs, ...valuePs];
if (lang === 'en') {
if (topBannerTitle) topBannerTitle.classList.add('en');
if (topBannerDesc) topBannerDesc.classList.add('en');
allPs.forEach(p => p.classList.add('en'));
} else {
if (topBannerTitle) topBannerTitle.classList.remove('en');
if (topBannerDesc) topBannerDesc.classList.remove('en');
allPs.forEach(p => p.classList.remove('en'));
}
}
// 更新地图信息
updateMapInfo(lang);
// 更新语言显示
updateLanguageDisplay(lang);
}
// 语言切换处理函数
function handleLangToggle() {
window.currentLang = window.currentLang === "zh" ? "en" : "zh";
// 修正的handleLangToggle函数，正确接收lang参数
function handleLangToggle(lang) {
window.currentLang = lang;
localStorage.setItem('siteLang', window.currentLang);
applyLang(window.currentLang);
updateMapInfo(window.currentLang);
updateLanguageDisplay(window.currentLang);
}
// 初始化语言和地图
applyLang(window.currentLang);
updateLanguageDisplay(window.currentLang);
if (typeof AMap !== 'undefined') {
initAMap();
}
// 初始化
applyLang(window.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 !== 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() {
if (typeof AMap !== 'undefined') {