From 129d40d0bfa3e4c87d6caf8b9e7713564cf35744 Mon Sep 17 00:00:00 2001
From: x ronger <ronger-x@outlook.com>
Date: Sun, 2 Aug 2020 19:20:21 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E7=BB=9F=E4=B8=80=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E5=A4=84=E7=90=86=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/empty.vue |  9 +++++
 layouts/error.vue | 96 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 105 insertions(+)
 create mode 100644 layouts/empty.vue
 create mode 100644 layouts/error.vue

diff --git a/layouts/empty.vue b/layouts/empty.vue
new file mode 100644
index 0000000..ba9ed5d
--- /dev/null
+++ b/layouts/empty.vue
@@ -0,0 +1,9 @@
+<template>
+  <nuxt></nuxt>
+</template>
+
+<script>
+  export default {
+    name: 'Empty'
+  }
+</script>
diff --git a/layouts/error.vue b/layouts/error.vue
new file mode 100644
index 0000000..6101cc6
--- /dev/null
+++ b/layouts/error.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="error">
+    <div class="error-content">
+      <h1 class="error-code">{{ error.statusCode }}</h1>
+      <div class="error-wrapper-message">
+        <h2 class="error-message">{{ error.message || notFound }}</h2>
+      </div>
+      <p class="error-link">
+        <nuxt-link class="link" to="/">{{ backToHomePage }}</nuxt-link>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Error',
+    layout: 'empty',
+    props: {
+      error: Object
+    },
+    data() {
+      return {
+        notFound: '未找到你访问的界面',
+        backToHomePage: '返回主页'
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  $z-index-top: 99999;
+  $white: #fff;
+
+  $module-bg: var(rgba($white, 0.6));
+
+  $black-light: #555555;
+
+  $transition-time-slow: .38s;
+
+  .error {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    overflow: hidden;
+    z-index: $z-index-top;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $module-bg;
+
+    @keyframes error-item {
+      0% {
+        opacity: 0;
+        transform: translate3d(0, -30%, 0);
+      }
+      100% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
+    }
+
+    > .error-content {
+      > .error-code,
+      > .error-link,
+      > .error-wrapper-message {
+        color: $black-light;
+        animation: error-item ease-out both .6s $transition-time-slow;
+      }
+
+      .link {
+        &:hover {
+          border-bottom: 1px solid;
+        }
+      }
+
+      > .error-code {
+        text-transform: uppercase;
+        font-size: 10em;
+        font-weight: normal;
+        margin: 0;
+      }
+
+      > .error-wrapper-message {
+        > .error-message {
+          font-family: 'webfont-bolder', DINRegular;
+          font-weight: normal;
+          margin-top: 0;
+        }
+      }
+    }
+  }
+</style>