jp-zeroWorkerStation/pages/choreInformation/choreInformation.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="result-item" v-for="item in 3">
			   <!-- 照片 -->
           	<view class="photo">
              <img src="../../assets/img/informationPhoto.png" alt="">
           	</view>
			<view class="content">
				<!--  职位薪水 -->
				<view class="top">
					<view class="position">
						司机/保安/普工/地推
					</view>
					<view class="salary">
						120元/天
					</view>
				</view>
				<view class="issuer">
					李先生
				</view>
				<view class="bottom">
					<view class="tags">
						<view class="tag-item">
							男
						</view>
						<view class="tag-item">
							21岁
						</view>
						<view class="tag-item">
							高中
						</view>
					</view>
					
					 <view class="date"> 
						 更新时间：2023-06-01
					 </view>
				</view>
			</view>
           </view>
		</view>


<tabbar  ref="mytabbar"
		:current="3"></tabbar>
	</view>
</template>

<script>
	import nxsearch from "../../components/nx-search.vue"
import tabbar from "../../components/Tabbar.vue"
	export default {
		components: {
			nxsearch,
			tabbar
		},

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

				current: 0


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

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F0F0F2;
		padding-bottom: 50px;
	}
	.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: 33%;
				/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-item{
		  padding: 32rpx 0;
		  margin:0 32rpx;
		  display: flex;
		  border-bottom:1px solid #f1f1f1;
		  // 照片
		  .photo{
			  width: 96rpx;
			  height:96rpx;
			  overflow: hidden;
			  border-radius: 50px;
			  border: 1px solid rgba(255, 255, 255, 1);
			  img{
				  width: 100%;
				  height: 100%;
			  }
		  }
		  .content{
			  margin-left: 24rpx;
			  flex:1;
			  // 职位薪水
			  .top{
				  display: flex;
				  justify-content: space-between;
				  align-items: center;
				  font-size: 36rpx;
				  .position{
					  color: rgba(16, 16, 16, 1);
					  
					  font-family: 'PingFangSC-medium';
				  }
				  .salary{
					  color: rgba(255, 61, 0, 1);
					  font-size: 32rpx;
				  }
			  }
			  // 发布人
			  .issuer{
				  margin-top:16rpx;
			  }
			  // 标签和时间
			  .bottom{
				  display: flex;
				  justify-content: space-between;
				  align-items: center;
				  margin-top:24rpx;
				  .tags{
					  display: flex;
					  .tag-item{
						  padding:0 16rpx ;
						  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;

				  }
			  }
		  }
	  }
	
	
	}
</style>