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;
|
||||
}
|
||||
|
||||
/* 卡片封面:blur-img 结构,固定 16:9 比例,hover 缩放。
|
||||
/* 卡片封面:blur-img 结构,固定 21:9 比例,hover 缩放。
|
||||
双类选择器提升特异性,可靠覆盖 .blur-img 的 aspect-ratio: var(--ar)
|
||||
(卡片不写 --ar,var(--ar) 解析为空会导致高度塌陷)。 */
|
||||
(卡片不写 --ar,var(--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%;
|
||||
|
||||
@ -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}",
|
||||
}
|
||||
}
|
||||
|
||||
@ -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)]"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user