applet/components/SearchBox/SearchBox.vue

<template>
	<view class="search-content"
		:style="{height:height+'rpx',paddingTop:paddingTop+'rpx',position:isFixed ? 'fixed':'static'}">
		<view class="search-input">
			<text class="iconfont search-icon">&#xe618;</text>
			<input class="input-box" placeholder-class="input-placeholder" placeholder="搜索" @confirm="$emit('search', $event.detail.value)"/>
		</view>
	</view>
	<view v-if="isFixed" class="search-placeholder" :style="{height:130+'rpx'}" />
</template>

<script lang="ts" setup>
	defineProps({
		height: {
			type: Number,
			default: 130
		},
		paddingTop: {
			type: Number,
			default: 20
		},
		isFixed: {
			type: Boolean,
			default: true
		}
	})
</script>

<style lang="scss" scoped>
	.search-content {
		background-color: inherit;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 1;
		box-sizing: border-box;
		padding: 0 23rpx;

		.search-input {
			width: 100%;
			display: flex;
			align-items: center;
			height: 80rpx;
			background-color: #fff;
			border-radius: 40rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			.search-icon {
				color: #666666;
				font-size: 40rpx;
				flex-shrink: 0;
				// font-weight: 600;
			}

			.input-box {
				flex: 1;
				height: 100%;
				padding-left: 25rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #666666;
			}

			.input-placeholder {
				color: #b3b3b3;
			}
		}
	}
</style>