From 71014aa0deb9c2960ba9d9e2c20dc76a40babeb1 Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Wed, 24 Jun 2026 15:53:55 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=B0=81=E9=9D=A2=E5=9B=BE=E6=AF=94?=
 =?UTF-8?q?=E4=BE=8B=E7=BB=9F=E4=B8=80=E6=94=B9=E4=B8=BA=2021:9=20?=
 =?UTF-8?q?=E8=B6=85=E5=AE=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

卡片 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]
---
 input.css                   | 7 ++++---
 src/components/post_card.rs | 2 +-
 src/pages/admin/write.rs    | 7 ++++---
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/input.css b/input.css
index 14661a9..79ebd75 100644
--- a/input.css
+++ b/input.css
@@ -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%;
diff --git a/src/components/post_card.rs b/src/components/post_card.rs
index 0bce2c3..3f83ba3 100644
--- a/src/components/post_card.rs
+++ b/src/components/post_card.rs
@@ -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}",
                         }
                     }
diff --git a/src/pages/admin/write.rs b/src/pages/admin/write.rs
index 51cb073..2be2683 100644
--- a/src/pages/admin/write.rs
+++ b/src/pages/admin/write.rs
@@ -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)]"