404和底部页面

src/pages/others/not-found-404.vue

@@ -0,0 +1,62 @@
+<template>
+	<div class="not-found-404">
+		<OthersHeader :title="$t('PageNotFound')" />
+		<div class="content">
+			<h2>404</h2>
+			<h1>{{ $t('PageNotFoundTitle') }}</h1>
+			<p>{{ $t('PageNotFoundDesc') }}</p>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import OthersHeader from './others-header.vue'
+</script>
+
+<style scoped lang="less">
+	.not-found-404 {
+		border-top: var(--main-header-height) solid #000;
+		background-color: #f9f9f9;
+		> .content {
+			max-width: 1230px;
+			width: 100%;
+			margin: 0 auto;
+			padding: 120px 15px;
+			line-height: 1.6;
+			color: #333;
+			font-weight: 400;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			color: #222;
+			> h2 {
+				font-size: 100px;
+				font-weight: 600;
+				letter-spacing: 2px;
+				background-image: url('@/assets/images/404.png');
+				background-size: auto 100%;
+				background-clip: text;
+				-webkit-background-clip: text;
+				-webkit-text-fill-color: transparent;
+				animation: bgImageAnim 7s linear infinite;
+				@keyframes bgImageAnim {
+					0% {
+						background-position-y: 0;
+					}
+					100% {
+						background-position-y: -200px;
+					}
+				}
+			}
+			> h1 {
+				font-size: 24px;
+				margin-bottom: 5px;
+				text-transform: uppercase;
+			}
+			> p {
+				color: #333;
+				margin-bottom: 20px;
+			}
+		}
+	}
+</style>