myj/pages/apply/choose.vue

<template>
	<view class="alertBox">
		<image class="titleImg" src="@/static/img/alertbg.png" mode="widthFix"></image>
		<view class="title">参赛类型</view>
		<view class="titleTip">请选择您的参赛身份类型</view>
		<view class="lxTtem flex" @click="type = 1">
			<view class="leftTitle flex">
				<image class="leftImgTip" src="@/static/img/user.png" mode="heightFix"></image>
				<text>个人参赛</text>
			</view>
			<view class="rightTip flex"><view v-if="type == 1" class="xzTip"></view></view>
		</view>
		<view class="lxTtem flex" @click="type = 2">
			<view class="leftTitle flex">
				<image class="leftImgTip" src="@/static/img/userAll.png" mode="heightFix"></image>
				<text>企业参赛(我有所属企业)</text>
			</view>
			<view class="rightTip flex"><view v-if="type == 2" class="xzTip"></view></view>
		</view>
	
		<view class="pushtyle" @click="submit">确认</view>
	</view>
	<!-- <div class="content">
		<div class="">
			<div class="title">申请类型</div>
			<div class="explain">
				请选择您的申请身份类型
			</div>
			<div class="list">
				<label>个人会员</label>
				<input type="radio" name="radio" id="" value="1" v-model="type"/>
			</div>
			<div class="list">
				<label>企业会员</label>
				<input type="radio" name="radio" id="" value="2" v-model="type"/>
			</div>
		</div>
		<div class="button" @click="submit">
			确认
		</div>
	</div> -->
</template>

<script>
export default {
	data() {
		return {
			type: 1
		}
	},
	methods: {
		submit() {
			uni.navigateTo({
				url: '/pages/apply/query?type=' + this.type
			})
			// window.location.href = 'query.html?type='+this.type;
		}
	}
}
</script>

<style lang="scss" scoped>
/* body {
	background-color: #888888;
	height: 100%;
}
.content {
	width: 70%;
	font-size: 15px;
	margin: 300px auto;
	background-color: #fff;
	padding: 20px;
	text-align: center;
	border-radius: 10px;
}
.title {
	font-weight: bold;
	margin-bottom: 15px;
}
.explain {
	font-size: 12px;
	color: #4c4c4c;
}
.list {
	margin-top: 30px;
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.button {
	background-color: #006eeb;
	width: 90%;
	margin: 5px auto;
	margin-top: 20px;
	color: #fff;
	border-radius: 5px;
	padding: 5px;
} */

.alertBox {
	background-color: #fff;
	width: 80%;
	margin: 280rpx auto;
	border-radius: 30rpx;
	padding-bottom: 40rpx;
	.titleImg {
		width: 100%;
		z-index: -1;
	}
	.title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-top: -80rpx;
	}
	.titleTip {
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #808080;
	}
	.lxTtem {
		margin: 0 40rpx;
		padding: 30rpx 0;
		border-bottom: 1px solid #ebebeb;
		.leftTitle {
			justify-content: start;
			width: 43rpx;
			flex-grow: 1;
			color: #333333;
			font-size: 28rpx;
			.leftImgTip {
				flex-shrink: 0;
				// width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
		}
		.rightTip {
			border: 1px solid #006eeb;
			opacity: 0.5;
			border-radius: 50%;
			width: 32rpx;
			height: 32rpx;
			justify-content: center;
			.xzTip {
				width: 20rpx;
				height: 20rpx;
				border-radius: 99rpx;
				background-color: #006eeb;
			}
		}
	}
	.pushtyle {
		background: #006eeb;
		// box-shadow: 0px 16rpx 16rpx 0px rgba(215, 39, 43, 0.5);
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
		padding: 20rpx 0;
		margin: 0 40rpx;
		margin-top: 40rpx;
	}
}
</style>