web-app-v1/components/bar.vue

<template>
	<view>
		<view class="header" :style="{ height: titleBarHeight, 'padding-top': statusBarHeight, 'background-color': nav.bg }">
			<view class="back">
				<image src="../static/left_arr.png" :style="{ border: nav.color }" v-if="nav.isdisPlayNavTitle" @click="back"></image>
			</view>
			<view class="header-title weight">{{ nav.navTitle }}</view>
		</view>
		<view :style="{ height: titleBarHeight, 'padding-top': statusBarHeight }"></view>
	</view>
</template>
<script>
export default {
	props: ['nav'],
	data() {
		return {
			statusBarHeight: 0,
			titleBarHeight: 0
		};
	},
	created() {
		var that = this;
		uni.getSystemInfo({
			success: function(res) {
				if (res.model.indexOf('iPhone') !== -1) {
					that.titleBarHeight = 44 + 'px';
				} else {
					that.titleBarHeight = 48 + 'px';
				}
				that.statusBarHeight = res.statusBarHeight + 'px';
			}
		});
	},
	methods: {
		// 回到上一页
		back: function() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss">
.header {
	display: flex;
	align-items: center;
	top: 0;
	left: 0;
	position: fixed;
	width: 100%;
	z-index: 100;
}
.back{
	width: 60rpx;
	margin-left:30rpx;
	image{
		width: 40rpx;
		height:40rpx;
	}
}
.header .header-title {
	position: absolute;
	left: 50%;
	font-size: 38upx;
	transform: translateX(-50%);
}
.header-back {
	position: absolute;
	left: 15upx;
	font-size: 30upx;
	padding: 10upx;
	border-radius: 50%;
}
</style>