veu中swiper中间大两边小

<template>
  <div class="home page-padding-bottom page-padding-top">
    <!-- <page-top txt="购买" :isLeft="false"/> -->
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <div class="ll" style="background: red;"></div>
      </swiper-slide>
      <swiper-slide>
        <div class="ll" style="background: yellow;"></div>
      </swiper-slide>
      <swiper-slide>
        <div  class="ll" style="background: blue;"></div>
      </swiper-slide>
    </swiper>
 </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      swiperOptions: {
        loop: true,
        slidesPerView: 3, // 一个slide中展示几项
        centeredSlides: true, // 居中展示
        pagination: {
          el: '.swiper-pagination'
        },
        on: {
          slideChangeTransitionEnd: function () {}
        }
      }
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted () {
    console.log('Current Swiper instance object', this.swiper)
    // this.swiper.slideTo(3, 1000, false)
  },
  methods: {}
}
</script>

<style lang="scss">
.home {
  .swiper-slide {
    width:80%;
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    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.9);
  }
  .swiper-slide-active,.swiper-slide-duplicate-active{
    transform: scale(1);
  }
  .ll{
    width: 100%;
    height: 3rem;
  }
}
</style>

css transform控制大小