diff --git a/css/index.css b/css/index.css index 3064219..afdb65e 100644 --- a/css/index.css +++ b/css/index.css @@ -1813,11 +1813,7 @@ } /* ============================================ - 企业荣誉展示区域 - 精致卡片设计 - ============================================ */ - -/* ============================================ - 企业资质与荣誉 - 左右布局设计 + 企业资质与荣誉 - 网格布局设计 ============================================ */ .honor-section { margin-top: 80px; @@ -1890,132 +1886,48 @@ line-height: 1.8; } -/* 左右布局容器 */ -.honor-wrapper { - display: flex; - gap: 60px; - max-width: 1200px; +/* 网格布局容器 */ +.honor-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 24px; + max-width: 1400px; margin: 0 auto; padding: 0 20px; - align-items: flex-start; position: relative; z-index: 1; } -/* 左侧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 { +/* 网格项样式 */ +.honor-grid-item { background: rgba(30, 41, 59, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 12px; - padding: 20px 24px; - cursor: pointer; + padding: 20px; transition: all 0.3s ease; - text-align: left; - position: relative; overflow: hidden; -} - -.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-tab:hover { - border-color: rgba(56, 189, 248, 0.4); - background: rgba(30, 41, 59, 0.8); - transform: translateX(4px); -} - -.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; - min-height: 500px; -} - -.honor-slides { - position: relative; - width: 100%; - height: 100%; -} - -.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-grid-item:hover { + border-color: rgba(56, 189, 248, 0.4); + background: rgba(30, 41, 59, 0.8); + box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2); + transform: translateY(-4px); } -.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-grid-item img { + width: 100%; + height: 180px; + object-fit: contain; + transition: all 0.3s ease; +} + +.honor-grid-item:hover img { + transform: scale(1.05); } .honor-list { @@ -2026,7 +1938,6 @@ width: 100%; max-width: 300px; } -} /* 旧样式保留(兼容性) */ .cert { @@ -3085,30 +2996,19 @@ html { font-size: 11px; } - .honor-list { - gap: 12px; + /* 网格布局 - 平板端3列 */ + .honor-grid { + grid-template-columns: repeat(3, 1fr); + gap: 16px; padding: 0 12px; } - .honor-item { - width: calc(50% - 6px); - /* 改为2列布局 */ - padding: 20px 16px; + .honor-grid-item { + padding: 16px; } - .honor-icon { - width: 80px; - height: 80px; - margin-bottom: 12px; - } - - .honor-icon img { - width: 50px; - height: 50px; - } - - .honor-name { - font-size: 13px; + .honor-grid-item img { + height: 140px; } /* ===== 新闻区域 - 紧凑 ===== */ @@ -3501,27 +3401,19 @@ html { font-size: 18px; } - .honor-list { - gap: 10px; + /* 网格布局 - 移动端2列 */ + .honor-grid { + grid-template-columns: repeat(2, 1fr); + gap: 12px; + padding: 0 10px; } - .honor-item { - padding: 16px 12px; + .honor-grid-item { + padding: 12px; } - .honor-icon { - width: 70px; - height: 70px; - margin-bottom: 10px; - } - - .honor-icon img { - width: 45px; - height: 45px; - } - - .honor-name { - font-size: 12px; + .honor-grid-item img { + height: 120px; } /* ===== 新闻 - 紧凑 ===== */ @@ -4057,31 +3949,19 @@ html { font-size: 9px; } - .honor-list { + /* 网格布局 - 小屏幕2列 */ + .honor-grid { + grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 8px; } - .honor-item { - width: calc(50% - 4px); - padding: 12px 8px; - padding-bottom: 8px; + .honor-grid-item { + padding: 10px; } - .honor-icon { - width: 60px; - height: 60px; - margin-bottom: 6px; - } - - .honor-icon img { - width: 35px; - height: 35px; - } - - .honor-name { - font-size: 10px; - line-height: 1.2; + .honor-grid-item img { + height: 100px; } /* ===== 新闻 - 极简 ===== */ diff --git a/index.html b/index.html index b3eda2e..835f596 100644 --- a/index.html +++ b/index.html @@ -633,21 +633,9 @@

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

- -
- -
-
- -
-
- - -
-
- -
-
+ +
+
diff --git a/js/index.js b/js/index.js index dc09587..96bd16f 100644 --- a/js/index.js +++ b/js/index.js @@ -90,29 +90,16 @@ $(function () { $("#certBox").empty(); $("#partnerBox").empty(); - // 荣誉资质 - 左右布局 + // 荣誉资质 - 网格布局 if (commentObj.honor && commentObj.honor.length > 0) { commentObj.honor.forEach((item, index) => { - // 生成左侧Tab按钮 - $("#honorTabs").append(` - - `); - - // 生成右侧图片slide - $("#honorSlides").append(` -
- ${item.name} + // 生成网格项 + $("#honorGrid").append(` +
+ ${item.name}
`); }); - - // 初始化点击切换事件 - initHonorTabs(); } // 合作伙伴 if (commentObj.partner && commentObj.partner.length > 0) { @@ -266,26 +253,6 @@ $(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 f7e019f..ca1fd64 100644 --- a/plugins/addon/theme_configurator/template/admin/index.html +++ b/plugins/addon/theme_configurator/template/admin/index.html @@ -268,11 +268,6 @@
-
- - -
@@ -807,7 +802,7 @@ } this.fullConfig.honor.push({ name: "", - img: "", + img: "" }); }, removeHonor(index) {