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

<head>
	<meta charset="utf-8">
	<title id="needh5">找回密码</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/ele/index.js"></script>
	<style type="text/css">
		html {
			width: 100%;
			height: 100%;
		}
		#app {
			width: 100%;
			height: 100%;	
		}

		.appBack {
			background: url('https://gsb-zc.oss-cn-beijing.aliyuncs.com//zc_11021553049639917201920104039917bpohhr_login_bg.png');
			background-size: 100% 100%;
			width: 100%;
			height: 100%;
		}

		.appbody {
			margin: 0 auto;
			width: 1200px;
			height: 59px;
			text-align: left;
		}

		.appTop {
			/* margin: 16px 1454px 17px 373px; */
			width: 93px;
			height: 26px;
			margin-top: 14px;
		}

		.appBox {
			/* padding: 174px 360px 267px 360px; */
			/* padding-top: 100px; */
			/* padding-top: calc(25% - 292px); */
			/* width: 1200px; */
			/* height: 580px; */
			/* margin: 0 auto; */
			width: 100%;
			height: 100%;

		}

		.loginBox {
			/* position:relative; */
			width: 1200px;
			height: 580px;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}

		.identifybox {
			display: flex;
			justify-content: space-between;
			margin-top: 7px;
		}

		.appBotton {
			margin-top: 10px;
			margin-left: 445px;
		}

		.itemLaber .el-form-item__label {
			color: #666666;
			font-size: 14px;
			font-weight: bold;
			margin-left: 0px;
		}

		.grayLine {
			background: #E8E8E8;
			width: 300px;
			height: 1px;
			float: left;
			margin: 10px 0px;

		}

		::-webkit-input-placeholder {
			/* WebKit, Blink, Edge */
			color: #c0c4cc;
			font-size: 14px;
		}

		:-moz-placeholder {
			/* Mozilla Firefox 4 to 18 */
			color: #c0c4cc;
			font-size: 14px;
		}

		::-moz-placeholder {
			/* Mozilla Firefox 19+ */
			color: #c0c4cc;
			font-size: 14px;
		}

		:-ms-input-placeholder {
			/* Internet Explorer 10-11 */
			color: #c0c4cc;
			font-size: 14px;
		}
		.back {
			color: #666666; 
			font-size: 14px;
			width: 214px;
			cursor: pointer;
		}
		.coderow {
			width:300px;
		}
		.codeinput {
			float:left;
			width:180px;
			height:40px;
		}
		.codesvg {
			width:100px;
			height:40px;
			float:left;
			margin-left: 20px;
			cursor: pointer;
		}
		.codebtn {
			color: #54C4A7;
			font-size: 14px;
			width: 99px;
			height: 40px;
			font-weight:bold;
			background-color: #E7F9F4;
			border: 1px solid #5FD7B8;
			border-radius: 3px;
			margin-left: 20px;
			padding-left: -5px;
			cursor: pointer;
		}
		.el-form-item__content {
			line-height: 20px;
			position: relative;
			font-size: 14px;
		}
	</style>
</head>

<body style="overflow: hidden; width: 100%; height: 100%;">
	<div id="app">
		<div class="appBack">
			<!-- <div :style="appBox"> -->
			<div class="appBox">
				<div class="loginBox">
					<img
						src="https://gsb-zc.oss-cn-beijing.aliyuncs.com//zc_42731556107828871201924201028871xbg_bg.png" />
					<div
						style="position:absolute;top: 60px;left: 800px;background-color:white;width: 340px;height: 460px;">
						<el-form style="margin:15px 20px 10px 20px;" :model="dataForm" :rules="rules" ref="dataForm"
							  class="demo-ruleForm">
							<span @click="goback" class="back"><i class="el-icon-back" style="color:#333333"></i> 找回密码</span>
							<label class="grayLine"></label>

							<el-form-item label="手机号：" prop="mobile" class="itemLaber" >
								<el-input v-model="dataForm.mobile" style="width:300px;height:40px;"
									placeholder="请输入手机号" ></el-input>
							</el-form-item>
							<el-form-item label="验证码：" prop="captcha" class="itemLaber" style="margin-top:-15px" >
								<div class="coderow" style="display:inline-block;">
									<el-input v-model="dataForm.captcha" class="codeinput"
										placeholder="请输入图形验证码"  ></el-input>
									<div @click="captcha" id = "captchaDiv" class="codesvg"></div>
								</div>
							</el-form-item>
							<el-form-item label="" prop="vcode" class="itemLaber"  >
								<div class="coderow">
									<el-input v-model="dataForm.vcode" class="codeinput"
										placeholder="请输入验证码"  ></el-input>
									<input :loading="sendCodeLoading" type="button" @click="sendCode" class="codebtn" :value="sendCodeText" ></input>
								</div>
							</el-form-item>

							<el-form-item label="登录密码：" prop="passwd" class="itemLaber"  style="margin-top:-15px">
								<el-input type="password" v-model="dataForm.passwd" style="width:300px;height:40px;"
									placeholder="请输入密码"  ></el-input>
							</el-form-item>
							<el-button @click="sub" style="width:300px; height:40px; background-color: #5FD7B8; color: #FFFFFF; font-size: 18px;" >提交</el-button>
						</el-form>
					</div>
					<div class="appBotton">
						<span style="color:#CCCCCC;padding: 20px;font-size: 16px;">版权所有©汉唐信通（北京）科技有限公司</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="/js/vue/jquery.min.js"></script>
	<script src="/js/vue/axios.min.js"></script>
	<script src="/js/login/forgetent.js"></script>
</body>


</html>