diff --git a/css/index.css b/css/index.css index 376f86d..72b378d 100644 --- a/css/index.css +++ b/css/index.css @@ -1816,58 +1816,104 @@ 企业荣誉展示区域 - 精致卡片设计 ============================================ */ +/* ============================================ + 企业荣誉 - 现代深色科技风格 + ============================================ */ .honor-section { margin-top: 80px; - padding: 60px 0; - background: transparent; + padding: 80px 0; + background: + radial-gradient(ellipse at 30% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%), + radial-gradient(ellipse at 70% 80%, rgba(56, 189, 248, 0.06) 0%, transparent 50%), + linear-gradient(180deg, #0F172A 0%, #020617 100%); + position: relative; + overflow: hidden; +} + +/* 背景装饰网格 */ +.honor-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: + linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px), + linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px); + background-size: 60px 60px; + pointer-events: none; + opacity: 0.5; } .honor-title { text-align: center; - margin-bottom: 50px; + margin-bottom: 60px; + position: relative; + z-index: 1; } .honor-title h3 { - font-size: 36px; + font-size: 42px; font-weight: 700; color: #F9FAFB; - margin-bottom: 12px; + margin-bottom: 16px; background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + position: relative; + display: inline-block; +} + +/* 标题装饰线 */ +.honor-title h3::after { + content: ''; + position: absolute; + bottom: -8px; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 3px; + background: linear-gradient(90deg, transparent, #38BDF8, transparent); + border-radius: 2px; } .honor-subtitle { font-size: 16px; - color: rgba(148, 163, 184, 0.9); + color: rgba(203, 213, 225, 0.8); margin: 0; + margin-top: 20px; } -/* 荣誉列表 - 横向卡片布局 */ +/* 荣誉列表 - 响应式网格 */ .honor-list { - display: flex; - justify-content: center; - gap: 30px; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 32px; + max-width: 1200px; + margin: 0 auto; padding: 0 20px; + position: relative; + z-index: 1; } -/* 荣誉卡片 */ +/* 荣誉卡片 - 3D玻璃态 */ .honor-item { - position: relative; - width: 280px; - padding: 40px 30px; - background: - 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); + 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; - text-align: center; + padding: 32px 24px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; + 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); @@ -1881,12 +1927,25 @@ left: -50%; width: 200%; height: 200%; - background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 60%); + 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; } +/* 悬浮效果 */ +.honor-item:hover { + transform: translateY(-8px) scale(1.02); + border-color: rgba(56, 189, 248, 0.4); + background: rgba(30, 41, 59, 0.8); + 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); +} + .honor-item:hover::before { opacity: 1; } @@ -1894,125 +1953,42 @@ /* 荣誉图标容器 */ .honor-icon { width: 120px; - height: 120px; - margin: 0 auto 24px; + height: 160px; + margin-bottom: 20px; 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; + overflow: hidden; } .honor-icon img { - width: 80px; - height: 80px; + max-width: 100%; + max-height: 100%; object-fit: contain; + filter: drop-shadow(0 4px 12px rgba(56, 189, 248, 0.3)); 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)); + transform: scale(1.08); + filter: drop-shadow(0 8px 24px rgba(56, 189, 248, 0.5)); } /* 荣誉名称 */ .honor-name { - font-size: 18px; + font-size: 16px; font-weight: 600; - color: #F9FAFB; + color: #E5E7EB; margin: 0; - line-height: 1.4; transition: all 0.3s ease; + line-height: 1.5; } .honor-item:hover .honor-name { color: #38BDF8; - transform: translateY(-2px); + text-shadow: 0 0 20px rgba(56, 189, 248, 0.5); } - -/* 装饰性边角 */ -.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; } @@ -4843,4 +4819,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/js/index.js b/js/index.js index 55c5a23..038274e 100644 --- a/js/index.js +++ b/js/index.js @@ -44,7 +44,8 @@ $(function () { } // 页面加载完成后初始化动画 - setTimeout(initScrollAnimations, 100); + // 已禁用滚动动画效果 - 用户反馈显得很丑 + // setTimeout(initScrollAnimations, 100); // ============================================ // 原有功能代码