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:
+30
-8
@@ -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>
|
||||||
))}
|
))}
|
||||||
|
|||||||
Reference in New Issue
Block a user