BiKing/components/headContent/headContent.vue

<template>
	<view :class="['head' , borderBottom ? 'head-border' : '']" >
		<!-- 状态栏 -->
		<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" >
						<slot name="left"></slot>
					</view>
					<view class="content">
						<slot name="content"></slot>
					</view>
					<view class="right" v-if="showleftRight" >
						<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: {
			borderBottom: {
				type: Boolean,
				default: false
			},
			// 是否线上状态栏
			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'
			])
		},
		mounted() {
			
		}
	}
</script>

<style scoped lang="scss">
	.status-bar{
		width: 100%;
		
	}
	.status-bar-fixed{
		position: fixed;
		top: 0;
		left: 0;
		z-index: $headFixedZIndex;
	}
	.head-border{
		border-bottom: 1rpx solid $border-color;
	}
	.head {
		width: 750rpx;
		.head-content {
			width: 100%;

			.content-box {
				width: 100%;
				// padding: 0 $pages-padding;
				position: relative;

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

				.left,
				.right,
				 {
					 position: absolute;
					 top: 50%;
					transform: translateY(-50%); 
					// height: 100%;
					// display: flex;
					// align-items: center;
				}
				.left{
					left: $pages-padding;
				}
				.right{
					right: $pages-padding;
				}
				
				.content {
					width: 100%;
					height: 100%;
					display: flex;
					align-content: center;
					justify-content: center;
					// white-space: nowrap;
				}

				::v-deep .haed-title {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					white-space: nowrap; 
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #1a1a1a;
					letter-spacing: 0.72rpx;
				}

				::v-deep .head-icon {
					width: 42rpx;
					height: 40rpx;
					.iconfont{
					font-size: 40rpx;
						color: rgba(107, 104, 104, 0.9);
					}
					image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					display: flex;
					align-items: center;
					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: $headFixedZIndex;
		}
	}
</style>