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;
|
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">
|
||||||
|
|||||||
Reference in New Issue
Block a user