diff --git a/package.json b/package.json
index 43d6c46..11ecb57 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "core-js": "^3.6.4",
     "echarts": "^4.6.0",
     "element-ui": "^2.15.9",
+    "swiper": "^8.4.2",
     "vue": "^2.6.11",
     "vue-awesome": "^4.0.2",
     "vue-router": "^3.1.5",
@@ -31,6 +32,7 @@
     "eslint-plugin-vue": "^6.1.2",
     "sass": "^1.25.0",
     "sass-loader": "^8.0.2",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
diff --git a/public/index.html b/public/index.html
index 4123528..a837192 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 1c4a2d8..dcd7ff0 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -1,11 +1,12 @@
 #bookshelf{
   width: 100%;
-  height: 1920px;
-  padding-top: 60px;
+  height: 100vh;
+  // padding-top: 60px;
   font-size: 30px;
   background: url('~@/assets/images/home/bg.png') no-repeat left top;
   background-size: cover;
   overflow: hidden;
+  overflow-y: auto;
 }
 
 //c-s壳占位
@@ -237,7 +238,7 @@
       width: 1080px;
       background: url('~@/assets/images/list/list-rack.png') no-repeat -31px 205px;
       overflow: hidden;
-      overflow-x: auto;
+      // overflow-x: auto;
       white-space: nowrap;
       .list-item{
         margin-right: 1.7px;
@@ -280,6 +281,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 0 40px;
+    z-index: 999;
     .icon-l,.icon-r{
       font-size: 24px;
     }
diff --git a/src/views/authorRecommend.vue b/src/views/authorRecommend.vue
index 9a060f0..bf4b29e 100644
--- a/src/views/authorRecommend.vue
+++ b/src/views/authorRecommend.vue
@@ -1,7 +1,5 @@
 <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>
@@ -21,12 +19,10 @@
 </template>
 
 <script>
-import HeaderTop from '@/views/module/headerTop.vue'
 import data1 from './data1.json'
 export default {
   name: 'AuthorRecommend',
   components: {
-    HeaderTop
   },
   data() {
     return {
diff --git a/src/views/bookRackList.vue b/src/views/bookRackList.vue
index 13638ad..992a3ea 100644
--- a/src/views/bookRackList.vue
+++ b/src/views/bookRackList.vue
@@ -1,7 +1,5 @@
 <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>
@@ -14,18 +12,44 @@
     </div>
     <div class="rack-box">
       <div v-for="(item,index) in listData" :key="index" class="rack-item">
-        <ul class="rack-box-list">
+        <!-- <ul class="rack-box-list">
           <li v-for="(eitem , eindex) in bookList" :key="eitem.id" class="list-item" @click="handleDetails(eindex)">
             <div class="box-txt">
               <span class="book-name">{{ eitem.title }}</span>
               <span class="book-writer">{{ eitem.author }}</span>
             </div>
           </li>
-        </ul>
-        <div class="rack-floor">
+        </ul> -->
+        <!-- <div class="rack-floor">
           <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>
+          <p><span style="margin-right:25px">第一层</span><span>(共15本)</span></p>
+          <span class="icon iconfont icon-r" @click="handlePage(1)">&#xe62f;</span>
+        </div> -->
+        <!-- <swiper
+          class="swiper rack-box-list"
+          :options="swiperOption"
+        >
+          <swiper-slide v-for="(eitem , eindex) in bookList" :key="eitem.id" class="list-item" @click="handleDetails(eindex)">
+            <div class="box-txt">
+              <span class="book-name">{{ eitem.title }}  {{ eindex+1 }}</span>
+              <span class="book-writer">{{ eitem.author }}</span>
+            </div>
+          </swiper-slide>
+        </swiper> -->
+        <div :class="['swiper'+index,'rack-box-list']">
+          <div class="swiper-wrapper">
+            <div v-for="(eitem , eindex) in bookList" :key="eitem.id" class="list-item swiper-slide" @click="handleDetails(eindex)">
+              <div class="box-txt">
+                <span class="book-name">{{ eitem.title }}  {{ eindex+1 }}</span>
+                <span class="book-writer">{{ eitem.author }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div :class="['swiper-nav'+index,'rack-floor']">
+          <span :class="['icon','iconfont','icon-l'+index]" @click="handlePage(-1)">&#xe631;</span>
+          <p><span style="margin-right:25px">第{{ index+1 }}层</span><span>(共 {{ bookList.length }}本)</span></p>
+          <span :class="['icon','iconfont','icon-r'+index]" @click="handlePage(1)">&#xe62f;</span>
         </div>
       </div>
     </div>
@@ -36,20 +60,29 @@
 <script>
 import data1 from './data1.json'
 import BookDetails from './module/bookDetails.vue'
-import HeaderTop from '@/views/module/headerTop.vue'
+import { Swiper } from 'vue-awesome-swiper'
+import 'swiper/swiper-bundle.css'
 
 export default {
   name: 'CurrentRackBook',
   components: {
-    BookDetails,
-    HeaderTop
+    BookDetails
   },
   data() {
     return {
       listData: [],
       bookList: [],
       classnameL: 'rack-direct-active',
-      classnameR: null
+      classnameR: null,
+      swiperOption: {
+        slidesPerView: 'auto',
+        slidesPerGroup: 15,
+        observer: true,
+        navigation: {
+          nextEl: '.icon-r',
+          prevEl: '.icon-l'
+        }
+      }
     }
   },
   created() {
@@ -57,8 +90,25 @@ export default {
     this.bookList = data1.rackBook
   },
   mounted() {
+    this.initSwiper1()
   },
   methods: {
+    initSwiper1() {
+      this.$nextTick(() => {
+        // const objName = document.get
+        this.bookList.forEach((el, index) => {
+          new Swiper('.swiper' + index, {
+            slidesPerView: 'auto',
+            slidesPerGroup: 15,
+            observer: true,
+            navigation: {
+              nextEl: '.icon-r' + index,
+              prevEl: '.icon-l' + index
+            }
+          })
+        })
+      })
+    },
     handleDetails(index) {
       this.$refs.detailDom.bookData = this.bookList[index]
       this.$refs.detailDom.dialogVisible = true
@@ -87,5 +137,11 @@ export default {
 
 <style lang="scss">
 @import "~@/assets/styles/index.scss";
-
+.swiper-container{
+  position: relative;
+  width: 100%;
+}
+.swiper-slide{
+  width: 65px !important;
+}
 </style>
diff --git a/src/views/data1.json b/src/views/data1.json
index 20c6a5e..58be3e8 100644
--- a/src/views/data1.json
+++ b/src/views/data1.json
@@ -149,6 +149,18 @@
     {"id":1017,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
     {"id":1018,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
     {"id":1019,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
-    {"id":1020,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"}
+    {"id":1020,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1021,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1022,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1023,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1024,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1025,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1026,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1027,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1028,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1029,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1030,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1031,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1032,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"}
   ]
 }
\ No newline at end of file
diff --git a/src/views/digitalResource.vue b/src/views/digitalResource.vue
index c65bcba..0b4fdc5 100644
--- a/src/views/digitalResource.vue
+++ b/src/views/digitalResource.vue
@@ -1,7 +1,5 @@
 <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>
@@ -22,12 +20,10 @@
 </template>
 
 <script>
-import HeaderTop from '@/views/module/headerTop.vue'
 import data1 from './data1.json'
 export default {
   name: 'DigitalResource',
   components: {
-    HeaderTop
   },
   data() {
     return {
diff --git a/src/views/hotBook.vue b/src/views/hotBook.vue
index bd8c1ea..475fcf5 100644
--- a/src/views/hotBook.vue
+++ b/src/views/hotBook.vue
@@ -1,7 +1,5 @@
 <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>
@@ -13,13 +11,11 @@
 </template>
 
 <script>
-import HeaderTop from '@/views/module/headerTop.vue'
 import BookList from '@/views/module/bookList.vue'
 import data1 from './data1.json'
 export default {
   name: 'HotBook',
   components: {
-    HeaderTop,
     BookList
   },
   data() {
diff --git a/src/views/index.vue b/src/views/index.vue
index 51502e5..c2ae49f 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,7 +1,5 @@
 <template>
   <div id="bookshelf">
-    <!-- <div class="top-bg" /> -->
-    <HeaderTop />
     <div class="bookshelf-header">
       <h2>RFID智慧书架</h2>
       <span class="shelf-num">01架</span>
@@ -66,12 +64,10 @@
 <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,
-    HeaderTop
+    BookListItem
   },
   data() {
     return {
diff --git a/src/views/newBook.vue b/src/views/newBook.vue
index 191ebe1..609a851 100644
--- a/src/views/newBook.vue
+++ b/src/views/newBook.vue
@@ -1,7 +1,5 @@
 <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>
@@ -13,12 +11,11 @@
 </template>
 
 <script>
-import HeaderTop from '@/views/module/headerTop.vue'
 import BookList from '@/views/module/bookList.vue'
 import data1 from './data1.json'
 export default {
   name: 'NewBook',
-  components: { HeaderTop, BookList },
+  components: { BookList },
   data() {
     return {
 
