114 lines
4.6 KiB
JavaScript
114 lines
4.6 KiB
JavaScript
// 假设放在 <script> 标签或单独 js 文件
|
||
const caseData = [
|
||
{
|
||
title: "运算加速器H6PRO",
|
||
img: "../imgs/case/h6pro.png",
|
||
sections: [
|
||
{ label: "产品概述", content: "搭载12nm工艺的NT0010B云计算专用芯片，作为云基础设施的核心节点，提供高效的计算能力，适用于大规模数据处理、高性能计算等领域。" },
|
||
// { label: "解决方案", content: "这里是H6PRO的解决方案描述..." },
|
||
// { label: "技术亮点", content: "<ul><li>亮点1</li><li>亮点2</li></ul>" }
|
||
]
|
||
},
|
||
{
|
||
title: "MY100服务器",
|
||
img: "../imgs/case/my100.png",
|
||
sections: [
|
||
{ label: "产品概述", content: "搭载22nm工艺的云计算专用芯片，提供高性能的云计算服务，适用于数据中心、企业级应用、云计算平台等场景。" },
|
||
// { label: "解决方案", content: "这里是MY100服务器的解决方案描述..." },
|
||
// { label: "技术亮点", content: "<ul><li>亮点1</li><li>亮点2</li></ul>" }
|
||
]
|
||
},
|
||
{
|
||
title: "C0040Z-服务器",
|
||
img: "../imgs/case/c0040z.png",
|
||
sections: [
|
||
{ label: "产品概述", content: "采用水冷散热技术，确保服务器在高负载下稳定运行，适用于高性能计算、大数据处理等领域。" },
|
||
// { label: "解决方案", content: "这里是C0040Z服务器的解决方案描述..." },
|
||
// { label: "技术亮点", content: "<ul><li>亮点1</li><li>亮点2</li></ul>" }
|
||
]
|
||
},
|
||
{
|
||
title: "云计算水冷服务器",
|
||
img: "../imgs/case/watercool.png",
|
||
sections: [
|
||
{ label: "客户需求", content: "客户需要为高性能计算（HPC）任务和AI计算提供稳定的服务器，要求服务器在高负载下具备良好的散热性能，并且能够保持较低的噪音水平。" },
|
||
{ label: "解决方案", content: "我们为客户提供了一款基于水冷散热技术的服务器，采用高效水冷系统，确保在满负载运行的情况下，CPU和GPU温度始终保持在最优范围内。" },
|
||
{ label: "技术亮点", content: `<ul>
|
||
<li>水冷系统：采用液冷散热技术，能够快速有效地降低服务器内部的热量，避免因过热导致的性能瓶颈。</li>
|
||
<li>高密度设计：支持多个GPU、CPU的并行计算，适用于大规模并行计算任务。</li>
|
||
<li>低噪音：由于采用水冷技术，服务器噪音大幅度降低，适合用于数据中心和需要安静环境的场景。</li>
|
||
</ul>` }
|
||
]
|
||
}
|
||
];
|
||
|
||
function renderCaseDetail(index) {
|
||
const data = caseData[index];
|
||
const detail = document.getElementById('case-detail');
|
||
detail.innerHTML = `
|
||
<div class="case-detail-img">
|
||
<img src="${data.img}" alt="${data.title}">
|
||
</div>
|
||
<div class="case-detail-title">${data.title}</div>
|
||
${data.sections.map(sec => `
|
||
<div class="case-detail-section">
|
||
<p>${sec.label}</p>
|
||
<span>${sec.content}</span>
|
||
</div>
|
||
`).join('')}
|
||
`;
|
||
}
|
||
|
||
// 初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const btns = document.querySelectorAll('.case-btn');
|
||
let activeIndex = 0;
|
||
let needScroll = false;
|
||
|
||
// 解析 window.name
|
||
if (window.name) {
|
||
const parts = window.name.split('|');
|
||
if (!isNaN(parts[0])) {
|
||
activeIndex = parseInt(parts[0], 10);
|
||
}
|
||
if (parts[1] === 'scroll') {
|
||
needScroll = true;
|
||
}
|
||
window.name = '';
|
||
localStorage.setItem('caseActiveIndex', activeIndex);
|
||
} else {
|
||
let savedIndex = localStorage.getItem('caseActiveIndex');
|
||
activeIndex = savedIndex !== null ? parseInt(savedIndex, 10) : 0;
|
||
}
|
||
|
||
// 初始化按钮状态
|
||
btns.forEach((btn, idx) => {
|
||
if (idx === activeIndex) {
|
||
btn.classList.add('active');
|
||
} else {
|
||
btn.classList.remove('active');
|
||
}
|
||
});
|
||
renderCaseDetail(activeIndex);
|
||
|
||
btns.forEach((btn, idx) => {
|
||
btn.addEventListener('click', function() {
|
||
btns.forEach(b => b.classList.remove('active'));
|
||
this.classList.add('active');
|
||
renderCaseDetail(this.dataset.index);
|
||
localStorage.setItem('caseActiveIndex', this.dataset.index);
|
||
});
|
||
});
|
||
|
||
// 只有需要滚动时才滚动
|
||
if (needScroll) {
|
||
const caseSection = document.querySelector('.case-section');
|
||
if (caseSection) {
|
||
caseSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
// 如有固定头部可加 window.scrollBy(0, -60);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}); |