优化 前端NotFound界面

tonecn/src/views/NotFound.vue

@@ -1,44 +1,13 @@
 <script setup lang='ts'>
-import { onMounted, onUnmounted, ref } from 'vue';
-const containerHeight = ref('800px');
+import { onMounted } from 'vue';
 onMounted(async () => {
     document.title = '404 不存在的页面';
-    containerHeight.value = window.innerHeight > 500 ? window.innerHeight - 90 + 'px' : '390px';
-})
-onUnmounted(() => {
-    document.title = '特恩(TONE)';
 })
 </script>
 <template>
-    <div class="bcc dark:bg-[#222]"></div>
-    <div class="content-container">
-        <el-empty id="404-notfound-el-empty" style="margin-bottom: 200px;" description="404 不存在的页面" />
+    <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
+    <div
+        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>
-</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>
+</template>