GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-06 16:16:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化加载界面的样式，调整HTML和CSS以改善用户体验

Browse Source
This commit is contained in:
jxxghp
2025-01-31 08:00:30 +08:00
parent 82f69bcad0
commit 7f918408a6
3 changed files with 11 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+4 -3
View File
@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en"
style="overflow: hidden auto; background: var(--initial-loader-bg, #fff); min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));">
<head> <head>
<meta http-equiv="pragma" content="no-cache"> <meta http-equiv="pragma" content="no-cache">
@@ -31,7 +32,7 @@
<link rel="stylesheet" type="text/css" href="/loader.css" /> <link rel="stylesheet" type="text/css" href="/loader.css" />
</head> </head>
<body> <body style="margin: 0;">
<div id="loading-bg"> <div id="loading-bg">
<div class="loading-logo"> <div class="loading-logo">
<!-- Logo --> <!-- Logo -->
@@ -156,4 +157,4 @@
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>
public/loader.css
+2 -12
View File
@@ -1,15 +1,5 @@
body {
margin: 0;
}
html {
overflow: hidden auto;
background: var(--initial-loader-bg, #fff);
min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
}
#loading-bg { #loading-bg {
position: absolute; position: fixed;
z-index: 9999; z-index: 9999;
display: block; display: block;
background: var(--initial-loader-bg, #fff); background: var(--initial-loader-bg, #fff);
@@ -82,4 +72,4 @@ html {
opacity: 1; opacity: 1;
transform: rotate(1turn); transform: rotate(1turn);
} }
} }
src/App.vue
+5 -1
View File
@@ -9,6 +9,9 @@ let themeValue = localStorage.getItem('theme') || 'light'
const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light' const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
// 显示状态
const show = ref(false)
// ApexCharts 全局配置 // ApexCharts 全局配置
declare global { declare global {
interface Window { interface Window {
@@ -44,6 +47,7 @@ onMounted(() => {
nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(() => {
removeEl('#loading-bg') removeEl('#loading-bg')
show.value = true
}, 1500) }, 1500)
}) })
}) })
@@ -51,7 +55,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<VApp> <VApp v-show="show">
<RouterView /> <RouterView />
</VApp> </VApp>
</template> </template>