diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 8d6db3d..fb5e747 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -29,7 +29,7 @@
     font-weight: normal;
     font-size: 60px;
   }
-  span{
+  .shelf-num{
     display: block;
     position: absolute;
     top: 30px;
@@ -114,15 +114,66 @@
 }
 
 // 本架图书list
+.rack-box{
+  padding: 30px 0;
+  width: 100%;
+  overflow: hidden;
+}
+.rack-item{
+  position: relative;
+  margin-bottom: 30px;
+}
 .rack-list{
   display: flex;
   justify-content: space-between;
+  height: 314px;
+  padding: 0 40px;
+  width: 1080px;
+  background: url('~@/assets/images/list/list-rack.png') no-repeat -31px 205px;
+  overflow: hidden;
+  overflow-x: auto;
+  white-space: nowrap
 }
 
+.rack-floor{
+  position: absolute;
+  left: 0;
+  bottom: 2px;
+  height: 50px;
+  width: 100%;
+  display: flex;
+  color: #fff;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 40px;
+  .icon-l,.icon-r{
+    font-size: 24px;
+  }
+}
 .list-item{
-  border: 1px solid #A2CCFF;
+  height: 254px;
+  width: 65px;
+  // border: 1px solid #A2CCFF;
   border-radius: 4px;
   overflow: hidden;
+  background-size: 93px 266px;
+  position: relative;
+  .box-txt{
+    position: absolute;
+    top: 12%;
+    left: 50%;
+    transform: translateX(-40%);
+    .book-name,.book-writer{
+      writing-mode:vertical-rl;
+    }
+    .book-name{
+      font-size: 20px;
+    }
+    .book-writer{
+      font-size: 18px;
+    }
+  }
+  
   .book-info{
     position: relative;
   }
@@ -166,6 +217,7 @@
     .book-num{
       right: 16px;
     }
+    
   }
 }
 
@@ -195,6 +247,79 @@
   }
 }
 
+.bookshelf-header .rack-direct{
+    position: absolute;
+    top: 30px;
+    right: 40px;
+    width: 220px;
+    height: 60px;
+    line-height: 60px;
+    // background: linear-gradient(90deg, #ACDAFF 0%, #9BCEFF 100%);
+    background: #fff;
+    border-radius: 30px;
+    display: flex;
+    padding: 6px;
+    span{
+      flex: 1;
+      text-align: center;
+      line-height: 48px;
+      &.rack-direct-active{
+      background: linear-gradient(267deg, #7285FB 0%, #7285FB 9%, #4377FE 55%, #2487FF 100%);
+      z-index: 1; 
+      border-radius: 24px;  
+      color: #fff;
+      }
+    }
+}
+
+.rack-list .list-item{
+  &:nth-child(15n+1){
+    background: url('~@/assets/images/list/1.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+2){
+    background: url('~@/assets/images/list/2.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+3){
+    background: url('~@/assets/images/list/3.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+4){
+    background: url('~@/assets/images/list/4.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+5){
+    background: url('~@/assets/images/list/5.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+6){
+    background: url('~@/assets/images/list/6.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+7){
+    background: url('~@/assets/images/list/7.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+8){
+    background: url('~@/assets/images/list/8.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+9){
+    background: url('~@/assets/images/list/9.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+10){
+    background: url('~@/assets/images/list/10.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+11){
+    background: url('~@/assets/images/list/11.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+12){
+    background: url('~@/assets/images/list/12.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+13){
+    background: url('~@/assets/images/list/13.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+14){
+    background: url('~@/assets/images/list/14.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+15){
+    background: url('~@/assets/images/list/15.png') no-repeat -15px -13px;
+  }
+}
+
 // 新书推荐
 .new-recommend{
   height: 448px;
@@ -218,4 +343,5 @@
       margin-bottom: 0;
     }
   }
-}
\ No newline at end of file
+}
+
diff --git a/src/views/bookRackList.vue b/src/views/bookRackList.vue
index 04cdd3b..80404c4 100644
--- a/src/views/bookRackList.vue
+++ b/src/views/bookRackList.vue
@@ -1,23 +1,66 @@
 <template>
   <div id="bookshelf">
     <!-- <div class="top-bg" /> -->
-    <div class="bookshelf-header">
+    <div class="bookshelf-header" style="height:120px">
       <h2>本架图书</h2>
-      <span>01架</span>
+      <div class="rack-direct">
+        <span class="rack-direct-active">左</span>
+        <span>右</span>
+      </div>
+    </div>
+    <div class="rack-box">
+      <div v-for="(item) in listData" :key="item" class="rack-item">
+        <ul class="rack-list">
+          <li class="list-item">
+            <div class="box-txt">
+              <span class="book-name">书书书</span>
+              <span class="book-writer">作者</span>
+            </div>
+          </li>
+          <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>
+          <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>
+          <li class="list-item">书</li>
+          <li class="list-item">书</li>
+          <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>
+        </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-r">&#xe62f;</span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import data1 from './data1.json'
 export default {
   name: 'CurrentRackBook',
   components: {
   },
   data() {
     return {
+      listData: [
+
+      ]
     }
   },
   created() {
+    this.listData = data1.listData
   },
   mounted() {
   },
diff --git a/src/views/data1.json b/src/views/data1.json
new file mode 100644
index 0000000..a4bbebe
--- /dev/null
+++ b/src/views/data1.json
@@ -0,0 +1,9 @@
+{
+  "listData":[
+    { "id": 1 },
+    { "id": 2 },
+    { "id": 3 },
+    { "id": 4 },
+    { "id": 5 }
+  ]
+}
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index e50862d..cbe3e56 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -3,7 +3,7 @@
     <!-- <div class="top-bg" /> -->
     <div class="bookshelf-header">
       <h2>RFID智慧书架</h2>
-      <span>01架</span>
+      <span class="shelf-num">01架</span>
     </div>
     <!-- 本架分类 -->
     <div class="book-category">