不修改tab吸顶效果，实现圆角，头像等

 效果展示

、

代码展示

组件代码

<template>
	<view class="banner-view" :style="{ backgroundImage: 'url(' + bannerImageUrl + ')' }" </view>
		<view class="box" :style="{ height: boxHeight + 'rpx' }">
			<view class="box-hd">
				<view class="avator" v-if="avatorImageUrl">
					<image :src="avatorImageUrl" class="avator-img"></image>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		props: {
			bannerImageUrl: '',
			avatorImageUrl: '',
			boxHeight: ''
		}
	}
</script>

<style>
	.banner-view {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 350rpx;
	}

	.box {
		border-radius: 30upx 30upx 0 0;
		margin-top: -30upx;
		background: #fff;
	}

	.box-hd {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
	}

	.avator {
		border: 5upx solid #fff;
		border-radius: 50%;
		margin-top: -60upx;
		margin-left: -550upx;
		overflow: hidden;
	}

	.avator-img {
		width: 120upx;
		height: 120upx;
	}
</style>

父页面使用

是否展示头像avatorImageUrl，背景图bannerImageUrl

<SkListTop :bannerImageUrl="bannerImageUrl" :avatorImageUrl="avatorImageUrl" :boxHeight="boxHeight">