新书推荐/热门图书

src/views/data1.json

@@ -9,5 +9,70 @@
     { "id": 3 },
     { "id": 4 },
     { "id": 5 }
+  ],
+  "bookList":[
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定1",
+      "ranking": 1,
+      "num": 2000
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定2",
+      "ranking": 2,
+      "num": 1200
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定3",
+      "ranking": 3,
+      "num": 1100
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定1",
+      "ranking": 1,
+      "num": 2000
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定2",
+      "ranking": 2,
+      "num": 1200
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定3",
+      "ranking": 3,
+      "num": 1100
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定1",
+      "ranking": 1,
+      "num": 2000
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定2",
+      "ranking": 2,
+      "num": 1200
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定3",
+      "ranking": 3,
+      "num": 1100
+    }
   ]
 }

src/views/hotBook.vue

@@ -8,19 +8,30 @@
       </router-link>
       <h2>热门图书</h2>
     </div>
-    <div class="book-main">
-      <!--  -->
-    </div>
+    <BookList :bookdata="bookData" />
+    <!-- <div class="book-main">
+
+    </div> -->
   </div>
 </template>
 
 <script>
 import HeaderTop from '@/views/module/headerTop.vue'
-
+import BookList from '@/views/module/bookList.vue'
+import data1 from './data1.json'
 export default {
   name: 'HotBook',
   components: {
-    HeaderTop
+    HeaderTop,
+    BookList
+  },
+  data() {
+    return {
+      bookData: null
+    }
+  },
+  created() {
+    this.bookData = data1.bookList
   }
 }
 </script>

src/views/module/bookList.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <div class="most-book">
+      <div class="most-book-img">
+        <img :src="bookdata[0].img">
+
+      </div>
+      <div class="most-book-txt book-rack">
+        <div class="txt">
+          <h3>书名：{{ bookdata[0].title }}</h3>
+          <p>作者：{{ bookdata[0].author }}</p>
+          <p>出版社：</p>
+          <p>出版日期：</p>
+        </div>
+      </div>
+    </div>
+    <ul class="hotbook-list">
+      <li v-for="item in bookdata" :key="item">
+        <img :src="item.img">
+        <p>{{ item.title }}</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    bookdata: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+.book-rack{
+  margin: 160px 40px 28px 40px;
+  padding: 38px 40px 40px 400px;
+  height: 272px;
+}
+.most-book{
+  position: relative;
+  .most-book-img{
+    position: absolute;
+    left: 90px;
+    bottom: 20px;
+    img{
+      width: 318px;
+      height: 382px;
+    }
+  }
+  .txt{
+    // margin-left: 452px;
+    color: #333;
+    h3{
+      font-size: 40px;
+      font-weight: normal;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    p{
+      font-size: 30px;
+      margin-top: 8px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+.hotbook-list{
+  margin: 0 40px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  li{
+    margin-bottom: 20px;
+    img{
+      width: 300px;
+      height: 360px;
+    }
+  }
+}
+</style>

src/views/newBook.vue

@@ -9,6 +9,7 @@
       <h2>新书推荐</h2>
     </div>
     <div class="book-main">
+      <BookList :bookdata="bookData" />
       <!--  -->
     </div>
   </div>
@@ -16,10 +17,19 @@
 
 <script>
 import HeaderTop from '@/views/module/headerTop.vue'
-
+import BookList from '@/views/module/bookList.vue'
+import data1 from './data1.json'
 export default {
   name: 'NewBook',
-  components: { HeaderTop }
+  components: { HeaderTop, BookList },
+  data() {
+    return {
+
+    }
+  },
+  created() {
+    this.bookData = data1.bookList
+  }
 }
 </script>