美化资质与荣誉

2025-12-26 18:34:16 +08:00
parent f49532ac0d
commit 0409d1f4ed
4 changed files with 169 additions and 63 deletions
--- a/css/index.css
+++ b/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: 40px;
+  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
+  align-items: flex-start;
  position: relative;
  z-index: 1;
-  flex-wrap: wrap;
 }

-/* 荣誉卡片 - 简洁证书样式 */
-.honor-item {
-  background: #FFFFFF;
+/* 左侧Tab区域 */
+.honor-sidebar {
+  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;
-  padding: 16px;
+  border-radius: 12px;
+  padding: 20px 24px;
+  cursor: pointer;
  transition: all 0.3s ease;
-  cursor: default;
+  text-align: left;
  position: relative;
-  box-shadow:
-    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;
+  overflow: hidden;
 }

-/* 移除卡片光晕效果 */
-.honor-item::before {
-  display: none;
+.honor-tab::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: linear-gradient(180deg, #38BDF8, #6366F1);
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }

-/* 简化悬浮效果 */
-.honor-item:hover {
-  transform: translateY(-4px);
-  box-shadow:
-    0 8px 24px rgba(15, 23, 42, 0.4),
-    0 4px 8px rgba(15, 23, 42, 0.3);
+.honor-tab:hover {
+  border-color: rgba(56, 189, 248, 0.4);
+  background: rgba(30, 41, 59, 0.8);
+  transform: translateX(4px);
 }

-/* 荣誉图标容器改为简单图片容器 */
-.honor-icon {
-  width: 100%;
-  height: auto;
-  margin-bottom: 0;
+.honor-tab.active {
+  border-color: rgba(56, 189, 248, 0.5);
+  background: rgba(30, 41, 59, 0.9);
+  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2);
+}
+
+.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;
-  overflow: visible;
+  min-height: 500px;
 }

-.honor-icon img {
+.honor-slides {
+  position: relative;
  width: 100%;
-  height: auto;
-  object-fit: contain;
-  display: block;
-  transition: none;
-  filter: none;
+  height: 100%;
 }

-/* 移除荣誉名称 - 证书图片自带名称 */
-.honor-name {
-  display: none;
+.honor-slide {
+  position: absolute;
+  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 {
--- a/index.html
+++ b/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) ) }
-          {foreach $data.honor as $key=>$value}
-          <div class="honor-item">
-            <div class="honor-icon">
-              <img src="{$value.img}" alt="{$value.name}">
+
+        <!-- 左右布局容器 -->
+        <div class="honor-wrapper">
+          <!-- 左侧切换按钮和描述 -->
+          <div class="honor-sidebar">
+            <div class="honor-tabs" id="honorTabs">
+              <!-- 动态生成切换按钮 -->
+            </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>
--- a/js/index.js
+++ b/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');
+    });
+  }
+
  // ============================================
  // 全场景全栈解决方案 - 幻灯片功能
  // ============================================
--- a/plugins/addon/theme_configurator/template/admin/index.html
+++ b/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">