作者推荐 / 图书详情数据

src/views/authorRecommend.vue

@@ -8,24 +8,71 @@
       </router-link>
       <h2>作者推荐</h2>
     </div>
-    <div class="book-main">
-      <!--  -->
+    <div class="main">
+      <div v-for="(item,index) in authorList" :key="index" class="book-rack">
+        <span class="author-index">{{ index+1 }}</span>
+        <div class="author-brief">
+          <h3>{{ item.name }}</h3>
+          <p>{{ item.brief }}</p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import HeaderTop from '@/views/module/headerTop.vue'
-
+import data1 from './data1.json'
 export default {
   name: 'AuthorRecommend',
   components: {
     HeaderTop
+  },
+  data() {
+    return {
+      authorList: []
+    }
+  },
+  created() {
+    this.authorList = data1.authors
   }
 }
 </script>
 
 <style lang="scss" scoped>
 @import "~@/assets/styles/index.scss";
+.main{
+  padding-top: 40px;
+  height: 100%;
+  overflow: hidden;
+  overflow-y:auto ;
+  .book-rack{
+    height: 387px;
+    margin-bottom: 40px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    color: #333;
+    .author-index{
+      width: 120px;
+      text-align: center;
+    }
+    .author-brief{
+      flex: 1;
+      padding: 20px 50px 20px 0;
+      h3{
+        font-size: 40px;
+        margin-bottom: 20px;
+      }
+      p{
+        font-size: 30px;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
 
+  }
+}
 </style>

src/views/bookRackList.vue

@@ -13,7 +13,7 @@
       </div>
     </div>
     <div class="rack-box">
-      <div v-for="(item) in listData" :key="item" class="rack-item">
+      <div v-for="(item,index) in listData" :key="index" class="rack-item">
         <ul class="rack-box-list">
           <li class="list-item" @click="handleDetails">
             <div class="box-txt">
@@ -76,6 +76,7 @@ export default {
   },
   methods: {
     handleDetails() {
+      this.$refs.detailDom.bookData = data1.bookList[0]
       this.$refs.detailDom.dialogVisible = true
     },
     // 翻页

src/views/data1.json

@@ -114,6 +114,27 @@
       "title":"武汉云阅读",
       "bgImg":"https://qiniu.aiyxlib.com/bg.png"
     }
-
+  ],
+  "authors":[
+    {
+      "name":"钱钟书",
+      "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》"
+    },
+    {
+      "name":"钱钟书",
+      "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》"
+    },
+    {
+      "name":"钱钟书",
+      "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》"
+    },
+    {
+      "name":"钱钟书",
+      "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》"
+    },
+    {
+      "name":"钱钟书",
+      "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》《人·兽·鬼》《人·兽·鬼》《人·兽·鬼》"
+    }
   ]
 }

src/views/digitalResource.vue

@@ -42,12 +42,10 @@ export default {
 <style lang="scss" scoped>
 @import "~@/assets/styles/index.scss";
 .main{
+  padding-top: 40px;
   height: 100%;
   overflow: hidden;
   overflow-y:auto ;
-}
-.main{
-  padding-top: 40px;
   .book-rack{
     height: 387px;
     margin-bottom: 40px;

src/views/module/bookDetails.vue

@@ -33,22 +33,17 @@
 </template>
 
 <script>
-import data from '../data.json'
 export default {
   name: 'BookDetails',
   data() {
     return {
       dialogVisible: false,
-      bookData: null
+      bookData: {}
     }
   },
   created() {
-    this.bookData = data.bookList[0]
   },
   methods: {
-    // handleClose() {
-
-    // }
   }
 }
 </script>

src/views/module/bookList.vue

@@ -15,7 +15,7 @@
       </div>
     </div>
     <ul class="hotbook-list">
-      <li v-for="item in bookdata" :key="item">
+      <li v-for="(item,index) in bookdata" :key="index">
         <img :src="item.img">
         <p>{{ item.title }}</p>
       </li>
@@ -25,6 +25,7 @@
 
 <script>
 export default {
+  name: 'BookList',
   props: {
     bookdata: {
       type: Array,