2020-06-07 10:28:34 +08:00
|
|
|
<template>
|
|
|
|
|
<div class="index-swiper">
|
2020-06-10 11:19:26 +08:00
|
|
|
<swiper ref="mySwiper" :options="swiperOptions" class="swiper-outer">
|
|
|
|
|
<swiper-slide class="swiper-box">
|
|
|
|
|
<img src="@/assets/images/banner.png" alt="" class="banner-img">
|
|
|
|
|
</swiper-slide>
|
|
|
|
|
<swiper-slide class="swiper-box">
|
|
|
|
|
<img src="@/assets/images/banner.png" alt="" class="banner-img">
|
|
|
|
|
</swiper-slide>
|
|
|
|
|
<swiper-slide class="swiper-box">
|
|
|
|
|
<img src="@/assets/images/banner.png" alt="" class="banner-img">
|
2020-06-07 10:28:34 +08:00
|
|
|
</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
|
2020-06-10 11:19:26 +08:00
|
|
|
height 400px
|
2020-06-07 10:28:34 +08:00
|
|
|
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
|
2020-06-10 11:19:26 +08:00
|
|
|
.swiper-outer
|
|
|
|
|
width 100%
|
|
|
|
|
height 100%
|
|
|
|
|
.swiper-box
|
|
|
|
|
.banner-img
|
|
|
|
|
width 100%
|
|
|
|
|
height 100%
|
2020-06-07 10:28:34 +08:00
|
|
|
</style>
|
