新书推荐详情

src/main.js

@@ -11,6 +11,10 @@ import './assets/styles/style.scss'
 import './assets/iconfont/iconfont.js'
 import './assets/fonts/fonts.css'
 
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(ElementUI)
+
 import axios from 'axios'
 Vue.prototype.$axios = axios
 // 馆代码

src/views/module/bookDetails.vue

@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <el-dialog
+      title="图书详情"
+      :visible.sync="dialogVisible"
+      width="60%"
+    >
+      <!-- :before-close="handleClose" -->
+      <div class="dialog-setting">
+        <div class="book-details-box">
+          <div class="book-details">
+            <div class="book-cover">
+              <img :src="bookData.cover" :onerror="defaultImg">
+            </div>
+            <div class="book-desc">
+              <h3>{{ bookData.nbName }}</h3>
+              <p class="book-from">作者：{{ bookData.nbAuthor }}</p>
+              <p class="book-from">出版社：{{ bookData.nbPublisher }}</p>
+              <p class="book-brief"> 简介：{{ bookData.nbExplain }}</p>
+            </div>
+          </div>
+          <div class="book-local">
+            位置
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BookDetails',
+  data() {
+    return {
+      dialogVisible: false,
+      bookData: {},
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"'
+    }
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog{
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%);
+  border-radius: 24px;
+  .el-dialog__body{
+  padding: 0 40px 40px 40px ;
+  z-index: 999;
+  }
+}
+::v-deep .el-dialog__header{
+  text-align: center;
+  padding-top:0 ;
+  padding-bottom:4px ;
+  .el-dialog__title{
+    display: inline-block;
+    font-family: "ZhenyanGB";
+    font-size: 40px;
+    width: 494px;
+    height: 76px;
+    line-height: 76px;
+      background: url('~@/assets/images/list-title.png') no-repeat 0 0;
+  }
+}
+::v-deep .el-dialog__headerbtn{
+  background-color: #3F92F6;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  .el-dialog__close{
+    color: #fff;
+    font-size: 30px;
+  }
+}
+.book-details-box{
+  .book-details{
+    display: flex;
+    justify-content: space-between;
+    padding: 30px 0;
+    .book-cover{
+      width: 318px;
+      height: 382px;
+      margin-right: 40px;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .book-desc{
+      flex: 1;
+      color: #333;
+      overflow: hidden;
+      h3{
+        font-size: 40px;
+        font-weight: normal;
+      }
+      .book-from{
+        width: 100%;
+        font-size: 30px;
+      }
+      h3,.book-from{
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+        margin-bottom: 20px;
+      }
+      .book-brief{
+        font-size: 24px;
+        margin-bottom: 20px;
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+  .book-local{
+    border: 1px solid #3F92F6;
+    background: #D0E0F9;
+    border-radius: 52px;
+    height: 64px;
+    line-height: 64px;
+    text-align: center;
+    font-size: 30px;
+    color: #333;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+</style>

src/views/newBookRecommend.vue

@@ -3,7 +3,7 @@
   <div class="content-main new-main">
     <div class="swiper-container">
       <div class="swiper-wrapper new-book-list">
-        <div v-for="(item,index) in rankingList" :key="index" class="swiper-slide">
+        <div v-for="(item,index) in rankingList" :key="index" class="swiper-slide" @click="handleDetails(index)">
           <div class="book-list-item">
             <div class="book-img">
               <img :src="item.cover" :onerror="defaultImg">
@@ -28,6 +28,7 @@
         </svg>
       </div>
     </div>
+    <BookDetails ref="detailDom" />
   </div>
 </template>
 
@@ -35,8 +36,12 @@
 import { Swiper } from 'vue-awesome-swiper'
 import 'swiper/swiper-bundle.css'
 import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/inquiryMachine'
+import BookDetails from './module/bookDetails.vue'
 export default {
   name: 'NewBookRecommend',
+  components: {
+    BookDetails
+  },
   data() {
     return {
       defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
@@ -89,6 +94,12 @@ export default {
         this.rankingList.push(item)
         this.initSwiper()
       })
+    },
+    // 详情
+    handleDetails(index) {
+      console.log(index)
+      this.$refs.detailDom.bookData = this.rankingList[index]
+      this.$refs.detailDom.dialogVisible = true
     }
   }
 }