重写驭鑫网站 new yxsilicon

驭鑫/new yxsilicon/js/serviceCases.js

@@ -0,0 +1,114 @@
+// 假设放在 <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);
+    }
+  }
+
+
+
+  });