diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 9850c82..27dc97f 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -120,6 +120,7 @@
 }
 
 .list-item{
+  border: 1px solid #A2CCFF;
   border-radius: 4px;
   overflow: hidden;
   .book-info{
@@ -195,17 +196,42 @@
   }
 }
 
+// 新书推荐
+.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;
+    }
+  }
+}
+
 //本架图书页面
 .rack-box{
   padding: 30px 0;
   width: 100%;
-  overflow: hidden;
   .rack-item{
     position: relative;
     margin-bottom: 30px;
+    overflow: hidden;
     .rack-box-list{
-      display: flex;
-      justify-content: space-between;
+      // display: flex;
+      // justify-content: space-between;
       height: 314px;
       padding: 0 40px;
       width: 1080px;
@@ -214,6 +240,9 @@
       overflow-x: auto;
       white-space: nowrap;
       .list-item{
+        margin-right: 1.7px;
+        display: inline-block;
+        border: none;
         height: 254px;
         width: 65px;
         background-size: 93px 266px;
@@ -253,6 +282,14 @@
   }
 }
 
+.bookshelf-header .icon-l{
+  color: #fff;
+  font-size: 40px;
+  position: absolute;
+  left: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+}
 .bookshelf-header .rack-direct{
     position: absolute;
     top: 30px;
@@ -327,28 +364,4 @@
   }
 }
 
-// 新书推荐
-.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;
-    }
-  }
-}
-
+// 新书推荐页面
diff --git a/src/main.js b/src/main.js
index e24caa5..b552072 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,10 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
+// element-ui
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(ElementUI)
 // 适配flex
 import '@/common/flexible.js'
 
diff --git a/src/router/index.js b/src/router/index.js
index cbab4e9..23cbc31 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,7 +19,32 @@ const routes = [
     meta: {
       title: '本架图书'
     }
+  },
+  {
+    path: '/NewBook',
+    name: 'NewBook',
+    component: () => import('@/views/newBook.vue'),
+    meta: {
+      title: '新书推荐'
+    }
+  },
+  {
+    path: '/HotBook',
+    name: 'HotBook',
+    component: () => import('@/views/hotBook.vue'),
+    meta: {
+      title: '热门图书'
+    }
+  },
+  {
+    path: '/AuthorRecommend',
+    name: 'AuthorRecommend',
+    component: () => import('@/views/authorRecommend.vue'),
+    meta: {
+      title: '作者推荐'
+    }
   }
