tourGuide/components/SearchHeader.vue

<template>
	<div class="title-header-box search" :style="{height:`${height}px`}">
		<div class="title-header"
			:style="{height:`${height}px`,top:`${height+padHeight}px`,backgroundColor:bgColor || '#FFFFFF'}">
			<div class="search-box" :style="{backgroundColor:bgColor ? '#F2F2F2' : '#F2F2F2'}">
				<img src="https://static.ticket.sz-trip.com/taizhou/images/search.png" alt="">
				<input :adjust-position="false" type="text" class="input" placeholder="请输入想要的产品或服务" v-model="keywords" @confirm="search" />
				<div class="btn" @click="search()">搜索</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Base from "./Base";
	export default {
		name: "SearchHeader",
		extends: Base,
		props: ['bgColor'],
		data() {
			return {
				keywords: '',
				padHeight: 0,
				height: 88,
			}
		},
		methods: {
			search() {
				uni.$emit('search', {
					keywords: this.keywords
				})
			},
		},
		created() {
			// #ifdef MP-WEIXIN
			let systemInfo = uni.getSystemInfoSync(),
				rect = uni.getMenuButtonBoundingClientRect();
			this.height = (rect.top - systemInfo.statusBarHeight) * 2 + rect.height
			this.padHeight = systemInfo.statusBarHeight
			// #endif

			// #ifdef APP-PLUS
			let systemInfo = uni.getSystemInfoSync()
			this.height = systemInfo.statusBarHeight*1.5
			this.padHeight = systemInfo.statusBarHeight
			// #endif
		}
	}
</script>

<style scoped>
	.title-header-box {
		padding: 16rpx 0;
	}

	.title-header {
		padding: 16rpx 0;
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		margin: auto;
		z-index: 1000;
	}

	.search-box {
		width: 697rpx;
		height: 68rpx;
		margin: 0 auto;
		border-radius: 60rpx;
		padding: 6rpx 7rpx 6rpx 26rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		background: #F2F2F2;
	}

	.search-box img {
		width: 28rpx;
		height: 30rpx;
	}

	.search-box .input {
		flex: 1;
		border: none;
		outline: none;
		background: none;
		color: #000000;
		margin: 0 20rpx;
		background-color: #F2F2F2;
	}

	.search-box .btn {
		/* background-color: #FFC825; */
		border-radius: 27rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 10rpx 26rpx;
		background-color: #00AAFF;
	}
</style>