diff --git a/index.html b/index.html
index 4d76b93f..113d745f 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>CoPilot</title>
+    <title>rency</title>
     <link rel="shortcut icon" type="image/x-icon" href="static/img/favicon.ico"/>
     <!-- css -->
     <link rel="stylesheet" href="/static/css/bootstrap.min.css">
@@ -14,7 +14,11 @@
     <link rel="stylesheet" href="/static/css/AdminLTE.min.css">
     <link rel="stylesheet" href="/static/css/skin-blue.min.css">
     <link rel="stylesheet" href="/static/js/plugins/pace/pace.min.css">
-
+    
+    <!-- leaflet -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
+    integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
+    crossorigin=""/>
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
@@ -30,6 +34,7 @@
     <script src="/static/js/plugins/bootstrap/bootstrap.min.js"></script>
     <script src="/static/js/plugins/AdminLTE/app.min.js"></script>
     <script src="/static/js/plugins/pace/pace.min.js"></script>
+
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/package.json b/package.json
index 618a0938..22a5e38f 100644
--- a/package.json
+++ b/package.json
@@ -20,10 +20,12 @@
     "chart.js": "2.3.0",
     "datatables.net": "^1.10.11",
     "datatables.net-bs": "^1.10.11",
+    "element-ui": "^1.4.2",
     "faker": "^3.1.0",
     "hideseek": "^0.7.0",
     "http-server": "^0.9.0",
     "jquery": "^2.2.2",
+    "leaflet": "^1.2.0",
     "moment": "^2.12.0",
     "vue": "^2.2.2",
     "vue-date-picker": "^1.0.2",
@@ -110,4 +112,4 @@
     "last 2 versions",
     "not ie <= 8"
   ]
-}
\ No newline at end of file
+}
diff --git a/src/components/Dash.vue b/src/components/Dash.vue
index 49e15d72..b4fc577f 100644
--- a/src/components/Dash.vue
+++ b/src/components/Dash.vue
@@ -20,7 +20,7 @@
                 <span class="label label-success">{{ userInfo.messages | count }}</span>
               </a>
               <ul class="dropdown-menu">
-                <li class="header">You have {{ userInfo.messages | count }} message(s)</li>
+                <li class="header">你有 {{ userInfo.messages | count }} 信息</li>
                 <li v-if="userInfo.messages.length > 0">
                   <!-- inner menu: contains the messages -->
                   <ul class="menu">
@@ -29,12 +29,12 @@
                       <a href="javascript:;">
                         <!-- Message title and timestamp -->
                         <h4>
-                          Support Team
+                          测试
                           <small>
-                            <i class="fa fa-clock-o"></i> 5 mins</small>
+                            <i class="fa fa-clock-o"></i> 5 分钟</small>
                         </h4>
                         <!-- The message -->
-                        <p>Why not consider this a test message?</p>
+                        <p>测试信息</p>
                       </a>
                     </li>
                     <!-- end message -->
@@ -42,7 +42,7 @@
                   <!-- /.menu -->
                 </li>
                 <li class="footer" v-if="userInfo.messages.length > 0">
-                  <a href="javascript:;">See All Messages</a>
+                  <a href="javascript:;">查看所有信息</a>
                 </li>
               </ul>
             </li>
@@ -55,21 +55,21 @@
                 <span class="label label-warning">{{ userInfo.notifications | count }}</span>
               </a>
               <ul class="dropdown-menu">
-                <li class="header">You have {{ userInfo.notifications | count }} notification(s)</li>
+                <li class="header">你有 {{ userInfo.notifications | count }} 通知</li>
                 <li v-if="userInfo.notifications.length > 0">
                   <!-- Inner Menu: contains the notifications -->
                   <ul class="menu">
                     <li>
                       <!-- start notification -->
                       <a href="javascript:;">
-                        <i class="fa fa-users text-aqua"></i> 5 new members joined today
+                        <i class="fa fa-users text-aqua"></i> 今天新加入5个
                       </a>
                     </li>
                     <!-- end notification -->
                   </ul>
                 </li>
                 <li class="footer" v-if="userInfo.notifications.length > 0">
-                  <a href="javascript:;">View all</a>
+                  <a href="javascript:;">预览所有</a>
                 </li>
               </ul>
             </li>
@@ -81,7 +81,7 @@
                 <span class="label label-danger">{{ userInfo.tasks | count }} </span>
               </a>
               <ul class="dropdown-menu">
