BiKing/components/headContent/headContent.vue

<template>
	<view class="head" >
		<!-- 状态栏 -->
		<view class="status-bar status-bar-fixed" :style="{'height':`${statusBarHeight}px` , 'background-color': statusBarBg}"></view>
		<view class="status-bar" :style="{'height':`${statusBarHeight}px`}"></view>
		
		
		<template v-if="showHead">
			<view :class="['head-content' , fixed ? 'content-fixed' : '']" :style="{'background-color': bgColor}">
				<view class="status-bar"  v-if="fixed" :style="{'height':`${statusBarHeight}px` , 'background-color': statusBarBg}"></view>
				<view class="content-box" :style="{'height':headHeight}">

					<view class="left" v-if="showleftRight" :style="{'width': leftRightWidth}">
						<slot name="left"></slot>
					</view>
					<view class="content">
						<slot name="content"></slot>
					</view>
					<view class="right" v-if="showleftRight" :style="{'width': leftRightWidth}">
						<slot name="right"></slot>
					</view>
				</view>
			</view>

			<!-- 当标题烂定位时，占位 -->
			<view v-if="fixed" class="placeholder-view" :style="{'height':headHeight}"></view>
		</template>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: "headContent",
		props: {
			// 是否线上状态栏
			showStatusBar: {
				type: Boolean,
				default: true
			},
			// 状态栏背景色
			statusBarBg: {
				type: String,
				default: '#fff'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			fixed: {
				type: Boolean,
				default: true
			},
			showleftRight: {
				type: Boolean,
				default: true
			},
			showHead: {
				type: Boolean,
				default: true
			},
			leftRightWidth: {
				type: String,
				default: "30%"
			},

		},
		data() {
			return {

			};
		},
		computed: {
			...mapGetters([
				'statusBarHeight',
				'headHeight'
			]),

		}
	}
</script>

<style scoped lang="scss">
	$zIndex:50;
	.status-bar{
		width: 100%;
		
	}
	.status-bar-fixed{
		position: fixed;
		top: 0;
		left: 0;
		z-index: $zIndex;
	}
	
	.head {
		width: 750rpx;

		.head-content {
			width: 100%;

			.content-box {
				width: 100%;
				padding: 0 $pages-padding;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left,
				.right {
					flex-shrink: 0;
				}

				.left,
				.right,
				.content {
					height: 100%;
					display: flex;
					align-items: center;
				}

				.content {
					flex: 1;
					justify-content: center;
				}

				::v-deep .haed-title {

					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: center;
					color: #1a1a1a;
					letter-spacing: 0.72rpx;
				}

				::v-deep .head-icon {
					width: 42rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					justify-content: flex-end;

					::v-deep .head-icon+.head-icon {
						margin-left: 20rpx;
					}
				}
			}
		}

		.placeholder-view {
			width: 100%;
		}

		.content-fixed {
			position: fixed;
			left: 0;
			top: 0;
			z-index: $zIndex;
		}
	}
</style>