【WEB前端全栈成长计划】第三阶段 考核开发实录（四）

    下面我们来完成首页剩下的最后一个内容，就是banner图。这里的banner图，我们使用swiper来实现一下。
    首先，停止项目服务ctrl+c就可以哈，然后在项目目录下，运行命令：
    npm install vue-awesome-swiper@3 --save-dev

    然后我们在homeTop.vue里这样使用：

<template>
       <div>
              <div class="recommendPage header">
                  <swiper :options="swiperOption" ref="mySwiper">
                    <swiper-slide>
                              <img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-2.64b1407e7a8db89d6cf2.jpg" alt="">
                       </swiper-slide>
                    <swiper-slide>
                              <img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-4.4ac0f6534a11844638e4.jpg" alt="">
                       </swiper-slide>
                    <swiper-slide>
                              <img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-10.30eaaf519fa37bf97d36.jpg" alt="">
                       </swiper-slide>
                       <swiper-slide>
                            <img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-8.d14241daf518717981c6.jpg" alt="">
                       </swiper-slide>
                    <div slot="pagination"></div>
                  </swiper>
                </div>
              <div>
                     <p>
                            Classroom是基于华为云的云上软件教学服务，支持高校师生实现备课、上课、作业、考试、实验、实训等全教学流程的线上教学，提供多类习题自动判题、企业级DevOps实训、免费在线习题库等众多高级特性辅助进行数字化教学转型。
                     </p>
                     <a href="">
                            <p>开始上课</p>
                     </a>
              </div>
       </div>
</template>
 
<script>
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
 
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    console.log("this is current swiper instance object", this.swiper);
    // this.swiper.slideTo(3, 1000, false);
  }
};
</script>
 
<style>
       .header {
              width: 100%;
              min-height: 360px;
              margin-top: 60px;
       }
 
       .header img {
              width: 100%;
              height: auto;
       }
 
       .intro {
              display: flex;
              flex-wrap: nowrap;
              padding: 30px;
              position: relative;
              top: -50px;
              z-index: 2;
              width: 1200px;
              background: #fff;
              box-shadow: 0 0 20px 0 rgba(41, 48, 64, .1);
              border-radius: 5px;
              align-items: center;
              margin: 0 auto;
       }
 
       .intro .banner-left {
              flex: 1;
              padding-right: 40px;
              font-size: 16px;
              color: #5e6678;
              line-height: 32px;
       }
 
       .intro a p {
              color: #fff;
              height: 32px;
              line-height: 32px;
              border-radius: 16px;
              margin-right: 12px;
              padding: 0px 20px;
              min-width: 80px;
              font-size: 14px;
              cursor: pointer;
              text-align: center;
       }
       .recommendPage .swiper-container{
         position: relative;
         width: 100%;
         min-height: 360px;
       } 
       .recommendPage .swiper-container .swiper-slide{
         width: 100%;
         color: #000;
         font-size: 16px;
         text-align: center;
       }
       .recommendPage .swiper-container img{
              width: 100%;
              height: 100%;
       }
       .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
              bottom:60px;
       }
</style>

    现在就可以看到banner的效果了，根据我们的需求简单调整下样式：

    【WEB前端全栈成长计划】第三阶段考核首页的部分，我们已经完成了，swiper是一个轮播框架，我就直接用了，有看不懂的同学可以自己搜搜swiper的文档看看哈~下一篇文章，我们来简单说下MOOC课程页面组件的开发。