diff --git a/src/App.vue b/src/App.vue
index 66b7daa..41a8856 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,8 @@
 <template>
   <div id="app">
-    <router-view />
+    <keep-alive>
+      <router-view />
+    </keep-alive>
   </div>
 </template>
 
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 8502e78..8d6db3d 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -1,9 +1,11 @@
 #bookshelf{
   width: 100%;
-  height: 100vh;
+  height: 1920px;
+  padding-top: 60px;
   font-size: 30px;
   background: url('~@/assets/images/home/bg.png') no-repeat left top;
   background-size: cover;
+  overflow: hidden;
 }
 
 //c-s壳占位
@@ -76,75 +78,79 @@
   }
 }
 
-.current-rack{
+// 本架图书
+.book-rack{
   height: 770px;
   margin: 0 40px;
   padding: 0 40px 40px 40px;
   background-color: #fff;
   border-radius: 30px;
   box-shadow: 0px 0px 20px 1px #B8D3FF;
-  .rack-top{
+}
+.list-top{
+  display: flex;
+  justify-content: space-between;
+  justify-items: center;
+  align-items: center;
+  padding: 30px 0 25px 0;
+  font-size: 36px;
+  .list-top-title{
     display: flex;
-    justify-content: space-between;
-    justify-items: center;
-    align-items: center;
-    padding: 30px 0 25px 0;
-    font-size: 36px;
-    .rack-top-title{
-      display: flex;
-      justify-content: flex-start;
-      font-size: 40px;
-      line-height: 50px;
-      .icon{
-        width: 50px;
-        height: 50px;
-        margin-right: 20px;
-      }
+    justify-content: flex-start;
+    font-size: 40px;
+    line-height: 50px;
+    .icon{
+      width: 50px;
+      height: 50px;
+      margin-right: 20px;
     }
-    .more{
-      .iconfont{
-        font-size: 30px;
-        margin-left: 20px;
-      }
+  }
+  .more{
+    .iconfont{
+      font-size: 30px;
+      margin-left: 20px;
     }
   }
 }
 
+// 本架图书list
 .rack-list{
   display: flex;
   justify-content: space-between;
+}
 
-  .list-item{
-    border: 1px solid #A2CCFF;
-    border-radius: 4px;
-    overflow: hidden;
-    .book-info{
-      position: relative;
-    }
-    .book-title{
-      font-weight: normal;
-      line-height: 40px;
-      margin-bottom: 10px;
-    }
-    .book-author{
-      font-size: 24px;
-    }
-    .book-num{
-      position: absolute;
-      bottom: 20px;
-      display: flex;
-      justify-content: flex-start;
-      font-size: 20px;
-      color: #999;
-      .icon{
-        width: 20px;
-        height: 22px;
-        margin-right: 10px;
-      }
+.list-item{
+  border: 1px solid #A2CCFF;
+  border-radius: 4px;
+  overflow: hidden;
+  .book-info{
+    position: relative;
+  }
+  .book-title{
+    font-weight: normal;
+    line-height: 40px;
+    margin-bottom: 10px;
+  }
+  .book-author{
+    font-size: 24px;
+  }
+  .book-num{
+    position: absolute;
+    bottom: 20px;
+    display: flex;
+    justify-content: flex-start;
+    font-size: 20px;
+    color: #999;
+    .icon{
+      width: 20px;
+      height: 22px;
+      margin-right: 10px;
     }
   }
+}
 
-  .list-big{
+.list-big{
+  .list-item{
     width: 435px;
     height: 625px;
     margin-right: 45px;
@@ -161,30 +167,55 @@
       right: 16px;
     }
   }
+}
 
-  .list-right{
-    flex: 1;
+.list-middle{
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 625px;
+  .list-item{
     display: flex;
-    flex-direction: column;
+    height: calc(100%/2 - 20px);
     justify-content: space-between;
-    height: 625px;
-    .list-middle{
-      display: flex;
-      height: calc(100%/2 - 20px);
-      justify-content: space-between;
-      img{
-        display: block;
-        width: 244px;
-        height: 100%;
-        margin-right: 20px;
-      }
-      .book-info{
-        padding: 20px 0 0 0;
-      }
-      .book-num{
-        left: 0;
-        bottom: 12px;
-      }
+    img{
+      display: block;
+      width: 244px;
+      height: 100%;
+      margin-right: 20px;
+    }
+    .book-info{
+      padding: 20px 0 0 0;
+    }
+    .book-num{
+      left: 0;
+      bottom: 12px;
     }
   }
 }
+
+// 新书推荐
+.new-recommend{
+  height: 448px;
+  margin: 30px 40px 0 40px;
+}
+
+.list-small{
+  display: flex;
+  justify-content: space-between;
+  justify-items: center;
+  .list-item{
+    width: 200px;
+    border: none;
+    img{
+      display: block;
+      width: 100%;
+      height: 240px;
+      margin-bottom: 10px;
+    }
+    .book-title{
+      margin-bottom: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index f9ef8a9..cbab4e9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,14 +3,24 @@ import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
 
-const routes = [{
-  path: '/',
-  name: 'index',
-  component: () => import('../views/index.vue'),
-  meta: {
-    title: '智慧大屏'
+const routes = [
+  {
+    path: '/',
+    name: 'index',
+    component: () => import('@/views/index.vue'),
+    meta: {
+      title: '智慧书架'
+    }
+  },
+  {
+    path: '/CurrentRackBook',
+    name: 'CurrentRackBook',
+    component: () => import('@/views/bookRackList.vue'),
+    meta: {
+      title: '本架图书'
+    }
   }
-}]
+]
 
 const router = new VueRouter({
   mode: 'history',
diff --git a/src/views/bookRackList.vue b/src/views/bookRackList.vue
new file mode 100644
index 0000000..04cdd3b
--- /dev/null
+++ b/src/views/bookRackList.vue
@@ -0,0 +1,32 @@
+<template>
+  <div id="bookshelf">
+    <!-- <div class="top-bg" /> -->
+    <div class="bookshelf-header">
+      <h2>本架图书</h2>
+      <span>01架</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CurrentRackBook',
+  components: {
+  },
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+
+</style>
diff --git a/src/views/data.json b/src/views/data.json
new file mode 100644
index 0000000..c622ed2
--- /dev/null
+++ b/src/views/data.json
@@ -0,0 +1,55 @@
+{
+  "bookList":[
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定1",
+      "ranking": 1,
+      "num": 2000
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定2",
+      "ranking": 2,
+      "num": 1200
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定3",
+      "ranking": 3,
+      "num": 1100
+    }
+  ],
+  "newList":[
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定1",
+      "ranking": 1,
+      "num": 2000
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定2",
+      "ranking": 2,
+      "num": 1200
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定3",
+      "ranking": 3,
+      "num": 1100
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定4",
+      "ranking": 4,
+      "num": 1100
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index f01ea48..e50862d 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,14 +1,16 @@
 <template>
   <div id="bookshelf">
-    <div class="top-bg" />
+    <!-- <div class="top-bg" /> -->
     <div class="bookshelf-header">
       <h2>RFID智慧书架</h2>
       <span>01架</span>
     </div>
+    <!-- 本架分类 -->
     <div class="book-category">
       <p>近代文学类</p>
       <p>古代文学类</p>
     </div>
+    <!-- 智慧书架导航 -->
     <ul class="book-nav">
       <li>
         <img src="~@/assets/images/home/nav1.png">
@@ -31,83 +33,67 @@
         <p>场馆导航</p>
       </li>
     </ul>
-    <div class="current-rack">
-      <div class="rack-top">
-        <div class="rack-top-title">
+    <!-- 本架图书 -->
+    <div class="book-rack">
+      <div class="list-top">
+        <div class="list-top-title">
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-benjiatushu" />
           </svg>
           <p>本架图书</p>
         </div>
-        <span class="more">更多<i class="iconfont icon-zuo rotate" /></span>
+        <span class="more" @click="toCurrentRackMore">更多<i class="iconfont icon-zuo rotate" /></span>
       </div>
       <div class="rack-list">
-        <div class="list-item list-big">
-          <img src="https://qiniu.aiyxlib.com/bg.png">
-          <div class="book-info">
-            <h4 class="book-title title-item">大个子狗与小个子猫</h4>
-            <p class="book-author">作者姓名</p>
-            <div class="book-num">
-              <svg class="icon" aria-hidden="true">
-                <use xlink:href="#icon-remen" />
-              </svg>
-              <p>200135</p>
-            </div>
-          </div>
-        </div>
-        <div class="list-right">
-          <div class="list-item list-middle">
-            <img src="https://qiniu.aiyxlib.com/bg.png">
-            <div class="book-info">
-              <h4 class="book-title">大个子狗与小个子猫</h4>
-              <p class="book-author">作者姓名</p>
-              <div class="book-num">
-                <svg class="icon" aria-hidden="true">
-                  <use xlink:href="#icon-remen" />
-                </svg>
-                <p>200135</p>
-              </div>
-            </div>
-          </div>
-          <div class="list-item list-middle">
-            <img src="https://qiniu.aiyxlib.com/bg.png">
-            <div class="book-info">
-              <h4 class="book-title">大个子狗与小个子猫</h4>
-              <p class="book-author">作者姓名</p>
-              <div class="book-num">
-                <svg class="icon" aria-hidden="true">
-                  <use xlink:href="#icon-remen" />
-                </svg>
-                <p>200135</p>
-              </div>
-            </div>
-          </div>
+        <BookListItem class="list-big" :list-data.sync="rackList" />
+        <BookListItem class="list-middle" :list-data.sync="otherList" :is-other-book="true" />
+      </div>
+    </div>
+    <!-- 新书推荐 -->
+    <div class="book-rack new-recommend">
+      <div class="list-top">
+        <div class="list-top-title">
+          <p>新书推荐</p>
         </div>
+        <span class="more">更多<i class="iconfont icon-zuo rotate" /></span>
       </div>
+      <BookListItem class="list-small" :list-data="newList" :is-new-book="true" />
     </div>
-
   </div>
 </template>
 
 <script>
+import data from './data'
+import BookListItem from '@/views/module/bookListItem.vue'
+
 export default {
   name: 'Home',
   components: {
+    BookListItem
   },
   data() {
     return {
+      rackList: [], // 本架图书排行第一
+      otherList: [], // 本架图书排行后两本
+      newList: [] // 新书推荐
     }
   },
   created() {
+    this.rackList = data.bookList.splice(0, 1)
+    this.otherList = data.bookList.splice(-2)
+    this.newList = data.newList
   },
   mounted() {
+
   },
   methods: {
+    toCurrentRackMore() {
+      this.$router.push('/CurrentRackBook')
+    }
   }
 }
 </script>
 
 <style lang="scss">
 @import "~@/assets/styles/index.scss";
-
 </style>
diff --git a/src/views/module/bookListItem.vue b/src/views/module/bookListItem.vue
new file mode 100644
index 0000000..252d6ef
--- /dev/null
+++ b/src/views/module/bookListItem.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <div v-for="item in listData" :key="item.ranking" class="list-item">
+      <img :src="item.img">
+      <div class="book-info">
+        <h4 :class="['book-title', {'title-item': !isOtherBook}]">{{ item.title }}</h4>
+        <p class="book-author">{{ item.author }}</p>
+        <div v-if="!isNewBook" class="book-num">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-remen" />
+          </svg>
+          <p>{{ item.num }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BookListItem',
+  props: {
+    listData: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    isOtherBook: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
+    isNewBook: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  watch: {
+    listData: function(newValue, oldValue) {
+    },
+    isOtherBook: function(newValue, oldValue) {
+    },
+    isNewBook: function(newValue, oldValue) {
+    }
+  },
+  created() {
+    console.log(this.listData)
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+</style>