个人招工页面开发

pages.json

@@ -220,7 +220,7 @@
         	"path" : "pages/recruit/reform",
         	"style" : 
         	{
-        		"navigationBarTitleText" : "我要招工",
+        		"navigationBarTitleText" : "个人招工",
         		"enablePullDownRefresh" : false
         	}
         }

pages/recruit/recruit.vue

@@ -1,12 +1,14 @@
 <template>
-	<view style="padding: 60rpx;">
-		<view style="font-size: 46rpx;color: #000;">请选择</view>
-		<view style="font-size: 28rpx;color: #999;margin-top: 10rpx;">您是个人招工还是企业招工</view>
-		<view style="width: 100%;height: 300rpx;border-radius: 20rpx;background-color: #f3f4f8;margin: 40rpx auto;position: relative;" @click="navTo('/pages/recruit/reform')">
-			<view style="color: #fff;font-size: 26rpx;position: absolute;width: 180rpx;height: 60rpx;border-radius: 30rpx;background-color: #45D4B6;text-align: center;line-height: 60rpx;right: 20rpx;top: 50%;margin-top: -30rpx;">个人招工</view>
+	<view class="container">
+		<view class="select">请选择</view>
+		<view class="select-text">您是个人招工还是企业招工</view>
+		<view class="block" @click="navTo('/pages/recruit/reform')">
+			<img src="../../static/img/zhao_icon1.png" alt="" />
+			<view class="block-text">个人招工</view>
 		</view>
-		<view style="width: 100%;height: 300rpx;border-radius: 20rpx;background-color: #f3f4f8;margin: 40rpx auto;position: relative;">
-			<view style="color: #fff;font-size: 26rpx;position: absolute;width: 180rpx;height: 60rpx;border-radius: 30rpx;background-color: #4171F9;text-align: center;line-height: 60rpx;right: 20rpx;top: 50%;margin-top: -30rpx;">企业招工</view>
+		<view class="block">
+			<img src="../../static/img/zhao_icon2.png" alt="" />
+			<view class="block-text" style="background-color: #4171F9;">企业招工</view>
 		</view>
 	</view>
 </template>
@@ -24,6 +26,46 @@
 	}
 </script>
 
-<style>
-
+<style lang="scss">
+.container {
+	padding: 60rpx;
+	.select {
+		font-size: 46rpx;
+		color: #000;
+	}
+	.select-text {
+		font-size: 28rpx;
+		color: #999;
+		margin-top: 10rpx;
+	}
+	.block {
+		width: 100%;
+		height: 300rpx;
+		border-radius: 20rpx;
+		background-color: #f3f4f8;
+		margin: 40rpx auto;
+		position: relative;
+		display: flex;
+		align-items: center;
+		.block-text {
+			color: #fff;
+			font-size: 26rpx;
+			position: absolute;
+			width: 180rpx;
+			height: 60rpx;
+			border-radius: 30rpx;
+			background-color: #45D4B6;
+			text-align: center;
+			line-height: 60rpx;
+			right: 20rpx;
+			top: 50%;
+			margin-top: -30rpx;
+		}
+		img {
+			width: 300rpx;
+			margin-left: 50rpx;
+		}
+	}
+	
+}
 </style>

pages/recruit/reform.vue

@@ -1,6 +1,34 @@
 <template>
-	<view>
-		我要招工
+	<view class="container">
+		<img class="top-banner" src="" alt="" />
+		<view class="form-wrapper">
+			<view class="require">您的招工需求</view>
+			<u--textarea v-model="value2" height="140" placeholder="请输入内容" count ></u--textarea>
+			<u-cell-group style="margin: 20rpx 0;">
+				<u-cell  title="技能要求" :isLink="true"></u-cell>
+				<u-cell  title="任务区域" :isLink="true" value=""></u-cell>
+			</u-cell-group>
+		</view>
+		<view style="font-size: 36rpx;color: #000;font-weight: bold;padding: 0 20rpx;">招工指引</view>
+		<view class="zhiyin">
+			<view class="item">
+				<span>在线填写</span>
+				<span>招工需求</span>
+			</view>
+			<img src="../../static/img/zhiyin_icon.png" alt="" />
+			<view class="item">
+				<span>专属人员</span>
+				<span>沟通发布</span>
+			</view>
+			<img src="../../static/img/zhiyin_icon.png" alt="" />
+			<view class="item">
+				<span>平台/大屏展</span>
+				<span>示招工任务</span>
+			</view>
+		</view>
+		<view class="bottom">
+			<view class="btn">提交</view>
+		</view>
 	</view>
 </template>
 
@@ -8,7 +36,7 @@
 	export default {
 		data() {
 			return {
-				
+				value2: '招工内容'
 			}
 		},
 		methods: {
@@ -17,6 +45,66 @@
 	}
 </script>
 
-<style>
-
+<style lang="scss">
+.container {
+	.top-banner {
+		width: 100%;
+		height: 300rpx;
+	}
+	.form-wrapper {
+		padding: 20rpx;
+		.require {
+			font-size: 36rpx;
+			font-weight: 500;
+			margin-bottom: 20rpx;
+		}
+	}
+	.zhiyin {
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		margin-top: 40rpx;
+		padding: 0 20rpx;
+		.item {
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+			width: 260rpx;
+			height: 80rpx;
+			border-radius: 20rpx;
+			justify-content: space-between;
+			padding: 30rpx 0;
+			margin: 0 20rpx;
+			box-sizing: content-box;
+			background-color: #F1F3FF;
+			span {
+				color: #63676A;
+				font-size: 24rpx;
+			}
+		}
+		img {
+			width: 50rpx;
+		}
+	}
+	.bottom {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 150rpx;
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		.btn {
+			width: 90%;
+			height: 100rpx;
+			text-align: center;
+			color: #fff;
+			border-radius: 20rpx;
+			background-color: #4171F9;
+			line-height: 100rpx;
+		}
+	}
+}
 </style>