baiyuApp/pages/expert/components/bgNavBar.vue

<template>
	<view>
		<u-sticky offsetTop="0" customNavHeight="0" zIndex="999">
			<view class="content-header-sticky x-c">
				<image class="bg-img" src="/static/image/home/home_top_bg.png" style="z-index: -1;"></image>
				<view class="backicon"><uni-icons type="left" size="26" color="#fff" @click="$navBack()"></uni-icons></view>
				<text class="textOne" style="width: 50%;text-align: center;color: #fff;">{{title}}</text>
			</view>
		</u-sticky>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			}
		}
	}
</script>

<style scoped lang="scss">
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	
	.content-header-sticky {
		height: calc(44px + var(--status-bar-height));
		padding-top: var(--status-bar-height);
		position: relative;
		z-index: 999;
		overflow: hidden;
	
		.backicon {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 24rpx;
			padding-top: var(--status-bar-height);
			@include u-flex(row,center,flex-start);
		}
	}
	
	.bg-img {
		position: absolute;
		width: 100%;
		height: 524rpx;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>