求职详情

pages/choreInformation/jobSearchDetails.vue

@@ -2,7 +2,109 @@
 	<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>
 
@@ -18,7 +120,188 @@
 		}
 	}
 </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>