fix: 页头恢复实底,搜索改为独立半透明块

- headerVariant 恢复 solid,去掉 .app > header 透明度
- 新增 top-dock(top 60 / height 88,alpha 0.28 + blur + 底边)承载搜索
- 背景图渐隐恢复 80%
- 验证:header 纯白、dock 半透明、搜索可见、无遮罩
This commit is contained in:
2026-10-31 16:41:50 +08:00
parent a2155a4c89
commit e13c2b2ce6
4 changed files with 26 additions and 8 deletions
+15 -6
View File
@@ -27,7 +27,7 @@
right: 0;
bottom: 0;
left: 0;
height: 65%;
height: 80%;
background: linear-gradient(to bottom, transparent, var(--su-bg-page));
}
@@ -149,17 +149,26 @@
box-shadow: var(--su-shadow-card);
}
/* 页头下方独立的一条顶部块:承载搜索框,半透明 */
.top-dock {
position: fixed;
top: 60px;
right: 0;
left: 0;
z-index: 0;
height: 88px;
pointer-events: none;
background-color: color-mix(in srgb, var(--su-bg-page) 28%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid color-mix(in srgb, var(--su-border) 35%, transparent);
}
/* 搜索框半透明,顶部区域透出背景 */
.search-row > *:first-child {
background-color: color-mix(in srgb, var(--su-bg-card) 60%, transparent);
backdrop-filter: blur(10px);
}
/* 首页页头更透明,让背景图透出来 */
.app > header {
background-color: color-mix(in srgb, var(--su-bg-page) 55%, transparent);
}
/* ---------- 两栏骨架 ---------- */
.content {