.

src/components/error/403.vue

@@ -1,13 +1,14 @@
 <template>
     <div class="error">
         <div class="img"
-             style=" background-image: url('/img/error/403.svg');"></div>
+             style=" background-image: url('/img/error/403.svg');">
+        </div>
         <div class="content">
             <h1>403</h1>
             <div class="desc">抱歉，你无权访问该页面</div>
             <div class="actions">
                 <router-link :to="{path:'/'}">
-                    <el-button type="primary">返回首页</el-button>
+                    <el-button type="primary" plain>返回首页</el-button>
                 </router-link>
             </div>
         </div>

src/components/error/404.vue

@@ -1,13 +1,14 @@
 <template>
     <div class="error">
         <div class="img"
-             style=" background-image: url('/img/error/404.svg');"></div>
+             style=" background-image: url('/img/error/404.svg');">
+        </div>
         <div class="content">
             <h1>404</h1>
             <div class="desc">抱歉，你访问的页面不存在</div>
             <div class="actions">
                 <router-link :to="{path:'/'}">
-                    <el-button type="primary">返回首页</el-button>
+                    <el-button type="primary" plain>返回首页</el-button>
                 </router-link>
             </div>
         </div>

src/components/error/500.vue

@@ -1,13 +1,14 @@
 <template>
     <div class="error">
         <div class="img"
-             style=" background-image: url('/img/error/500.svg');"></div>
+             style=" background-image: url('/img/error/500.svg');">
+        </div>
         <div class="content">
             <h1>500</h1>
             <div class="desc">抱歉，服务器出错了</div>
             <div class="actions">
                 <router-link :to="{path:'/'}">
-                    <el-button type="primary">返回首页</el-button>
+                    <el-button type="primary" plain>返回首页</el-button>
                 </router-link>
             </div>
         </div>

src/components/error/style.scss

@@ -1,13 +1,12 @@
 .error {
-  background: #f0f2f5;
-  margin-top: -30px;
+  margin-top: 50px;
   height: 100%;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
 
   .img {
-    margin-right: 80px;
     height: 360px;
     width: 100%;
     max-width: 430px;
@@ -17,8 +16,10 @@
   }
 
   .content {
+    text-align: center;
+
     h1 {
-      color: #434e59;
+      color: #409EFF;
       font-size: 72px;
       font-weight: 600;
       line-height: 72px;
@@ -26,7 +27,7 @@
     }
 
     .desc {
-      color: rgba(0, 0, 0, 0.45);
+      color: black;
       font-size: 20px;
       line-height: 28px;
       margin-bottom: 16px;

src/plugins/element/element-variables.scss

@@ -3,7 +3,7 @@ Write your variables here. All available variables can be
 found in element-ui/packages/theme-chalk/src/common/var.scss.
 For example, to overwrite the theme color:
 */
-$--color-primary: teal;
+$--color-primary: #409EFF;
 
 /* icon font path, required */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';