fix(web): 条目详情恢复 24px 标题、179px 封面与左对齐正文

- 标题:level1 24/600(原来 level2 18/500)
- 封面:portrait 179x269、square 96x96,margin 18/10,底色 primary-soft(原来 160 宽、灰底)
- 标签:22 高、12px、2px 10px 内边距(原来 24 高 13px)
- 正文段落:width 100%、14/1.7、次级色、左对齐(原来 16px 主色,flex 下收缩成内容宽而居中)
- 引用:引号 32/700 红色 35%(原来 18px 主色)
This commit is contained in:
stash
2026-10-29 10:17:54 +08:00
parent 43bf742df6
commit de1af92ee5
2 changed files with 38 additions and 11 deletions
+30 -8
View File
@@ -369,6 +369,16 @@
.item-title { .item-title {
justify-content: center; justify-content: center;
gap: 6px; gap: 6px;
font-size: var(--su-font-size-xl);
font-weight: var(--su-font-weight-semibold);
line-height: 1.5;
}
/* 旧版标签:2px 10px、12px、主色浅底 */
.item-tag {
height: 22px;
padding: 0 10px;
font-size: var(--su-font-size-xs);
} }
.item-edit { .item-edit {
@@ -387,20 +397,22 @@
.item-cover { .item-cover {
display: grid; display: grid;
place-items: center; place-items: center;
width: 120px; margin: 18px 0 10px;
margin: var(--su-space-4) 0;
overflow: hidden; overflow: hidden;
border-radius: var(--su-radius-md); background-color: var(--su-color-primary-soft);
background-color: var(--su-bg-light); color: var(--su-color-primary);
} }
.item-cover--square { .item-cover--square {
aspect-ratio: 1; width: 96px;
height: 96px;
border-radius: var(--su-radius-md);
} }
.item-cover--portrait { .item-cover--portrait {
width: 160px; width: 179px;
aspect-ratio: 2 / 3; aspect-ratio: 2 / 3;
border-radius: var(--su-radius-cover);
} }
.item-cover img { .item-cover img {
@@ -423,9 +435,11 @@
} }
.item-quote-mark { .item-quote-mark {
font-size: var(--su-font-size-lg); flex-shrink: 0;
font-size: 32px;
font-weight: var(--su-font-weight-strong);
line-height: 1; line-height: 1;
color: var(--su-color-primary); color: color-mix(in srgb, var(--su-color-danger) 35%, transparent);
} }
.item-quote-text { .item-quote-text {
@@ -434,6 +448,14 @@
color: var(--su-text-sub); color: var(--su-text-sub);
} }
/* 旧版正文段落:占满卡片宽度、左对齐、14/1.7、次级色 */
.item-desc {
width: 100%;
margin-top: 10px;
line-height: 1.7;
text-align: left;
}
.item-actions { .item-actions {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -41,7 +41,7 @@ export function ItemDetailView({
</Card> </Card>
<Card padding="none" className="item-card"> <Card padding="none" className="item-card">
<Title level={2} className="item-title"> <Title level={1} as="h2" weight="semibold" className="item-title">
{model.title} {model.title}
<button type="button" className="item-edit" disabled title="编辑功能待接入"> <button type="button" className="item-edit" disabled title="编辑功能待接入">
[编辑] [编辑]
@@ -59,7 +59,7 @@ export function ItemDetailView({
{model.tags.length > 0 && ( {model.tags.length > 0 && (
<Space gap="sm" wrap> <Space gap="sm" wrap>
{model.tags.map((tag) => ( {model.tags.map((tag) => (
<Tag key={tag} tone="primary"> <Tag key={tag} tone="primary" className="item-tag">
{tag} {tag}
</Tag> </Tag>
))} ))}
@@ -76,7 +76,12 @@ export function ItemDetailView({
)} )}
{model.paragraphs.map((paragraph, index) => ( {model.paragraphs.map((paragraph, index) => (
<Paragraph key={`${index}-${paragraph.slice(0, 8)}`} tone="main"> <Paragraph
key={`${index}-${paragraph.slice(0, 8)}`}
tone="sub"
size="md"
className="item-desc"
>
{paragraph} {paragraph}
</Paragraph> </Paragraph>
))} ))}