style: 封面图比例统一改为 21:9 超宽
卡片 16:9 仍偏高,统一改为 21:9(超宽荧幕比例),前后台一致: - input.css: .blur-img.post-card-cover-blur aspect-ratio 16/9 → 21/9 - post_card.rs: 缩略图 thumb=400x225 → 420x180 匹配 21:9 - write.rs: 编辑器封面区 aspect-video → aspect-[21/9]
This commit is contained in:
parent
5fc8a9aeeb
commit
71014aa0de
@ -526,12 +526,13 @@
|
|||||||
text-underline-offset: 0.3rem;
|
text-underline-offset: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 卡片封面:blur-img 结构,固定 16:9 比例,hover 缩放。
|
/* 卡片封面:blur-img 结构,固定 21:9 比例,hover 缩放。
|
||||||
双类选择器提升特异性,可靠覆盖 .blur-img 的 aspect-ratio: var(--ar)
|
双类选择器提升特异性,可靠覆盖 .blur-img 的 aspect-ratio: var(--ar)
|
||||||
(卡片不写 --ar,var(--ar) 解析为空会导致高度塌陷)。 */
|
(卡片不写 --ar,var(--ar) 解析为空会导致高度塌陷)。
|
||||||
|
21:9 与后台编辑器封面区统一比例,宽屏横幅式。 */
|
||||||
.blur-img.post-card-cover-blur {
|
.blur-img.post-card-cover-blur {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
aspect-ratio: 16 / 9;
|
aspect-ratio: 21 / 9;
|
||||||
}
|
}
|
||||||
.post-card-cover-blur img {
|
.post-card-cover-blur img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@ -47,7 +47,7 @@ pub fn PostCard(post: PostListItem) -> Element {
|
|||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
class: "blur-img-full is-loaded",
|
class: "blur-img-full is-loaded",
|
||||||
src: "{cover_src}?thumb=400x225",
|
src: "{cover_src}?thumb=420x180",
|
||||||
alt: "{post.title}",
|
alt: "{post.title}",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -480,15 +480,16 @@ fn write_editor(post_id: Option<i32>) -> Element {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 封面图上传区:空态矮横条(不挤压编辑器),有图时展开 16:9 预览。
|
// 封面图上传区:空态矮横条(不挤压编辑器),有图时展开成 21:9 超宽预览。
|
||||||
|
// 21:9 与首页卡片封面统一比例,比 16:9 更扁,适合宽屏横幅式封面。
|
||||||
// 容器统一绑定拖拽与粘贴事件;内部按 cover_image / cover_uploading 切换空态、上传中、预览。
|
// 容器统一绑定拖拽与粘贴事件;内部按 cover_image / cover_uploading 切换空态、上传中、预览。
|
||||||
div {
|
div {
|
||||||
class: "relative w-full rounded-xl border border-dashed overflow-hidden transition-all duration-200 group/cover",
|
class: "relative w-full rounded-xl border border-dashed overflow-hidden transition-all duration-200 group/cover",
|
||||||
// 空态矮横条;有图/上传中展开成 16:9。
|
// 空态矮横条;有图/上传中展开成 21:9。
|
||||||
class: if cover_image().is_empty() && !cover_uploading() {
|
class: if cover_image().is_empty() && !cover_uploading() {
|
||||||
"h-14"
|
"h-14"
|
||||||
} else {
|
} else {
|
||||||
"aspect-video"
|
"aspect-[21/9]"
|
||||||
},
|
},
|
||||||
class: if cover_drag_active() {
|
class: if cover_drag_active() {
|
||||||
"border-[var(--color-paper-accent)] bg-[var(--color-paper-accent-soft)]"
|
"border-[var(--color-paper-accent)] bg-[var(--color-paper-accent-soft)]"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user