intelligent-inquiry-machine/src/views/newBookRecommend.vue

<template>
  <!-- 新书推荐 -->
  <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 class="book-list-item">
            <div class="book-img">
              <img :src="item.img" :onerror="defaultImg">
            </div>
            <div class="book-info">
              <h4 class="title-item">{{ item.title }}</h4>
              <p>作者：{{ item.author }}</p>
              <p>出版社：教育出版社</p>
              <p>出版日期：2022-03-03 <span class="icon iconfont ">&#xe638;</span></p>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="icon iconfont prev-btn">&#xe638;</div> -->
      <!-- <div class="icon iconfont next-btn">&#xe635;</div> -->
      <div class="icon iconfont prev-btn">
        <svg class="icon svg-icon" aria-hidden="true">
          <use xlink:href="#icon-zuohua" />
        </svg>
      </div>
      <div class="icon iconfont next-btn">
        <svg class="icon svg-icon" aria-hidden="true">
          <use xlink:href="#icon-youhua" />
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import data from './data'
import { Swiper } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

export default {
  name: 'NewBookRecommend',
  data() {
    return {
      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
      rankingList: []
    }
  },
  created() {
    this.rankingList = data.ranking
  },
  mounted() {
    this.initSwiper()
  },
  methods: {
    initSwiper() {
      this.$nextTick(() => {
        new Swiper('.swiper-container', {
          touchEventsTarget: '.swiper-container',
          slidesPerView: 5,
          spaceBetween: 20,
          centeredSlides: true,
          observer: true,
          loop: true,
          centeredSlidesBounds: true,
          watchSlidesVisibility: true,
          navigation: {
            nextEl: '.next-btn',
            prevEl: '.prev-btn'
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
@import "~@/assets/styles/index.scss";
.new-main{
  position: relative;
  padding: 0 50px;
}
.new-book-list{
  color: #333;
  .book-list-item{
    width: 100%;
    box-shadow: 0px 0px 20px 1px #D2D2D2;
    border-radius: 2px 2px 2px 2px;
  }
  .book-img{
    height: 6.575rem;
    img{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .book-info{
    padding: 10px 20px;
    h4{
      font-weight: normal;
      margin-bottom: 20px;
    }
    p{
      margin-bottom: 10px;
    }
  }
}

.icon{
  height: 1.1em;
}
.prev-btn,
.next-btn{
  position: absolute;
  bottom: 60px;
  font-size: 60px;
  // color: #71C09E;
  z-index: 999;
}

.prev-btn{
  left: 100px;
}

.next-btn{
  right: 100px;
}

.swiper-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.84);
  .book-info{
    line-height: 20px;
    font-size: 16px;
    h4{
      font-size: 20px;
    }
  }
}

.swiper-slide.swiper-slide-prev,
.swiper-slide.swiper-slide-next {
    font-size: 28px;
    transform: scale(0.9);
    .book-info{
      line-height: 28px;
      font-size: 22px;
      h4{
        font-size: 28px;
      }
    }
}

.swiper-slide-active,.swiper-slide-duplicate-active {
  transform: scaleX(1);
  .book-info{
    line-height: 40px;
    font-size: 28px;
    h4{
      font-size: 40px;
    }
  }
}
</style>