优化企业荣誉
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
yiqiu
2025-12-26 17:58:24 +08:00
parent c36cc5ddee
commit 58e59dd896
2 changed files with 95 additions and 118 deletions

View File

@@ -1816,58 +1816,104 @@
企业荣誉展示区域 - 精致卡片设计 企业荣誉展示区域 - 精致卡片设计
============================================ */ ============================================ */
/* ============================================
企业荣誉 - 现代深色科技风格
============================================ */
.honor-section { .honor-section {
margin-top: 80px; margin-top: 80px;
padding: 60px 0; padding: 80px 0;
background: transparent; 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 { .honor-title {
text-align: center; text-align: center;
margin-bottom: 50px; margin-bottom: 60px;
position: relative;
z-index: 1;
} }
.honor-title h3 { .honor-title h3 {
font-size: 36px; font-size: 42px;
font-weight: 700; font-weight: 700;
color: #F9FAFB; color: #F9FAFB;
margin-bottom: 12px; margin-bottom: 16px;
background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%); background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; 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 { .honor-subtitle {
font-size: 16px; font-size: 16px;
color: rgba(148, 163, 184, 0.9); color: rgba(203, 213, 225, 0.8);
margin: 0; margin: 0;
margin-top: 20px;
} }
/* 荣誉列表 - 横向卡片布局 */ /* 荣誉列表 - 响应式网格 */
.honor-list { .honor-list {
display: flex; display: grid;
justify-content: center; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px; gap: 32px;
flex-wrap: wrap; max-width: 1200px;
margin: 0 auto;
padding: 0 20px; padding: 0 20px;
position: relative;
z-index: 1;
} }
/* 荣誉卡片 */ /* 荣誉卡片 - 3D玻璃态 */
.honor-item { .honor-item {
position: relative; background: rgba(30, 41, 59, 0.6);
width: 280px; backdrop-filter: blur(20px);
padding: 40px 30px; -webkit-backdrop-filter: blur(20px);
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);
border: 1px solid rgba(148, 163, 184, 0.15); border: 1px solid rgba(148, 163, 184, 0.15);
border-radius: 16px; border-radius: 16px;
text-align: center; padding: 32px 24px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer; cursor: pointer;
position: relative;
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: box-shadow:
0 8px 32px rgba(15, 23, 42, 0.4), 0 8px 32px rgba(15, 23, 42, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.05); inset 0 1px 0 rgba(255, 255, 255, 0.05);
@@ -1881,12 +1927,25 @@
left: -50%; left: -50%;
width: 200%; width: 200%;
height: 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; opacity: 0;
transition: opacity 0.5s ease; transition: opacity 0.5s ease;
pointer-events: none; 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 { .honor-item:hover::before {
opacity: 1; opacity: 1;
} }
@@ -1894,125 +1953,42 @@
/* 荣誉图标容器 */ /* 荣誉图标容器 */
.honor-icon { .honor-icon {
width: 120px; width: 120px;
height: 120px; height: 160px;
margin: 0 auto 24px; margin-bottom: 20px;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; overflow: hidden;
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 { .honor-icon img {
width: 80px; max-width: 100%;
height: 80px; max-height: 100%;
object-fit: contain; object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(56, 189, 248, 0.3));
transition: all 0.4s ease; 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 { .honor-item:hover .honor-icon img {
transform: scale(1.1); transform: scale(1.08);
filter: brightness(1.2) drop-shadow(0 6px 20px rgba(56, 189, 248, 0.5)); filter: drop-shadow(0 8px 24px rgba(56, 189, 248, 0.5));
} }
/* 荣誉名称 */ /* 荣誉名称 */
.honor-name { .honor-name {
font-size: 18px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #F9FAFB; color: #E5E7EB;
margin: 0; margin: 0;
line-height: 1.4;
transition: all 0.3s ease; transition: all 0.3s ease;
line-height: 1.5;
} }
.honor-item:hover .honor-name { .honor-item:hover .honor-name {
color: #38BDF8; 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 { .honor-list {
gap: 20px; gap: 20px;
} }

View File

@@ -44,7 +44,8 @@ $(function () {
} }
// 页面加载完成后初始化动画 // 页面加载完成后初始化动画
setTimeout(initScrollAnimations, 100); // 已禁用滚动动画效果 - 用户反馈显得很丑
// setTimeout(initScrollAnimations, 100);
// ============================================ // ============================================
// 原有功能代码 // 原有功能代码