58 lines
1.3 KiB
Vue
58 lines
1.3 KiB
Vue
<template>
|
|
<div class="index-swiper">
|
|
<swiper ref="mySwiper" :options="swiperOptions" class="swiper-outer">
|
|
<swiper-slide class="swiper-box" v-for="(swiper,idx) in swiperList" :key="idx">
|
|
<img :src="url + 'news/route/file/downloadfile/false/' + swiper.newsContentCoverList" alt="" class="banner-img">
|
|
</swiper-slide>
|
|
<div class="swiper-pagination" slot="pagination"></div>
|
|
</swiper>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import common from '@/common/components/common.js'
|
|
export default {
|
|
name: 'IndexSwiper',
|
|
props: {
|
|
swiperList: Array
|
|
},
|
|
data () {
|
|
return {
|
|
swiperOptions: {
|
|
pagination: '.swiper-pagination',
|
|
loop: true,
|
|
autoplay: 3000
|
|
},
|
|
url: common.url
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" rel="stylesheet/stylus" scoped>
|
|
.index-swiper
|
|
width 100%
|
|
min-width 1200px
|
|
height 400px
|
|
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-outer
|
|
width 100%
|
|
height 100%
|
|
.swiper-box
|
|
.banner-img
|
|
width 100%
|
|
height 100%
|
|
</style>
|