doumu-pottery-ui/components/toptab/banner.vue

<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.path" class="swiperimg"></image>
				</swiper-item>
			</block>
		</swiper>
		<image :src="bannerbg" class="bange"></image>
	</view>
</template>

<script>
	import config from '@/config.js';
	const baseUrl = config.baseUrl;
	export default{
		props:{
			bannerlist:{
				type: Array,
				default () {
					return []
				}
			},
		},
		data(){
			return{
				bannerbg:require("@/static/images/banbg.png"),
				activecolor:'#ffffff',
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				baseUrl:''
			}
		},
		mounted() {
			// this.baseUrl=baseUrl
		}
	}
</script>

<style lang="scss" scoped>
	.hometop{position: relative;}
	.swiper{height: 560rpx;position: relative;
		.swiperimg{width: 100%;height: 100%;}
	}
	.swiper /deep/ .uni-swiper-wrapper .uni-swiper-dot{
		width:10rpx;height:10rpx;border-radius: 50%;background: transparent;border: 2rpx solid #ffffff;box-sizing: border-box;
		}
	.swiper /deep/ .uni-swiper-wrapper .uni-swiper-dot-active{
		width: 22rpx;height: 10rpx;border-radius: 5rpx;background-color: #ffffff;
	}
	.swiper /deep/ .uni-swiper-wrapper .uni-swiper-dots-horizontal{
		left: auto;right: 48rpx;bottom: 260rpx;transform: none;
	}
	// wx
	.swiper /deep/ .wx-swiper-wrapper .wx-swiper-dot{
		width:10rpx;height:10rpx;border-radius: 50%;background: transparent;border: 2rpx solid #ffffff;box-sizing: border-box;
		}
	.swiper /deep/ .wx-swiper-wrapper .wx-swiper-dot-active{
		width: 22rpx;height: 10rpx;border-radius: 5rpx;background-color: #ffffff;
	}
	.swiper /deep/ .wx-swiper-wrapper .wx-swiper-dots-horizontal{
		left: auto;right: 48rpx;bottom: 260rpx;transform: none;
	}
	.bange{position: absolute;left: 0;right: 0;height: 276rpx;bottom: -44rpx;width: 100%;}
</style>