diff --git a/.gitignore b/.gitignore
index 9212a8b..008631d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 .DS_Store
 node_modules/
+!node_modules/vux
 dist/
 npm-debug.log
 yarn-error.log
diff --git a/package.json b/package.json
index c9b0f92..bfe94c1 100644
--- a/package.json
+++ b/package.json
@@ -34,44 +34,45 @@
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
     "eslint": "^3.19.0",
+    "eslint-config-standard": "^10.2.1",
     "eslint-friendly-formatter": "^3.0.0",
     "eslint-loader": "^1.7.1",
     "eslint-plugin-html": "^3.0.0",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^3.0.1",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-node": "^5.2.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^3.0.1",
     "eventsource-polyfill": "^0.9.6",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
-    "webpack-bundle-analyzer": "^2.9.0",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
     "node-notifier": "^5.1.2",
+    "node-sass": "^4.5.3",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.8",
+    "rimraf": "^2.6.0",
+    "sass-loader": "^6.0.6",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
-    "ora": "^1.2.0",
-    "rimraf": "^2.6.0",
     "url-loader": "^0.5.8",
-    "yaml-loader": "^0.4.0",
-    "less": "^2.7.1",
-    "less-loader": "^2.2.3",
-    "vux-loader": "^1.0.56",
+    "vue-lazyload": "^1.2.6",
     "vue-loader": "^13.3.0",
-    "webpack-dev-middleware": "^1.10.0",
-    "webpack-hot-middleware": "^2.16.1",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
-    "portfinder": "^1.0.13",
+    "vux-loader": "^1.0.56",
     "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-middleware": "^1.10.0",
     "webpack-dev-server": "^2.9.1",
+    "webpack-hot-middleware": "^2.16.1",
     "webpack-merge": "^4.1.0",
