美化资质与荣誉

js/index.js

@@ -90,18 +90,29 @@ $(function () {
     $("#certBox").empty();
     $("#partnerBox").empty();
 
-    // 荣誉资质
+    // 荣誉资质 - 左右布局
     if (commentObj.honor && commentObj.honor.length > 0) {
-      commentObj.honor.forEach((item) => {
-        $("#certBox").append(`
-          <div class="honor-item">
-            <div class="honor-icon">
-              <img src="${item.img}" alt="${item.name}">
+      commentObj.honor.forEach((item, index) => {
+        // 生成左侧Tab按钮
+        $("#honorTabs").append(`
+          <button class="honor-tab ${index === 0 ? 'active' : ''}" data-index="${index}">
+            <div class="honor-tab-content">
+              <h4>${item.name}</h4>
+              ${item.description ? `<p>${item.description}</p>` : ''}
             </div>
-            <h4 class="honor-name">${item.name}</h4>
+          </button>
+        `);
+
+        // 生成右侧图片slide
+        $("#honorSlides").append(`
+          <div class="honor-slide ${index === 0 ? 'active' : ''}">
+            <img src="${item.img}" alt="${item.name}">
           </div>
         `);
       });
+
+      // 初始化点击切换事件
+      initHonorTabs();
     }
     // 合作伙伴
     if (commentObj.partner && commentObj.partner.length > 0) {
@@ -255,6 +266,26 @@ $(function () {
     location.href = "partner/cps.html";
   });
 
+  // ============================================
+  // 荣誉资质切换功能
+  // ============================================
+  function initHonorTabs() {
+    const $tabs = $('.honor-tab');
+    const $slides = $('.honor-slide');
+
+    $tabs.on('click', function () {
+      const index = $(this).data('index');
+
+      // 更新tab active状态
+      $tabs.removeClass('active');
+      $(this).addClass('active');
+
+      // 更新slide active状态
+      $slides.removeClass('active');
+      $slides.eq(index).addClass('active');
+    });
+  }
+
   // ============================================
   // 全场景全栈解决方案 - 幻灯片功能
   // ============================================