类名冲突解决

src/assets/styles/index.scss

@@ -114,66 +114,14 @@
 }
 
 // 本架图书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{
-  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;
   }
@@ -247,6 +195,64 @@
   }
 }
 
+//本架图书页面
+.rack-box{
+  padding: 30px 0;
+  width: 100%;
+  overflow: hidden;
+  .rack-item{
+    position: relative;
+    margin-bottom: 30px;
+    .rack-box-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;
+      .list-item{
+        height: 254px;
+        width: 65px;
+        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;
+          }
+        }
+      }
+    }
+  }
+  .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;
+    }
+  }
+}
+
 .bookshelf-header .rack-direct{
     position: absolute;
     top: 30px;
@@ -272,7 +278,8 @@
     }
 }
 
-.rack-list .list-item{
+
+.rack-box-list .list-item{
   &:nth-child(15n+1){
     background: url('~@/assets/images/list/1.png') no-repeat -15px -13px;
   }

src/views/bookRackList.vue

@@ -10,7 +10,7 @@
     </div>
     <div class="rack-box">
       <div v-for="(item) in listData" :key="item" class="rack-item">
-        <ul class="rack-list">
+        <ul class="rack-box-list">
           <li class="list-item">
             <div class="box-txt">
               <span class="book-name">书书书</span>