h5-elab-open-ownerUnion/components/titleHead.vue

<template>
	<view class="head_contain" :style="{'background': isBackThemeColor ? backgorundThemeColor || '#F1F5F9' : '#fff'}">
		<!-- <view class="safeArea" style="height: 58rpx;"></view> -->
		<!-- background-color: #3CD9D9 -->
		<!--  :style="`height: ${iStatusBarHeight + 'px'};`" -->
		<view class="safeArea" :style="`background: ${areaColor}`"></view>
		<view class="head_content" :style="{'background':themeColor}">
			<view v-if="isShowBack" style="width: 60rpx;height: 60rpx;display: flex;margin-left: 30rpx;align-items: center;" @click="back">
				<image src="../static/zancun/ic_arrow_back_im_3x.png" style="width: 21rpx;height: 35rpx;"></image>
			</view>
			<view v-if="isShowleftTitle" style="height: 60rpx;display: flex;margin-left: 30rpx;align-items: center;">
				<text style="font-size: 28rpx;font-family: FontName, FontName-Regular;font-weight: 400;text-align: left;color: #383838;">{{leftTitle}}</text>
			</view>
			<view v-if="isShowZhuomian" style="height: 60rpx;display: flex;margin-left: 30rpx; align-items: center;" @click="showDetail">
				<image src="../static/icons/icon_change@2x.png" style="width: 24rpx;height: 24rpx;"></image>
				<text style="margin-left: 5rpx;font-size: 24rpx;font-family: Verdana, Verdana-Regular;font-weight: 400;text-align: center;color: #333333;">{{leftDesc}}</text>
			</view>
			<view  @click="toSelect" style="position: absolute;left: 50%;transform: translateX(-50%); display: flex;width: 390rpx;justify-content: center;align-items: center;">
				<view class="title_str" :style="`color: ${titleColor ? titleColor : '#000'};`">{{title}}</view>
				<image v-if="isShowDown" src="../static/icons/icon_drop@2x.png"  style="width: 30rpx;height: 30rpx; min-width: 30rpx; min-height: 30rpx;margin-left: 10rpx; margin-top: 0rpx;" mode=""></image>
			</view>
			<view v-if="isShowRightTitle" style="height: 60rpx;display: flex;margin-left: calc(100% - 280rpx);align-items: center;" @click="rightAction">
				<text style="opacity: 0.5;font-size: 26rpx;font-family: Verdana, Verdana-Regular;font-weight: 400;text-align: left;color: #383838;">{{rightTitle}}</text>
			</view>
			
			<view v-if="isShowShare" class="title_icon" @click="tograb">{{rightDesc}}</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			title: String,
			isShowShare: Boolean,
			isShowZhuomian: Boolean,
			isShowBack: Boolean,
			themeColor: String,
			leftDesc: String,
			isTabbarPage: Boolean,
			rightDesc: {
				type: String,
				default: '分享'
			},
			isShowDown:Boolean,
			iStatusBarHeight: 20,
			isBackThemeColor: {
				type: Boolean,
				default: false
			},
			areaColor: {
				type: String,
				default: ''
			},
			titleColor: {
				type: String,
				default: ''
			},
			isShowleftTitle: {
				type: Boolean,
				default: false
			},
			leftTitle: {
				type: String,
				default: '实时天眼'
			},
			isShowRightTitle: {
				type: Boolean,
				default: false
			},
			rightTitle: {
				type: String,
				default: '提醒设置'
			}
		},

		data() {
			return {
				backgorundThemeColor: ''
			};
		},
		mounted() {
			this.backgorundThemeColor = getApp().globalData.backgorundThemeColor;
			// var tempStatusHeight = uni.getStorageSync('iStatusBarHeight')
			// if (tempStatusHeight) {
			// 	this.iStatusBarHeight = tempStatusHeight
			// }
			// else {
			// 	this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight || 44
			// 	uni.setStorageSync('iStatusBarHeight', this.iStatusBarHeight)
			// }
			// if (this.iStatusBarHeight == 0 || this.iStatusBarHeight == null) {
			// 	this.iStatusBarHeight = 20
			// }
			// this.iStatusBarHeight = JSON.stringify(uni.getSystemInfoSync().statusBarHeight || 44) + 'px'
			// this.$forceUpdate()
			// uni.showModal({
   //        		content: JSON.stringify(this.iStatusBarHeight)
			// })
		},
		methods: {
			
			tograb() {
				this.$emit('share', '')
			},
			showDetail(){
				this.$emit('showDetail',"")
			},
			toSelect(){
				this.$emit('toSelect',"")
			},
			rightAction() {
				this.$emit('rightAction')
			}
		},

	}
</script>

<style scoped lang="scss">
	.head_contain {
		width: 100%;
		display: flex;
		flex-direction: column;

		.safeArea {
			margin-top: 0;
			height: 44px;
		}
		
		@media screen and (max-height: 736px) {
			.safeArea {
				margin-top: 0;
				height: 20px;
			}
		}

		.head_content {
			margin-top: 0;
			width: 100%;
			height: 88rpx;
			display: flex;
			flex-direction: row;
			position: relative;
			align-items: center;
			
		}

		.title_str {
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 34rpx;
			font-family: Verdana, "Verdana-Bold";
			font-weight: 700;
			color: #000000;

		}

		.title_icon {
			height: 88rpx;
			position: absolute;
			right: 20rpx;
			text-align: center;
			font-size: 23rpx;
			text-align: center;
		}
	}
</style>