feat(home): add homepage hero banner and migrate community stats

- 新增首页欢迎横幅组件,包含时段问候、用户问候语、发帖引导按钮和社区统计数据
- 从CommunityPanels中移除stats相关逻辑,将社区统计迁移到新的HomeHero组件中
- 优化全局样式,添加横幅相关的CSS动画和样式类
This commit is contained in:
2026-09-13 04:39:20 +08:00
parent 52124f2682
commit 95921d24fa
4 changed files with 161 additions and 48 deletions

View File

@@ -582,6 +582,77 @@ h1, h2, h3, h4 {
border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}
/* 首页欢迎横幅 */
.j13-hero {
position: relative;
overflow: hidden;
padding: 20px 22px;
border-radius: var(--r);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
background:
linear-gradient(115deg, color-mix(in srgb, var(--accent-soft) 75%, var(--panel)) 0%, var(--panel) 60%);
}
.j13-hero-glow {
position: absolute;
top: -72px;
right: -52px;
width: 200px;
height: 200px;
border-radius: 9999px;
background: var(--accent-soft);
pointer-events: none;
}
.j13-hero-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px 10px;
width: 100%;
}
.j13-hero-stat {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.j13-hero-stat-num {
font-size: 21px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.j13-hero-stat-num.is-hot { color: var(--accent); }
.j13-hero-stat-lab {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--ink-3);
white-space: nowrap;
}
.j13-dot-pulse {
width: 6px;
height: 6px;
border-radius: 9999px;
background: var(--accent);
animation: j13-dot-pulse 2.4s ease-in-out infinite;
}
@media (min-width: 1024px) {
.j13-hero { padding: 22px 26px; }
.j13-hero-stats {
display: flex;
width: auto;
gap: 0;
}
.j13-hero-stat + .j13-hero-stat {
margin-left: 22px;
padding-left: 22px;
border-left: 1px solid var(--line);
}
}
/* 移动端横向板块条(滚动条隐藏,保留触控惯性) */
.j13-chips {
display: flex;
@@ -739,6 +810,11 @@ h1, h2, h3, h4 {
}
.j13-fade-up { animation: j13-fade-up 0.2s ease-out both; }
@keyframes j13-dot-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.8); }
}
/* 跳到主内容 */
.skip-link {
position: fixed;