jp-zeroWorkerStation/pages/mine/employmentService/receiveRegistration.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="receive-registration" v-if="current==0">
			<view class="card">
				<view class="top">
					
				<!-- 头像 -->
				<view class="photo">
					<img src="../../../assets/img/informationPhoto.png"></img>
				</view>
				<!-- 信息 -->
				<view class="infos">
					<view class="positon-salary">
						<view class="positon">
							家政清洁
						</view>
						<view class="salary">
							200元/天
						</view>
					</view>
					<view class="tags-date">
						<view class="tags">
							<view class="item">
								男
							</view>
							<view class="item">
								21岁
							</view>
							<view class="item">
								高中
							</view>
						</view>
						<view class="date">
							报名时间：2023-06-01
						</view>
					</view>
				</view>
					
			
				</view>
				<u-line color="#E6E6E6"></u-line>
				<view class="buttons">
					<view class="btn check">
						查看
					</view>
					<view class="btn delete">
						删除
					</view>
				</view>
			</view>
		</view>
	 <!-- 邀请记录 -->
	 <view class="invitation-record" v-if="current==1">
	 	<view class="card">
	 		<view class="top">
	 			
	 		<!-- 头像 -->
	 		<view class="photo">
	 			<img src="../../../assets/img/informationPhoto.png"></img>
	 		</view>
	 		<!-- 信息 -->
	 		<view class="infos">
	 			<view class="positon-salary">
	 				<view class="positon">
	 					家政清洁
	 				</view>
	 				<view class="salary">
	 					200元/天
	 				</view>
	 			</view>
	 			<view class="tags-date">
	 				<view class="tags">
	 					<view class="item">
	 						男
	 					</view>
	 					<view class="item">
	 						21岁
	 					</view>
	 					<view class="item">
	 						高中
	 					</view>
	 				</view>
	 				<view class="date">
	 					报名时间：2023-06-01
	 				</view>
	 			</view>
	 		</view>
	 			
	 	
	 		</view>
	 		<u-line color="#E6E6E6"></u-line>
	 		<view class="buttons">
	 			<view class="btn check">
	 				查看
	 			</view>
	 			
	 		</view>
	 	</view>
	 </view>
	     
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					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;
		.top{
			display: flex;
		}
		// 头像
		.photo{
			width: 48px;
			height: 48px;
			border-radius: 50px;
			overflow: hidden;
			margin-right: 16rpx;
			img{
				width: 100%;
				height: 100%;
			}
		}
		// 信息
		.infos{
			flex: 1;
		}
		.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{
				display: flex;
				.item{
					border-radius: 4px;
					background-color: rgba(241, 241, 247, 1);
					color: rgba(129, 127, 153, 1);
					font-size: 12px;
					text-align: center;
					line-height: 36rpx;
					height: 36rpx;
					padding: 0 12rpx;
					margin-right: 8rpx;
				}
			}
			.company{
				color: rgba(51, 51, 51, 1);
				font-size: 24rpx;
			}
			.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(255, 61, 0, 1);
			}
		}
	}

   
</style>