jp-zeroWorkerStation/pages/packages/choreInformation/jobSearchDetails.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="content">
			<!-- 职位 -->
			<view class="position">
				司机/保安/普工/地推
			</view>
			<!-- 薪水 -->
			<view class="saraly">
				200<text>元/天</text>
			</view>
			<!-- 发布日期和浏览量 -->
			<view class="date-views">
				<view class="date">
					更新时间：2023-06-01
				</view>
				<view class="views">
					浏览量：1
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="job-information">
				求职信息
			</view>
			<!-- 意向岗位 -->
			<view class="intention">
				<view class="title">
					意向岗位：
				</view>
				<view class="details">
					会的很多，都可以做
				</view>
			</view>
			<!-- 服务描述 -->
			<view class="describe">
				服务描述
			</view>
			<view class="describe-details">
				有相关2年工作经验，吃苦耐劳，工作认真仔细。
			</view>
		</view>
	
	
	    <view class="content">
			<!-- 联系方式 -->
	    	<view class="contact-information">
				<view class="title">
					联系方式
				</view>
				<view class="details">
					<!-- 照片 -->
					<view class="photo">
						<img src="@/assets/img/informationPhoto.png" alt="">
					</view>
					<view class="linkman-infos">
						<!-- 姓名电话 -->
						<view class="name-tel">
							<view class="name">
								李先生
							</view>
							<view class="tel">
								155****1111
							</view>
						</view>
						<!-- 标签 -->
						<view class="tags">
							<view class="tag-item">
								男
							</view>
							<view class="tag-item">
								21岁
							</view>
							<view class="tag-item">
								2年以上
							</view>
							<view class="tag-item">
								 高中
							</view>
						</view>
					</view>
				</view>
	    		
	    	</view>
	    </view>
	
	
	 <!-- 底部按钮 -->
	 <view class="bottom">
		 <!-- 分享 -->
		 <view class="share">
			 <view class="icon">
			 	<img src="@/assets/img/riFill-share-circle-fill@1x.png" alt="">
			 </view>
		 	 <view class="text">
		 	 	分享
		 	 </view>
		 </view>
		 <view class="btn">
		 	<button class="dialing">一键拨号</button>
			<button class="invite">立即邀请</button>
		 </view>
	 	
	 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 50px;
	}
</style>
<style lang="scss" scoped>
	.content{
		padding: 32rpx;
		background-color: #fff;
		margin-bottom: 24rpx;
		// 职位
	  .position{
		  color: rgba(16, 16, 16, 1);
		  font-size: 24px;
		  font-family: 'PingFangSC-medium';
	  }
	  // 薪水
	  .saraly{
		  margin-top: 16rpx;
		  color: rgba(255, 61, 0, 1);
		  font-size: 48rpx;
		  text{
			  font-size: 14px;
			  margin-left: 4rpx;
		  }
	  }
	  // 发布日期和浏览量
	  .date-views{
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  margin-top: 40rpx;
		  .date{
			  color: rgba(119, 119, 119, 1);
			  font-size: 24rpx;
		  }
		  .views{
			  color: rgba(119, 119, 119, 1);
			  font-size: 24rpx;
		  }
	  }
	  // 求职信息
	  .job-information{
		  color: rgba(16, 16, 16, 1);
		  font-size: 18px;
		  
		  font-family: 'PingFangSC-medium';
	  }
	  // 意向岗位
	  .intention{
		  display: flex;
		  align-items: center;
		  margin-top: 24rpx;
		  .title{
			  color: rgba(119, 119, 119, 1);
		  }
		  .datails{
			  color: rgba(16, 16, 16, 1);
		  }
	  }
	  // 服务描述
	  .describe{
		  font-size: 36rpx;
		  text-align: left;
		  font-family: 'PingFangSC-medium';
		  margin-top: 64rpx;
		  color: rgba(16, 16, 16, 1);
	  }
	  .describe-details{
		  color: rgba(51, 51, 51, 1);
		  font-size: 32rpx;
		  margin-top: 24rpx;
	  }
	  
	  // 联系方式
	  .contact-information{
		  .title{
			  color: rgba(16, 16, 16, 1);
			  font-size: 36rpx;
		  }
		  .details{
			  display: flex;
			  margin-top: 24rpx;
			  .photo{
				  width: 112rpx;
				  height: 112rpx;
				  border-radius: 50rpx;
				  border: 1px solid rgba(255, 255, 255, 1);
				  overflow: hidden;
				  img{
					  width: 100%;
					  height: 100%;
				  }
			  }
			  .linkman-infos{
				  margin-left: 24rpx;
				  // 姓名电话
				  .name-tel{
					  display: flex;
					  align-items: center;
					  .name{
						  color: rgba(16, 16, 16, 1);
						  font-size: 36rpx;
						  font-family: 'PingFangSC-medium';
					  }
					  .tel{
						  color: rgba(119, 119, 119, 1);
						  font-size: 36rpx;
						  margin-left: 16rpx;
					  }
				  }
				  // 标签
				  .tags{
					  display: flex;
					  margin-top: 16rpx;
					  .tag-item{
						  line-height: 40rpx;
						  padding: 0 8rpx;
						  border-radius: 4px;
						  background-color: rgba(241, 241, 247, 1);
						  color: rgba(129, 127, 153, 1);
						  font-size: 24rpx;
						  text-align: center;
						  margin-right: 16rpx;
					  }
				  }
			  }
		  }
	  }
	}


  // 底部按钮
  .bottom{
	  background-color: #fff;
	  padding: 24rpx 44rpx;
	  display: flex;
	  align-items: center;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  // 分享
	  .icon{
		  width: 48rpx;
		  height: 48rpx;
		  img{
			  width: 100%;
			  height: 100%;
		  }
	  }
	  .text{
		  color: rgba(39, 149, 253, 1);
		  font-size:24rpx;
	  }
	  .btn{
		  display: flex;
		  margin-left: auto;
		  .dialing{
			  width: 240rpx;
			  height: 88rpx;
			  line-height: 88rpx;
			  border-radius: 50px;
			  background-color: #fff;
			  color: rgba(39, 149, 253, 1);
			  font-size: 36rpx;
			  text-align: center;
			  border: 1px solid rgba(39, 149, 253, 1);
			  margin-right: 24rpx;
		  }
		  .invite{
			  width: 280rpx;
			  height: 88rpx;
			  line-height: 88rpx;
			  border-radius: 50px;
			  background-color: rgba(34, 149, 255, 1);
			  color: rgba(255, 255, 255, 1);
			  font-size: 36rpx;
			  text-align: center;
			  
		  }
	  }
  }
</style>