-                <li class="header">You have {{ userInfo.tasks | count }} task(s)</li>
+                <li class="header">你有 {{ userInfo.tasks | count }} 任务</li>
                 <li v-if="userInfo.tasks.length > 0">
                   <!-- Inner menu: contains the tasks -->
                   <ul class="menu">
@@ -90,14 +90,14 @@
                       <a href="javascript:;">
                         <!-- Task title and progress text -->
                         <h3>
-                          Design some buttons
+                          设计按钮样式
                           <small class="pull-right">20%</small>
                         </h3>
                         <!-- The progress bar -->
                         <div class="progress xs">
                           <!-- Change the css width attribute to simulate progress -->
                           <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                            <span class="sr-only">20% Complete</span>
+                            <span class="sr-only">完成20%</span>
                           </div>
                         </div>
                       </a>
@@ -106,7 +106,7 @@
                   </ul>
                 </li>
                 <li class="footer" v-if="userInfo.tasks.length > 0">
-                  <a href="javascript:;">View all tasks</a>
+                  <a href="javascript:;">查看所有任务</a>
                 </li>
               </ul>
             </li>
@@ -138,7 +138,7 @@
         <ol class="breadcrumb">
           <li>
             <a href="javascript:;">
-              <i class="fa fa-home"></i>Home</a>
+              <i class="fa fa-home"></i>主页</a>
           </li>
           <li class="active">{{$route.name.toUpperCase()}}</li>
         </ol>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 5347c8c2..6898c42c 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -14,7 +14,7 @@
             <p class="white">{{ displayName }}</p>
           </div>
           <a href="javascript:;">
-            <i class="fa fa-circle text-success"></i> Online
+            <i class="fa fa-circle text-success"></i> 在线
           </a>
         </div>
       </div>
@@ -26,8 +26,8 @@
             name="search"
             id="search"
             class="search form-control"
-            data-toggle="hideseek" p
-            laceholder="Search Menus"
+            data-toggle="hideseek" 
+            placeholder="请输入想要搜索的菜单"
             data-list=".sidebar-menu">
           <span class="input-group-btn">
             <button type="submit" name="search" id="search-btn" class="btn btn-flat">
diff --git a/src/components/SidebarMenu.vue b/src/components/SidebarMenu.vue
index 5ce798b8..e233deb4 100644
--- a/src/components/SidebarMenu.vue
+++ b/src/components/SidebarMenu.vue
@@ -1,34 +1,34 @@
 <template>
   <ul class="sidebar-menu">
-    <li class="header">TOOLS</li>
+    <li class="header">工具</li>
     <li class="active pageLink" v-on:click="toggleMenu">
       <router-link to="/"><i class="fa fa-desktop"></i>
-        <span class="page">Dashboard</span>
+        <span class="page">首页</span>
       </router-link>
     </li>
     <li class="pageLink" v-on:click="toggleMenu">
       <router-link to="/tables"><i class="fa fa-table"></i>
-        <span class="page">Tables</span>
+        <span class="page">表格</span>
       </router-link>
     </li>
 
-    <li class="header">ME</li>
+    <li class="header">我的</li>
     <li class="pageLink" v-on:click="toggleMenu">
       <router-link to="/tasks">
         <i class="fa fa-tasks"></i>
-        <span class="page">Tasks</span>
+        <span class="page">任务</span>
       </router-link>
     </li>
     <li class="pageLink" v-on:click="toggleMenu">
       <router-link to="/setting">
         <i class="fa fa-cog"></i>
-        <span class="page">Settings</span>
+        <span class="page">设置</span>
       </router-link>
     </li>
     <li class="treeview">
       <a href="#">
         <i class="fa fa-folder-o"></i>
-        <span>Files</span>
+        <span>文件</span>
         <span class="pull-right-container">
           <i class="fa fa-angle-left fa-fw pull-right"></i>
         </span>
@@ -36,45 +36,45 @@
       <ul class="treeview-menu">
         <li>
           <a href="#">
-            <i class="fa fa-file-word-o"></i> Item 1
+            <i class="fa fa-file-word-o"></i> 项目 1
           </a>
         </li>
         <li>
           <a href="#">
-            <i class="fa fa-file-picture-o"></i> Item 2
+            <i class="fa fa-file-picture-o"></i> 项目 2
           </a>
         </li>
         <li>
           <a href="#">
-            <i class="fa fa-file-pdf-o"></i> Item 3
+            <i class="fa fa-file-pdf-o"></i> 项目 3
           </a>
         </li>
       </ul>
     </li>
 
