feat(layout): 添加视频壁纸组件并优化布局结构
- 引入 VideoWallpaper 组件作为全局视频背景- 调整主内容区域层级和定位方式 - 更新窗口尺寸配置为 1280x720 - 优化 Header 组件层级防止被遮挡 - 移除页面级视频壁纸实现逻辑
This commit is contained in:
@@ -13,8 +13,8 @@
|
|||||||
"windows": [
|
"windows": [
|
||||||
{
|
{
|
||||||
"title": "Game Install",
|
"title": "Game Install",
|
||||||
"width": 800,
|
"width": 1280,
|
||||||
"height": 600,
|
"height": 720,
|
||||||
"resizable": false,
|
"resizable": false,
|
||||||
"fullscreen": false,
|
"fullscreen": false,
|
||||||
"decorations": false
|
"decorations": false
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header class="h-8 w-full backdrop-blur absolute top-0 window-controls flex gap-10 px-3 items-center" data-tauri-drag-region>
|
<header class="h-8 z-50 w-full backdrop-blur absolute top-0 window-controls flex gap-10 px-3 items-center" data-tauri-drag-region>
|
||||||
|
|
||||||
<div class="flex-1" data-tauri-drag-region></div>
|
<div class="flex-1" data-tauri-drag-region></div>
|
||||||
|
|
||||||
|
|||||||
14
src/lib/components/layout/VideoWallpaper.svelte
Normal file
14
src/lib/components/layout/VideoWallpaper.svelte
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import video from '$lib/assets/video/c9df6498_517c_4fee_a39d_72b43f3425fd.mp4';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="app-wallpaper absolute top-0 -z-10" >
|
||||||
|
<video class=" h-screen object-cover select-none -z-10 " autoplay muted loop playsinline>
|
||||||
|
<source src="{video}" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -3,6 +3,7 @@
|
|||||||
import favicon from '$lib/assets/favicon.svg';
|
import favicon from '$lib/assets/favicon.svg';
|
||||||
import Header from '$lib/components/layout/Header.svelte';
|
import Header from '$lib/components/layout/Header.svelte';
|
||||||
import Sprite from '$lib/components/ui/Sprite.svelte';
|
import Sprite from '$lib/components/ui/Sprite.svelte';
|
||||||
|
import VideoWallpaper from '$lib/components/layout/VideoWallpaper.svelte';
|
||||||
|
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
@@ -12,11 +13,13 @@
|
|||||||
<link rel="icon" href={favicon} />
|
<link rel="icon" href={favicon} />
|
||||||
<Sprite />
|
<Sprite />
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<Header/>
|
<Header/>
|
||||||
<div class="app-container">
|
<div class="relative">
|
||||||
<main class="main-content">
|
<main class="relative z-10">
|
||||||
{@render children()}
|
{@render children()}
|
||||||
</main>
|
</main>
|
||||||
|
<VideoWallpaper/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,14 +1,12 @@
|
|||||||
<script lang="ts">
|
<div class="relative pt-10 px-4 ">
|
||||||
import video from '$lib/assets/video/c9df6498_517c_4fee_a39d_72b43f3425fd.mp4';
|
<h1>123</h1>
|
||||||
</script>
|
haisdjiasjd
|
||||||
|
as
|
||||||
<div class="app-wallpaper" >
|
dasdasd
|
||||||
<video class="absolute h-screen object-cover -z-10" autoplay muted loop playsinline>
|
as
|
||||||
<source src="{video}" type="video/mp4">
|
d
|
||||||
</video>
|
asd
|
||||||
</div>
|
asd
|
||||||
|
as
|
||||||
<style lang="scss">
|
d
|
||||||
|
</div>
|
||||||
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user