首页自适应优化:背景视频铺满整屏
- index.css: 新增 .home-bg-cover(absolute inset-0) - home-page.tsx: home-canvas 前插入背景视频层(成对插入,不破坏JSX) - 效果:背景视频独立铺满真实屏,540画布内保留原视频(前景对齐美术构图), 画布外区域由铺满背景自然延续,消除瘦长屏的深蓝色块边界,无边界沉浸 - DOM验证: home-bg-cover + home-canvas 均生效
This commit is contained in:
@@ -79,6 +79,7 @@ select {
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
container-type: size;
|
||||
}
|
||||
|
||||
.reference-fit-frame {
|
||||
|
||||
@@ -454,7 +454,7 @@ export function HomePage({
|
||||
|
||||
return (
|
||||
<div className="relative h-full overflow-hidden bg-[#061124]">
|
||||
<div className="reference-fit-frame overflow-hidden" onPointerDownCapture={resetHomeIdleTimer}>
|
||||
<div className="home-canvas overflow-hidden" onPointerDownCapture={resetHomeIdleTimer}>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 bg-[radial-gradient(circle_at_50%_18%,rgba(83,169,255,0.34),transparent_30%),linear-gradient(180deg,#18345f_0%,#071a33_48%,#030a17_100%)]"
|
||||
|
||||
Reference in New Issue
Block a user