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:
xfy 2026-06-24 15:53:55 +08:00
parent 5fc8a9aeeb
commit 71014aa0de
3 changed files with 9 additions and 7 deletions

View File

@ -526,12 +526,13 @@
text-underline-offset: 0.3rem;
}
/* 卡片封面blur-img 结构固定 16:9 比例hover 缩放
/* 卡片封面blur-img 结构固定 21:9 比例hover 缩放
双类选择器提升特异性可靠覆盖 .blur-img aspect-ratio: var(--ar)
卡片不写 --arvar(--ar) 解析为空会导致高度塌陷 */
卡片不写 --arvar(--ar) 解析为空会导致高度塌陷
21:9 与后台编辑器封面区统一比例宽屏横幅式 */
.blur-img.post-card-cover-blur {
margin: 0;
aspect-ratio: 16 / 9;
aspect-ratio: 21 / 9;
}
.post-card-cover-blur img {
width: 100%;

View File

@ -47,7 +47,7 @@ pub fn PostCard(post: PostListItem) -> Element {
}
img {
class: "blur-img-full is-loaded",
src: "{cover_src}?thumb=400x225",
src: "{cover_src}?thumb=420x180",
alt: "{post.title}",
}
}

View File

@ -480,15 +480,16 @@ fn write_editor(post_id: Option<i32>) -> Element {
}
}
// 封面图上传区:空态矮横条(不挤压编辑器),有图时展开 16:9 预览。
// 封面图上传区:空态矮横条(不挤压编辑器),有图时展开成 21:9 超宽预览。
// 21:9 与首页卡片封面统一比例,比 16:9 更扁,适合宽屏横幅式封面。
// 容器统一绑定拖拽与粘贴事件;内部按 cover_image / cover_uploading 切换空态、上传中、预览。
div {
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() {
"h-14"
} else {
"aspect-video"
"aspect-[21/9]"
},
class: if cover_drag_active() {
"border-[var(--color-paper-accent)] bg-[var(--color-paper-accent-soft)]"