资源替换

src/assets/styles/index.scss

@@ -254,6 +254,10 @@
           transform: translateX(-40%);
           .book-name,.book-writer{
             writing-mode:vertical-rl;
+            height: 235px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
           }
           .book-name{
             font-size: 20px;      

src/views/bookRackList.vue

@@ -15,41 +15,12 @@
     <div class="rack-box">
       <div v-for="(item,index) in listData" :key="index" class="rack-item">
         <ul class="rack-box-list">
-          <li class="list-item" @click="handleDetails">
+          <li v-for="(item,index) in bookList" :key="item.id" class="list-item" @click="handleDetails(index)">
             <div class="box-txt">
-              <span class="book-name">书名书名书名</span>
-              <span class="book-writer">作者</span>
+              <span class="book-name">{{ item.title }}</span>
+              <span class="book-writer">{{ item.author }}</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>
-          <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>
         </ul>
         <div class="rack-floor">
           <span class="icon iconfont icon-l" @click="handlePage(-1)">&#xe631;</span>
@@ -76,18 +47,20 @@ export default {
   data() {
     return {
       listData: [],
+      bookList: [],
       classnameL: 'rack-direct-active',
       classnameR: null
     }
   },
   created() {
     this.listData = data1.listData
+    this.bookList = data1.rackBook
   },
   mounted() {
   },
   methods: {
-    handleDetails() {
-      this.$refs.detailDom.bookData = data1.bookList[0]
+    handleDetails(index) {
+      this.$refs.detailDom.bookData = this.bookList[index]
       this.$refs.detailDom.dialogVisible = true
     },
     // 翻页

src/views/data1.json

@@ -128,5 +128,27 @@
       "name":"钱钟书",
       "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》《人·兽·鬼》《人·兽·鬼》《人·兽·鬼》"
     }
+  ],
+  "rackBook":[
+    {"id":100,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":101,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":102,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":103,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":104,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":105,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":106,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":107,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":109,"title":"大个子狗与小个子猫大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1010,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1011,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1012,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1013,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1014,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1015,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1016,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"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"}
   ]
 }

src/views/digitalResource.vue

@@ -65,6 +65,12 @@ export default {
       font-family: "HuXiaoBoNanShenTi";
       font-size: 80px;
       color: #333;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      line-clamp: 3;
+      -webkit-box-orient: vertical;
     }
   }
 }