clsd/app/components/bg/bg.vue

<template>
	<view>
		<view class="back" :style="{ paddingTop: top + 'px' }">
			<view class="cont">
				<text class="title">{{ title }}</text>
			</view>
		</view>
		<view class="top" :style="{ marginBottom: '-' + mb + 'px' }">
			<image src="../../static/bg.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
export default {
	name: 'back',
	props: {
		title: {
			type: String,
			default: '承揽时代'
		}
	},
	data() {
		return {
			top: 0,
			mb: 140
		};
	},
	mounted() {
		uni.getSystemInfo({
			success: res => {
				this.top = parseInt(res.safeArea.top) - 5;
				// #ifdef MP-WEIXIN
				this.mb = this.mb - this.top + 10;
				// #endif
				// #ifdef H5
				this.mb = this.mb - this.top;
				// #endif
			},
			fail(err) {
				console.error(err);
			}
		});
	},
	methods: {
		back() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
.back {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 50px;
	text-align: center;
	color: white;
	z-index: 11111;
	text-align: left;
	padding-left: 20px;
	.cont {
		padding: 15px 0px 15px 0px;
		position: relative;
		.icon {
			position: absolute;
			font-size: 25px;
			left: 10px;
		}
		.title {
			font-size: 16px;
			font-weight: bold;
		}
	}
}
.top {
	image {
		width: 100%;
	}
}
</style>