fix(web): 文章头恢复居中排版,内容区补 4px 右留白

- 文章头:align-items center + text-align center + gap 12 + padding 4px 0(旧版规则)
- 文章元信息:改回 .article-meta 12px 行,圆点 3px、左右 8px(原来用 Space + 13px 文本)
- 内容区补 padding-right 4px(旧版 scroll 容器的留白),整体宽度与原版一致
This commit is contained in:
stash
2026-10-29 09:16:59 +08:00
parent 95b6cedb06
commit ffb96ec7d1
2 changed files with 28 additions and 12 deletions
+22 -2
View File
@@ -103,6 +103,7 @@
display: flex;
flex-direction: column;
gap: var(--su-space-5);
padding-right: 4px;
padding-bottom: var(--su-space-10);
}
@@ -464,7 +465,10 @@
.article-head {
display: flex;
flex-direction: column;
gap: var(--su-space-2);
align-items: center;
gap: var(--su-space-3);
padding: var(--su-space-1) 0;
text-align: center;
}
.article-heading {
@@ -474,10 +478,26 @@
line-height: 1.4;
}
.article-meta-dot {
.article-meta {
display: flex;
align-items: center;
font-size: var(--su-font-size-xs);
color: var(--su-text-muted);
}
.article-meta-item {
display: inline-flex;
align-items: center;
}
.article-meta-dot {
width: 3px;
height: 3px;
margin: 0 var(--su-space-2);
border-radius: 50%;
background-color: var(--su-border);
}
.article-body-card {
overflow: hidden;
}
@@ -39,20 +39,16 @@ export function ArticleDetailView({ article, categoryTitle, onBack }: ArticleDet
</button>
</Title>
<Space gap="sm" wrap>
<div className="article-meta">
{meta.map((text, index) => (
<Space gap="sm" key={text}>
{index > 0 && (
<span className="article-meta-dot" aria-hidden="true">
·
</span>
)}
<Text size="sm" tone="muted">
<span className="article-meta-item" key={text}>
{index > 0 && <i className="article-meta-dot" aria-hidden="true" />}
<Text size="xs" tone="muted">
{text}
</Text>
</Space>
</span>
))}
</Space>
</div>
</header>
<Card padding="none" className="article-body-card">