diff --git a/css/index.css b/css/index.css index 72b378d..c14371a 100644 --- a/css/index.css +++ b/css/index.css @@ -1886,117 +1886,80 @@ margin-top: 20px; } -/* 荣誉列表 - 响应式网格 */ +/* 荣誉列表 - 水平证书展示 */ .honor-list { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 32px; + display: flex; + justify-content: center; + gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; + flex-wrap: wrap; } -/* 荣誉卡片 - 3D玻璃态 */ +/* 荣誉卡片 - 简洁证书样式 */ .honor-item { - background: rgba(30, 41, 59, 0.6); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border: 1px solid rgba(148, 163, 184, 0.15); - border-radius: 16px; - padding: 32px 24px; - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - cursor: pointer; + background: #FFFFFF; + border: 1px solid rgba(148, 163, 184, 0.2); + border-radius: 8px; + padding: 16px; + transition: all 0.3s ease; + cursor: default; position: relative; - overflow: hidden; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; box-shadow: - 0 8px 32px rgba(15, 23, 42, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.05); + 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; } -/* 卡片光晕效果 */ +/* 移除卡片光晕效果 */ .honor-item::before { - content: ''; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: radial-gradient(circle at center, - rgba(56, 189, 248, 0.15) 0%, - transparent 60%); - opacity: 0; - transition: opacity 0.5s ease; - pointer-events: none; + display: none; } -/* 悬浮效果 */ +/* 简化悬浮效果 */ .honor-item:hover { - transform: translateY(-8px) scale(1.02); - border-color: rgba(56, 189, 248, 0.4); - background: rgba(30, 41, 59, 0.8); + transform: translateY(-4px); box-shadow: - 0 20px 60px rgba(56, 189, 248, 0.25), - 0 0 40px rgba(56, 189, 248, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.1); + 0 8px 24px rgba(15, 23, 42, 0.4), + 0 4px 8px rgba(15, 23, 42, 0.3); } -.honor-item:hover::before { - opacity: 1; -} - -/* 荣誉图标容器 */ +/* 荣誉图标容器改为简单图片容器 */ .honor-icon { - width: 120px; - height: 160px; - margin-bottom: 20px; + width: 100%; + height: auto; + margin-bottom: 0; position: relative; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; + display: block; + overflow: visible; } .honor-icon img { - max-width: 100%; - max-height: 100%; + width: 100%; + height: auto; object-fit: contain; - filter: drop-shadow(0 4px 12px rgba(56, 189, 248, 0.3)); - transition: all 0.4s ease; + display: block; + transition: none; + filter: none; } -.honor-item:hover .honor-icon img { - transform: scale(1.08); - filter: drop-shadow(0 8px 24px rgba(56, 189, 248, 0.5)); -} - -/* 荣誉名称 */ +/* 移除荣誉名称 - 证书图片自带名称 */ .honor-name { - font-size: 16px; - font-weight: 600; - color: #E5E7EB; - margin: 0; - transition: all 0.3s ease; - line-height: 1.5; + display: none; } -.honor-item:hover .honor-name { - color: #38BDF8; - text-shadow: 0 0 20px rgba(56, 189, 248, 0.5); +.honor-list { + gap: 20px; } - .honor-list { - gap: 20px; - } - .honor-item { - width: 100%; - max-width: 300px; - } +.honor-item { + width: 100%; + max-width: 300px; +} } /* 旧样式保留(兼容性) */ @@ -4819,4 +4782,4 @@ html { For now, let's assume we stack them or show a simple list. Actually, if HTML structure depends on clicks to show/hide, we need JS or CSS modification. Let's style the active one well first, or maybe show all? - */ + */ \ No newline at end of file diff --git a/index.html b/index.html index 5481d9f..447e13d 100644 --- a/index.html +++ b/index.html @@ -629,8 +629,8 @@
-

企业荣誉

-

权威认证,值得信赖

+

实体企业,资质齐全,技术独立

+

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

diff --git a/js/index.js b/js/index.js index 038274e..03601dd 100644 --- a/js/index.js +++ b/js/index.js @@ -138,6 +138,7 @@ $(function () { // 否则通过 AJAX 获取 getCommentInfo(); } + /* 图片查看器已禁用 - 荣誉证书不需要点击放大 var viewer = new Viewer(document.getElementById("viewer"), { button: true, inline: false, @@ -158,6 +159,7 @@ $(function () { $("#viewer").attr("src", $(this).find("img").attr("src")); viewer.show(); }); + */ function formateTimeFun(time) { const date = new Date(time * 1000); Y = date.getFullYear() + "-";