样式修改

src/assets/styles/index.scss

@@ -155,17 +155,24 @@
     width: 435px;
     height: 625px;
     margin-right: 45px;
-    img{
-      display: block;
+    .book-img{
+      display: flex;
+      align-items: center;
       width: 100%;
       height: 520px;
       border-radius: 4px;
     }
+    img{
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
     .book-info{
-      padding: 12px 0 20px 44px;
+      padding: 12px 0 0 44px;
     }
     .book-num{
       right: 16px;
+      bottom: 0;
     }
     
   }
@@ -181,14 +188,19 @@
     display: flex;
     height: calc(100%/2 - 20px);
     justify-content: space-between;
-    img{
-      display: block;
+    .book-img{
+      display: flex;
+      align-items: center;
       width: 244px;
       height: 100%;
       margin-right: 20px;
     }
+    img{
+      display: block;
+      width: 100%;
+    }
     .book-info{
-      padding: 20px 0 0 0;
+      padding: 20px 10px 0 0;
     }
     .book-num{
       left: 0;

src/views/index.vue

@@ -44,8 +44,8 @@
         <span class="more" @click="toPath('/CurrentRackBook')">更多<i class="iconfont icon-zuo rotate" /></span>
       </div>
       <div class="rack-list">
-        <BookListItem class="list-big" :list-data.sync="rackList" />
-        <BookListItem class="list-middle" :list-data.sync="otherList" :is-other-book="true" />
+        <BookListItem :list-data.sync="rackList" />
+        <BookListItem :list-data.sync="otherList" :is-other-book="true" />
       </div>
     </div>
     <!-- 新书推荐 -->
@@ -56,7 +56,7 @@
         </div>
         <span class="more" @click="toPath('/NewBook')">更多<i class="iconfont icon-zuo rotate" /></span>
       </div>
-      <BookListItem class="list-small" :list-data="newList" :is-new-book="true" />
+      <BookListItem :list-data.sync="newList" :is-new-book="true" />
     </div>
   </div>
 </template>
@@ -98,7 +98,6 @@ export default {
         pageSize: 4
       }
       FetchNewBookRecommend(params).then(res => {
-        console.log(res)
         let data = []
         data = res.newbookList
         data.forEach(item => {

src/views/module/bookListItem.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <div :class="[isNewBook ? 'list-small' : (isOtherBook ? 'list-middle' : 'list-big') ]">
       <div v-for="(item,index) in listData" :key="item.ranking" class="list-item" @click="handleDetails(index)">
         <div class="book-img">
           <img :src="item.cover" :onerror="defaultImg">
@@ -15,8 +16,8 @@
           </div>
         </div>
       </div>
+    </div>
     <BookDetails ref="detailDom" />
-
   </div>
 </template>