src/router/index.ts

@@ -23,16 +23,6 @@ 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",
@@ -74,6 +64,11 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
+        {
+    path: '/:pathMatch(.*)*',
+    name: 'NotFound',
+    component: () => import('@/views/404.vue')
+  }
     ],
   },
 

src/views/404.vue

@@ -1,113 +0,0 @@
-<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,9 +16,7 @@
           @click="({ key }) => handleMenuClick(key)"
         />
       </div>
-      <div class="user-info">
+      <div class="user-info"></div>
-        
-      </div>
     </div>
     <div class="gx_layout_content">
       <router-view />