美化资质与荣誉

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 {