diff --git a/.idea/encodings.xml b/.idea/encodings.xml
new file mode 100644
index 0000000..c2bae49
--- /dev/null
+++ b/.idea/encodings.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding" defaultCharsetForPropertiesFiles="UTF-8">
+    <file url="PROJECT" charset="UTF-8" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
new file mode 100644
index 0000000..b8387eb
--- /dev/null
+++ b/.idea/jsLibraryMappings.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="ECMAScript 6" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 08fce59..9273e5c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,52 @@
 <template>
-  <div id="app">
-    <router-view />
-  </div>
+    <div id="app">
+        <transition :name="transitionName">
+            <router-view class="child-view" />
+        </transition>
+    </div>
 </template>
+<script>
+    export default {
+        data() {
+            return {
+                transitionName: 'slide-right'
+            };
+        },
+        watch: {
+            '$route' (to, from) {
+                if(to.path == '/'){
+                    this.transitionName = 'slide-right';
+                }else{
+                    this.transitionName = 'slide-left';
+                }
+            }
+        }
+    };
 
-<style>
-body {
-  font-size: 16px;
-  background-color: #f8f8f8;
-  -webkit-font-smoothing: antialiased;
-}
+</script>
+<style lang="less">
+    body {
+        font-size: 16px;
+        background-color: #f8f8f8;
+        -webkit-font-smoothing: antialiased;
+    }
+
+    .child-view {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        transition: all 0.5s cubic-bezier(.55,0,.1,1);
+    }
+    .slide-left-enter, .slide-right-leave-active {
+        opacity: 0;
+        -webkit-transform: translate(50px, 0);
+        transform: translate(50px, 0);
+    }
+    .slide-left-leave-active, .slide-right-enter {
+        opacity: 0;
+        -webkit-transform: translate(-50px, 0);
+        transform: translate(-50px, 0);
+    }
 </style>
diff --git a/src/main.js b/src/main.js
index 507a449..702e4ca 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,10 @@
 import Vue from 'vue';
 import App from './App';
-import { router } from './router';
+import {router} from './router';
 import './style/index.less';
 
 new Vue({
-  router,
-  el: '#app',
-  render: h => h(App)
+    router,
+    el: '#app',
+    render: h => h(App)
 });
diff --git a/src/router.js b/src/router.js
index 331f0d2..c7257ba 100644
--- a/src/router.js
+++ b/src/router.js
@@ -6,36 +6,22 @@ Vue.use(Router);
 const routes = [
   {
     path: '*',
-    redirect: '/nav'
+    redirect: '/'
   },
   {
-    name: 'nav',
+    name: '/',
     component: () => import('./view/nav'),
     meta: {
-      title: '会员中心'
+      title: '主页'
     }
   },
   {
-    name: 'user',
-    component: () => import('./view/user'),
+    name: 'set',
+    component: () => import('./view/set'),
     meta: {
-      title: '会员中心'
+      title: '设置中心'
     }
   },
-  {
-    name: 'cart',
-    component: () => import('./view/cart'),
-    meta: {
-      title: '购物车'
-    }
-  },
-  {
-    name: 'goods',
-    component: () => import('./view/goods'),
-    meta: {
-      title: '商品详情'
-    }
-  }
 ];
 
 // add route path
