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

驭鑫/new yxsilicon/html/serviceCases.html

@@ -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渲染 -->

驭鑫/new yxsilicon/js/serviceCases.js

@@ -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,9 +62,62 @@ 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
@@ -78,12 +133,12 @@ const caseData = [
         localStorage.setItem('caseActiveIndex', activeIndex);
     } else {
         let savedIndex = localStorage.getItem('caseActiveIndex');
-      activeIndex = savedIndex !== null ? parseInt(savedIndex, 10) : 0;
+        activeIndex = savedIndex !== null ? parseInt(savedIndex, 10) : 3; // 默认值改为3
     }
 
     // 初始化按钮状态
-    btns.forEach((btn, idx) => {
+    btns.forEach((btn) => {
-      if (idx === activeIndex) {
+        if (btn.dataset.index == activeIndex) { // 使用 == 因为 dataset.index 是字符串
             btn.classList.add('active');
         } else {
             btn.classList.remove('active');
@@ -91,7 +146,8 @@ const caseData = [
     });
     renderCaseDetail(activeIndex);
 
-    btns.forEach((btn, idx) => {
+    // 按钮点击事件
+    btns.forEach((btn) => {
         btn.addEventListener('click', function() {
             btns.forEach(b => b.classList.remove('active'));
             this.classList.add('active');
@@ -100,15 +156,11 @@ const caseData = [
         });
     });
 
-  // 只有需要滚动时才滚动
+    // 滚动逻辑
     if (needScroll) {
         const caseSection = document.querySelector('.case-section');
         if (caseSection) {
             caseSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      // 如有固定头部可加 window.scrollBy(0, -60);
         }
     }
-
-
-
 });