xiuli.gao
/
youhuiquan


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>招募令</title>
	<script src="./js/jquery.js"></script>
	<link rel="stylesheet" type="text/css" href="./font/iconfont.css">
	<style>
		*{margin:0;padding:0;color: #333;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}
		body{font-size:0.75rem;font-family: 'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif; background:#fff;-webkit-text-size-adjust:100%;}
		input{outline:none;-webkit-appearance: none;font-size: 0.14rem;} 
		body,html{
			width: 100%;
			height: 100%;
		}
		.warp{
			width: 100%;
			overflow: hidden;			
		}
		.enlist_img{
			width: 100%;
		}
		.enlist_img img{
			width: 100%;
			height: 100%;
		}
		.enlist_form{
			width: 100%;
			height: auto;
			padding:0 5%;
			background-color: #fff;
			font-size: 0.42rem;
			Letter-spacing:0.01rem;
			padding-bottom: 5%;
			box-sizing: border-box;
		}
		.enlist_form_p{
			line-height: 0.4rem;
			font-size: 0.17rem;
			font-weight: normal;
			color: #000000;
		}
		.fbc_required{
			margin-left: 0.05rem;
    		color: #DA2824;
		}
		.enlist_form_input{
			width: 100%;
			height: 0.37rem;
			background: #fff;
			border: 1px solid #D3D3D3;
			margin-bottom: 3%;

		}
		.enlist_form_input_icon{
			float: left;
			width: 10%;
			height: 100%;
			padding: 2%;
			box-sizing: border-box;
		}
		.enlist_form_input_icon i{
			display: block;
			color: #7fbceb;
			font-size: 0.2rem;
		}
		.enlist_form_input_icon img{
			width: 100%;
			height: 100%;
		}
		.enlist_form_input_item{
			float: left;
			width: 90%;
			height: 100%;
			border: none;
		}
		.enlist_form_input_item:focus{
			border:none;
		}
		.enlist_form_button{
			width: 80%;
			height:0.4rem;
			line-height:0.4rem;
			color: #fff;
			font-size: 0.16rem;
			text-align: center;
			background-color: #3a67a0;
			margin: auto;
			margin-top: 0.5rem;
			border-radius: 0.02rem;
		}
		.mask{
			background: rgba(0,0,0,0.4013);
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			visibility:hidden;
		}
		.mask .content{
			width: 2.98rem;
			background: #f9f9f9;
			border-radius: 0.16rem;
		}
		.mask .content h3{
			color: #090909;
			font-size: 0.16rem;
			line-height: 0.22rem;
			padding-top:0.12rem;
			padding-bottom: 0.08rem;
			text-align: center;
		}
		.mask .content p{
			color: #090909;
			line-height: 0.23rem;
			font-size: 0.14rem;
			margin-bottom: 0.15rem;
			text-align: center;
		}
		.mask .content div{
			border-top: 0.01rem solid rgba(191,191,191,0.1998);
			color: #2c8ad0;
			text-align: center;
			font-size: 0.14rem;
			line-height: 0.2rem;
			padding: 0.09rem 0 0.12rem 0;
		}
	</style>
    

</head>
<body>
    <div class="warp">
		<div class="enlist_img">
			<img src="images/KX01.png"  style="display: block;">
		</div>
		<form class="enlist_form">
			<p class="enlist_form_p">姓名<span class="fbc_required">*</span></p>
			<div class="enlist_form_input">
				<div class="enlist_form_input_icon">
					<i class="iconfont icon-icon1"></i>
				</div>
				<input type="text" class="enlist_form_input_item" id="user">
			</div>
			<p class="enlist_form_p">手机<span class="fbc_required">*</span></p>
			<div class="enlist_form_input">
				<div class="enlist_form_input_icon">
					<i class="iconfont icon-icon"></i>
				</div>
				<input type="tel" class="enlist_form_input_item" id="tel" >
			</div>
			<p class="enlist_form_p">邮箱<span class="fbc_required">*</span></p>
			<div class="enlist_form_input">
				<div class="enlist_form_input_icon">
					<i class="iconfont icon-email-outline"></i>
				</div>
				<input type="email" class="enlist_form_input_item" id="email">
			</div>
			<p class="enlist_form_p">微信<span class="fbc_required">*</span></p>
			<div class="enlist_form_input">
				<div class="enlist_form_input_icon">
					<i class="iconfont icon-weixin"></i>
				</div>
				<input type="text" class="enlist_form_input_item" id="vx">
			</div>
			<p class="enlist_form_p">QQ<span class="fbc_required">*</span></p>
			<div class="enlist_form_input">
				<div class="enlist_form_input_icon">
					<i class="iconfont icon-qq"></i>
				</div>
				<input type="number" class="enlist_form_input_item" id="qq">
			</div>
			<div class="enlist_form_button">立即报名</div>
		</form>
		<div class="mask">
			<div class="content">
				<h3>提示</h3>
				<p>提示内容</p>
				<div onclick="iknow()">我知道了</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
	window.onresize = function(){
		document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
	} 
	//弹层
	function iknow() {
		$(".mask").css("visibility","hidden");
	}
	//获取焦点时 改变图片颜色 边框颜色
	$("input").focus(function(e){
		$(e.currentTarget).parent().css("border-color","#a5a5a5");
        $(e.currentTarget).prev().find('i').css('color', '#2c8ad0');
    });
    $("input").blur(function(e){
		$(e.currentTarget).parent().css("border-color","#D3D3D3");
        $(e.currentTarget).prev().find('i').css('color', '#7fbceb');
    });
	$('.enlist_form_button').click(function(){
		getData();
	})

	//请求数据
	function getData(){
		
		$.ajax({ 
			type: "GET",
			url: "https://tbk.726p.com/api/v2/signUp/insertInfo", 
			data:{
				user:$('#user').val(),
				tel:$('#tel').val(),
				email:$('#email').val(),
				vx:$('#vx').val(),
				qq:$('#qq').val(),
				source:'1000'
			}, 
			success:function(msg){
				// console.log(msg)
				//判断返回值
				if(msg.errno==4003){
					$('.mask .content p').html(msg.err)
					$('.mask').css("visibility","visible");	
					$('input').val('');
				}else if(msg.errno==10009){
					$('.mask').css("visibility","visible");	
					$('.mask .content p').html(msg.rst.msg)
				}
			},
			fail:function (err){
				console.log(err)
			}
		});
	}
</script>
</html>