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

// 假设放在 <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）任务,提供稳定的服务器，要求服务器在高负载下具备良好的散热性能，并且能够保持较低的噪音水平。" },
        { 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);
    }
  }



  });