jp-zeroWorkerStation/pages/packages/search/searchResult.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="result">
			<view class="tabs">
				<view class="left">
					<u-tabs bg-color="#F0F0F2" :list="tabList" :is-scroll="false" :current="current"
						@change="change"></u-tabs>
				</view>
				<view class="screen">
					<view class="icon">
						<img src="@/assets/img/riLine-filter-line@1x.png" alt="">
					</view>
					<view>筛选</view>
				</view>
			</view>
          <view class="result-content">
          	<view class="item" v-for="item in 3">
          		<view class="top">
          			<view class="name">
          				地推日结
          			</view>
					<view class="saraly">
						200元/天
					</view>
          		</view>
				<view class="middle">
					<view class="tag">
						<view class="tag-item">
							个人
						</view>
						<view class="tag-item">
							日结
						</view>
					</view>
					<view class="date">
						2023-06-01
					</view>
				</view>
				<view class="bottom">
					<view class="issuer">
						李先生
					</view>
					<view class="address">
						江津东路151号锦佳宴
					</view>
				</view>
          	</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: '找公司'
					},
				],
				tabList: [{
					name: '最新'
				}, {
					name: '日结'
				}, {
					name: '周结',

				}, {
					name: '月结'
				}],

				current: 0


			}
		},
		methods: {
			// 执行搜索
			doSearch(searchQuery) {
				console.log('searchQuery', searchQuery);
			},
			change(index) {
							this.current = index;
						}
			

		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 50px;
	}
</style>
<style lang="scss" scoped>
	
	.search {
		background-color: #fff;
		padding: 16rpx 32rpx;

		.search-box {
			border-radius: 50px;

			height: 72rpx;
			line-height: 72rpx;
		}
	}
	// 搜索结果
	.result{
		background-color: #fff;
		.tabs{
			padding-right:32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom:1px solid #f1f1f1;
			.left{
				width: 70%;
				/deep/.u-tabs{
					background-color: #fff !important;
					
				}
			}
			
				.screen{
					display: flex;
					align-items: center;
					color: rgba(39, 149, 253, 1);
					font-size: 16px;
					img{
						width: 16px;
						height: 16px;
						vertical-align: middle;
						margin-right: 4rpx;
					}
				}
			
		}
	
	.result-content{
		
		.item{
			padding:24rpx 0 28rpx;
			margin: 0 32rpx;
			border-bottom:1px solid #f1f1f1;
		}
		
		.top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: 'PingFangSC-medium';
			.name{
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				
			}
			.saraly{
				color: rgba(255, 61, 0, 1);
				font-size: 32rpx;
			}
			
		}
		.middle{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 12rpx;
			.tag{
				display: flex;
				.tag-item{
						width: 72rpx;
						height: 36rpx;
						line-height: 36rpx;
						border-radius: 4px;
						background-color: rgba(241, 241, 247, 1);
						color: rgba(129, 127, 153, 1);
						font-size: 24rpx;
						text-align: center;
						margin-right: 8rpx;
				}
			}
			.date{
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
			}
		}
		.bottom{
			display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 20rpx;
			.issuer{
				color: rgba(51, 51, 51, 1);
				font-size: 24rpx;
			}
			.address{
				color: rgba(119, 119, 119, 1);
				font-size: 24rpx;
				
			}
		}
	}
	
	
	}
</style>