jp-zeroWorkerStation/pages/mine/employmentService/laborManagement/laborManagement.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="tabs">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<!-- 发布中 -->
		<view class="my-registration" v-if="current==0">
			<view class="card">
				<view class="positon-salary">
					<view class="positon">
						摄影助理
					</view>
					<view class="salary">
						200元/天
					</view>
				</view>
				<view class="tags-date">
					<view class="tags">
						招聘1人
					</view>
					<view class="date">
						报名时间：2023-06-01
					</view>
				</view>
				<u-line color="#E6E6E6"></u-line>
				<view class="buttons">
					<view class="btn refresh">
						刷新
					</view>
					<view class="btn amend">
						修改
					</view>
					<view class="btn delete">
						删除
					</view>
				</view>
			</view>
		</view>
		
	 <!-- 待审核 -->
	 <view class="my-registration" v-if="current==1">
	 	<view class="card">
	 		<view class="positon-salary">
	 			<view class="positon">
	 				摄影助理
	 			</view>
	 			<view class="salary">
	 				200元/天
	 			</view>
	 		</view>
	 		<view class="tags-date">
	 			<view class="tags">
	 				招聘1人
	 			</view>
	 			<view class="date">
	 				报名时间：2023-06-01
	 			</view>
	 		</view>
	 		<u-line color="#E6E6E6"></u-line>
	 		<view class="buttons">
	 			
	 			<view class="btn amend">
	 				修改
	 			</view>
	 			<view class="btn delete">
	 				删除
	 			</view>
	 		</view>
	 	</view>
	 </view>
	 <!-- 未通过 -->
	 <view class="my-registration" v-if="current==2">
	 	<view class="card">
	 		<view class="positon-salary">
	 			<view class="positon">
	 				摄影助理
	 			</view>
	 			<view class="salary">
	 				200元/天
	 			</view>
	 		</view>
	 		<view class="tags-date">
	 			<view class="tags">
	 				招聘1人
	 			</view>
	 			<view class="date">
	 				报名时间：2023-06-01
	 			</view>
	 		</view>
	 		<u-line color="#E6E6E6"></u-line>
	 		<view class="buttons">
	 			
	 			<view class="btn amend">
	 				修改
	 			</view>
	 			<view class="btn delete">
	 				删除
	 			</view>
	 		</view>
	 	</view>
	 </view>
	     
		 <!-- 底部 -->
		 <view class="bottom">
		 	<button class="issue">发布用工需求
</button>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '发布中'
				}, {
					name: '待审核'
				},{
					name:'未通过'
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 150px;
	}
</style>
<style scoped lang="scss">
	.card{
		margin: 24rpx 32rpx;
		background-color: #fff;
		padding: 24rpx;
		border-radius: 12px;
		.positon-salary{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.positon{
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				
				font-family: 'PingFangSC-medium';
			}
			.salary{
				color: rgba(255, 61, 0, 1);
				font-size: 32rpx;
				font-family: 'PingFangSC-medium';
			}
		}
		.tags-date{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16rpx;
			margin-bottom: 24rpx;
			.tags{
				
				color: rgba(102, 102, 102, 1);
			}
			
			.date{
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
			}
		}
		// 按钮
		.buttons{
			display: flex;
			justify-content: flex-end;
			margin-top: 24rpx;
			.btn{
				width: 120rpx;
				height: 56rpx;
				line-height: 56rpx;
				border-radius: 50px;
				background-color: rgba(255, 255, 255, 1);
				color: rgba(119, 119, 119, 1);
				text-align: center;
				font-family: Microsoft Yahei;
				border: 1px solid rgba(207, 210, 213, 1);
				margin-left: 24rpx;
			}
			.delete{
				color: rgba(238, 49, 56, 1);
			}
		}
	}

   .bottom{
	   position: fixed;
	   left: 0;
	   right: 0;
	   bottom: 0;
	   .issue{
		   height: 96rpx;
		   line-height: 96rpx;
		   border-radius: 50px;
		   background-color: rgba(34, 149, 255, 1);
		   color: rgba(241, 241, 241, 1);
		   font-size: 36rpx;
		   text-align: center;
		   box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.03);
		   margin: 24rpx 32rpx;
	   }
   }
</style>