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

<template>
	<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 class="block">
			<img src="../../static/img/zhao_icon2.png" alt="" />
			<view class="block-text" style="background-color: #4171F9;">企业招工</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<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>