From 0f6da17a301aa9f322bf0efefaefdda2c6e3ecc4 Mon Sep 17 00:00:00 2001 From: yiqiu Date: Tue, 25 Nov 2025 18:00:17 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96=E4=BC=81=E4=B8=9A=E8=8D=A3?= =?UTF-8?q?=E8=AA=89=E5=B1=95=E7=A4=BA=E6=A8=A1=E5=9D=97=EF=BC=8C=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E5=B0=91=E9=87=8F=E8=AF=81=E4=B9=A6=E7=9A=84=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit HTML 改动： - 重新设计荣誉区域结构，独立成 honor-section - 添加标题"企业荣誉"和副标题"权威认证，值得信赖" - 使用 honor-list 容器承载荣誉卡片 CSS 改动： - 设计精致的卡片式布局，每个荣誉独立展示 - 280px 宽度卡片，适合 2-4 个证书的横向排列 - 添加圆形图标容器（120px），带渐变边框和发光效果 - 卡片悬停时：图标放大旋转、发光边框显现、光晕效果 - 响应式设计：平板、手机端自适应布局 - 保留旧样式作为兼容（.cert 设为 display: none） JavaScript 改动： - 更新 DOM 结构生成代码，使用新的 honor-item 样式 - 使用事件委托处理动态生成的卡片点击事件 - 点击卡片弹出 viewer 查看证书大图 视觉特点： - 深色科技风格，毛玻璃效果 - 渐变色装饰，光晕动效 - 适合少量（2-6个）证书的精致展示 - 居中对齐，突出重要性 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- css/index.css | 219 ++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 13 ++- js/index.js | 16 ++-- 3 files changed, 232 insertions(+), 16 deletions(-) diff --git a/css/index.css b/css/index.css index cb22b34..4141347 100644 --- a/css/index.css +++ b/css/index.css @@ -1693,17 +1693,220 @@ font-size: 16px; } -/* 认证卡片区域 */ -.cert { - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 20px; +/* ============================================ + 企业荣誉展示区域 - 精致卡片设计 + ============================================ */ + +.honor-section { + margin-top: 80px; + padding: 60px 0; + background: transparent; +} + +.honor-title { + text-align: center; + margin-bottom: 50px; +} + +.honor-title h3 { + font-size: 36px; + font-weight: 700; + color: #F9FAFB; + margin-bottom: 12px; + background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.honor-subtitle { + font-size: 16px; + color: rgba(148, 163, 184, 0.9); + margin: 0; +} + +/* 荣誉列表 - 横向卡片布局 */ +.honor-list { + display: flex; + justify-content: center; + gap: 30px; + flex-wrap: wrap; + padding: 0 20px; +} + +/* 荣誉卡片 */ +.honor-item { + position: relative; + width: 280px; + padding: 40px 30px; background: - radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.05) 0%, transparent 60%), - rgba(255, 255, 255, 0.05); - backdrop-filter: blur(20px); + radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 60%), + rgba(15, 23, 42, 0.7); + backdrop-filter: blur(16px); + border: 1px solid rgba(148, 163, 184, 0.15); + border-radius: 16px; + text-align: center; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; + overflow: hidden; box-shadow: 0 8px 32px rgba(15, 23, 42, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.1); + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +/* 卡片光晕效果 */ +.honor-item::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 60%); + opacity: 0; + transition: opacity 0.5s ease; + pointer-events: none; +} + +.honor-item:hover::before { + opacity: 1; +} + +/* 荣誉图标容器 */ +.honor-icon { + width: 120px; + height: 120px; + margin: 0 auto 24px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: + linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%); + border: 2px solid rgba(56, 189, 248, 0.2); + transition: all 0.4s ease; +} + +.honor-icon::after { + content: ''; + position: absolute; + inset: -2px; + border-radius: 50%; + padding: 2px; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + opacity: 0; + transition: opacity 0.4s ease; +} + +.honor-item:hover .honor-icon::after { + opacity: 1; +} + +.honor-icon img { + width: 80px; + height: 80px; + object-fit: contain; + transition: all 0.4s ease; + filter: brightness(1.1) drop-shadow(0 4px 12px rgba(56, 189, 248, 0.3)); +} + +.honor-item:hover .honor-icon { + transform: scale(1.1) rotate(5deg); + background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%); +} + +.honor-item:hover .honor-icon img { + transform: scale(1.1); + filter: brightness(1.2) drop-shadow(0 6px 20px rgba(56, 189, 248, 0.5)); +} + +/* 荣誉名称 */ +.honor-name { + font-size: 18px; + font-weight: 600; + color: #F9FAFB; + margin: 0; + line-height: 1.4; + transition: all 0.3s ease; +} + +.honor-item:hover .honor-name { + color: #38BDF8; + transform: translateY(-2px); +} + +/* 装饰性边角 */ +.honor-item::after { + content: ''; + position: absolute; + top: 20px; + right: 20px; + width: 40px; + height: 40px; + background: + linear-gradient(to right, transparent 50%, rgba(56, 189, 248, 0.1) 50%), + linear-gradient(to bottom, transparent 50%, rgba(56, 189, 248, 0.1) 50%); + background-size: 100% 2px, 2px 100%; + background-position: 100% 0, 100% 0; + background-repeat: no-repeat; + opacity: 0; + transition: opacity 0.3s ease; +} + +.honor-item:hover::after { + opacity: 1; +} + +/* 当荣誉数量为偶数时居中显示 */ +.honor-list:has(.honor-item:nth-child(2):last-child) { + justify-content: center; +} + +/* 响应式 */ +@media (max-width: 991px) { + .honor-item { + width: 240px; + padding: 30px 20px; + } + + .honor-icon { + width: 100px; + height: 100px; + } + + .honor-icon img { + width: 70px; + height: 70px; + } +} + +@media (max-width: 767px) { + .honor-section { + margin-top: 40px; + padding: 40px 0; + } + + .honor-title h3 { + font-size: 28px; + } + + .honor-list { + gap: 20px; + } + + .honor-item { + width: 100%; + max-width: 300px; + } +} + +/* 旧样式保留（兼容性） */ +.cert { + display: none; } .cert-list { diff --git a/index.html b/index.html index cbf74d7..9a820a4 100644 --- a/index.html +++ b/index.html @@ -451,8 +451,17 @@ -
-
+ + +
+
+
+

企业荣誉

+

权威认证，值得信赖

+
+
+ +
diff --git a/js/index.js b/js/index.js index d4f2c0a..96a77e1 100644 --- a/js/index.js +++ b/js/index.js @@ -88,10 +88,14 @@ $(function () { // 荣誉资质 if (commentObj.honor && commentObj.honor.length > 0) { commentObj.honor.forEach((item) => { - $("#certBox").append(`
- -

${item.name}

-
`); + $("#certBox").append(` +
+
+ ${item.name} +
+

${item.name}

+
+ `); }); } } @@ -134,8 +138,8 @@ $(function () { loading: true, }); - // 点击显示图片 - $(".cert-item,.practice-box,.brand-box").click(function () { + // 点击显示图片（使用事件委托，因为元素是动态生成的） + $(document).on("click", ".honor-item", function () { // 设置图片 $("#viewer").attr("src", $(this).find("img").attr("src")); viewer.show();