diff --git a/src/views/Jyh/security/index.vue b/src/views/Jyh/security/index.vue index 7692edf..4d426c8 100644 --- a/src/views/Jyh/security/index.vue +++ b/src/views/Jyh/security/index.vue @@ -23,25 +23,25 @@ -
-
- 120+ - 开源企业 +
+
+ 120+ + 开源企业
-
-
- 32+ - 高校参与 +
+
+ 30+ + 高校参与
-
-
- 300+ - 社区活动 +
+
+ 300+ + 社区活动
-
-
- 200+ - 开源项目 +
+
+ 200+ + 开源项目
@@ -2025,84 +2025,109 @@ onMounted(() => { background-color: #2563eb; } -.stats-bar-container { +.stats-glass-bar { display: flex; align-items: center; - justify-content: space-around; // 平均分布 - flex-wrap: wrap; + justify-content: space-between; - // 宽度与边距优化 + /* 布局控制:撑满容器并增加内边距 */ width: 100%; - max-width: 1400px; // 设置一个较大的上限适配超大屏,或设为 100% - margin: 1.5rem auto; - padding: 1.5rem 3rem; + padding: 2rem 4rem; + margin: 2rem 0; - // 背景设计:深色玻璃拟态 - background: rgba(255, 255, 255, 0.03); - backdrop-filter: blur(15px); - border-radius: 1.5rem; + /* 深色玻璃拟态背景 */ + background: rgba(255, 255, 255, 0.02); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); - // 关键:针对黑底增加微弱的白边勾勒,增加精致感 - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), - inset 0 0 10px rgba(255, 255, 255, 0.02); + /* 极细微的边框勾勒 */ + border-radius: 1rem; + border: 1px solid rgba(255, 255, 255, 0.08); - transition: all 0.4s ease; + /* 外阴影与内发光,增加悬浮感 */ + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), + inset 0 0 20px rgba(255, 255, 255, 0.02); + + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); &:hover { - background: rgba(255, 255, 255, 0.05); - border-color: rgba(56, 189, 248, 0.3); // 悬停时边框微亮(天蓝色) + border-color: rgba(56, 189, 248, 0.4); + background: rgba(255, 255, 255, 0.04); + transform: translateY(-2px); } } -.stat-item { +.stat-node { + flex: 1; display: flex; flex-direction: column; align-items: center; - flex: 1; - min-width: 120px; - gap: 0.5rem; + gap: 0.75rem; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.05); + .stat-value { + text-shadow: 0 0 25px rgba(56, 189, 248, 0.8); + } + } } -.stat-number { - // 数字发光效果 - color: #60a5fa; // 保持你偏好的蓝色 - font-size: 2rem; // 略微放大 +.stat-value { + /* 科技感亮蓝渐变 */ + font-family: "PingFang SC", "Microsoft YaHei", sans-serif; + font-size: 2.25rem; font-weight: 800; - line-height: 1; - text-shadow: 0 0 15px rgba(96, 165, 250, 0.4); // 核心:增加数字呼吸感 + background: linear-gradient(180deg, #fff 0%, #38bdf8 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + + /* 基础发光效果 */ + filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3)); letter-spacing: -1px; } -.stat-label { - // 标签颜色改为高亮白/浅灰,在黑底上才清晰 - color: rgba(255, 255, 255, 0.7); - font-size: 0.95rem; +.stat-desc { + /* 在黑底上使用半透明白色,更有高级感 */ + color: rgba(255, 255, 255, 0.6); + font-size: 0.875rem; font-weight: 500; - letter-spacing: 0.05em; + letter-spacing: 0.1rem; + text-transform: uppercase; } -.stat-divider { - // 分割线改为渐变,避免生硬 - height: 2.5rem; +.stat-separator { + /* 渐隐分割线 */ width: 1px; + height: 3rem; background: linear-gradient( to bottom, - transparent, - rgba(255, 255, 255, 0.15), - transparent + rgba(255, 255, 255, 0), + rgba(255, 255, 255, 0.2), + rgba(255, 255, 255, 0) ); + margin: 0 1rem; +} - @media (max-width: 768px) { - display: none; // 移动端隐藏分割线 +/* 响应式适配 */ +@media (max-width: 1024px) { + .stats-glass-bar { + padding: 2rem; + } + .stat-value { + font-size: 1.75rem; } } -// 移动端适配 -@media (max-width: 640px) { - .stats-bar-container { - padding: 1.5rem 1rem; - gap: 1.5rem; +@media (max-width: 768px) { + .stats-glass-bar { + flex-direction: column; + gap: 2rem; + } + .stat-separator { + width: 50%; + height: 1px; + background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent); } }