ydd_front/mer_uniapp/pages/admin/components/header.vue

<template>
	<view class="navbar">
		<view class="content" :style="{ background: isScrolling ? '#fff' : bagColor }">
			<view :style="{ height: `${getHeight.barTop}px` }"></view>
			<view class="acea-row  bar" :style="{ height: `${getHeight.barHeight}px`,width: `${750-2*getHeight.barWidth}rpx` }">
				<view class="back-icon acea-row row-center-wrapper">
					<view
						v-show="showBack"
						@click="back"
						class="iconfont icon-xiangzuo back-icon"
						:style="{ lineHeight: `${getHeight.barHeight}rpx`}"
					></view>
				</view>
				<view class="title">{{ titleText }}</view>
				<view class="h-80 px-5 flex-y-center">
					<view class="w-full h-58 flex-y-center rd-30rpx bg--w111-fff px-32">
						<text class="iconfont icon-sousuo8 fs-28"></text>
						<input class="fs-24 pl-18" placeholder="搜索商品名称或订单号">
					</view>
					<view class="search_right_icon">
						
					</view>
				</view>
				<!-- <view class="right-icon acea-row row-center-wrapper">
					<view v-show="showRight" class="right-icon"></view>
				</view> -->
			</view>
		</view>
		<view class="placeholder">
			<view :style="{ height: `${getHeight.barTop}px` }"></view>
			<view :style="{ height: `${getHeight.barHeight}px` }"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'headerNav',
	props: {
		// 滚动至下部
		isScrolling: {
			type: Boolean,
			default: false
		},
		// 是否显示返回icon
		showBack: {
			type: Boolean,
			default: false
		},
		// Title
		titleText: {
			type: String,
			default: ''
		},
		// 背景色
		bagColor: {
			type: String,
			default: 'transparent'
		}
	},
	data() {
		return {
			getHeight: this.$util.getWXStatusHeight()
		};
	},
	methods: {
		back() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
.navbar {
	position: relative;
	color: #333;
	.content {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 998;
		background-color: var(--view-theme);
		font-weight: 500;
		font-size: 34rpx;
		color: #ffffff;
		.back-icon,
		.right-icon {
			width: 40rpx;
			height: 40rpx;
		}
		.bar {
			align-items: center;
		}
		.title {
			margin-left: 10rpx;
		}
	}
}
.search_right_icon{
	width: 80rpx;
	height: 60rpx;
	border-radius: 30rpx;
	background: darkgray;
	margin-left: 20rpx;
}
.icon-sousuo8{
	color: #333;
}
.h-80{
	width: 75%;
	margin-left: 10rpx;
}
.icon-xiangzuo,.title{
	color: #999999;
	font-size: 30rpx;
}
</style>