From a3ff4ac69b6bf592ddc21dfa1c1e48d2928a25ed Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Wed, 25 Jul 2018 16:50:51 +0800
Subject: [PATCH] :sparkles: feat: Add not-found page

Signed-off-by: sqrtthree <imsqrtthree@gmail.com>
---
 NotFound.vue | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 NotFound.vue

diff --git a/NotFound.vue b/NotFound.vue
new file mode 100644
index 0000000..a5c9173
--- /dev/null
+++ b/NotFound.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="container notfound-page">
+    <div class="content">
+      <h1>Not Found</h1>
+      <p>{{ getMsg() }}</p>
+      <router-link to="/">Take me home.</router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+const msgs = [
+  `There's nothing here.`,
+  `How did we get here?`,
+  `That's a Four-Oh-Four.`,
+  `Looks like we've got some broken links.`,
+  `Please try your request again or contact support.`,
+]
+
+export default {
+  methods: {
+    getMsg() {
+      return msgs[Math.floor(Math.random() * msgs.length)]
+    },
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.notfound-page
+  display: flex
+  align-items: center
+  justify-content: center
+  height: 100vh
+  text-align: center
+
+.content
+  display: flex
+  align-items: center
+  margin-bottom: 24px
+
+  h1
+    margin-bottom: 0
+    font-size: 20px
+    font-weight: 500
+
+    &::after
+      margin: 0 10px
+      content: "·"
+
+  p
+    margin: 0
+    margin-right: 10px;
+    font-size: 14px
+</style>