美化资质与荣誉

css/index.css

@@ -1817,7 +1817,7 @@
    ============================================ */
 
 /* ============================================
-   企业荣誉 - 现代深色科技风格
+   企业资质与荣誉 - 左右布局设计
    ============================================ */
 .honor-section {
   margin-top: 80px;
@@ -1880,76 +1880,142 @@
 }
 
 .honor-subtitle {
-  font-size: 16px;
+  font-size: 14px;
   color: rgba(203, 213, 225, 0.8);
   margin: 0;
-  margin-top: 20px;
+  margin-top: 16px;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.8;
 }
 
-/* 荣誉列表 - 水平证书展示 */
+/* 左右布局容器 */
-.honor-list {
+.honor-wrapper {
   display: flex;
-  justify-content: center;
+  gap: 60px;
-  gap: 40px;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
+  align-items: flex-start;
   position: relative;
   z-index: 1;
-  flex-wrap: wrap;
 }
 
-/* 荣誉卡片 - 简洁证书样式 */
+/* 左侧Tab区域 */
-.honor-item {
+.honor-sidebar {
-  background: #FFFFFF;
+  flex: 0 0 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.honor-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Tab按钮样式 */
+.honor-tab {
+  background: rgba(30, 41, 59, 0.6);
+  backdrop-filter: blur(20px);
   border: 1px solid rgba(148, 163, 184, 0.2);
-  border-radius: 8px;
+  border-radius: 12px;
-  padding: 16px;
+  padding: 20px 24px;
+  cursor: pointer;
   transition: all 0.3s ease;
-  cursor: default;
+  text-align: left;
   position: relative;
-  box-shadow:
+  overflow: hidden;
-    0 4px 16px rgba(15, 23, 42, 0.3),
-    0 2px 4px rgba(15, 23, 42, 0.2);
-  flex: 0 0 auto;
-  max-width: 300px;
 }
 
-/* 移除卡片光晕效果 */
+.honor-tab::before {
-.honor-item::before {
+  content: '';
-  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: linear-gradient(180deg, #38BDF8, #6366F1);
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
-/* 简化悬浮效果 */
+.honor-tab:hover {
-.honor-item:hover {
+  border-color: rgba(56, 189, 248, 0.4);
-  transform: translateY(-4px);
+  background: rgba(30, 41, 59, 0.8);
-  box-shadow:
+  transform: translateX(4px);
-    0 8px 24px rgba(15, 23, 42, 0.4),
-    0 4px 8px rgba(15, 23, 42, 0.3);
 }
 
-/* 荣誉图标容器改为简单图片容器 */
+.honor-tab.active {
-.honor-icon {
+  border-color: rgba(56, 189, 248, 0.5);
-  width: 100%;
+  background: rgba(30, 41, 59, 0.9);
-  height: auto;
+  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2);
-  margin-bottom: 0;
+}
+
+.honor-tab.active::before {
+  opacity: 1;
+}
+
+.honor-tab-content h4 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #F9FAFB;
+  margin: 0 0 8px 0;
+  transition: color 0.3s ease;
+}
+
+.honor-tab.active .honor-tab-content h4 {
+  color: #38BDF8;
+}
+
+.honor-tab-content p {
+  font-size: 14px;
+  color: rgba(203, 213, 225, 0.8);
+  margin: 0;
+  line-height: 1.6;
+}
+
+/* 右侧图片展示区 */
+.honor-display {
+  flex: 1;
   position: relative;
-  display: block;
+  min-height: 500px;
-  overflow: visible;
 }
 
-.honor-icon img {
+.honor-slides {
+  position: relative;
   width: 100%;
-  height: auto;
+  height: 100%;
-  object-fit: contain;
-  display: block;
-  transition: none;
-  filter: none;
 }
 
-/* 移除荣誉名称 - 证书图片自带名称 */
+.honor-slide {
-.honor-name {
+  position: absolute;
-  display: none;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.5s ease, visibility 0.5s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.honor-slide.active {
+  opacity: 1;
+  visibility: visible;
+  position: relative;
+}
+
+.honor-slide img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 12px;
+  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.5);
+  border: 1px solid rgba(148, 163, 184, 0.2);
 }
 
 .honor-list {

index.html

@@ -625,25 +625,29 @@
       </div>
     </div>
 
-    <!-- 企业荣誉 -->
+    <!-- 企业资质与荣誉 -->
     <div class="honor-section">
       <div class="section-content">
         <div class="honor-title">
           <h3>企业资质与荣誉</h3>
-          <p class="honor-subtitle">实体企业，资质齐全，技术独立<br>国三资资质证书+增值电信业务经营许可证(ISP资质)+其他资质齐全，可帮助用户办理ICP备案、公安备案等</p>
+          <p class="honor-subtitle">实体企业,资质齐全,技术独立<br>国三资资质证书+增值电信业务经营许可证(ISP资质)+其他资质齐全,可帮助用户办理ICP备案、公安备案等</p>
         </div>
-        <div class="honor-list" id="certBox">
+
-          <!-- 荣誉证书动态插入这里 -->
+        <!-- 左右布局容器 -->
-          {if ( isset($data.honor) ) }
+        <div class="honor-wrapper">
-          {foreach $data.honor as $key=>$value}
+          <!-- 左侧切换按钮和描述 -->
-          <div class="honor-item">
+          <div class="honor-sidebar">
-            <div class="honor-icon">
+            <div class="honor-tabs" id="honorTabs">
-              <img src="{$value.img}" alt="{$value.name}">
+              <!-- 动态生成切换按钮 -->
+            </div>
+          </div>
+
+          <!-- 右侧图片展示 -->
+          <div class="honor-display">
+            <div class="honor-slides" id="honorSlides">
+              <!-- 动态生成图片 -->
             </div>
-            <h4 class="honor-name">{$value.name}</h4>
           </div>
-          {/foreach}
-          {/if}
         </div>
       </div>
     </div>

js/index.js

@@ -90,18 +90,29 @@ $(function () {
     $("#certBox").empty();
     $("#partnerBox").empty();
 
-    // 荣誉资质
+    // 荣誉资质 - 左右布局
     if (commentObj.honor && commentObj.honor.length > 0) {
-      commentObj.honor.forEach((item) => {
+      commentObj.honor.forEach((item, index) => {
-        $("#certBox").append(`
+        // 生成左侧Tab按钮
-          <div class="honor-item">
+        $("#honorTabs").append(`
-            <div class="honor-icon">
+          <button class="honor-tab ${index === 0 ? 'active' : ''}" data-index="${index}">
-              <img src="${item.img}" alt="${item.name}">
+            <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');
+    });
+  }
+
   // ============================================
   // 全场景全栈解决方案 - 幻灯片功能
   // ============================================

plugins/addon/theme_configurator/template/admin/index.html

@@ -268,6 +268,11 @@
               <label>名称</label>
               <t-input v-model="item.name" placeholder="高新技术企业"></t-input>
             </div>
+            <div class="form-item form-item--full">
+              <label>介绍描述</label>
+              <t-textarea v-model="item.description" :autosize="{ minRows: 3, maxRows: 6 }"
+                placeholder="详细描述该资质或荣誉的内容、获得时间、认证机构等信息"></t-textarea>
+            </div>
             <div class="form-item form-item--full">
               <label>图片地址</label>
               <div class="upload-row">