zhiyu_uni_duanju/pages/components/home/banner.vue

<template>
	<view>
		<swiper class="home-swiper-banner" circular indicator-color="rgba(255, 255, 255, 0.3)"
			indicator-active-color="#FFFFFF" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
			<swiper-item v-for="(item,index) in banners" :key="index">
				<navigator :url="'/pages/video/index?video_id='+item.video_id">
					<image :src="item.banner" mode="scaleToFill" style="border-radius: 16rpx;"></image>
				</navigator>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: ['banners'],
		data() {
			return {
				banners1: [],
			}
		},
	}
</script>

<style lang="scss" scoped>
	.home-swiper-banner {
		height: 350rpx;
		box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 10rpx;
		overflow: hidden;
	}

	.home-swiper-banner image {
		width: 100%;
		height: 350rpx;
	}
</style>