<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" ">
	<title id=" idtitle"> 薪必果签约 </title>
	<link rel="stylesheet" href="/css/ele/chalk.css">
	<link rel="stylesheet" href="/css/main.css">
	<link rel="stylesheet" href="/css/fontawesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="/css/autocomplete.css">

	<script src="/js/vue/vue.min.js"></script>
	<script src="/js/vue/vue-router.min.js"></script>
	<script src="/js/vue/vuex.min.js"></script>
	<script src="/js/ele/index.js"></script>
	<style>
		body {
			padding: 0px;
			margin: 0px;
		}

		#loading {
			background-color: #2c3e50;
			height: 100%;
			width: 100%;
			position: fixed;
			z-index: 9999;
			margin-top: 0px;
			top: 0px;
		}

		#loading-center {
			width: 100%;
			height: 100%;
			position: relative;
		}

		#loading-center-absolute {
			position: absolute;
			left: 50%;
			top: 50%;
			height: 50px;
			width: 50px;
			margin-top: -25px;
			margin-left: -25px;
			-ms-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			-webkit-animation: loading-center-absolute 1.5s infinite;
			animation: loading-center-absolute 1.5s infinite;

		}

		.object {
			width: 25px;
			height: 25px;
			background-color: #FFF;
			float: left;

		}

		#object_one {
			-webkit-animation: object_one 1.5s infinite;
			animation: object_one 1.5s infinite;
		}

		#object_two {
			-webkit-animation: object_two 1.5s infinite;
			animation: object_two 1.5s infinite;
		}

		#object_three {
			-webkit-animation: object_three 1.5s infinite;
			animation: object_three 1.5s infinite;
		}

		#object_four {
			-webkit-animation: object_four 1.5s infinite;
			animation: object_four 1.5s infinite;
		}


		@-webkit-keyframes loading-center-absolute {
			100% {
				-webkit-transform: rotate(-45deg);
			}

		}

		@keyframes loading-center-absolute {
			100% {
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}
		}

		@-webkit-keyframes object_one {
			25% {
				-webkit-transform: translate(0, -50px) rotate(-180deg);
			}

			100% {
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}

		}

		@keyframes object_one {
			25% {
				transform: translate(0, -50px) rotate(-180deg);
				-webkit-transform: translate(0, -50px) rotate(-180deg);
			}

			100% {
				transform: translate(0, 0) rotate(-180deg);
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

		@-webkit-keyframes object_two {
			25% {
				-webkit-transform: translate(50px, 0) rotate(-180deg);
			}

			100% {
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

			{
			"icon": "tool-order", "title":"商标列表", "type":"default", "key":"myTmList", "isOnGrid":true
		}

		,

		@keyframes object_two {
			25% {
				transform: translate(50px, 0) rotate(-180deg);
				-webkit-transform: translate(50px, 0) rotate(-180deg);
			}

			100% {
				transform: translate(0, 0) rotate(-180deg);
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

		@-webkit-keyframes object_three {
			25% {
				-webkit-transform: translate(-50px, 0) rotate(-180deg);
			}

			100% {
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

		@keyframes object_three {
			25% {
				transform: translate(-50px, 0) rotate(-180deg);
				-webkit-transform: translate(-50px, 0) rotate(-180deg);
			}

			100% {
				transform: translate(0, 0) rotate(-180deg);
				-webkit-transform: rtranslate(0, 0) rotate(-180deg);
			}
		}

		@-webkit-keyframes object_four {
			25% {
				-webkit-transform: translate(0, 50px) rotate(-180deg);
			}

			100% {
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

		@keyframes object_four {
			25% {
				transform: translate(0, 50px) rotate(-180deg);
				-webkit-transform: translate(0, 50px) rotate(-180deg);
			}

			100% {
				transform: translate(0, 0) rotate(-180deg);
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

		.el-input__inner {
			border: none;
			border-radius: 0px;
			padding: 0px;
			color: #ddd
		}
		.el-input__inner {
			color: #2F2F2F;
		}
		.page_header {
			width:100%;
			text-align: center;
		}

		.modifybtn {
			margin: 20px auto;
			width:300px;
			height:40px;
			text-align: center;
			background:#2b85e4;
			border-radius:20px;
			font-size:16px;
			font-family:HiraginoSansGB-W3;
			font-weight:normal;
			color: #fff;
		}
	</style>
</head>

<body style="overflow: auto;">
	<div id="loading">
		<div id="loading-center">
			<div id="loading-center-absolute">
				<div class="object" id="object_one"></div>
				<div class="object" id="object_two"></div>
				<div class="object" id="object_three"></div>
				<div class="object" id="object_four"></div>
			</div>
		</div>
	</div>
	<div id="app">
		<el-container>
			<div style="margin-top:10px;text-align: center;width: 100%;line-height: 40px;">
				<div style="width:100%;border-bottom:solid 1px #eee;padding-bottom: 5px;">
					<span  style="width:300px;color: #000000;font-size: 18px;font-weight: 700;text-align: center;"> 薪必果签约 </span>
				</div>
				<div style="margin-top:15px;width:100%;text-align: center;">
					<div style="width: 300px;text-align: center;margin: 0 auto">
						<span id="companyTitle" style="padding-left:5px;color:#222222;font-size: 15px;float:left;">{{apiInfo.companyName}}</span>
					</div>
					<div style="clear:both;"></div>
					<el-form :model="params" label-position="left" status-icon :rules="rules" ref="userform" style="width: 300px;text-align: center;margin: 0 auto;">
						<el-form-item label="" prop="idName"  >
							<el-row gutter="1" style="border-bottom:solid 1px #eee;">
								<el-col :span="2"><img src="/imgs/h5/icon_cell_ name.png" style="margin-top:5px"/></el-col>
								<el-col v-if="isIdNameEdit" :span="22" style="text-align:left">
									<el-input  v-model="params.idName" placeHolder="请输入真实姓名" autocomplete="off" style="padding-left:5px;"></el-input>
								</el-col>
							</el-row>
						</el-form-item>
						<el-form-item label="" prop="idNo">
							<el-row gutter="1" style="border-bottom:solid 1px #eee">
								<el-col :span="2"><img src="/imgs/h5/icon_cell_IDnumber.png" style="margin-top:5px"/></el-col>
								<el-col :span="22" style="text-align:left">
									<el-input v-model="params.idNo" placeHolder="请输入您的身份证号" autocomplete="off" style="padding-left:5px;"></el-input>
								</el-col>
							</el-row>
						</el-form-item>
						<el-form-item v-if="apiInfo.form_field.mobile == 'mobile'" label="" prop="mobile">
							<el-row gutter="1" style="border-bottom:solid 1px #eee">
								<el-col :span="2"><img src="/imgs/h5/icon_cell_phone.png" style="margin-top:5px"/></el-col>
								<el-col :span="22" style="text-align:left">
									<el-input v-model="params.mobile" placeHolder="请输入您的手机号" autocomplete="off" style="padding-left:5px;"></el-input>
								</el-col>
							</el-row>
						</el-form-item>
						<el-form-item v-if="apiInfo.form_field.bankNo == 'bankNo'" label="" prop="bankNo">
							<el-row gutter="1" style="border-bottom:solid 1px #eee">
								<el-col :span="2"><img src="/imgs/h5/icon_cell_code.png" style="margin-top:5px"/></el-col>
								<el-col :span="22" style="text-align:left">
									<el-input v-model="params.bankNo" placeHolder="请输入您的银行卡号" autocomplete="off" style="padding-left:5px;"></el-input>
								</el-col>
							</el-row>
						</el-form-item>
						<div style="float:left;">
							<el-checkbox style="float:left" v-model="isaggree"  >我已知悉并同意</el-checkbox>
							<a @click.stop="showaggreement" href="javascript:;"
								style="float:left;text-decoration:none;color:blue;font-size: 13px;
							padding-top: 1px;" target="_blank">《薪必果分包协议》</a>
						</div>

						<el-button :disabled="!isaggree" :loading="btnloading" class="modifybtn" @click="subform"  type="primary">提交信息</el-button>
					</el-form>
				</div>
			</div>
		</el-container>
	</div>
	<script src="/js/vue/jquery.min.js"></script>
	<script src="/js/vue/base64.js"></script>
	<script src="/js/vue/axios.min.js"></script>
	<script src="/js/bpowxsign.js"></script>
</html>
