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

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

View File

@@ -1,5 +1,6 @@
<!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>
<meta http-equiv="pragma" content="no-cache">
@@ -31,7 +32,7 @@
<link rel="stylesheet" type="text/css" href="/loader.css" />
</head>
<body>
<body style="margin: 0;">
<div id="loading-bg">
<div class="loading-logo">
<!-- Logo -->
@@ -156,4 +157,4 @@
<script type="module" src="/src/main.ts"></script>
</body>
</html>
</html>

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 {
position: absolute;
position: fixed;
z-index: 9999;
display: block;
background: var(--initial-loader-bg, #fff);
@@ -82,4 +72,4 @@ html {
opacity: 1;
transform: rotate(1turn);
}
}
}

View File

@@ -9,6 +9,9 @@ let themeValue = localStorage.getItem('theme') || 'light'
const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
// 显示状态
const show = ref(false)
// ApexCharts 全局配置
declare global {
interface Window {
@@ -44,6 +47,7 @@ onMounted(() => {
nextTick(() => {
setTimeout(() => {
removeEl('#loading-bg')
show.value = true
}, 1500)
})
})
@@ -51,7 +55,7 @@ onMounted(() => {
</script>
<template>
<VApp>
<VApp v-show="show">
<RouterView />
</VApp>
</template>