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

更新服务案例页面文字及默认案列顺序

This commit is contained in:
yaoqin 2025-05-23 14:26:07 +08:00
parent 21e5b9800f
commit ac8bda4f94
2 changed files with 102 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
驭鑫/new yxsilicon/html/serviceCases.html
View File

@ -89,6 +89,14 @@
<div class="case-section-bg"></div>
<div class="case-container">
<div class="case-list">
<button class="case-btn " data-index="3">
<span>云计算水冷服务器</span>
<div class="case-btn-arrow">
<img src="../imgs/home/arrow2.svg" alt="h6pro">
</div>
</button>
<button class="case-btn active" data-index="0">
<span>运算加速器H6PRO</span>
<div class="case-btn-arrow">
@ -111,14 +119,7 @@
</button>
<button class="case-btn " data-index="3">
<span>云计算水冷服务器</span>
<div class="case-btn-arrow">
<img src="../imgs/home/arrow2.svg" alt="h6pro">
</div>
</button>
</div>
<div class="case-detail" id="case-detail">
<!-- 右侧内容由JS渲染 -->

134
驭鑫/new yxsilicon/js/serviceCases.js
View File

@ -1,10 +1,11 @@
// 假设放在 <script> 标签或单独 js 文件
const caseData = [
{
title: "运算加速器H6PRO",
img: "../imgs/case/h6pro.png",
sections: [
{ label: "产品概述", content: "搭载12nm工艺的NT0010B云计算专用芯片，作为云基础设施的核心节点，提供高效的计算能力，适用于大规模数据处理、高性能计算等领域。" },
{ label: "产品概述", content: "搭载12nm工艺的 H6PRO 云计算专用芯片，作为云基础设施的核心节点，提供高效的计算能力，适用于大规模数据处理、高性能计算等领域。" },
// { label: "解决方案", content: "这里是H6PRO的解决方案描述..." },
// { label: "技术亮点", content: "<ul><li>亮点1</li><li>亮点2</li></ul>" }
]
@ -39,7 +40,8 @@ const caseData = [
<li>低噪音：由于采用水冷技术，服务器噪音大幅度降低，适合用于数据中心和需要安静环境的场景。</li>
</ul>` }
]
}
},
];
function renderCaseDetail(index) {
@ -60,55 +62,105 @@ const caseData = [
}
// 初始化
// 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);
// }
// }
// });
document.addEventListener('DOMContentLoaded', function() {
const btns = document.querySelectorAll('.case-btn');
let activeIndex = 0;
let activeIndex = 3; // 默认显示云计算水冷服务器
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);
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;
let savedIndex = localStorage.getItem('caseActiveIndex');
activeIndex = savedIndex !== null ? parseInt(savedIndex, 10) : 3; // 默认值改为3
}
// 初始化按钮状态
btns.forEach((btn, idx) => {
if (idx === activeIndex) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
btns.forEach((btn) => {
if (btn.dataset.index == activeIndex) { // 使用 == 因为 dataset.index 是字符串
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);
});
// 按钮点击事件
btns.forEach((btn) => {
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);
// 滚动逻辑
if (needScroll) {
const caseSection = document.querySelector('.case-section');
if (caseSection) {
caseSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
}
});
});