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: "采用水冷散热技术，确保服务器在高负载下稳定运行，适用于高性能计算、AI计算、大数据处理等领域。" },
|
|||
|
|
// { 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);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|