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

<template>
    <view >
        <CustomNavbar @back="back" :titke="'发布招工'"></CustomNavbar>
        <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> -->
				<u--form
					labelPosition="left"
					:model="model1"
					:rules="rules"
					ref="uForm"
				>
					<u-form-item
						label="名称"
						prop="userInfo.name"
						borderBottom
						ref="item1"
					>
								<u--input
										v-model="model1.userInfo.name"
										border="none"
								></u--input>
							</u-form-item>
							<u-form-item
									label="性别"
									prop="userInfo.sex"
									borderBottom
									@click="showSex = true; hideKeyboard()"
									ref="item1"
							>
								<u--input
										v-model="model1.userInfo.sex"
										disabled
										disabledColor="#ffffff"
										placeholder="请选择性别"
										border="none"
								></u--input>
								<u-icon
										slot="right"
										name="arrow-right"
								></u-icon>
							</u-form-item>
						</u--form>
        	</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>
		<u-action-sheet
						:show="showSex"
						:actions="actions"
						title="请选择性别"
						description="如果选择保密会报错"
						@close="showSex = false"
						@select="sexSelect"
				>
				</u-action-sheet>
        <CustomTabbar :currentpage="1"></CustomTabbar>
    </view>
</template>

<script>
    import CustomNavbar from '@/components/CustomNavbar/navbar.vue'
    import CustomTabbar from '@/components/CustomTabbar/custom_tabbar.vue'
	export default {
        components: {CustomTabbar, CustomNavbar},
		data() {
			return {
				value2: '招工内容',
				showSex: false,
				model1: {
					userInfo: {
						name: 'uView UI',
						sex: '',
					},
				},
				actions: [{
					name: '男',
				},
				{
					name: '女',
				},
				{
					name: '保密',
				},
				],
							rules: {
								'userInfo.name': {
									type: 'string',
									required: true,
									message: '请填写姓名',
									trigger: ['blur', 'change']
								},
								'userInfo.sex': {
									type: 'string',
									max: 1,
									required: true,
									message: '请选择男或女',
									trigger: ['blur', 'change']
								},
							},
							radio: '',
							switchVal: false
			}
		},
		methods: {
			back() {
			    uni.reLaunch({
			        url: '/pages/my/my'
			    })
			}
		}
	}
</script>

<style lang="scss" scoped>
.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>