lcoco/components/en-utils/en-nav/en-nav.vue

<template>
	<view class="" :style="[{ 'background':bgckgroundBox,'transition-property':isT}]">
		<view class="header"
			:style="[{'height': customBarH + 'px','background':bgckgroundBox, 'padding-top': statusBarH + 'px'}]">
			<view class="flexbox" :style="[{'height': customBarH + 'px'}]">
				<view class="left-button" @tap="goBack">
					<image class="back-img" :src="'/static/img/common/back'+(titleColor==='#fff'?'-white':'')+'.png'"
						mode="aspectFill"></image>
				</view>
				<view class="title-text sys-height-44" :style="[{'marginLeft':left +'px','color':titleColor}]">{{title}}</view>
				<view class="right-button button" @click="rightClick">
					<view class="right-data" v-if="rightShow">
						<text class="rightName  sys-weight-600" :style="[{'color':titleColor}]"
							v-if="rightType===1">{{rightText}}</text>
						<slot name="right" v-else> </slot>
					</view>
				</view>
			</view>
		</view>
		<view class="box-title">
			<view class="" :style="[{'height': (customBarH+statusBarH) + 'px', 'padding-top': statusBarH + 'px'}]">
			</view>
		</view>
	</view>
</template>

<script>
	import tools from "@/service/tools";

	export default {
		name: "en-nav",
		data() {
			return {
				statusBarH: 0,
				customBarH: 0,
				left: 35,
				isXcx: false
			}
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			leftShow: {
				type: Boolean,
				default: true
			},
			bgckgroundBox: {
				type: String,
				default: '#fff'
			},

			titleColor: {
				type: String,
				default: '#fff'
			},

			rightText: {
				type: String,
				default: ''
			},
			rightShow: {
				type: Boolean,
				default: false
			},
			rightType: {
				default: 1
			},
			isT:{
				default: 'background'
			}
		},
		computed: {

		},
		watch: {
			leftShow(e) {
				if (e == true) {
					this.left = 0
				}
			}
		},
		methods: {
			rightClick() {
				this.$emit('rightClick')
			},
			goBack() {
				if (!this.leftShow) {
					return;
				}
				// this.$emit('leftClick')
				tools.leftClick()
			}
		},
		created() {
			uni.getSystemInfo({
				success: (e) => {
					this.statusBarH = e.statusBarHeight + 10
					let custom = 0;
					//#ifdef MP-WEIXIN
					custom = wx.getMenuButtonBoundingClientRect()
					this.customBarH = custom.height
					//#endif
					//#ifdef H5
					this.customBarH = 30
					this.left = 0
					//#endif
					// #ifdef APP-PLUS
					// this.customBarH = 34
					this.left = 0
					//#endif
					console.log('self.customBarH---------' + this.customBarH)
					this.$emit('navHeight', this.customBarH + this.statusBarH)
				}
			})
			//#ifdef MP-WEIXIN
			this.isXcx = true
			//#endif
		}
	}
</script>

<style scoped lang="scss">
	@import url("../../../static/css/en-common.css");

	.header {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99999;

		.flexbox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 12px;
			position: relative;

			.left-button {
				position: absolute;
				left: 16rpx;
				top: 10rpx;

				.back-img {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.iconfont {
				color: #333333;
			}

			.title-text {
				width: 100%;
				text-align: center;
				font-size: 36rpx;
				font-weight: 600;
			}

			.icon-left {
				width: 20px;
				height: 20px;
			}

			.button {
				position: absolute;
				right: 16rpx;

				// z-index: 5;
				// width: 21px;
				.rightName {
					font-size: 32rpx;
				}

				.r-but {

					color: #fff;
					font-size: 12px;
					padding: 5px;
					border-radius: 3px;
				}
			}
		}

		.flexbox-xcx {
			justify-content: left;
			position: relative;

			.right-button {
				position: absolute;
				right: 220rpx;
			}
		}

	}


	.box-title {
		//background-color:#FF0000 ;
	}
</style>