54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<div class="index-swiper">
|
||
|
|
<swiper ref="mySwiper" :options="swiperOptions">
|
||
|
|
<swiper-slide v-for="banner in bannerList" :key="banner.id" class="swiper-box">
|
||
|
|
<img :src="banner.imgSrc" alt="" class="banner-img">
|
||
|
|
</swiper-slide>
|
||
|
|
<div class="swiper-pagination" slot="pagination"></div>
|
||
|
|
</swiper>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'IndexSwiper',
|
||
|
|
props: {
|
||
|
|
bannerList: Array
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
swiperOptions: {
|
||
|
|
pagination: '.swiper-pagination',
|
||
|
|
loop: true,
|
||
|
|
autoplay: 3000
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="stylus" rel="stylesheet/stylus" scoped>
|
||
|
|
.index-swiper
|
||
|
|
width 100%
|
||
|
|
min-width 1200px
|
||
|
|
height 0
|
||
|
|
padding-bottom 31.25%
|
||
|
|
position relative
|
||
|
|
min-height 375px
|
||
|
|
box-sizing border-box
|
||
|
|
&:after
|
||
|
|
content ''
|
||
|
|
display block
|
||
|
|
position absolute
|
||
|
|
top 0
|
||
|
|
left 0
|
||
|
|
width 100%
|
||
|
|
height 100%
|
||
|
|
background url("../../../assets/images/loading.gif") center no-repeat
|
||
|
|
z-index -1
|
||
|
|
.swiper-box
|
||
|
|
.banner-img
|
||
|
|
width 100%
|
||
|
|
height 100%
|
||
|
|
</style>
|