tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化 前端NotFound界面

Browse Source
This commit is contained in:
tone
2024-10-12 10:54:32 +08:00
parent 8399c9e8a7
commit 607f0a7a4d
1 changed files with 6 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
tonecn/src/views/NotFound.vue
View File

@@ -1,44 +1,13 @@
<script setup lang='ts'> <script setup lang='ts'>
import { onMounted, onUnmounted, ref } from 'vue'; import { onMounted } from 'vue';
const containerHeight = ref('800px');
onMounted(async () => { onMounted(async () => {
document.title = '404 不存在的页面'; document.title = '404 不存在的页面';
containerHeight.value = window.innerHeight > 500 ? window.innerHeight - 90 + 'px' : '390px';
})
onUnmounted(() => {
document.title = '特恩(TONE)';
}) })
</script> </script>
<template> <template>
<div class="bcc dark:bg-[#222]"></div> <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
<div class="content-container"> <div
<el-empty id="404-notfound-el-empty" style="margin-bottom: 200px;" description="404 不存在的页面" /> class="flex max-w-[800px] flex-col items-center justify-center mx-auto min-h-[320px] sm:h-[calc(100vh-90px)] h-[calc(100vh-77px)]">
<el-empty id="404-notfound-el-empty" style="margin-bottom: 100px;" description="404 不存在的页面" />
</div> </div>
</template> </template>
<style scoped>
.bcc {
position: fixed;
z-index: -1;
background-color: #f6f8f9;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.content-container {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 600px;
margin: 0px auto;
padding: 0 20px;
height: v-bind(containerHeight);
}
@media screen and (max-width: 800px) {
.content-container {
height: calc(v-bind(containerHeight) + 15px);
}
}
</style>