<template>

  <div class="wrapper">

    <swiper :options="swiperOption">

      <!-- slides -->

      <swiper-slide>

        <img

          class="swiper-img"

          src="//img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_600x330_cbd1e1e9.jpg"

          alt="南山滑雪场"

        />

      </swiper-slide>

      <swiper-slide>

        <img

          class="swiper-img"

          src="//img1.qunarzz.com/sight/p0/1505/f5/f5f45e1a83537bcb.water.jpg_600x330_470f194f.jpg"

          alt="圆明园"

        />

      </swiper-slide>

      <swiper-slide>

        <img

          class="swiper-img"

          src="//img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_600x330_f922b488.jpg"

          alt="故宫"

        />

      </swiper-slide>

      <swiper-slide>

        <img

          class="swiper-img"

          src="//img1.qunarzz.com/sight/p0/1602/92/920e47352552c1c990.water.jpg_600x330_ca603c01.jpg"

          alt="天坛公园"

        />

      </swiper-slide>

      <!-- Optional controls -->

      <div class="swiper-pagination" slot="pagination"></div>

    </swiper>

  </div>

</template>

<script>

export default {

  name: "HomeSwiper",

  data() {

    return {

      swiperOption: {

        pagination: '.swiper-pagination',

      },

    };

  },

};

</script>

<style lang="stylus" scoped>

..wrapper  >>> .swiper-pagination-bullet-active{

  background : #fff

}

.wrapper {

  overflow: hidden;

  width: 100%;

  height: 0;

  padding-bottom: 45%;

  background: #eee;

  .swiper-img {

    width: 100%;

  }

}

</style>

这里输入代码，可通过选择【代码语言】突出显示