From d559d04d3d6ad2b717ec2823113904c460b3cbd4 Mon Sep 17 00:00:00 2001
From: x ronger <ronger-x@outlook.com>
Date: Wed, 12 Aug 2020 23:30:07 +0800
Subject: [PATCH] =?UTF-8?q?:art:=20=E5=A4=9A=E6=A0=B7=E5=8C=96=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/error.vue | 40 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/layouts/error.vue b/layouts/error.vue
index 6101cc6..f7dd55e 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="error">
     <div class="error-content">
-      <h1 class="error-code">{{ error.statusCode }}</h1>
+      <div>
+        <el-image class="error-image" :src="image"></el-image>
+        <div class="error-code">{{ error.statusCode }}</div>
+      </div>
       <div class="error-wrapper-message">
         <h2 class="error-message">{{ error.message || notFound }}</h2>
       </div>
@@ -19,10 +22,22 @@
     props: {
       error: Object
     },
+    computed: {
+      image() {
+        return this.images[Math.floor(Math.random()*5)];
+      }
+    },
     data() {
       return {
         notFound: '未找到你访问的界面',
-        backToHomePage: '返回主页'
+        backToHomePage: '返回主页',
+        images: [
+          'https://static.rymcu.com/article/1597244306764.png',
+          'https://static.rymcu.com/article/1597244962475.png',
+          'https://static.rymcu.com/article/1597245053282.png',
+          'https://static.rymcu.com/article/1597245075248.png',
+          'https://static.rymcu.com/article/1597246071981.png'
+        ]
       }
     }
   }
@@ -50,7 +65,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: $module-bg;
+    background-color: $white;
 
     @keyframes error-item {
       0% {
@@ -69,6 +84,7 @@
       > .error-wrapper-message {
         color: $black-light;
         animation: error-item ease-out both .6s $transition-time-slow;
+        text-shadow: 5px 5px 5px #616161;
       }
 
       .link {
@@ -89,8 +105,26 @@
           font-family: 'webfont-bolder', DINRegular;
           font-weight: normal;
           margin-top: 0;
+          text-shadow: 5px 5px 5px #616161;
         }
       }
     }
   }
+
+  .error-image {
+    width: 28rem;
+    animation: error-item ease-out both .6s $transition-time-slow;
+  }
+
+  .error-code {
+    text-transform: uppercase;
+    animation: error-item ease-out both .6s $transition-time-slow;
+    color: #616161;
+    font-size: 5em;
+    text-shadow: 5px 5px 5px #616161;
+  }
+
+  .link {
+    color: $black-light;
+  }
 </style>