Homestay_manage_app/packageShang/components/use-header/use-header.vue

<template>
	<view>
		<view class="use-header dflex padding-lr w-full bg-main" :class="fixed ? 'fixed' : ''">
			<!-- 头部组件 -->
			<view class="use-search dflex-b border-radius-lg padding-lr w-full" @click="search">
				<view class="iconfont iconsousuo-01"><text class="text">{{ searchTip }}</text></view>
			</view>
		</view>
		
		<!-- 头部组件占位符 -->
		<view v-if="fixed && placeholder" class="use-header-placeholder"></view>
	</view>
</template>

<script>
export default {
	props: {
		fixed: {
			type: [Number, Boolean],
			default: false
		},
		placeholder: {
			type: [Number, Boolean],
			default: !0
		},
		searchAuto: {
			type: [Number, Boolean],
			default: !0
		},
		searchTip: {
			type: String,
			default: '搜索关键字'
		}
	},
	data() {
		return {};
	},
	methods: {
		search() {
			this.$emit('search', {
				type: 'search'
			});

			if (this.searchAuto) {
				// 跳转搜索页
				uni.navigateTo({
					url: '/packageShang/pages/home/search/search'
				})
			}
		}
	}
};
</script>

<style lang="scss">
.use-header-placeholder {
	height: 100rpx;
}

.use-header {
	// height: 100rpx;
}
.fixed {
    position: inherit;
    z-index: 1;
}
.bg-main {
    background: transparent!important;
}

.use-search {
	height: 72rpx;
	line-height: 72rpx;
	background-color: #f5f5f5;

	.text {
		font-size: 28rpx;
		color: rgba(204, 204, 204, 1);
	}

	.iconfont {
		font-size: $font-base + 6upx;
		color: rgba(153, 153, 153, 1);
	}
}
</style>