hire-wx-houxuanren/pagesA/jianlichange.vue

<template>
	<view>
		<u-popup :show="show" :round='16' mode="bottom" @close="close" @open="open">
			<view class="" style="padding: 0 28rpx;box-sizing: border-box;">
				<view class="topFont">选择简历完善方式</view>
				<view class="">
					<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
						<view :class="[radiovalue1==1?'border':'border2']" class=" u-flex u-row-between">
							<view class="">
								<view class="font1">手动完善简历</view>
								<view class="font2">手动编辑完善简历信息</view>
							</view>
							<view class="">
								<u-radio name='1'>
								</u-radio>
							</view>
						</view>
						<view :class="[radiovalue1==1?'border2':'border']" class=" u-flex u-row-between" style="margin-top: 20rpx;">
							<view class="">
								<view class="font1">导入简历识别</view>
								<view class="font2">一键上传文件，快速导入识别</view>
							</view>
							<view class="">
								<u-radio name='2'>
								</u-radio>
							</view>
						</view>
					</u-radio-group>
					<view class="u-flex " style="margin-top: 54rpx;margin-bottom: 30rpx;">
						<view class="btn1" style="padding: 22rpx 48rpx;box-sizing: border-box;">暂不找工作</view>
						<view class="btn2" style="padding: 22rpx 154rpx;box-sizing: border-box;" @click="tonext">下一步
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	export default {
		data() {
			return {
				show: true,
				radiovalue1: '1'
			}
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			//单选框
			groupChange(n) {
				console.log('groupChange', n);
				this.radiovalue1=n
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			//下一步
			tonext() {
				uni.navigateTo({
					url:'/pagesA/jianli'
				})
			}
		}
	}
</script>


<style lang="scss">
	.border {
		width: 694rpx;
		height: 160rpx;
		// background: #F7F9FD;
		border-radius: 16rpx;
		border: 2rpx solid #0C66C2;
		padding: 38rpx 0 28rpx 24rpx;
		box-sizing: border-box;

		.font1 {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #0C66C2;
			line-height: 44rpx;
		}

		.font2 {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1A82ED;
			line-height: 34rpx;
			margin-top: 16rpx;
		}
	}

	.border2 {
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid #D7D7D7;
		width: 694rpx;
		height: 160rpx;
		padding: 38rpx 0 28rpx 24rpx;
		box-sizing: border-box;

		.font1 {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #444;
			line-height: 44rpx;
		}

		.font2 {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666;
			line-height: 34rpx;
			margin-top: 16rpx;
		}
	}

	.btn1 {
		width: 256rpx;
		height: 88rpx;
		border-radius: 12rpx;
		border: 2rpx solid #BFBFBF;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #444444;
	}

	.btn2 {
		width: 406rpx;
		height: 88rpx;
		background: #0C66C2;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 24rpx;
	}

	.topFont {
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
		line-height: 50rpx;
		margin: 44rpx 0 48rpx 0;
	}
</style>