<template> <view class="hometop"> <swiper class="swiper" circular :indicator-active-color="activecolor" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"> <block v-for="(ite,idx) in bannerlist" :key='idx'> <swiper-item> <image :src="baseUrl+ite" class="swiperimg"></image> </swiper-item> </block> </swiper> </view> </template> <script> import config from '@/config.js'; export default{ props:{ bannerlist:{ type: Array, default () { return [] } }, type:{ type: String, default () { return 'zhao' } }, currentdate:{ type: String, default () { return '' } } }, data(){ return{ background: ['color1', 'color2', 'color3'], activecolor:'#ffffff', indicatorDots: true, autoplay: false, interval: 2000, duration: 500, baseUrl:config.baseUrl } }, mounted() { } } </script> <style lang="scss" scoped> .swiper{height: 246rpx;position: relative;border-radius: 10rpx;overflow: hidden; .swiperimg{width: 100%;height: 100%;border-radius: 10rpx;overflow: hidden;} } .swiper /deep/ .uni-swiper-wrapper .uni-swiper-dot{ width:12rpx;height:12rpx;border-radius: 50%;background: rgba(0, 0, 0, 0.5); } .swiper /deep/ .uni-swiper-wrapper .uni-swiper-dot-active{ width: 20rpx;height: 12rpx;border-radius: 6rpx;background-color: #ffffff; } // wx .swiper /deep/ .wx-swiper-wrapper .wx-swiper-dot{ width:12rpx;height:12rpx;border-radius: 50%;background: rgba(0, 0, 0, 0.5); } .swiper /deep/ .wx-swiper-wrapper .wx-swiper-dot-active{ width: 20rpx;height: 12rpx;border-radius: 6rpx;background-color: #ffffff; } .bannerfot{position: absolute;left: 0;right: 0;height: 70rpx;background-color: rgba(0, 0, 0, 0.5);padding: 0 32rpx;bottom: 0;display: flex;align-items: center;justify-content: space-between;} </style>