82 lines
1.5 KiB
Vue
82 lines
1.5 KiB
Vue
<template>
|
|
<view class="banner">
|
|
<view class="swiper_wrap">
|
|
<swiper class='swiper' @change="e => currentNum = e.detail.current" :indicator-dots='false' :autoplay='true' interval='3000' duration='300' width="100%" height="350rpx"
|
|
circular="true">
|
|
<block v-for='(item,index) in imageList' :key="index">
|
|
<swiper-item>
|
|
<view class='exp__list'>
|
|
<image :lazy-load="true" class="swiper_img" :src="item"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
<view class="indicator-num">
|
|
<text class="indicator-num__text">{{imageList.length==0?'0':currentNum+1}}/{{imageList.length}}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"Banner",
|
|
|
|
props:{
|
|
imageList:Array,
|
|
},
|
|
data() {
|
|
return {
|
|
currentNum:0
|
|
};
|
|
},
|
|
methods:{
|
|
getVal(e){
|
|
this.$emit('getVal',e)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.banner{
|
|
position: relative;
|
|
// background-color: #000;
|
|
border-radius: 20rpx;
|
|
.banner_image{
|
|
width: 100%;
|
|
height: 350rpx;
|
|
}
|
|
.indicator-num{
|
|
position: absolute;
|
|
bottom:20rpx;
|
|
right: 20rpx;
|
|
.indicator-num__text{
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
padding:6rpx 20rpx;
|
|
background: rgba(0, 0, 0,0.4);
|
|
border-radius: 60rpx;
|
|
}
|
|
}
|
|
.swiper-items{
|
|
height: 350rpx;
|
|
image{
|
|
height: 350rpx;
|
|
display: block;
|
|
}
|
|
}
|
|
.swiper{
|
|
height: 350rpx;
|
|
width: 100%;
|
|
}
|
|
.swiper_img{
|
|
width: 100%;
|
|
height: 350rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
</style>
|