-    "node-sass": "^4.5.3",
-    "sass-loader": "^6.0.6"
+    "yaml-loader": "^0.4.0"
   },
   "engines": {
     "node": ">= 4.0.0",
diff --git a/src/components/Index.vue b/src/components/Index.vue
index 7121ec6..d29a5b1 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -1,13 +1,13 @@
 <template>
     <div class="index">
 
-        <drawer width="200px;" :show.sync="drawerVisibility" :show-mode="showModeValue" :placement="showPlacementValue" :drawer-style="{'background-color':'#ddd', width: '200px'}">
+        <drawer width="340px;" :show.sync="drawerVisibility" :show-mode="showModeValue" :placement="showPlacementValue" :drawer-style="{'background-color':'#fff', width: '340px'}">
 
-            <div slot="drawer">
+            <div slot="drawer" class="menu-container">
                 <!-- 菜单内容 -->
                 <Menu></Menu>
             </div>
-            <div>
+            <div class="main">
                 <x-header>
                     <div slot="overwrite-left">
                         <i class="fa fa-reorder" @click="showDrawer"></i>
@@ -72,8 +72,15 @@ export default {
 </script>
 
 <style lang="scss">
+.vux-header{
+  background: #9bca4f !important;
+}
+
 .index {
   height: 100%;
+  .main{
+    height: 100%;
+  }
   .fa-reorder {
     font-size: 2rem;
     vertical-align: middle;
@@ -94,6 +101,10 @@ export default {
   }
 }
 
+.menu-container{
+  height: 100%;
+}
+
 .title-icon {
   margin-left: -30px; //用负外边距来把第一个padiding fix
   i {
diff --git a/src/components/Index/Menu.vue b/src/components/Index/Menu.vue
index 448d135..d46baec 100644
--- a/src/components/Index/Menu.vue
+++ b/src/components/Index/Menu.vue
@@ -1,22 +1,72 @@
 <template>
-    <ul>
-        <li>我的音乐</li>
-        <li>我的音乐</li>
-        <li>我的音乐</li>
-        <li>我的音乐</li>
-        <li>我的音乐</li>
-        <li>我的音乐</li>
-        <li>我的音乐</li>
-        <li>我的音乐</li>
-    </ul>
+    <div class="menu">
+        <div><img id='menu-top-pic' v-lazy="topPic" alt=""></div>
+        <group>
+            <cell title="我的消息" value=""></cell>
+            <cell title="会员中心" value=""></cell>
+            <cell title="商城" value=""></cell>
+            <cell title="在线听歌免流量" value=""></cell>
+        </group>
+        <group>
+            <cell title="我的消息" value=""></cell>
+            <cell title="会员中心" value=""></cell>
+            <cell title="商城" value=""></cell>
+            <cell title="在线听歌免流量" value=""></cell>
+        </group>
+        <group>
+            <cell title="我的消息" value=""></cell>
+            <cell title="会员中心" value=""></cell>
+            <cell title="商城" value=""></cell>
+            <cell title="在线听歌免流量" value=""></cell>
+        </group>
+        <div class="menu-bottom">
+            <div class="menu-bottom-item">夜间模式</div>
+            <div class="menu-bottom-item">设置</div>
+            <div class="menu-bottom-item">退出</div>
+        </div>
+    </div>
 </template>
 
 <script>
+import { Cell } from "vux";
+import { Group } from "vux";
+const topPic = require("../../assets/logo.png");
 export default {
-    name:'Menu'
-
+  name: "Menu",
+  components: {
+    Cell,
+    Group
+  },
+  data() {
+    return {
+      topPic: topPic
+    };
+  }
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
+#menu-top-pic {
+  width: 100%;
+}
+.menu {
+  height: calc(100% - 51px);
+  overflow: auto;
+}
+.menu-bottom {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  height: 50px;
+  line-height: 50px;
+  border-top: solid 1px #ddd;
+  width: 100%;
+  .menu-bottom-item {
+    padding-left: 6rem;
+    &:first-child {
+      padding-left: 0;
+    }
+  }
+}
 </style>
+
diff --git a/src/components/Recomend.vue b/src/components/Recomend.vue
index 6f69df8..0ad8f41 100644
--- a/src/components/Recomend.vue
+++ b/src/components/Recomend.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="vux-demo">
+  <div class="rec-content">
     <div v-if="picArray.length>0">
       <slide :loop='loop' :autoPlay='autoPlay' :picArray="picArray" :style="{'margin-top':'10px'}">
 
@@ -8,12 +8,13 @@
     </div>
     <circle-icon v-for="(item,index) in icons" :icon="item.name" :key="index" :class="'distance'" :style="index===0?{'margin-left':0}:''">
       <!--去掉第一个元素的margin-->
+      <div>{{item.text}}</div>
     </circle-icon>
     <div class="song-sheets">
       <sheet-label :title="'推荐歌单'"></sheet-label>
       <grid :col=2 :cols=3>
-        <grid-item :classes="classes" label="Grid" v-for="item in contentArray" :key="item.id">
-          <img slot="icon" :src="item.picUrl">
+        <grid-item label="Grid" v-for="item in contentArray" :key="item.id" @click.prevent.native="goToSongSheet(item.id)">
+          <img slot="icon" v-lazy="item.picUrl">
           <div slot="label">{{item.name}}</div>
           <div class="right-top">
             <i class="fa fa-headphones"></i>
@@ -24,14 +25,14 @@
 
       </grid>
     </div>
-      <div class="song-sheets">
+    <div class="song-sheets">
       <sheet-label :title="'最新音乐'"></sheet-label>
       <grid :col=2 :cols=3>
-        <grid-item :classes="classes" label="Grid" v-for="item in newsongs" :key="item.id">
-          <img slot="icon" :src="item.coverImgUrl">
+        <grid-item label="Grid" v-for="item in newsongs" :key="item.id" @click="goToSongSheet(item.id)">
+          <img slot="icon" v-lazy="item.coverImgUrl">
           <div slot="label">{{item.name}}</div>
           <div class="right-top">
-            <i class="fa fa-headphones"></i>
+            <!-- <i class="fa fa-headphones"></i> -->
             <!-- <span>{{(item.playCount/10000).toFixed(2)+"W" }}
             </span> -->
           </div>
@@ -45,7 +46,7 @@
 <script>
 // import { Group, Cell } from 'vux'
 import Slide from "components/Index/Slider.vue";
-import { getFirstScreenData,getSongSheetsData} from "api/api.js";
+import { getFirstScreenData, getSongSheetsData } from "api/api.js";
 import { Grid, GridItem } from "vux";
 import CircleIcon from "components/Recomend/CircleIcon";
 import SheetLabel from "components/Recomend/SheetLabel";
@@ -66,10 +67,10 @@ export default {
       // its initial state.
       // msg: "Hello World!",
       icons: [
-        { name: "fa fa-book" },
-        { name: "fa fa-book" },
-        { name: "fa fa-book" },
-        { name: "fa fa-book" }
+        { name: "fa fa-book", text: "私人FM" },
+        { name: "fa fa-book", text: "每日推荐" },
+        { name: "fa fa-book", text: "歌单" },
+        { name: "fa fa-book", text: "排行榜" }
       ],
       loop: true,
       autoPlay: true,
@@ -77,30 +78,29 @@ export default {
       videoArray: [],
       partTitle: "推荐歌单",
       contentArray: [],
-      classes: {
-        weui_grid__icon: {
-          width: "auto",
-          height: "auto"
-        }
-      },
-      newsongs:[]
+      // classes: {
+      //   weui_grid__icon: {
+      //     width: "auto",
+      //     height: "auto"
+      //   }
+      // },
+      newsongs: []
     };
   },
   methods: {
     async getAllData() {
       //let vm = this;
       let res = await getFirstScreenData();
-      let opts={
-       order:'new',
-       limit:6
-      }
-      let newsongs=await getSongSheetsData(opts,['playlistData'])
+      let opts = {
+        order: "new",
+        limit: 6
+      };
+      let newsongs = await getSongSheetsData(opts, ["playlistData"]);
       console.log(res);
-      console.log(newsongs)
-      let newsong=newsongs[0];
-      if(newsong.data.code==200){
-
-        this.newsongs=newsong.data.playlists;
+      console.log(newsongs);
+      let newsong = newsongs[0];
+      if (newsong.data.code == 200) {
+        this.newsongs = newsong.data.playlists;
       }
       //封装了获取数据的方法
       // .then(function(res) {
@@ -121,18 +121,25 @@ export default {
         });
         this.videoArray = privateContent.data.result;
       }
+    },
+    goToSongSheet(id){
+
+      //this.$router.push({name:"SongSheet",params: {id}})=>这种写法无效
+         this.$router.push({path:`/songsheets`,params: {id}})
+      
     }
-    
   },
-  mounted() {
+  created() {
     this.getAllData();
   }
 };
 </script>
 
-<style lang="scss" scoped>
-.vux-demo {
+<style lang="scss">
+.rec-content {
   text-align: center;
+  height: 85%;
+  overflow: auto;
 }
 .logo {
   width: 100px;
@@ -149,10 +156,10 @@ export default {
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.weui_grid__icon {
-  width: auto;
-  height: auto;
-  margin: 0 auto;
+.weui-grid__icon {
+  width: auto !important;
+  height: auto !important;
+  margin: 0 auto !important;
 }
 .right-top {
   position: absolute;
diff --git a/src/components/Recomend/CircleIcon.vue b/src/components/Recomend/CircleIcon.vue
index 3db14a9..88b249c 100644
--- a/src/components/Recomend/CircleIcon.vue
+++ b/src/components/Recomend/CircleIcon.vue
@@ -1,32 +1,39 @@
 <template>
-   <div class="circle">
-       <i :class="icon"></i>
-   </div>
+    <div class="wrapper"> 
+        <div class="circle">
+            <i :class="icon"></i>
+
+        </div>
+        <slot></slot>
+    </div>
 </template>
 
 <script>
 export default {
-
-props:{
-    icon:{
-        type:String,
-        default:"",
-        required:true
+  props: {
+    icon: {
+      type: String,
+      default: "",
+      required: true
     }
-}
-}
+  }
+};
 </script>
 
 <style lang="scss" scoped>
+.circle {
+  display: inline-block;
+  width: 26px;
+  // border:solid 1px;
+  //border-radius: 50%;
+  border-radius: 50%;
+  padding: 20%;
+  background: #94c540ed;
+}
 
-.circle{
+.wrapper{
+   width: 20%;
     display: inline-block;
-    width: 26px;
-    border:solid 1px;
-    //border-radius: 50%;
-    border-radius: 50%;
-    padding: 3%;
 }
-
 </style>
 
diff --git a/src/components/SongSheet.vue b/src/components/SongSheet.vue
new file mode 100644
index 0000000..b70a65e
--- /dev/null
+++ b/src/components/SongSheet.vue
@@ -0,0 +1,39 @@
+<!--歌单-->
+<template>
+<div class="song-sheet">
+  <!--头部-->
+    <header></header>
+    <!--主体-->
+    <main>
+       <!--主体上-->
+      <div class="main-top">
+        <div class="main-top-pic"></div>
+        <div class="main-top-title"></div>
+        <div class="main-top-author"></div>
+      </div>
+      <!-- 操作-->
+      <div class="main-options">
+
+      </div>
+      <!-- 歌曲列表-->
+      <div class="main-list"></div>
+    </main>
+</div>
+</template>
+
+<script>
+export default {
+  name: "SongSheet",
+  created() {
+    console.log("created");
+    console.log(this.$route.params);
+  },
+  mounted() {
+    console.log("mounted");
+    console.log(this.$route.params);
+  }
+};
+</script>
+
+<style>
+</style>
diff --git a/src/main.js b/src/main.js
index 907489f..b29a045 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,7 +16,13 @@ import store from './store'
 // const router = new VueRouter({
 //   routes
 // })
-
+import VueLazyload from 'vue-lazyload'
+Vue.use(VueLazyload, {
+  preLoad: 1.3,
+  error: '../static/img/no-pic.png',
+  // loading: '../static/img/loading.gif',
+  attempt: 1
+})
 FastClick.attach(document.body)
 
 Vue.config.productionTip = false
diff --git a/src/router/index.js b/src/router/index.js
index f6ec546..5532d33 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -18,6 +18,11 @@ export default new Router({
           component: view('', 'Recomend')
         }
       ]
+    },
+    {
+      path: '/songsheets',
+      name: 'SongSheet',
+      component: view('', 'SongSheet')
     }
   ]
 })
diff --git a/static/img/1.gif b/static/img/1.gif
new file mode 100644
index 0000000..a11be5f
Binary files /dev/null and b/static/img/1.gif differ
diff --git a/static/img/loading.gif b/static/img/loading.gif
new file mode 100644
index 0000000..7c5265a
Binary files /dev/null and b/static/img/loading.gif differ
diff --git a/static/img/no-pic.png b/static/img/no-pic.png
new file mode 100644
index 0000000..daa175d
Binary files /dev/null and b/static/img/no-pic.png differ