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; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--su-space-5); gap: var(--su-space-5);
padding-right: 4px;
padding-bottom: var(--su-space-10); padding-bottom: var(--su-space-10);
} }
@@ -464,7 +465,10 @@
.article-head { .article-head {
display: flex; display: flex;
flex-direction: column; 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 { .article-heading {
@@ -474,10 +478,26 @@
line-height: 1.4; 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); 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 { .article-body-card {
overflow: hidden; overflow: hidden;
} }
@@ -39,20 +39,16 @@ export function ArticleDetailView({ article, categoryTitle, onBack }: ArticleDet
</button> </button>
</Title> </Title>
<Space gap="sm" wrap> <div className="article-meta">
{meta.map((text, index) => ( {meta.map((text, index) => (
<Space gap="sm" key={text}> <span className="article-meta-item" key={text}>
{index > 0 && ( {index > 0 && <i className="article-meta-dot" aria-hidden="true" />}
<span className="article-meta-dot" aria-hidden="true"> <Text size="xs" tone="muted">
·
</span>
)}
<Text size="sm" tone="muted">
{text} {text}
</Text> </Text>
</Space> </span>
))} ))}
</Space> </div>
</header> </header>
<Card padding="none" className="article-body-card"> <Card padding="none" className="article-body-card">