From ba14da574c1bc5b7cc5de0d8b505953e3e274eee Mon Sep 17 00:00:00 2001
From: xsf <416175716@qq.com>
Date: Mon, 29 Aug 2016 18:49:38 +0800
Subject: [PATCH] =?UTF-8?q?20160829=E4=B8=8B=E7=8F=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.vue                | 53 ++++++++++++++++++++++++++++++---
 src/components/sideBar.vue | 60 ++++++++++++++++++++++++++++++++++++++
 src/views/news.vue         |  2 +-
 3 files changed, 110 insertions(+), 5 deletions(-)
 create mode 100644 src/components/sideBar.vue

diff --git a/src/app.vue b/src/app.vue
index d2729f4..6f3c055 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -6,12 +6,22 @@
                 <a class="cur" href="" v-text="item.name">{{$index}}</a>
             </div>
         </footer>
+
+        <button @click="showPanel()" style="float:right;">侧边栏按钮</button>
+
+        <section class="panel" id="panelNav" :class="{ 'active': isShow }">
+            <ul class="nav-aside">
+                <li><a href="#">Home</a></li>
+                <li><a href="#">List</a></li>
+                <li><a href="#">Demo</a></li>
+                <li><a href="#">Download</a></li>
+            </ul>
+        </section>
     </div>
 </template>
 
 <script>
     import 'mint-ui/lib/style.css';
-
     module.exports = {
         data: function() {
             return {
@@ -28,13 +38,48 @@
                     '/about':{
                         name:'about'
                     }
-                }
-
+                },
+                isShow: false
             };
         },
         methods:{
-            /* do someThing */
+            showPanel: function () {
+                this.isShow = !this.isShow;
+            }
         }
     }
 
 </script>
+
+<style>
+    .panel.active {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    .panel {
+        position: absolute;
+        top: -1px;
+        bottom: -1px;
+        left: 0;
+        z-index: 980;
+        width: 120px;
+        background-color: #333;
+        -webkit-transform: translate3d(-120px, 0, 0);
+        transform: translate3d(-120px, 0, 0);
+        -webkit-transition: -webkit-transform 0.3s ease-in-out;
+        transition: transform 0.3s ease-in-out;
+    }
+    .nav-aside {
+        line-height: 40px;
+    }
+    .nav-aside li {
+        border-bottom: 1px solid #222;
+        color: #fff;
+    }
+    .nav-aside li a {
+        color: #fff;
+        padding: 0 5px;
+        display: block;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/components/sideBar.vue b/src/components/sideBar.vue
new file mode 100644
index 0000000..1f29da1
--- /dev/null
+++ b/src/components/sideBar.vue
@@ -0,0 +1,60 @@
+<template>
+    <div>
+        <section class="panel" id="panelNav" :class="{ 'active': isShow }">
+            <ul class="nav-aside">
+                <li><a href="#">Home</a></li>
+                <li><a href="#">List</a></li>
+                <li><a href="#">Demo</a></li>
+                <li><a href="#">Download</a></li>
+            </ul>
+        </section>
+    </div>
+</template>
+
+<script>
+    module.exports = {
+        data: function() {
+            return {
+                isShow: false,
+            };
+        },
+        methods:{
+            showPanel: function () {
+                console.log(1);
+                this.isShow = !this.isShow;
+            }
+        }
+    }
+</script>
+
+<style>
+    /*.panel.active {*/
+        /*-webkit-transform: translate3d(0, 0, 0);*/
+        /*transform: translate3d(0, 0, 0);*/
+    /*}*/
+    /*.panel {*/
+        /*position: absolute;*/
+        /*top: -1px;*/
+        /*bottom: -1px;*/
+        /*left: 0;*/
+        /*z-index: 980;*/
+        /*width: 120px;*/
+        /*background-color: #333;*/
+        /*-webkit-transform: translate3d(-120px, 0, 0);*/
+        /*transform: translate3d(-120px, 0, 0);*/
+        /*-webkit-transition: -webkit-transform 0.3s ease-in-out;*/
+        /*transition: transform 0.3s ease-in-out;*/
+    /*}*/
+    /*.nav-aside {*/
+        /*line-height: 40px;*/
+    /*}*/
+    /*.nav-aside li {*/
+        /*border-bottom: 1px solid #222;*/
+        /*color: #fff;*/
+    /*}*/
+    /*.nav-aside li a {*/
+        /*color: #fff;*/
+        /*padding: 0 5px;*/
+        /*display: block;*/
+    /*}*/
+</style>
\ No newline at end of file
diff --git a/src/views/news.vue b/src/views/news.vue
index e888e69..33e012d 100644
--- a/src/views/news.vue
+++ b/src/views/news.vue
@@ -18,7 +18,7 @@
 			}
 		},
 		components:{
-			uiselect:require('../components/select.vue')
+			uiselect: require('../components/select.vue')
 		},
 		route:{
 			activate:function(transition){