From 44548744ac4eb347aea4e9d9530af7d936146218 Mon Sep 17 00:00:00 2001
From: Frost-ZX <30585462+Frost-ZX@users.noreply.github.com>
Date: Tue, 4 May 2021 18:49:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E5=85=A5=E2=80=9C=E5=85=B3=E4=BA=8E?=
 =?UTF-8?q?=E2=80=9D=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue          |  5 +++
 src/router/routes.js |  5 +++
 src/views/About.vue  | 95 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 105 insertions(+)
 create mode 100644 src/views/About.vue

diff --git a/src/App.vue b/src/App.vue
index 8cd81cb..52be9b5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -79,6 +79,11 @@ export default {
                     id: 'settings',
                     label: '设置',
                     routeName: 'Settings'
+                },
+                {
+                    id: 'about',
+                    label: '关于',
+                    routeName: 'About'
                 }
             ],
             // 显示下拉菜单
diff --git a/src/router/routes.js b/src/router/routes.js
index be14288..d889c24 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -22,6 +22,11 @@ const routes = [
         path: '/settings',
         name: 'Settings',
         component: () => import('@/views/Settings.vue')
+    },
+    {
+        path: '/about',
+        name: 'About',
+        component: () => import('@/views/About.vue')
     }
 ];
 
diff --git a/src/views/About.vue b/src/views/About.vue
new file mode 100644
index 0000000..18046e0
--- /dev/null
+++ b/src/views/About.vue
@@ -0,0 +1,95 @@
+<template>
+    <el-container class="about">
+        <div class="wrapper shadow-2">
+
+            <div class="text">
+                <div class="title">简介</div>
+                <div class="content">
+                    <p>一个多功能的网址导航，绿色无广告。</p>
+                    <p>当前版本：2.0.0</p>
+                </div>
+            </div>
+
+            <div class="text">
+                <div class="title">开发人员</div>
+                <div class="content">
+                    <p>Frost-ZX</p>
+                </div>
+            </div>
+
+            <div class="text">
+                <div class="title">注意事项</div>
+                <div class="content">
+                    <p>部分链接由于不能及时更新，可能已过期（不存在、指向了错误的网站等），访问时请注意。</p>
+                    <p>若您在使用时发现相关情况，欢迎进行反馈。</p>
+                </div>
+            </div>
+
+            <div class="text">
+                <div class="title">GitHub</div>
+                <div class="content">
+                    <p>
+                        <el-link :href="info.github" target="_blank" type="primary">{{ info.github }}</el-link>
+                    </p>
+                </div>
+            </div>
+
+        </div>
+    </el-container>
+</template>
+
+<script>
+export default {
+    name: 'About',
+    data() {
+        return {
+            utils: this.$root.utils,
+            info: {
+                github: 'https://github.com/Frost-ZX/frost-navigation'
+            }
+        }
+    },
+    beforeRouteEnter(to, from, next) {
+        next(vm => {
+            vm.utils.changeTitle('关于');
+        });
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.about {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem;
+    background-color: @colorWhite;
+    overflow-y: auto;
+
+    .wrapper {
+        padding: 1.5rem 2rem;
+        width: 100%;
+        max-width: 50rem;
+        background-color: #FFF;
+    }
+
+    .text {
+        padding: 0.5rem 0;
+
+        .title {
+            line-height: 2.5rem;
+            font-size: 1rem;
+        }
+
+        .content {
+            line-height: 1.8rem;
+            font-size: 0.85rem;
+            color: #888;
+
+            /deep/ .el-link {
+                font-size: inherit;
+            }
+        }
+    }
+}
+</style>