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', borderBottom ? 'head-border' : '' , 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: #878A99;
				}

				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>