先放段代码

<template>
	<view class="search">
		
		<Lines></Lines>
		
		<view class="search-item">
			<view class="search-title">
				<view class="f-color">最近搜索</view>
				<view class="iconfont icon-del"></view>
			</view>
			<view>
				<view class="search-name f-color">四件套</view>
				<view class="search-name f-color">面膜</view>
			</view>
		</view>
		
		<view class="search-item">
			<view class="search-title">
				<view class="f-color">热门搜索</view>
			</view>
			<view>
				<view class="search-name f-color">四件套</view>
				<view class="search-name f-color">面膜</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Lines from '@/components/common/Line.vue'
	export default {
		data() {
			return {
				keyword:'',
			}
		},
		// 监听原生标题栏事件
		onNavigationBarButtonTap(e){
			this.search();
		},
		// 监听原生标题栏搜索输入框输入内容变化事件
		onNavigationBarSearchInputChanged(e){
			this.keyword = e.text;
		},
		// 监听点击软键盘上的“搜索”按钮时触发。
		onNavigationBarSearchInputConfirmed(){
			this.search();
		},
		components:{
			Lines
		},
		methods: {
			// 判断搜索关键词是否为空和点击跳转
			search(){
				if(this.keyword===''){
					return uni.showToast({
						title:"请输入搜索内容",
						icon:"none"
					})
				}else{
					uni.navigateTo({
						url:'../search-list/search-list',
					})
				}
				// 隐藏软键盘
				uni.hideKeyboard();
			}
		}
	}
</script>

<style scoped>
	.search-item{
		padding: 20rpx;
	}
	.search-title {
		display: flex;
		justify-content: space-between;
	}
	.search-name {
		padding: 4rpx 24rpx;
		margin: 10rpx;
		display: inline-block;
		font-size: 24rpx;
		border-radius: 24rpx;
		background-color: #d1d1d1;
	}
</style>