feat(ui): 更新页面布局与样式提升用户体验
- 移除无用的空<style>标签 - 安装页面文本提示优化及布局调整 - 首页添加交互式安装按钮并完善页面内容- 全局字体引入并设置默认字体为MiSans- 添加窗口关闭权限以支持功能完整控制 - 头部组件模糊效果样式微调- 视频壁纸组件宽度适配全屏- package-lock.json依赖更新,移除多余peer标记 - 引入sass作为可选样式预处理器支持
This commit is contained in:
32
package-lock.json
generated
32
package-lock.json
generated
@@ -1202,7 +1202,6 @@
|
||||
"integrity": "sha512-TGFX1pZUt9qqY20Cv5NyYvy0iLWHf2jXi8s+eCGsig7jQMdwZWKUFMR6TbvFNhfDSUpc1sH/Y5EHv20g3HHA3g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@standard-schema/spec": "^1.0.0",
|
||||
"@sveltejs/acorn-typescript": "^1.0.5",
|
||||
@@ -1242,7 +1241,6 @@
|
||||
"integrity": "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
|
||||
"debug": "^4.4.1",
|
||||
@@ -1822,7 +1820,6 @@
|
||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@@ -2552,7 +2549,6 @@
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
@@ -2595,7 +2591,6 @@
|
||||
"integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"prettier": "bin/prettier.cjs"
|
||||
},
|
||||
@@ -2612,7 +2607,6 @@
|
||||
"integrity": "sha512-pn1ra/0mPObzqoIQn/vUTR3ZZI6UuZ0sHqMK5x2jMLGrs53h0sXhkVuDcrlssHwIMk7FYrMjHBPoUSyyEEDlBQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"peerDependencies": {
|
||||
"prettier": "^3.0.0",
|
||||
"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
|
||||
@@ -2776,13 +2770,34 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmmirror.com/sass/-/sass-1.93.3.tgz",
|
||||
"integrity": "sha512-elOcIZRTM76dvxNAjqYrucTSI0teAF/L2Lv0s6f6b7FOwcwIuA357bIE871580AjHJuSvLIRUosgV+lIWx6Rgg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"chokidar": "^4.0.0",
|
||||
"immutable": "^5.0.2",
|
||||
"source-map-js": ">=0.6.2 <2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"sass": "sass.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@parcel/watcher": "^2.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/sass-embedded": {
|
||||
"version": "1.93.3",
|
||||
"resolved": "https://registry.npmmirror.com/sass-embedded/-/sass-embedded-1.93.3.tgz",
|
||||
"integrity": "sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@bufbuild/protobuf": "^2.5.0",
|
||||
"buffer-builder": "^0.2.0",
|
||||
@@ -3180,7 +3195,6 @@
|
||||
"integrity": "sha512-kjkAjCk41mJfvJZG56XcJNOdJSke94JxtcX8zFzzz2vrt47E0LnoBzU6azIZ1aBxJgUep8qegAkguSf1GjxLXQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/remapping": "^2.3.4",
|
||||
"@jridgewell/sourcemap-codec": "^1.5.0",
|
||||
@@ -3323,7 +3337,6 @@
|
||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
@@ -3345,7 +3358,6 @@
|
||||
"integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"fdir": "^6.5.0",
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
"core:window:allow-unmaximize",
|
||||
"core:window:allow-toggle-maximize",
|
||||
"core:window:allow-start-dragging",
|
||||
"core:window:allow-close",
|
||||
"fs:default",
|
||||
"dialog:default"
|
||||
]
|
||||
|
||||
11
src/app.css
11
src/app.css
@@ -3,3 +3,14 @@
|
||||
themes: all;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'MiSans';
|
||||
src: url('/fonts/MiSans.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'MiSans', sans-serif;
|
||||
}
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
</script>
|
||||
|
||||
<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>
|
||||
<header class="h-8 z-50 w-full backdrop-blur-xs 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>
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
</script>
|
||||
|
||||
<div class="app-wallpaper absolute top-0 -z-10" >
|
||||
<video class=" h-screen object-cover select-none -z-10 " autoplay muted loop playsinline>
|
||||
<video class=" h-screen w-screen object-cover select-none -z-10 " autoplay muted loop playsinline>
|
||||
<source src="{video}" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
|
||||
@@ -23,6 +23,3 @@
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,54 @@
|
||||
<div class="relative pt-10 px-4 ">
|
||||
<h1>123</h1>
|
||||
haisdjiasjd
|
||||
as
|
||||
dasdasd
|
||||
as
|
||||
d
|
||||
asd
|
||||
asd
|
||||
as
|
||||
d
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let isHover = false;
|
||||
|
||||
// 提取函数:处理“激活”状态
|
||||
function handleFocus() {
|
||||
isHover = true;
|
||||
}
|
||||
|
||||
// 提取函数:处理“失活”状态
|
||||
function handleBlur() {
|
||||
isHover = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<!--<div class={'relative pt-10 px-4 h-screen w-screen flex justify-center items-center transition-all ' }}-->
|
||||
<!-- class:backdrop-blur-xs={isHover}-->
|
||||
<!-->-->
|
||||
<!-- <button class="btn btn-wide" on:mouseenter={()=>{isHover = true}} on:mouseout={()=>{isHover = false}}>安装游戏</button>-->
|
||||
<!--</div>-->
|
||||
|
||||
|
||||
<div class="hero min-h-screen transition-all {isHover ? 'bg-neutral-700/30' : ''} "
|
||||
class:backdrop-blur-xs={isHover}
|
||||
|
||||
>
|
||||
<div class="hero-content text-center select-none">
|
||||
<div class="max-w-md" >
|
||||
<h1 class="text-5xl font-bold"
|
||||
on:mouseenter={()=>{isHover = true}}
|
||||
on:mouseout={()=>{isHover = false}}
|
||||
on:blur={handleBlur}
|
||||
on:focus={handleFocus}
|
||||
>逃离鸭科夫</h1>
|
||||
<p class="py-6"
|
||||
on:mouseenter={()=>{isHover = true}}
|
||||
on:mouseout={()=>{isHover = false}}
|
||||
on:blur={handleBlur}
|
||||
on:focus={handleFocus}
|
||||
>
|
||||
<span class="font-bold">《逃离鸭科夫》</span>是一款鸭子题材PVE俯视角撤离射击游戏。你要在鸭科夫的世界里搜寻物资,建造藏身处,升级装备,从一无所有到做大做强;面对虎视眈眈的敌鸭,想方设法生存下去——或者逃离。
|
||||
</p>
|
||||
<button class="btn btn-primary btn-wide "
|
||||
on:mouseenter={()=>{isHover = true}}
|
||||
on:mouseout={()=>{isHover = false}}
|
||||
on:blur={handleBlur}
|
||||
on:focus={handleFocus}
|
||||
on:click={()=>{goto('/install')}}
|
||||
>安装游戏</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,7 +25,7 @@
|
||||
installPath = selected;
|
||||
log('已选择安装目录:'+selected+",点击开始安装即可开始自动安装");
|
||||
}else if (selected === null) {
|
||||
log("取消选择安装目录");
|
||||
log("未选择安装目录");
|
||||
}else{
|
||||
log("选择安装目录失败");
|
||||
}
|
||||
@@ -81,16 +81,18 @@
|
||||
|
||||
</script>
|
||||
|
||||
<main class="h-screen flex flex-col bg-base ">
|
||||
<main class="h-screen flex flex-col backdrop-blur bg-neutral-700/30">
|
||||
|
||||
<div class="flex-1 pt-10 px-4 overflow-hidden">
|
||||
<h1 class="textarea-xl">选择安装目录</h1>
|
||||
<pre
|
||||
class="overflow-y-auto h-full whitespace-pre-wrap wrap-break-word text-start"
|
||||
bind:this={logOutputElement}
|
||||
>
|
||||
<div class="flex-1 pt-10 px-5 overflow-hidden relative ">
|
||||
<h1 class="textarea-xl font-bold absolute">选择目标安装位置</h1>
|
||||
<div class="h-full pt-10">
|
||||
<pre
|
||||
class=" overflow-y-auto h-full whitespace-pre-wrap wrap-break-word "
|
||||
bind:this={logOutputElement}
|
||||
>
|
||||
{logContent}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-32 shrink-0 p-4 border-base ">
|
||||
|
||||
BIN
static/fonts/MiSans.ttf
Normal file
BIN
static/fonts/MiSans.ttf
Normal file
Binary file not shown.
Reference in New Issue
Block a user