Delivery-merchant/components/Titlenav.vue

<template>
	<view :style="{ paddingTop: `${systemInfo.statusBarHeight}px` }">
		<view class="paddingTop">
			<image
				@click="navigateBack()"
				class="topImg"
				:src="`https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/${flag ? '2021-09-28-10-13-29pAQbyKoL.png' : '2021-09-24-17-12-18wIDpEwbr.png'}`"
				mode="widthFix"
			></image>
			<span class="title"><slot></slot></span>
			<view class="white"></view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	computed: {
		...mapState(['systemInfo'])
	},
	props:{
		flag:{
			type:Boolean,
			default:false
		}
	}
};
</script>

<style lang="scss" scoped>
.paddingTop {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.topImg {
		width: 28px;
		height: 28px;
		margin-left: 8px;
	}
	.title {
		font-size: 18px;
		font-weight: bold;
		color: #000000;
		line-height: 25px;
	}
	.white {
		width: 33px;
	}
}
</style>