加入小工具页面（空白）、设置页面

src/router/routes.js

@@ -6,11 +6,16 @@ const routes = [
         name: 'Home',
         component: Home
     },
-    // {
-    //     path: '/about',
-    //     name: 'About',
-    //     component: () => import('@/views/About.vue')
-    // }
+    {
+        path: '/tools',
+        name: 'Tools',
+        component: () => import('@/views/Tools.vue')
+    },
+    {
+        path: '/settings',
+        name: 'Settings',
+        component: () => import('@/views/Settings.vue')
+    }
 ];
 
 export default routes;

src/views/Settings.vue

@@ -0,0 +1,65 @@
+<template>
+    <el-container class="settings">
+        <div class="wrapper shadow-2">
+
+            <el-form label-position="left" label-width="7rem">
+
+                <el-form-item label="字体大小">
+                    <el-input-number v-model="config.fontSize"
+                        :min="12" :max="32" label="字体大小" size="small"
+                    ></el-input-number>
+                </el-form-item>
+
+                <el-form-item label="显示网站标题">
+                    <el-switch v-model="config.showSiteTitle"></el-switch>
+                </el-form-item>
+
+                <el-form-item label="折叠侧边菜单">
+                    <el-switch v-model="config.sideMenuCollapse"></el-switch>
+                </el-form-item>
+
+            </el-form>
+
+        </div>
+    </el-container>
+</template>
+
+<script>
+export default {
+    name: 'Settings',
+    data() {
+        return {
+            config: this.$root.config.storage,
+            utils: this.$root.utils
+        }
+    },
+    beforeRouteEnter(to, from, next) {
+        next(vm => {
+            vm.utils.changeTitle('设置');
+        });
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.settings {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem;
+    background-color: @colorWhite;
+
+    .wrapper {
+        padding: 1.5rem 2rem;
+        width: 100%;
+        max-width: 50rem;
+        background-color: #FFF;
+    }
+
+    /deep/ .el-form-item {
+        .el-form-item__label {
+            font-weight: bold;
+        }
+    }
+}
+</style>

src/views/Tools.vue

@@ -0,0 +1,25 @@
+<template>
+    <el-container class="tools">
+
+    </el-container>
+</template>
+
+<script>
+export default {
+    name: 'Tools',
+    data() {
+        return {
+            utils: this.$root.utils
+        };
+    },
+    beforeRouteEnter(to, from, next) {
+        next(vm => {
+            vm.utils.changeTitle('小工具');
+        });
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>