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:
+22
-2
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user