jobslink-user-clent/pages/recruit/reform.vue

<template>
	<view class="container">
		<view class="wrapper" style="position: relative;">
			<view class="top-title">在线提交招工需求</view>
			<view class="tips">
				<span>专属就业帮扶人</span>
				<span>为您提供一对一撮合服务</span>
			</view>
			<!-- <img  src="../../static/img/index/bannerBg.png" alt="" /> -->
			<view class="bottom">
				<img src="../../static/img/safe_icon.png" style="width: 40rpx;margin: 0 20rpx" alt="" />
				<span>招工快.干活好.纠纷少.隐私保护</span>
			</view>
		</view>
		
		<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>

<script>
	export default {
		data() {
			return {
				value2: '招工内容'
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.container {
	.wrapper {
		width: 100%;
		height: 300rpx;
		background: url(@/static/img/index/bannerBg.png) no-repeat center center;
		background-size: 100% 100%;
		.top-title {
			font-size: 34rpx;
			color: #372E33;
			font-weight: bold;
			position: absolute;
			left: 20rpx;
			top: 30rpx;
		}
		.tips {
			position: absolute;
			left: 20rpx;
			top: 90rpx;
			font-size: 26rpx;
			color: #999;
			display: flex;
			flex-direction: column;
			background-color: #E4F2FD;
			padding: 15rpx;
			border-radius: 10rpx;
		}
		.bottom{
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: left;
			color: #7C401E;
			font-size: 28rpx;
			left: 5%;
			bottom: 0;
			right: 5%;
			height: 80rpx;
			background: linear-gradient(to right, #FFEEDA, #FED38F);;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
		}
	}
	.top-banner {
		
	}
	.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>