jp-zeroWorkerStation/pages/search/search.vue

<template>
	<view>
		<u-navbar back-text="搜索" back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>

		<!-- 搜索框 -->
		<view class="search">
			<view class="search-box">
				<view class="option">
		  <nxsearch :selectList="selectList" button="inside"  @search="doSearch" @confirm="doSearc" v-model="searchQuery.keyword" placeholder="输入关键字找工作" />
         

				</view>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="search-history">
			<view class="top">
				<view class="title">
					搜索历史
				</view>
				<view class="clear">
					清空历史
				</view>
			</view>
			<view class="history">
				<view class="tag">
					打杂
				</view>
				<view class="tag">
					地推
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import nxsearch from "../../components/nx-search.vue"

	export default {
		components: {
			nxsearch
		},

		data() {
			return {
				keyword: '',
				searchQuery: {
					keyword: '',
					selectIndex: 0
				},
				selectList: [{
						id: 1,
						name: '找工作'
					},
					{
						id: 2,
						name: '找公司'
					},
				],


			}
		},
		methods: {
             // 执行搜索
            doSearch(searchQuery) {
                console.log('searchQuery', searchQuery);
            },

		}
	}
</script>

<style lang="scss" scoped>
	// 搜索框
	.search {
		padding: 16rpx 32rpx;

		.search-box {
			border-radius: 50px;
			// background-color: rgba(243, 246, 249, 1);
			height: 72rpx;
			line-height: 72rpx;
		}
	}
	// 搜索历史
	.search-history{
		padding: 0 32rpx;
		margin-top: 40rpx;
      .top{
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  .title{
			  color: #101010;
		  }
		  .clear{
			  color: rgba(169, 169, 169, 1);
			  font-size: 24rpx;
		  }
	  }
	  .history{
		  display: flex;
		  margin-top: 16rpx;
		  .tag{
			  width: 144rpx;
			  height: 56rpx;
			  line-height: 56rpx;
			  border-radius: 4px;
			  background-color: rgba(241, 244, 247, 1);
			  color: rgba(88, 88, 88, 1);
			  font-size: 12px;
			  text-align: center;
			  font-family: Arial;
			  margin-right: 16rpx;
		  }
	  }
	}
	 
</style>