diff --git a/src/view/cart/index.vue b/src/view/cart/index.vue
deleted file mode 100644
index 5bbf6fe..0000000
--- a/src/view/cart/index.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-  <div>
-    <van-checkbox-group class="card-goods" v-model="checkedGoods">
-      <van-checkbox
-        class="card-goods__item"
-        v-for="item in goods"
-        :key="item.id"
-        :name="item.id"
-      >
-        <van-card
-          :title="item.title"
-          :desc="item.desc"
-          :num="item.num"
-          :price="formatPrice(item.price)"
-          :thumb="item.thumb"
-        />
-      </van-checkbox>
-    </van-checkbox-group>
-    <van-submit-bar
-      :price="totalPrice"
-      :disabled="!checkedGoods.length"
-      :button-text="submitBarText"
-      @submit="onSubmit"
-    />
-  </div>
-</template>
-
-<script>
-import { Checkbox, CheckboxGroup, Card, SubmitBar, Toast } from 'vant';
-
-export default {
-  components: {
-    [Card.name]: Card,
-    [Checkbox.name]: Checkbox,
-    [SubmitBar.name]: SubmitBar,
-    [CheckboxGroup.name]: CheckboxGroup
-  },
-
-  data() {
-    return {
-      checkedGoods: ['1', '2', '3'],
-      goods: [{
-        id: '1',
-        title: '进口香蕉',
-        desc: '约250g，2根',
-        price: 200,
-        num: 1,
-        thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg'
-      }, {
-        id: '2',
-        title: '陕西蜜梨',
-        desc: '约600g',
-        price: 690,
-        num: 1,
-        thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
-      }, {
-        id: '3',
-        title: '美国伽力果',
-        desc: '约680g/3个',
-        price: 2680,
-        num: 1,
-        thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
-      }]
-    };
-  },
-
-  computed: {
-    submitBarText() {
-      const count = this.checkedGoods.length;
-      return '结算' + (count ? `(${count})` : '');
-    },
-
-    totalPrice() {
-      return this.goods.reduce((total, item) => total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price : 0), 0);
-    }
-  },
-
-  methods: {
-    formatPrice(price) {
-      return (price / 100).toFixed(2);
-    },
-
-    onSubmit() {
-      Toast('点击结算');
-    }
-  }
-};
-</script>
-
-<style lang="less">
-.card-goods {
-  padding: 10px 0;
-  background-color: #fff;
-
-  &__item {
-    position: relative;
-    background-color: #fafafa;
-
-    .van-checkbox__label {
-      width: 100%;
-      height: auto; // temp
-      padding: 0 10px 0 15px;
-      box-sizing: border-box;
-    }
-
-    .van-checkbox__icon {
-      top: 50%;
-      left: 10px;
-      z-index: 1;
-      position: absolute;
-      margin-top: -10px;
-    }
-
-    .van-card__price {
-      color: #f44;
-    }
-  }
-}
-</style>
diff --git a/src/view/goods/index.vue b/src/view/goods/index.vue
deleted file mode 100644
index 1d46764..0000000
--- a/src/view/goods/index.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-    <div class="goods">
-        <van-swipe class="goods-swipe" :autoplay="3000">
-            <van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
-                <img :src="thumb">
-            </van-swipe-item>
-        </van-swipe>
-
-        <van-cell-group>
-            <van-cell>
-                <div class="goods-title">{{ goods.title }}</div>
-                <div class="goods-price">{{ formatPrice(goods.price) }}</div>
-            </van-cell>
-            <van-cell class="goods-express">
-                <van-col span="10">运费：{{ goods.express }}</van-col>
-                <van-col span="14">剩余：{{ goods.remain }}</van-col>
-            </van-cell>
-        </van-cell-group>
-
-        <van-cell-group class="goods-cell-group">
-            <van-cell value="进入店铺" icon="shop-o" is-link @click="sorry">
-                <template slot="title">
-                    <span class="van-cell-text">有赞的店</span>
-                    <van-tag class="goods-tag" type="danger">官方</van-tag>
-                </template>
-            </van-cell>
-            <van-cell title="线下门店" icon="location-o" is-link @click="sorry"/>
-        </van-cell-group>
-
-        <van-cell-group class="goods-cell-group">
-            <van-cell title="查看商品详情" is-link @click="sorry"/>
-        </van-cell-group>
-
-        <van-goods-action>
-            <van-goods-action-icon icon="chat-o" @click="sorry">
-                客服
-            </van-goods-action-icon>
-            <van-goods-action-icon icon="cart-o" @click="onClickCart">
-                购物车
-            </van-goods-action-icon>
-            <van-goods-action-button type="warning" @click="sorry">
-                加入购物车
-            </van-goods-action-button>
-            <van-goods-action-button type="danger" @click="sorry">
-                立即购买
-            </van-goods-action-button>
-        </van-goods-action>
-    </div>
-</template>
-
-<script>
-    import {
-        Tag,
-        Col,
-        Icon,
-        Cell,
-        CellGroup,
-        Swipe,
-        Toast,
-        SwipeItem,
-        GoodsAction,
-        GoodsActionIcon,
-        GoodsActionButton
-    } from 'vant';
-
-    export default {
-        components: {
-            [Tag.name]: Tag,
-            [Col.name]: Col,
-            [Icon.name]: Icon,
-            [Cell.name]: Cell,
-            [CellGroup.name]: CellGroup,
-            [Swipe.name]: Swipe,
-            [SwipeItem.name]: SwipeItem,
-            [GoodsAction.name]: GoodsAction,
-            [GoodsActionIcon.name]: GoodsActionIcon,
-            [GoodsActionButton.name]: GoodsActionButton
-        },
-
-        data() {
-            return {
-                goods: {
-                    title: '美国伽力果（约680g/3个）',
-                    price: 2680,
-                    express: '免运费',
-                    remain: 19,
-                    thumb: [
-                        'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
-                        'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
-                    ]
-                }
-            };
-        },
-
-        methods: {
-            formatPrice() {
-                return '¥' + (this.goods.price / 100).toFixed(2);
-            },
-
-            onClickCart() {
-                this.$router.push('cart');
-            },
-
-            sorry() {
-                Toast('暂无后续逻辑~');
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .goods {
-        padding-bottom: 50px;
-
-        &-swipe {
-            img {
-                width: 100%;
-                display: block;
-            }
-        }
-
-        &-title {
-            font-size: 16px;
-        }
-
-        &-price {
-            color: #f44;
-        }
-
-        &-express {
-            color: #999;
-            font-size: 12px;
-            padding: 5px 15px;
-        }
-
-        &-cell-group {
-            margin: 15px 0;
-
-            .van-cell__value {
-                color: #999;
-            }
-        }
-
-        &-tag {
-            margin-left: 5px;
-        }
-    }
-</style>
diff --git a/src/view/nav/index.vue b/src/view/nav/index.vue
index a671fcc..f412c69 100644
--- a/src/view/nav/index.vue
+++ b/src/view/nav/index.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="layout">
         <van-nav-bar class="layout-bar"
-                     title="应用导航"
-                     left-text="退出"
-                     right-text="设置"
-                     left-arrow
                      @click-left="onClickLeft"
-                     @click-right="onClickRight"/>
+                     @click-right="onClickRight"
+                     title="应用导航">
+            <van-icon name="home-o" slot="left"/>
+            <van-icon name="ellipsis" slot="right"/>
+        </van-nav-bar>
 
         <van-swipe class="layout-swipe" :autoplay="3000">
             <van-swipe-item>
@@ -37,6 +37,7 @@
         SwipeItem,
         Toast,
         NoticeBar,
+        Icon,
     } from 'vant';
 
     export default {
@@ -47,6 +48,7 @@
             [Swipe.name]: Swipe,
             [SwipeItem.name]: SwipeItem,
             [NoticeBar.name]: NoticeBar,
+            [Icon.name]: Icon,
         },
 
         data() {
@@ -102,10 +104,10 @@
         },
         methods: {
             onClickLeft() {
-                Toast('返回');
+                this.$router.push('nav');
             },
             onClickRight() {
-                Toast('按钮');
+                this.$router.push('set');
             }
         }
     };
diff --git a/src/view/set/index.vue b/src/view/set/index.vue
new file mode 100644
index 0000000..f112aae
--- /dev/null
+++ b/src/view/set/index.vue
@@ -0,0 +1,128 @@
+<template>
+    <div class="layout">
+        <van-nav-bar class="layout-bar"
+                     title="设置"
+                     @click-left="onClickLeft"
+                     left-arrow/>
+
+        <van-swipe class="layout-swipe" :autoplay="3000">
+            <van-swipe-item>
+                <img src="../../assets/bar1.jpg" class="" width="100%"/>
+            </van-swipe-item>
+        </van-swipe>
+        <van-notice-bar
+                text="连云港警方“快递哥消防宣传公益使者”行动"
+                left-icon="volume-o" :scrollable="false"/>
+
+        <van-grid>
+            <van-grid-item
+                    v-for="g in grids"
+                    :key="g.key"
+                    :icon="g.icon"
+                    :text="g.text"
+            />
+        </van-grid>
+    </div>
+</template>
+
+<script>
+    import {
+        NavBar,
+        Grid,
+        GridItem,
+        Swipe,
+        SwipeItem,
+        Toast,
+        NoticeBar,
+        Icon,
+    } from 'vant';
+
+    export default {
+        components: {
+            [NavBar.name]: NavBar,
+            [Grid.name]: Grid,
+            [GridItem.name]: GridItem,
+            [Swipe.name]: Swipe,
+            [SwipeItem.name]: SwipeItem,
+            [NoticeBar.name]: NoticeBar,
+            [Icon.name]: Icon,
+        },
+
+        data() {
+            return {
+                grids: [
+                    {
+                        key: "1",
+                        text: "地址管理",
+                        icon: "photo-o"
+                    },
+                    {
+                        key: "2",
+                        text: "房屋管理",
+                        icon: "photo-o"
+                    },
+                    {
+                        key: "3",
+                        text: "人口管理",
+                        icon: "photo-o"
+                    },
+                    {
+                        key: "4",
+                        text: "单位管理",
+                        icon: "photo-o"
+                    },
+                    {
+                        key: "5",
+                        text: "综合查询",
+                        icon: "photo-o"
+                    },
+                    {
+                        key: "6",
+                        text: "综合查询",
+                        icon: "photo-o"
+                    },
+                    {
+                        key: "7",
+                        text: "情报线索",
+                        icon: "photo-o"
+                    },
+                    {
+                        key: "8",
+                        text: "入户访查",
+                        icon: "photo-o"
+                    },
+                    {
+                        key: "9",
+                        text: "发案回访",
+                        icon: "photo-o"
+                    }
+                ]
+            };
+        },
+        methods: {
+            onClickLeft() {
+                this.$router.go(-1)
+            },
+        }
+    };
+</script>
+
+<style lang="less">
+    .layout {
+        padding-top: 50px;
+        padding-bottom: 50px;
+
+        &-bar {
+            position: fixed;
+            width: 100%;
+            top: 0px;
+        }
+
+        &-swipe {
+            img {
+                width: 100%;
+                display: block;
+            }
+        }
+    }
+</style>
diff --git a/src/view/user/index.vue b/src/view/user/index.vue
deleted file mode 100644
index aeaeddd..0000000
--- a/src/view/user/index.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <div>
-    <img class="user-poster" src="https://img.yzcdn.cn/public_files/2017/10/23/8690bb321356070e0b8c4404d087f8fd.png">
-    <van-row class="user-links">
-      <van-col span="6">
-        <van-icon name="pending-payment" />
-        待付款
-      </van-col>
-      <van-col span="6">
-        <van-icon name="records" />
-        待接单
-      </van-col>
-      <van-col span="6">
-        <van-icon name="tosend" />
-        待发货
-      </van-col>
-      <van-col span="6">
-        <van-icon name="logistics" />
-        已发货
-      </van-col>
-    </van-row>
-
-    <van-cell-group class="user-group">
-      <van-cell icon="records" title="全部订单" is-link />
-    </van-cell-group>
-
-    <van-cell-group>
-      <van-cell icon="points" title="我的积分" is-link />
-      <van-cell icon="gold-coin-o" title="我的优惠券" is-link />
-      <van-cell icon="gift-o" title="我收到的礼物" is-link />
-    </van-cell-group>
-  </div>
-</template>
-
-<script>
-import { Row, Col, Icon, Cell, CellGroup } from 'vant';
-
-export default {
-  components: {
-    [Row.name]: Row,
-    [Col.name]: Col,
-    [Icon.name]: Icon,
-    [Cell.name]: Cell,
-    [CellGroup.name]: CellGroup
-  }
-};
-</script>
-
-<style lang="less">
-.user {
-  &-poster {
-    width: 100%;
-    height: 53vw;
-    display: block;
-  }
-
-  &-group {
-    margin-bottom: 15px;
-  }
-
-  &-links {
-    padding: 15px 0;
-    font-size: 12px;
-    text-align: center;
-    background-color: #fff;
-
-    .van-icon {
-      display: block;
-      font-size: 24px;
-    }
-  }
-}
-</style>