manager 升级到vue3

manager/src/views/error-page/403.vue

@@ -1,19 +1,18 @@
-
 <template>
   <div class="error403">
     <div class="error403-body-con">
-      <Card>
-        <div class="error403-body-con-title">4<span class="error403-0-span">
-            <Icon type="android-lock"></Icon>
-          </span><span class="error403-key-span">
-            <Icon size="220" type="ios-bolt"></Icon>
-          </span></div>
+      <el-card>
+        <div class="error403-body-con-title">
+          4<span class="error403-0-span">🔒</span><span class="error403-key-span">⚡</span>
+        </div>
         <p class="error403-body-con-message">You don't have permission</p>
         <div class="error403-btn-con">
-          <Button @click="goHome" size="large" style="width: 200px;" type="text">返回首页</Button>
-          <Button @click="backPage" size="large" style="width: 200px;margin-left: 40px;" type="primary">返回上一页</Button>
+          <el-button size="large" style="width: 200px" @click="goHome">返回首页</el-button>
+          <el-button size="large" type="primary" style="width: 200px; margin-left: 40px" @click="backPage">
+            返回上一页
+          </el-button>
         </div>
-      </Card>
+      </el-card>
     </div>
   </div>
 </template>
@@ -22,11 +21,9 @@
 export default {
   name: "Error403",
   methods: {
-    // 返回上一页
     backPage() {
       this.$router.go(-1);
     },
-    // 返回首页
     goHome() {
       this.$router.push({
         name: "home_index",
@@ -35,6 +32,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @keyframes error403animation {
   0% {
@@ -84,14 +82,8 @@ export default {
         border: 20px solid #ed3f14;
         color: #ed3f14;
         margin-right: 10px;
-        i {
-          display: inline-block;
-          font-size: 120px;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-        }
+        font-size: 80px;
+        line-height: 130px;
       }
       .error403-key-span {
         display: inline-block;
@@ -100,15 +92,8 @@ export default {
         height: 190px;
         border-radius: 50%;
         margin-right: 10px;
-        i {
-          display: inline-block;
-          font-size: 190px;
-          position: absolute;
-          left: 20px;
-          transform: translate(-50%, -60%);
-          transform-origin: center bottom;
-          animation: error403animation 2.8s ease 0s infinite;
-        }
+        font-size: 80px;
+        animation: error403animation 2.8s ease 0s infinite;
       }
     }
     &-message {
@@ -127,4 +112,3 @@ export default {
   }
 }
 </style>
-

manager/src/views/error-page/404.vue

@@ -1,27 +1,18 @@
-
 <template>
   <div class="error404">
     <div class="error404-body-con">
-      <Card>
+      <el-card>
         <div class="error404-body-con-title">
-          4<span><Icon type="ios-navigate-outline"></Icon></span>4
+          4<span>🧭</span>4
         </div>
-        <p class="error404-body-con-message">
-          YOU&nbsp;&nbsp;LOOK&nbsp;&nbsp;LOST
-        </p>
+        <p class="error404-body-con-message">YOU&nbsp;&nbsp;LOOK&nbsp;&nbsp;LOST</p>
         <div class="error404-btn-con">
-          <Button @click="goHome" size="large" style="width: 200px" type="text"
-            >返回首页</Button
-          >
-          <Button
-            @click="backPage"
-            size="large"
-            style="width: 200px; margin-left: 40px"
-            type="primary"
-            >返回上一页</Button
-          >
+          <el-button size="large" style="width: 200px" @click="goHome">返回首页</el-button>
+          <el-button size="large" type="primary" style="width: 200px; margin-left: 40px" @click="backPage">
+            返回上一页
+          </el-button>
         </div>
-      </Card>
+      </el-card>
     </div>
   </div>
 </template>
@@ -30,11 +21,9 @@
 export default {
   name: "Error404",
   methods: {
-    // 返回上一页
     backPage() {
       this.$router.go(-1);
     },
-    // 返回首页
     goHome() {
       this.$router.push({
         name: "home_index",
@@ -43,6 +32,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @keyframes error404animation {
   0% {
@@ -83,7 +73,7 @@ export default {
       span {
         display: inline-block;
         color: #19be6b;
-        font-size: 230px;
+        font-size: 120px;
         animation: error404animation 3s ease 0s infinite alternate;
       }
     }

manager/src/views/error-page/500.vue

@@ -1,30 +1,18 @@
-
-
 <template>
   <div class="error500">
     <div class="error500-body-con">
-      <Card>
+      <el-card>
         <div class="error500-body-con-title">
-          5<span class="error500-0-span"
-            ><Icon type="social-freebsd-devil"></Icon></span
-          ><span class="error500-0-span"
-            ><Icon type="social-freebsd-devil"></Icon
-          ></span>
+          5<span class="error500-0-span">😈</span><span class="error500-0-span">😈</span>
         </div>
         <p class="error500-body-con-message">Oops! the server is wrong</p>
         <div class="error500-btn-con">
-          <Button @click="goHome" size="large" style="width: 200px" type="text"
-            >返回首页</Button
-          >
-          <Button
-            @click="backPage"
-            size="large"
-            style="width: 200px; margin-left: 40px"
-            type="primary"
-            >返回上一页</Button
-          >
+          <el-button size="large" style="width: 200px" @click="goHome">返回首页</el-button>
+          <el-button size="large" type="primary" style="width: 200px; margin-left: 40px" @click="backPage">
+            返回上一页
+          </el-button>
         </div>
-      </Card>
+      </el-card>
     </div>
   </div>
 </template>
@@ -33,11 +21,9 @@
 export default {
   name: "Error500",
   methods: {
-    // 返回上一页
     backPage() {
       this.$router.go(-1);
     },
-    // 返回首页
     goHome() {
       this.$router.push({
         name: "home_index",
@@ -46,6 +32,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @keyframes error500animation {
   0% {
@@ -86,21 +73,15 @@ export default {
       .error500-0-span {
         display: inline-block;
         position: relative;
-        width: 170px;
-        height: 170px;
+        width: 120px;
+        height: 120px;
         border-radius: 50%;
         border: 20px solid #ed3f14;
         color: #ed3f14;
         margin-right: 10px;
-        i {
-          display: inline-block;
-          font-size: 120px;
-          position: absolute;
-          bottom: -10px;
-          left: 10px;
-          transform-origin: center bottom;
-          animation: error500animation 3s ease 0s infinite alternate;
-        }
+        font-size: 60px;
+        line-height: 80px;
+        animation: error500animation 3s ease 0s infinite alternate;
       }
     }
     &-message {