样式修改

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,22 +1,23 @@
 <template>
   <div>
-    <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">
-      </div>
-      <div class="book-info">
-        <h4 :class="['book-title', {'title-item': !isOtherBook}]">{{ item.nbName }}</h4>
-        <p class="book-author">{{ item.nbAuthor }}</p>
-        <div v-if="!isNewBook" class="book-num">
-          <svg class="icon" aria-hidden="true">
-            <use xlink:href="#icon-remen" />
-          </svg>
-          <p>{{ item.num }}</p>
+    <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">
+        </div>
+        <div class="book-info">
+          <h4 :class="['book-title', {'title-item': !isOtherBook}]">{{ item.nbName }}</h4>
+          <p class="book-author">{{ item.nbAuthor }}</p>
+          <div v-if="!isNewBook" class="book-num">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-remen" />
+            </svg>
+            <p>{{ item.num }}</p>
+          </div>
         </div>
       </div>
     </div>
     <BookDetails ref="detailDom" />
-
   </div>
 </template>