From 0409d1f4edf996b40cc6607d18e87cbd347b8d3a Mon Sep 17 00:00:00 2001 From: yiqiu Date: Fri, 26 Dec 2025 18:34:16 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96=E8=B5=84=E8=B4=A8=E4=B8=8E?= =?UTF-8?q?=E8=8D=A3=E8=AA=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/index.css | 154 +++++++++++++----- index.html | 28 ++-- js/index.js | 45 ++++- .../template/admin/index.html | 5 + 4 files changed, 169 insertions(+), 63 deletions(-) diff --git a/css/index.css b/css/index.css index c14371a..3064219 100644 --- 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 { diff --git a/index.html b/index.html index 0c7d68d..b3eda2e 100644 --- a/index.html +++ b/index.html @@ -625,25 +625,29 @@ - +

企业资质与荣誉

-

实体企业，资质齐全，技术独立
国三资资质证书+增值电信业务经营许可证(ISP资质)+其他资质齐全，可帮助用户办理ICP备案、公安备案等

+

实体企业,资质齐全,技术独立
国三资资质证书+增值电信业务经营许可证(ISP资质)+其他资质齐全,可帮助用户办理ICP备案、公安备案等

-
- - {if ( isset($data.honor) ) } - {foreach $data.honor as $key=>$value} -
-
- {$value.name} + + +
+ +
+
+ +
+
+ + +
+
+
-

{$value.name}

- {/foreach} - {/if}
diff --git a/js/index.js b/js/index.js index bffd2a8..dc09587 100644 --- 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(` -
-
- ${item.name} + commentObj.honor.forEach((item, index) => { + // 生成左侧Tab按钮 + $("#honorTabs").append(` + + `); + + // 生成右侧图片slide + $("#honorSlides").append(` +
+ ${item.name}
`); }); + + // 初始化点击切换事件 + 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'); + }); + } + // ============================================ // 全场景全栈解决方案 - 幻灯片功能 // ============================================ diff --git a/plugins/addon/theme_configurator/template/admin/index.html b/plugins/addon/theme_configurator/template/admin/index.html index 2935cb2..f7e019f 100644 --- a/plugins/addon/theme_configurator/template/admin/index.html +++ b/plugins/addon/theme_configurator/template/admin/index.html @@ -268,6 +268,11 @@
+
+ + +