-    <li class="header">LOGS</li>
+    <li class="header">日志</li>
     <li class="pageLink" v-on:click="toggleMenu">
       <router-link to="/access"><i class="fa fa-book"></i>
-        <span class="page">Access</span>
+        <span class="page">Leaflet地图</span>
       </router-link>
     </li>
     <li class="pageLink" v-on:click="toggleMenu">
       <router-link to="/server"><i class="fa fa-hdd-o"></i>
-        <span class="page">Server</span>
+        <span class="page">服务</span>
       </router-link>
     </li>
     <li class="pageLink" v-on:click="toggleMenu">
       <router-link to="/repos"><i class="fa fa-heart"></i>
-        <span class="page">Repos</span>
+        <span class="page">什么鬼</span>
         <small class="label pull-right bg-green">AJAX</small>
       </router-link>
     </li>
 
-    <li class="header">PAGES</li>
+    <li class="header">其他</li>
     <li class="pageLink" v-on:click="toggleMenu">
       <router-link to="/login">
         <i class="fa fa-circle-o text-yellow"></i>
-        <span class="page"> Login</span>
+        <span class="page"> 登陆</span>
       </router-link>
     </li>
     <li class="pageLink" v-on:click="toggleMenu">
diff --git a/src/components/myviews/index.vue b/src/components/myviews/index.vue
new file mode 100644
index 00000000..c644db5c
--- /dev/null
+++ b/src/components/myviews/index.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="index-wrap">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <div class="grid-content">
+          <h2>饼图</h2>
+          <canvas id="pie">
+          </canvas>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="grid-content">
+          <h2>曲线图</h2>
+          <canvas id="bight">
+          </canvas>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row justify="center">
+      <el-col :offset="6" :span="12">
+        <div class="grid-content">
+          <h2>
+            <canvas id="pillar"></canvas>
+          </h2>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import Chart from 'chart.js'
+
+export default {
+  data () {
+    return {
+      randomNum (num, max, min) {
+        var arr = []
+        for (var i = 0; i < num; i++) {
+          arr.push(Math.floor(Math.random() * (max - min + 1)) + max)
+        }
+        return arr
+      }
+    }
+  },
+  computed: {
+    webNum () {
+      return this.randomNum(12, 100000, 1000)
+    },
+    personNum () {
+      return this.randomNum(12, 100000, 1000)
+    },
+    isMobile () {
+      return (window.innerWidth <= 800 && window.innerHeight <= 600)
+    }
+  },
+  methods: {
+  },
+  mounted () {
+    this.$nextTick(() => {
+      var Pie = document.getElementById('pie').getContext('2d')
+      var pieConfig = {
+        type: 'pie',
+        data: {
+          labels: ['HTML', 'JavaScript', 'CSS'],
+          datasets: [{
+            data: [56.6, 37.7, 4.1],
+            backgroundColor: ['#00a65a', '#f39c12', '#00c0ef'],
+            hoverBackgroundColor: ['#00a65a', '#f39c12', '#00c0ef']
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: !this.isMobile,
+          legend: {
+            position: 'bottom',
+            display: true
+          }
+        }
+      }
+      new Chart(Pie, pieConfig) // eslint-disable-line no-new
+
+      // qu xian tu
+      var Bight = document.getElementById('bight').getContext('2d')
+      var bightConfig = {
+        type: 'line',
+        data: {
+          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+          datasets: [{
+            label: 'rency',
+            fill: false,
+            borderColor: '#284184',
+            pointBackgroundColor: '#284184',
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            data: this.webNum
+          }, {
+            label: 'personNum',
+            borderColor: '#4BC0C0',
+            pointBackgroundColor: '#4BC0C0',
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            data: this.personNum
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: !this.isMobile,
+          legend: {
+            position: 'bottom',
+            display: true
+          },
+          tooltips: {
+            mode: 'label',
+            xPadding: 10,
+            yPadding: 10,
+            bodySpacing: 10
+          }
+        }
+      }
+      new Chart(Bight, bightConfig) // eslint-disable-line no-new
+
+      // 柱状图
+      var Pillar = document.getElementById('pillar').getContext('2d')
+      var PillarConfig = {
+        type: 'bar',
+        data: {
+          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+          datasets: [
+            {
+              label: 'gray',
+              backgroundColor: '#4Bc0c0',
+              borderColor: '#4BC0C0',
+              fillColor: '#4BC0C0',
+              strokeColor: '#4BC0C0',
+              data: [65, 59, 90, 81, 56, 55, 40]
+            },
+            {
+              label: 'green',
+              backgroundColor: '#284184',
+              borderColor: '#284184',
+              fillColor: '#284184',
+              strokeColor: '#284184',
+              data: [28, 48, 40, 19, 96, 27, 100]
+            }
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: !this.isMobile,
+          legend: {
+            position: 'bottom',
+            display: true
+          }
+        }
+      }
+      new Chart(Pillar, PillarConfig) // eslint-disable-line no-new
+    })
+  }
+}
+</script>
+<style lang='scss' scoped>
+.index-wrap{
+  h2{
+    text-align: center;
+  }
+
+}
+</style>
diff --git a/src/components/myviews/leaflet.vue b/src/components/myviews/leaflet.vue
new file mode 100644
index 00000000..4e4fd6e2
--- /dev/null
+++ b/src/components/myviews/leaflet.vue
@@ -0,0 +1,78 @@
+<template>
+  <div id="mapid"></div>
+</template>
+
+<script>
+import L from 'leaflet'
+
+export default {
+  data () {
+    return {
+    }
+  },
+  methods: {
+  },
+  mounted () {
+    var mymap = L.map('mapid').setView([22.66, 114.03], 13)
+
+    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+      maxZoom: 18,
+      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
+      id: 'mapbox.streets',
+      accessToken: 'pk.eyJ1IjoicmVuY3kiLCJhIjoiY2o1a2ZweThvMjVhOTJ3bG1wOTJ1YWlrcyJ9.RRbPjVQ2kBKhGaiNKTVAjQ'
+    }).addTo(mymap)
+
+    L.marker([22.66, 114.03]).addTo(mymap)
+      .bindPopup('<b>Hello world!</b><br />这里是深圳·龙华.').openPopup()
+
+    L.circle([22.65, 114.02], 500, {
+      color: 'red',
+      fillColor: '#f03',
+      fillOpacity: 0.5
+    }).addTo(mymap).bindPopup('我是红色的圆.')
+
+    L.polygon([
+      [22.68, 114.00],
+      [22.65, 114.00],
+      [22.67, 114.02]
+    ]).addTo(mymap).bindPopup('我是一个三角形.')
+
+    var popup = L.popup()
+
+    function onMapClick (e) {
+      popup
+        .setLatLng(e.latlng)
+        .setContent('You clicked the map at ' + e.latlng.toString())
+        .openOn(mymap)
+    }
+    mymap.on('click', onMapClick)
+    // L.icon
+    var LeafIcon = L.Icon.extend({
+      options: {
+        shadowUrl: 'leaf-shadow.png',
+        iconSize: [38, 95],
+        shadoeSize: [50, 64],
+        iconAnchor: [22, 94],
+        shadowAnchor: [4, 62],
+        popupAnchor: [-3, -76]
+      }
+    })
+
+    var greenIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png'})
+    var redIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-red.png'})
+    var orangeIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-orange.png'})
+
+    L.marker([22.68, 114.00], {icon: greenIcon}).bindPopup('我是绿色的').addTo(mymap)
+    L.marker([22.65, 114.00], {icon: redIcon}).bindPopup('我是红色的').addTo(mymap)
+    L.marker([22.67, 114.02], {icon: orangeIcon}).bindPopup('我是橘色的').addTo(mymap)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  #mapid{
+    height: 500px;
+  }
+</style>
diff --git a/src/components/myviews/table.vue b/src/components/myviews/table.vue
new file mode 100644
index 00000000..11ab05bf
--- /dev/null
+++ b/src/components/myviews/table.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="table-wrap" v-if= "response" >
+    <el-table :data="response" border style="width: 100%">
+      <el-table-column prop="name" label="名称" >
+      </el-table-column>
+      <el-table-column prop="stargazers_count" label="星星数量" >
+      </el-table-column>
+      <el-table-column prop="forks" label="被复刻" >
+      </el-table-column>
+      <el-table-columnprop="full_name" label="全名" >
+      </el-table-column>
+      <el-table-column prop="html_url" label="地址" >
+      </el-table-column>
+      <el-table-column prop="watchers" label="关注者数量" >
+      </el-table-column>
+      <el-table-column label="操作">
+        <template scope="scope">
+          <el-button type="text" @click="Edit(scope.row)" size="small">编辑</el-button>
+          <el-button type="text" @click="Del(scope.row.id)" size="small">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- <el-row type="flex" justify="center">
+        <el-col :span="12">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="response.currentPage"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="response.pageSize"
+            :total="response.count"
+            layout="total, sizes, prev, pager, next, jumper">
+          </el-pagination>
+        </el-col>
+      </el-row>    -->
+      <!-- // Edit -->
+      <el-dialog title="编辑" v-model="dialogShow">
+        <el-form :model="rData" :inline = true :label-width="labelWidth"> 
+          <el-form-item label="名称" >
+            <el-input v-model="rData.name"></el-input>
+          </el-form-item>
+          <el-form-item label="星星数量" >
+            <el-input v-model="rData.stargazers_count"></el-input>
+          </el-form-item>
+          <el-form-item label="被复刻" >
+            <el-input v-model="rData.forks"></el-input>
+          </el-form-item>
+          <el-form-item label="全名" >
+            <el-input v-model="rData.full_name"></el-input>
+          </el-form-item>
+          <el-form-item label="地址" >
+            <el-input v-model="rData.html_url"></el-input>
+          </el-form-item>
+          <el-form-item label="关注者数量" >
+            <el-input v-model="rData.watchers"></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogShow = false">取 消</el-button>
+          <el-button type="primary" @click="editSub">确 定</el-button>
+        </div>
+      </el-dialog>
+  </div>  
+</template>
+
+
+<script>
+import axios from 'axios'
+
+export default {
+  data () {
+    return {
+      githubUrl: 'https://api.github.com/search/repositories?q=language%3Ajavascript&sort=stars',
+      response: null,
+      dialogShow: false,
+      labelWidth: '100px',
+      rData: {
+        name: '',
+        stargazers_count: '',
+        forks: '',
+        full_name: '',
+        html_url: '',
+        watchers: ''
+      }
+    }
+  },
+  methods: {
+    getList () {
+      axios.get(this.githubUrl)
+        .then(response => {
+          console.log(response, 123)
+          if (response.status === 200) {
+            this.response = response.data.items
+          }
+        })
+    },
+    Edit (row) {
+      this.dialogShow = true
+      this.rData = row
+    },
+    editSub () {
+      this.$message('保存中！请稍等')
+      this.dialogShow = false
+    },
+    Del (id) {
+      console.log(id)
+      const data = {
+        val: '45',
+        ...this.rData
+      }
+      console.log(data)
+      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    }
+  },
+  mounted () {
+    this.getList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+
diff --git a/src/components/myviews/tasks.vue b/src/components/myviews/tasks.vue
new file mode 100644
index 00000000..55b5d024
--- /dev/null
+++ b/src/components/myviews/tasks.vue
@@ -0,0 +1,107 @@
+<template>
+  <div id="task">
+    <input id="txt" type="text" @keydown.enter="addTask" v-model="task.content" autofocus="autofocus" placeholder="请输入任务回车添加">
+    <div class="task-list">
+      <div class="list-box" v-for="(item, index) in list">
+        <input type="checkbox" @click="changeState(index)" :checked = "item.finished">
+        <span :class=" {'finish':item.finished} ">{{ item.content }}</span>
+        <button type="button" @click="delTask" class="del">删除</button>
+      </div>
+      <em v-if="list.length === 0" class="empty">暂无任务</em>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      task: {
+        content: '',
+        finished: false,
+        deleted: false
+      },
+      list: [
+        {content: '就像这样子'},
+        {content: '你可以添加你自己的日常'},
+        {content: '完成的就干掉它', finished: true}
+      ]
+    }
+  },
+  methods: {
+    addTask () {
+      this.list.push(this.task)
+      console.log(this.list)
+      this.task = {
+        content: '',
+        finished: false,
+        deleted: false
+      }
+    },
+    changeState (index) {
+      let curState = this.list[index].finished
+      this.list[index].finished = !curState
+    },
+    delTask (index) {
+      this.list.splice(index, 1)
+    }
+  },
+  mounted () {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  #task{
+    #txt{
+      display: block;
+      margin: 30px auto;
+      width: 300px;
+      height: 36px;
+      line-height: 36px;
+      box-sizing: border-box;
+      padding-left: 4px;
+      border-radius: 6px;
+      border: 1px solid #ccc;
+      outline: 0;
+      box-shadow: 0 0 5px #ccc;
+    }
+    .task-list{
+      margin:0 auto;
+      width: 300px;
+      .list-box{
+        position: relative;
+        padding: 8px 0;
+        font-size: 20px;
+        border-bottom: 1px solid #efefef;
+        &:last-child{
+          border-bottom: 0;
+        }
+        .finish{
+          text-decoration: line-through;
+          color: #ccc;
+        }
+        .del{
+          position: absolute;
+          right: 0;
+          background: red;
+          text-decoration: none;
+          font-size: 14px;
+          border: 0;
+          outline: 0;
+          padding: 2px 6px;
+          border-radius: 5px;
+          color: #fff;
+
+        }
+      }
+      .empty{
+        display: block;
+        font-size: 14px;
+        color: #008000;
+        text-align: center;
+        padding: 12px 0;
+      }
+    }
+  }
+</style>
diff --git a/src/components/views/Dashboard.vue b/src/components/views/Dashboard.vue
index b2b14410..9391b5ed 100644
--- a/src/components/views/Dashboard.vue
+++ b/src/components/views/Dashboard.vue
@@ -3,11 +3,11 @@
   <section class="content">
     <!-- Info boxes -->
     <div class="row">
-      <div class="alert alert-success alert-dismissible">
+      <!-- <div class="alert alert-success alert-dismissible">
         <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
         <h4><i class="icon fa fa-check"></i> CoPilot is open source!</h4>
         Click on icon to check it out on github. <a href="https://github.com/misterGF/CoPilot" target="_blank"><i class="fa fa-github fa-2x"></i></a>
-      </div>
+      </div> -->
       <div class="col-md-3 col-sm-6 col-xs-12">
         <div class="info-box">
           <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>
diff --git a/src/components/views/Repos.vue b/src/components/views/Repos.vue
index 19645851..e2535ce1 100644
--- a/src/components/views/Repos.vue
+++ b/src/components/views/Repos.vue
@@ -81,6 +81,7 @@ export default {
   },
   mounted () {
     this.callGitHub()
+    console.log(this)
   }
 }
 </script>
diff --git a/src/main.js b/src/main.js
index 07b3a14e..23711a51 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,9 @@ import { domain, count, prettyDate, pluralize } from './filters'
 
 // Import Views - Top level
 import AppView from './components/App.vue'
+// Import element ui
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-default/index.css'
 
 // Import Install and register helper items
 Vue.filter('count', count)
@@ -19,6 +22,7 @@ Vue.filter('prettyDate', prettyDate)
 Vue.filter('pluralize', pluralize)
 
 Vue.use(VueRouter)
+Vue.use(ElementUI)
 
 // Routing logic
 var router = new VueRouter({
diff --git a/src/routes.js b/src/routes.js
index 3a7c42f7..fe3cd37a 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -3,11 +3,11 @@ import LoginView from './components/Login.vue'
 import NotFoundView from './components/404.vue'
 
 // Import Views - Dash
-import DashboardView from './components/views/Dashboard.vue'
-import TablesView from './components/views/Tables.vue'
-import TasksView from './components/views/Tasks.vue'
+import DashboardView from './components/myviews/index.vue'
+import TablesView from './components/myviews/table.vue'
+import TasksView from './components/myviews/tasks.vue'
 import SettingView from './components/views/Setting.vue'
-import AccessView from './components/views/Access.vue'
+import AccessView from './components/myviews/leaflet.vue'
 import ServerView from './components/views/Server.vue'
 import ReposView from './components/views/Repos.vue'
 
@@ -25,18 +25,18 @@ const routes = [
         path: 'dashboard',
         alias: '',
         component: DashboardView,
-        name: 'Dashboard',
-        meta: {description: 'Overview of environment'}
+        name: '主页',
+        meta: {description: '看看这个环境'}
       }, {
         path: 'tables',
         component: TablesView,
-        name: 'Tables',
-        meta: {description: 'Simple and advance table in CoPilot'}
+        name: '表格',
+        meta: {description: '简单的表格'}
       }, {
         path: 'tasks',
         component: TasksView,
-        name: 'Tasks',
-        meta: {description: 'Tasks page in the form of a timeline'}
+        name: '任务',
+        meta: {description: '任务列表'}
       }, {
         path: 'setting',
         component: SettingView,
@@ -45,8 +45,8 @@ const routes = [
       }, {
         path: 'access',
         component: AccessView,
-        name: 'Access',
-        meta: {description: 'Example of using maps'}
+        name: 'leaflet地图',
+        meta: {description: '用于移动设备的交互式地图'}
       }, {
         path: 'server',
         component: ServerView,