+
 ]
 
 const router = new VueRouter({
diff --git a/src/views/authorRecommend.vue b/src/views/authorRecommend.vue
new file mode 100644
index 0000000..10f685d
--- /dev/null
+++ b/src/views/authorRecommend.vue
@@ -0,0 +1,31 @@
+<template>
+  <div id="bookshelf">
+    <HeaderTop />
+    <!-- <div class="top-bg" /> -->
+    <div class="bookshelf-header" style="height:120px">
+      <router-link to="/">
+        <span class="icon iconfont icon-l">&#xe631;</span>
+      </router-link>
+      <h2>作者推荐</h2>
+    </div>
+    <div class="book-main">
+      <!--  -->
+    </div>
+  </div>
+</template>
+
+<script>
+import HeaderTop from '@/views/module/headerTop.vue'
+
+export default {
+  name: 'AuthorRecommend',
+  components: {
+    HeaderTop
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+
+</style>
diff --git a/src/views/bookRackList.vue b/src/views/bookRackList.vue
index be247b9..82b2255 100644
--- a/src/views/bookRackList.vue
+++ b/src/views/bookRackList.vue
@@ -1,19 +1,23 @@
 <template>
   <div id="bookshelf">
+    <HeaderTop />
     <!-- <div class="top-bg" /> -->
     <div class="bookshelf-header" style="height:120px">
+      <router-link to="/">
+        <span class="icon iconfont icon-l">&#xe631;</span>
+      </router-link>
       <h2>本架图书</h2>
       <div class="rack-direct">
-        <span class="rack-direct-active">左</span>
-        <span>右</span>
+        <span :class="classnameL" @click="handleDirect(-1)">左</span>
+        <span :class="classnameR" @click="handleDirect(1)">右</span>
       </div>
     </div>
     <div class="rack-box">
       <div v-for="(item) in listData" :key="item" class="rack-item">
         <ul class="rack-box-list">
-          <li class="list-item">
+          <li class="list-item" @click="handleDetails">
             <div class="box-txt">
-              <span class="book-name">书书书</span>
+              <span class="book-name">书名书名书名</span>
               <span class="book-writer">作者</span>
             </div>
           </li>
@@ -32,31 +36,37 @@
           <li class="list-item">书</li>
           <li class="list-item">书</li>
           <!-- 15 -->
+          <!-- <li class="list-item">书</li>
           <li class="list-item">书</li>
-          <li class="list-item">书</li>
-          <li class="list-item">书</li>
+          <li class="list-item">书</li> -->
         </ul>
         <div class="rack-floor">
-          <span class="icon iconfont icon-l">&#xe631;</span>
-          <p><span style="margin-right:25px">第一层</span><span>(共15本)</span></p>
+          <span class="icon iconfont icon-l" @click="handlePage(-1)">&#xe631;</span>
+          <p><span style="margin-right:25px" @click="handlePage(1)">第一层</span><span>(共15本)</span></p>
           <span class="icon iconfont icon-r">&#xe62f;</span>
         </div>
       </div>
     </div>
+    <BookDetails ref="detailDom" />
   </div>
 </template>
 
 <script>
 import data1 from './data1.json'
+import BookDetails from './module/bookDetails.vue'
+import HeaderTop from '@/views/module/headerTop.vue'
+
 export default {
   name: 'CurrentRackBook',
   components: {
+    BookDetails,
+    HeaderTop
   },
   data() {
     return {
-      listData: [
-
-      ]
+      listData: [],
+      classnameL: 'rack-direct-active',
+      classnameR: null
     }
   },
   created() {
@@ -65,6 +75,27 @@ export default {
   mounted() {
   },
   methods: {
+    handleDetails() {
+      this.$refs.detailDom.dialogVisible = true
+    },
+    // 翻页
+    handlePage(page) {
+      if (page === 1) {
+        // 下一页
+      } else {
+        // 上一页
+      }
+    },
+    // 控制左右
+    handleDirect(n) {
+      if (n === -1) { // 左
+        this.classnameR = null
+        this.classnameL = 'rack-direct-active'
+      } else { // 右
+        this.classnameL = null
+        this.classnameR = 'rack-direct-active'
+      }
+    }
   }
 }
 </script>
diff --git a/src/views/data1.json b/src/views/data1.json
index a4bbebe..7ae8c91 100644
--- a/src/views/data1.json
+++ b/src/views/data1.json
@@ -1,6 +1,10 @@
 {
   "listData":[
-    { "id": 1 },
+    [
+      {
+        "id":1
+      }
+    ],
     { "id": 2 },
     { "id": 3 },
     { "id": 4 },
diff --git a/src/views/hotBook.vue b/src/views/hotBook.vue
new file mode 100644
index 0000000..374de71
--- /dev/null
+++ b/src/views/hotBook.vue
@@ -0,0 +1,31 @@
+<template>
+  <div id="bookshelf">
+    <HeaderTop />
+    <!-- <div class="top-bg" /> -->
+    <div class="bookshelf-header" style="height:120px">
+      <router-link to="/">
+        <span class="icon iconfont icon-l">&#xe631;</span>
+      </router-link>
+      <h2>热门图书</h2>
+    </div>
+    <div class="book-main">
+      <!--  -->
+    </div>
+  </div>
+</template>
+
+<script>
+import HeaderTop from '@/views/module/headerTop.vue'
+
+export default {
+  name: 'HotBook',
+  components: {
+    HeaderTop
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
index cbe3e56..e13f978 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="bookshelf">
     <!-- <div class="top-bg" /> -->
+    <HeaderTop />
     <div class="bookshelf-header">
       <h2>RFID智慧书架</h2>
       <span class="shelf-num">01架</span>
@@ -16,11 +17,11 @@
         <img src="~@/assets/images/home/nav1.png">
         <p>图书检索</p>
       </li>
-      <li>
+      <li @click="toHotBook">
         <img src="~@/assets/images/home/nav2.png">
         <p>热门图书</p>
       </li>
-      <li>
+      <li @click="toAuthor">
         <img src="~@/assets/images/home/nav3.png">
         <p>作者推荐</p>
       </li>
@@ -55,7 +56,7 @@
         <div class="list-top-title">
           <p>新书推荐</p>
         </div>
-        <span class="more">更多<i class="iconfont icon-zuo rotate" /></span>
+        <span class="more" @click="toNewBook">更多<i class="iconfont icon-zuo rotate" /></span>
       </div>
       <BookListItem class="list-small" :list-data="newList" :is-new-book="true" />
     </div>
@@ -65,11 +66,12 @@
 <script>
 import data from './data'
 import BookListItem from '@/views/module/bookListItem.vue'
-
+import HeaderTop from '@/views/module/headerTop.vue'
 export default {
   name: 'Home',
   components: {
-    BookListItem
+    BookListItem,
+    HeaderTop
   },
   data() {
     return {
@@ -89,6 +91,15 @@ export default {
   methods: {
     toCurrentRackMore() {
       this.$router.push('/CurrentRackBook')
+    },
+    toNewBook() {
+      this.$router.push('/newBook')
+    },
+    toHotBook() {
+      this.$router.push('/hotBook')
+    },
+    toAuthor() {
+      this.$router.push('/authorRecommend')
     }
   }
 }
diff --git a/src/views/module/bookDetails.vue b/src/views/module/bookDetails.vue
new file mode 100644
index 0000000..51e569b
--- /dev/null
+++ b/src/views/module/bookDetails.vue
@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <el-dialog
+      title="图书详情"
+      :visible.sync="dialogVisible"
+      width="80%"
+    >
+      <!-- :before-close="handleClose" -->
+      <div class="dialog-setting">
+        <div class="book-details-box">
+          <div class="book-details">
+            <div class="book-cover">
+              <img :src="bookData.img" alt="">
+            </div>
+            <div class="book-desc">
+              <h3>{{ bookData.title }}</h3>
+              <p class="book-from">作者：{{ bookData.author }}</p>
+              <p class="book-from">出版社：{{ bookData.author }}</p>
+              <p class="book-brief">简介：哈哈哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈</p>
+            </div>
+          </div>
+          <div class="book-local">
+            位置
+          </div>
+        </div>
+      </div>
+      <!-- <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span> -->
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import data from '../data.json'
+export default {
+  name: 'BookDetails',
+  data() {
+    return {
+      dialogVisible: false,
+      bookData: null
+    }
+  },
+  created() {
+    this.bookData = data.bookList[0]
+  },
+  methods: {
+    // handleClose() {
+
+    // }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog{
+  position: absolute;
+  top: 15%;
+  left: 50%;
+  transform: translate(-50%);
+  border-radius: 24px;
+  .el-dialog__body{
+  padding: 0 40px 40px 40px ;
+  }
+}
+::v-deep .el-dialog__header{
+  text-align: center;
+  padding-top:0 ;
+  padding-bottom:4px ;
+  .el-dialog__title{
+    display: inline-block;
+    font-family: "ZhenyanGB";
+    font-size: 40px;
+    width: 494px;
+    height: 76px;
+    line-height: 76px;
+      background: url('~@/assets/images/list/list-title.png') no-repeat 0 0;
+  }
+}
+::v-deep .el-dialog__headerbtn{
+  background-color: #3F92F6;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  .el-dialog__close{
+    color: #fff;
+    font-size: 30px;
+  }
+}
+.book-details-box{
+  .book-details{
+    display: flex;
+    justify-content: space-between;
+    padding: 30px 0;
+    .book-cover{
+      width: 318px;
+      height: 382px;
+      margin-right: 40px;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .book-desc{
+      flex: 1;
+      color: #333;
+      overflow: hidden;
+      h3{
+        font-size: 40px;
+        font-weight: normal;
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+        margin-bottom: 20px;
+      }
+      .book-from{
+        width: 100%;
+        font-size: 30px;
+        margin-bottom: 20px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .book-brief{
+        font-size: 24px;
+        margin-bottom: 20px;
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+  .book-local{
+    border: 1px solid #3F92F6;
+    background: #D0E0F9;
+    border-radius: 52px;
+    height: 64px;
+    line-height: 64px;
+    text-align: center;
+    font-size: 30px;
+    color: #333;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+</style>
diff --git a/src/views/module/headerTop.vue b/src/views/module/headerTop.vue
new file mode 100644
index 0000000..c95d898
--- /dev/null
+++ b/src/views/module/headerTop.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="header-time">
+    <div class="header-text header-date">{{ nowDate }}</div>
+    <span class="icon iconfont">&#xe634;</span>
+  </div>
+</template>
+
+<script>
+import { getCurrentTime } from '@/utils/index'
+
+export default {
+  name: 'HeaderTop',
+  data() {
+    return {
+      nowDate: ''
+    }
+  },
+  created() {
+    this.timer = setInterval(() => {
+      this.nowDate = getCurrentTime()
+    }, 1000)
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-time{
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #3F92F6;
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  font-size: 30px;
+  color: #fff;
+  padding: 0 40px;
+  span{
+    width: 35px;
+    height: 45px;
+    font-size: 30px;
+    z-index: 1;
+  }
+}
+</style>
diff --git a/src/views/newBook.vue b/src/views/newBook.vue
new file mode 100644
index 0000000..2761ecc
--- /dev/null
+++ b/src/views/newBook.vue
@@ -0,0 +1,29 @@
+<template>
+  <div id="bookshelf">
+    <HeaderTop />
+    <!-- <div class="top-bg" /> -->
+    <div class="bookshelf-header" style="height:120px">
+      <router-link to="/">
+        <span class="icon iconfont icon-l">&#xe631;</span>
+      </router-link>
+      <h2>新书推荐</h2>
+    </div>
+    <div class="book-main">
+      <!--  -->
+    </div>
+  </div>
+</template>
+
+<script>
+import HeaderTop from '@/views/module/headerTop.vue'
+
+export default {
+  name: 'NewBook',
+  components: { HeaderTop }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+
+</style>