webs/驭鑫/new yxsilicon/js/serviceCases.js

// 假设放在 <script> 标签或单独 js 文件
const caseData = [
  
    {
      title: "运算加速器H6PRO",
      img: "../imgs/case/h6pro.png",
      sections: [
        { label: "产品概述", content: "搭载12nm工艺的 H6PRO 云计算专用芯片，作为云基础设施的核心节点，提供高效的计算能力，适用于大规模数据处理、高性能计算等领域。" },
        // { 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）任务,提供稳定的服务器，要求服务器在高负载下具备良好的散热性能，并且能够保持较低的噪音水平。" },
        { 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);
  //   }
  // }



  // });

  document.addEventListener('DOMContentLoaded', function() {
    const btns = document.querySelectorAll('.case-btn');
    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);
    } else {
        let savedIndex = localStorage.getItem('caseActiveIndex');
        activeIndex = savedIndex !== null ? parseInt(savedIndex, 10) : 3; // 默认值改为3
    }

    // 初始化按钮状态
    btns.forEach((btn) => {
        if (btn.dataset.index == activeIndex) { // 使用 == 因为 dataset.index 是字符串
            btn.classList.add('active');
        } else {
            btn.classList.remove('active');
        }
    });
    renderCaseDetail(activeIndex);

    // 按钮点击事件
    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' });
        }
    }
});