<template>
	<view class="content">
		<!-- 导航栏 -->
		<view class="navbar" :class="{active:opacity}">
			<!-- #ifndef APP-PLUS || MP-WEIXIN -->
			<view class="status-bar"></view>
			<view class="navbar_tow flex-between"
				:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
			<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="navbar_tow flex-between" :style="{'marginTop':HeighT.heightBar /2+'px'}">
				<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="navbar_tow flex-between"
						:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
					<!-- #endif -->
						<!-- 标题搜索框 -->
						<view class="flex-between" @click="clicknavigateBack">
							<view class="navbar_tow_one flex-start">
								<u-icon name="arrow-left" color="#000" size="24"></u-icon>
							</view>
							<view class="navbar_tow_tow" v-if="opacity || titleshow">
								{{title}}
							</view>
						</view>
					</view>
				</view>
				<view class="" :style="{'height':HeighT.customBar+'px'}">
					
				</view>
			</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			opacity: {
				type: Boolean,
				default: false
			},
			titleshow: {
				type: Boolean,
				default: false
			},
		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
		methods: {
			clicknavigateBack(){
				uni.navigateBack()
			}
		}

	};
</script>

<style scoped lang="scss">
	page {
		background: #F9F9F9;
	}

	.content {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 999999;
		background: #2f87fd;
		.active {
			background: rgba(249, 249, 249, 1);
		}

		.status-bar {
			// #ifdef APP-PLUS
			height: calc(var(--status-bar-height) / 2);
			// #endif
			// #ifdef MP-WEIXIN
			height: var(--status-bar-height);
			// #endif
		}

		// #ifdef APP-PLUS
		.statusbarmargin {
			margin-top: var(--status-bar-height);
		}

		// #endif
		.navbar {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 99;

			.navbar_tow {
				width: 100%;
				position: relative;
				font-size: 36rpx;

				.flex-between {
					// #ifdef APP-PLUS || H5
					margin: 28rpx;
					// #endif
					// #ifdef MP-WEIXIN
					margin-left: 28rpx;
					// #endif
					width: 100%;
					flex-wrap: nowrap;
					height: 100%;
					line-height: 100%;

					.navbar_tow_one {
						height: 100%;
						line-height: 100%;

						text:nth-child(1) {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}

						text:nth-child(2) {
							margin-left: 16rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}
					}

					.navbar_tow_tow {
						text-align: center;
						flex: auto;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
				}

			}
		}
	}
</style>