个人招工页面开发

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>