<template>

<div class="container">

  <div class="wrapp">

     <swiper  :options="swiperOptions" >

    <swiper-slide >

    <img class="swiper-img" src="http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_800x800_70debc93.jpg">

    </swiper-slide>

     <swiper-slide >

    <img class="swiper-img" src="http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_800x800_70debc93.jpg">

    </swiper-slide>

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

  </swiper>

  </div>

</div>

</template>

<script>

export default{

name:"CommonGallary",

data (){

return {

swiperOptions:{

        pagination: '.swiper-pagination',

        paginationType: 'fraction',

        observeParents: true,

}

}

}

}

</script>

<style scoped>

.container

  z-index 99

  position fixed

  left 0

  right 0

  top 0

  bottom 0

  background #000

  display flex

  flex-direction column

  justify-content center

  .wrapp

    width 100%

    height 0

    padding-bottom 100%

    .swiper-img

      width 100%

    .swiper-pagination

     color #fff

     bottom -1rem

</style>