404页面

src/router/index.ts

@@ -23,6 +23,16 @@ const routes: RouteRecordRaw[] = [
     name: "Login",
     component: () => import("@/views/login/index.vue"),
   },
+  {
+    path: "/404",
+    name: "404",
+    component: () => import("@/views/404.vue"),
+  },
+  {
+    path: "/:pathMatch(.*)*",
+    name: "NotFound",
+    component: () => import("@/views/404.vue"),
+  },
   {
     path: "/layout",
     name: "Layout",
@@ -49,11 +59,6 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
-        {
-    path: '/:pathMatch(.*)*',
-    name: 'NotFound',
-    component: () => import('@/views/404.vue')
-  }
     ],
   },
 

src/views/404.vue

@@ -0,0 +1,113 @@
+<template>
+	<div class="error">
+		<div class="error-flex">
+			<div class="left">
+				<div class="left-item">
+					<div class="left-item-animation left-item-num">404</div>
+					<div class="left-item-animation left-item-title">页面不存在</div>
+					<div class="left-item-animation left-item-msg">您可以先检查网址，然后重新输入或给我们反馈问题</div>
+					<div class="left-item-animation left-item-btn">
+						<a-button type="primary" round @click="onGoHome">首页</a-button>
+					</div>
+				</div>
+			</div>
+			<div class="right">
+				<img :src="img" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { useRouter } from 'vue-router';
+import img from '@/assets/404.png'
+export default {
+	name: '404',
+	setup() {
+		const router = useRouter();
+		const onGoHome = () => {
+			router.push('/');
+		};
+		return {
+			img,
+			onGoHome,
+		};
+	},
+};
+</script>
+
+<style scoped lang="scss">
+@keyframes error-num {
+	0% {
+		transform: translateY(60px);
+		opacity: 0;
+	}
+	100% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+@keyframes error-img {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+.error {
+	height: 100%;
+	// background-color: var(--el-color-white);
+	display: flex;
+	.error-flex {
+		margin: auto;
+		display: flex;
+		height: 350px;
+		width: 900px;
+		.left {
+			flex: 1;
+			height: 100%;
+			align-items: center;
+			display: flex;
+			.left-item {
+				.left-item-animation {
+					opacity: 0;
+					animation-name: error-num;
+					animation-duration: 0.5s;
+					animation-fill-mode: forwards;
+				}
+				.left-item-num {
+				
+					font-size: 55px;
+				}
+				.left-item-title {
+					font-size: 20px;
+					
+					margin: 15px 0 5px 0;
+					animation-delay: 0.1s;
+				}
+				.left-item-msg {
+				
+					font-size: 12px;
+					margin-bottom: 30px;
+					animation-delay: 0.2s;
+				}
+				.left-item-btn {
+					animation-delay: 0.2s;
+				}
+			}
+		}
+		.right {
+			flex: 1;
+			opacity: 0;
+			animation-name: error-img;
+			animation-duration: 2s;
+			animation-fill-mode: forwards;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+</style>

src/views/layout/index.vue

@@ -16,7 +16,9 @@
           @click="({ key }) => handleMenuClick(key)"
         />
       </div>
-      <div class="user-info"></div>
+      <div class="user-info">
+        
+      </div>
     </div>
     <div class="gx_layout_content">
       <router-view />