From e61b6091f1950856e6c2d0a64886ef753b5d4251 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=B1=E8=BF=9B=E7=A6=84?= <zjl@jovision.com>
Date: Tue, 21 Dec 2021 17:48:15 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue           | 41 +++++++++++++++++++++++++++--------------
 src/router.js         |  2 ++
 src/views/History.vue | 13 +++++++++++++
 3 files changed, 42 insertions(+), 14 deletions(-)
 create mode 100644 src/views/History.vue

diff --git a/src/App.vue b/src/App.vue
index 619333f..19c49b7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,18 +2,10 @@
   <router-view class="dark"></router-view>
   <div class="menu-wrapper">
     <span class="iconfont icon-settings" :class="{active: menuShow}" @click="menuShow = !menuShow"></span>
-    <div class="menu-list" :style="{width: menuShow ? '180px' : 0}">
-      <div class="menu-item">
-        <span class="iconfont icon-home"></span>
-        <div>首页</div>
-      </div>
-      <div class="menu-item">
-        <span class="iconfont icon-compass"></span>
-        <div>视迹</div>
-      </div>
-      <div class="menu-item">
-        <span class="iconfont icon-record"></span>
-        <div>观呼吸</div>
+    <div class="menu-list" :style="{width: menuShow ? '180px' : '10px'}">
+      <div class="menu-item" v-for="(item,index) in menus" :key="index" @click="toPath(item.routeName)">
+        <span class="iconfont" :class="item.icon"></span>
+        <div>{{ item.name }}</div>
       </div>
     </div>
   </div>
@@ -24,7 +16,28 @@ export default {
   name: 'App',
   data() {
     return {
-      menuShow: false
+      menuShow: false,
+      menus: [{
+        icon: 'icon-home',
+        name: '首页',
+        routeName: 'Guide'
+      },{
+        icon: 'icon-compass',
+        name: '视迹',
+        routeName: 'History'
+      },{
+        icon: 'icon-record',
+        name: '观呼吸'
+      }]
+    }
+  },
+  methods: {
+    toPath(routeName) {
+      if(!routeName) {
+        return
+      }
+      this.$router.push({name: routeName})
+      this.menuShow = false
     }
   }
 }
@@ -96,7 +109,7 @@ body {
     position: absolute;
     left: 0;
     top: 0;
-    padding-left: 50px;
+    padding-left: 40px;
     padding-bottom: 6px;
     padding-top: 4px;
     background-color: #FFF;
diff --git a/src/router.js b/src/router.js
index 78066f5..f1bce0d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -2,10 +2,12 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 
 import Guide from '@/views/Guide.vue'
 import Introduce from '@/views/Introduce.vue'
+import History from '@/views/History.vue'
 
 const routes = [
   { path: '/', name: 'Guide', component: Guide },
   { path: '/introduce', name: 'Introduce', component: Introduce },
+  { path: '/history', name: 'History', component: History },
 ]
 
 export default createRouter({
diff --git a/src/views/History.vue b/src/views/History.vue
new file mode 100644
index 0000000..6e22211
--- /dev/null
+++ b/src/views/History.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>这是历史记录页面</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file