uni-zhks-app/components/i-banner/i-banner.vue

<template>
	<view class="banner" :style="{marginTop: bannerMarginTop + 'px'}">
		<swiper class="banner_box" autoplay circular>
			<swiper-item v-for="item in banners" :key="item.id">
				<view class="banner_item">
					<view class="banner_item_img">
						<image :src="item.imgURL" mode=""></image>
					</view>
					<view class="banner_item_title">
						<text>{{item.title}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props:[
			"banners"
		],
		
		data() {
			return {
				bannerMarginTop:0,
				
			};
		},
		created() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置偏移高度
			const MarginTop = 90 - info.statusBarHeight
			this.bannerMarginTop = - MarginTop
			
		
		}
	}
</script>

<style lang="scss">
	.banner{
		margin: 0 auto;
		margin-top: -90px;
		width: 700rpx;
		height: 404rpx;
		border-radius: 16rpx;
		overflow: hidden;
		.banner_box{
			width: 700rpx;
			height: 404rpx;
			.banner_item{
				position: relative;
				.banner_item_img{
					width: 700rpx;
					height: 404rpx;
					image{
						width:100%;
						height:100%;
					}
				}
				.banner_item_title{
					position: absolute;
					left: 18rpx;
					bottom: 18rpx;
					height: 33rpx;
					font-size: 25rpx;
					font-family: $font-basic;
					color: #FFFFFF;
					line-height: 33rpx;

				}
				
			}
		}
	}
</style>