From f40e54287bef2806c6606acbd95c2ceddabcbf3d Mon Sep 17 00:00:00 2001 From: HomeDash Bot Date: Fri, 11 Sep 2026 19:18:00 +0800 Subject: [PATCH] =?UTF-8?q?fix(web):=20=E6=9E=81=E7=AA=84=E5=B1=8F?= =?UTF-8?q?=E5=A4=87=E6=A1=88=E5=8F=B7=E4=B8=8D=E5=86=8D=E9=A1=B6=E5=88=B0?= =?UTF-8?q?=E6=8C=89=E9=92=AE=EF=BC=9Bmini=20=E5=8F=B6=E7=AD=BE=E4=B8=A4?= =?UTF-8?q?=E7=AB=AF=E6=94=B9=E4=B8=BA=E6=B8=90=E5=8F=98=E6=B7=A1=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1) 备案号与自定义按钮只剩 1px 实测 320x640：备案号换行成两行、高 66px，占据距底 11..77；而搜索球/ 按钮组固定在 bottom:76px → 两者实测只剩 1px（视觉上已贴上）。 修法：≤380px 时把按钮上移到 bottom:88px，并收紧页脚 gap/padding （两行高度仍 66px）→ 实测净间隙 11px。≥390px 时备案号是单行 39px， 间隙本就充足，保持不变。 2) mini 顶部叶签被两侧按钮硬切 结构是 [‹按钮 34px][滚动行][›按钮 34px]，滚动行 overflow-x:auto （内容 858px / 可视 294px），卡片直接在滚动行边缘被切断，没有任何过渡。 修法：给滚动行加 mask-image 两端各 24px 渐变淡出，并用 :has() 关联 翻页按钮的 disabled 状态 —— 已经在尽头的一侧不再淡出（两端都到头则 完全不遮罩），避免"到头了还在渐隐"的错觉。 实测：最左时 mask 为「左侧实心 + 右侧渐隐」，滚到最右变为 「左侧渐隐 + 右侧实心」。 --- web/navi.css | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/web/navi.css b/web/navi.css index c0c5e95..4c81cc0 100644 --- a/web/navi.css +++ b/web/navi.css @@ -532,6 +532,32 @@ html[data-theme] .minimal-headings-row { scroll-snap-type: x proximity; } +/* 滚动行两端用 mask 渐变淡出：此前卡片在滚动行边缘（紧贴两侧 ‹ › 按钮） + 被硬切，看起来像"被按钮截断"。用 :has() 关联翻页按钮的 disabled 状态， + 已经在尽头的一侧就不淡出，避免"尽头还在渐隐"的错觉。 */ +html[data-theme] .minimal-headings-row { + -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); + mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); +} + +/* 已到最左：左侧不淡出 */ +html[data-theme] .minimal-headings-wrap:has(> .tab-scroll-btn:first-child[disabled]) .minimal-headings-row { + -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%); + mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%); +} + +/* 已到最右：右侧不淡出 */ +html[data-theme] .minimal-headings-wrap:has(> .tab-scroll-btn:last-child[disabled]) .minimal-headings-row { + -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%); + mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%); +} + +/* 两端都到尽头：完全不淡出 */ +html[data-theme] .minimal-headings-wrap:has(> .tab-scroll-btn:first-child[disabled]):has(> .tab-scroll-btn:last-child[disabled]) .minimal-headings-row { + -webkit-mask-image: none; + mask-image: none; +} + html[data-theme] .minimal-headings-row .headings { flex-basis: 132px !important; min-height: 44px !important; @@ -722,6 +748,22 @@ html[data-theme] .minimal-section-inner a.item { 此时把两个按钮藏起来（visibility 不受 prefers-reduced-motion 影响， 比 transform 更可靠），搜索栏即可用满宽度。 */ @media (max-width: 380px) { + /* 备案号在这里会换行成两行（实测 390px 高 39px、320px 高 66px）， + 而按钮固定在 bottom:76px → 实测两者只剩 1px。把按钮上移并收紧凑页脚， + 保证仍有 ~20px 间隙。 */ + html[data-theme] .navi-search-bar { + bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; + } + + html[data-theme] .navi-dock { + bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; + } + + html[data-theme] .navi-footer { + gap: 6px !important; + padding: 8px 16px !important; + } + html[data-theme] .navi-search-bar[data-state="open"] { width: calc(100% - 40px) !important; }