-
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);
}
}