fix: 页头恢复实底,搜索改为独立半透明块
- headerVariant 恢复 solid,去掉 .app > header 透明度 - 新增 top-dock(top 60 / height 88,alpha 0.28 + blur + 底边)承载搜索 - 背景图渐隐恢复 80% - 验证:header 纯白、dock 半透明、搜索可见、无遮罩
This commit is contained in:
+15
-6
@@ -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 {
|
||||
|
||||
@@ -592,6 +592,7 @@ export default function AppNext() {
|
||||
/>
|
||||
|
||||
<div className="site-background" aria-hidden="true" />
|
||||
<div className="top-dock" aria-hidden="true" />
|
||||
|
||||
<Layout
|
||||
contained
|
||||
@@ -600,7 +601,7 @@ export default function AppNext() {
|
||||
siderWidth={240}
|
||||
gap={20}
|
||||
headerHeight={60}
|
||||
headerVariant="blur"
|
||||
headerVariant="solid"
|
||||
siderBordered={false}
|
||||
contentPadding="none"
|
||||
contentOffset={88}
|
||||
|
||||
Reference in New Issue
Block a user