nizongfeng
/
ZZCS
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
14 MiB
 
 
 
 
Branch: master
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'master'
${ noResults }
ZZCS/coding/find_pwd.html

482 lines
13 KiB
Raw Permalink Blame History 

  1. <!DOCTYPE html>

  2. <html>

  3. 	<head>

  4. 		<meta charset="UTF-8">

  5. 		<link rel="stylesheet" type="text/css" href="css/navStep.css"/>

  6. 		<link rel="stylesheet" type="text/css" href="css/find_pwd.css"/>

  7. 		<title>找回密码</title>

  8. 		<style type="text/css">

  9. 			::-webkit-input-placeholder { /* WebKit browsers */ 

  10. 				color: #cccccc;

  11. 				font-weight: 300;

  12. 			} 

  13. 			:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 

  14. 				color: #cccccc;

  15. 				font-weight: 300;

  16. 			} 

  17. 			::-moz-placeholder { /* Mozilla Firefox 19+ */ 

  18. 				color: #cccccc;

  19. 				font-weight: 300;

  20. 			} 

  21. 			:-ms-input-placeholder { /* Internet Explorer 10+ */ 

  22. 				color: #cccccc;

  23. 				font-weight: 300;

  24. 			}

  25. 			body{

  26. 				margin: 0;

  27. 				padding: 0;

  28. 				font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;

  29. 				font-weight: 300;

  30. 			} 

  31. 			.find_box{

  32. 				margin: 16px;

  33. 				padding: 1px;

  34. 				border-radius: 4px;

  35. 				background-color: #ffffff;

  36. 				box-shadow: 0 2px 4px 0 rgba(62, 67, 85, 0.15);

  37. 				min-width: 1300px;

  38. 				min-height: 600px;

  39. 			}

  40. 			.pwd_box_p1{

  41. 				display: none;

  42. 				width: 370px;

  43. 			    height: 280px;

  44. 			    margin: 0 auto;

  45. 			    position: relative;

  46. 			    top: 20%;

  47. 			    padding: 1px;

  48. 			}

  49. 			.pwd_box_p2{

  50. 				display: none;

  51. 				width: 370px;

  52. 			    height: 280px;

  53. 			    margin: 0 auto;

  54. 			    position: relative;

  55. 			    top: 20%;

  56. 			    padding: 1px;

  57. 			}

  58. 			.pwd_box_p3{

  59. 				display: none;

  60. 				width: 370px;

  61. 			    height: 280px;

  62. 			    margin: 0 auto;

  63. 			    position: relative;

  64. 			    top: 20%;

  65. 			    padding: 1px;

  66. 			}

  67. 			.pwd_box_p4{

  68. 				display: none;

  69. 				width: 370px;

  70. 			    height: 280px;

  71. 			    margin: 93px auto 0;

  72. 			    position: relative;

  73. 			    top: 20%;

  74. 			    padding: 1px;

  75. 			}

  76. 			.part1{

  77. 				width: 368px;

  78. 				height: 28px;

  79. 				margin-top: 20px;

  80. 			}

  81. 			.part2{

  82. 				width: 370px;

  83. 				height: 54px;

  84. 				margin-top: 32px;

  85. 			}

  86. 			.part3{

  87. 				width: 370px;

  88. 				height: 52px;

  89. 			}

  90. 			.part4{

  91. 				width: 370px;

  92. 				height: 28px;

  93. 				padding-top: 1px;

  94. 			}

  95. 			.part5{

  96. 				height: 36px;

  97. 				width: 370px;

  98. 			}

  99. 			.part6{

  100. 				height: 16px;

  101. 				width: 370px;

  102. 			}

  103. 			.part7{

  104. 				height: 215px;

  105. 				width: 370px;

  106. 			}

  107. 			.find_user{

  108. 				width: 370px;

  109. 				height: 52px;

  110. 			}

  111. 			.find_name{

  112. 				font-size: 12px;

  113. 				color: #b9bdc7;

  114. 				margin-bottom: 4px;

  115. 				font-weight: initial;

  116. 			}

  117. 			.find_input{

  118. 				width: 368px;

  119. 				height: 30px;

  120. 				background-color: #fff;

  121. 				border-radius: 4px;

  122. 				box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);

  123. 				border: solid 1px #eaebee;

  124. 			}

  125. 			.find_user_input{

  126. 				width: 368px;

  127. 				height: 30px;

  128. 				background-color: #fff;

  129. 				border-radius: 4px;

  130. 				box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);

  131. 				border: solid 1px #eaebee;

  132. 				transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

  133. 			}

  134. 			.write_user_input{

  135. 				width: 368px;

  136. 				height: 30px;

  137. 				background-color: #fff;

  138. 				border-radius: 4px;

  139. 				box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);

  140. 				border: solid 1px #eaebee;

  141. 			}

  142. 			.write_user_input input{

  143. 			    margin: 0;

  144. 			    border: 0;

  145. 			    outline: none;

  146. 			    height: 18px;

  147. 			    padding: 6px 16px;

  148. 			    width: 286px;

  149. 			    font-size: 14px;

  150. 			    color: #3e4355;

  151. 			    border-radius: 2px;

  152. 			    box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);

  153. 			}

  154. 			.find_user_input input{

  155. 			    margin: 0;

  156. 			    border: 0;

  157. 			    outline: none;

  158. 			    height: 18px;

  159. 			    padding: 6px 16px;

  160. 			    width: 336px;

  161. 			    font-size: 14px;

  162. 			    color: #3e4355;

  163. 			    border-radius: 4px;

  164. 			    box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);

  165. 			}

  166. 			.find_input input{

  167. 			    margin: 0;

  168. 			    border: 0;

  169. 			    outline: none;

  170. 			    height: 18px;

  171. 			    padding: 6px 16px;

  172. 			    width: 258px;

  173. 			    font-size: 14px;

  174. 			    color: #3e4355;

  175. 			    border-radius: 2px;

  176. 			    box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);

  177. 			}

  178. 			.pwd_eye_on{

  179. 			    background-image: url(images/openeyes.png);

  180. 			    background-size: 16px 8px;

  181. 			    background-position: center;

  182. 			    background-repeat: no-repeat;

  183. 			    width: 48px;

  184. 			    height: 30px;

  185. 			    float: right;

  186. 			    border-radius: 2px;

  187. 			    cursor: pointer;

  188. 			}

  189. 			.pwd_eye_off{

  190. 			    background-image: url(images/closeeyes.png);

  191. 			    background-size: 16px 8px;

  192. 			    background-position: center;

  193. 			    background-repeat: no-repeat;

  194. 			    width: 48px;

  195. 			    height: 30px;

  196. 			    float: right;

  197. 			    border-radius: 2px;

  198. 			    cursor: pointer;

  199. 			}

  200. 			.find_code{

  201. 				font-size: 12px;

  202. 			    color: #fff;

  203. 			    border-radius: 4px;

  204. 			    background-color: #4191ff;

  205. 			    width: 74px;

  206. 			    height: 26px;

  207. 			    float: right;

  208. 			    margin: 2px;

  209. 			    text-align: center;

  210. 			    line-height: 26px;

  211. 			    cursor: pointer;

  212. 			}

  213. 			.code_time{

  214. 				font-size: 12px;

  215. 			    color: #fff;

  216. 			    border-radius: 4px;

  217. 			    background-color: #b9bdc7;

  218. 			    width: 74px;

  219. 			    height: 26px;

  220. 			    float: right;

  221. 			    margin: 2px;

  222. 			    text-align: center;

  223. 			    line-height: 26px;

  224. 			    cursor: pointer;

  225. 			}

  226. 			.cut_user{

  227. 				width: 368px;

  228. 				height: 28px;

  229. 				background-color: #3373cb;

  230. 				border-radius: 4px;

  231. 				border: solid 1px #eaebee;

  232. 			}

  233. 			.cut_sel{

  234. 				width: 182px;

  235. 				height: 26px;

  236. 				background-color: #3373cb;

  237. 				color: #ffffff;

  238. 				font-size: 12px;

  239. 				text-align: center;

  240. 				line-height: 26px;

  241. 				float: left;

  242. 				border: 1px solid #3373cb;

  243. 				border-radius: 4px;

  244. 				cursor: pointer;

  245. 			}

  246. 			.cut_nosel{

  247. 				width: 182px;

  248. 				height: 26px;

  249. 				background-color: #ffffff;

  250. 				color: #3373cb;

  251. 				font-size: 12px;

  252. 				text-align: center;

  253. 				line-height: 26px;

  254. 				float: left;

  255. 				border: 1px solid #3373cb;

  256. 				border-radius: 4px;

  257. 				cursor: pointer;

  258. 			}

  259. 			.alert_warning{

  260. 				height: 16px;

  261. 				width: 370px;

  262. 				font-size: 12px;

  263. 				color: #ff4141;

  264. 				line-height: 16px;

  265. 				margin: 5px 0 6px 0;

  266. 			}

  267. 			.find_submit{

  268. 				width: 370px;

  269. 				height: 36px;

  270. 				border-radius: 4px;

  271. 				background-color: #3e4355;

  272. 				color: #ffffff;

  273. 				font-size: 14px;

  274. 				line-height: 36px;

  275. 				text-align: center;

  276. 				cursor: pointer;

  277. 				font-weight: 300;

  278. 			

  279. 			}

  280. 			.go_login{

  281. 				height: 16px;

  282. 				width: 370px;

  283. 				font-size: 12px;

  284. 				color: #3e4355;

  285. 				line-height: 16px;

  286. 				margin-top: 8px;

  287. 				text-align: right;

  288. 			}

  289. 			.bind_phone{

  290. 				width: 370px;

  291. 				height: 26px;

  292. 				font-size: 24px;

  293. 				color: #3e4355;

  294. 				line-height: 1.1;

  295. 			}

  296. 			.sub_bg_color{

  297. 				background-color: #3e4355!important;

  298. 			}

  299. 			.nosub_bg_color{

  300. 				background-color: #b9bdc7!important;

  301. 			}

  302. 			.no_tel{

  303. 				display: none;

  304. 			}

  305. 			.no_tel_text{

  306. 				font-size: 14px;

  307. 				line-height: 1.29;

  308. 				color: #354052;

  309. 				padding-left: 2px;

  310. 			}

  311. 			.reset_img{

  312. 				background-image: url(images/right.png);

  313. 				background-position: center;

  314. 				background-size: 66px 66px;

  315. 				background-repeat: no-repeat;

  316. 				width: 370px;

  317. 				height: 66px;

  318. 				margin-bottom: 16px;

  319. 				

  320. 			}

  321. 			.reset_text{

  322. 				width: 370px;

  323. 				text-align: center;

  324. 				line-height: 24px;

  325. 				height: 24px;

  326. 				color: #3e4355;

  327. 				font-size: 24px;

  328. 			}

  329. 			.company_info{

  330. 				color: #b9bdc7;

  331. 			    font-size: 12px;

  332. 			    position: fixed;

  333. 			    bottom: 28px;

  334. 			    width: 100%;

  335. 			    text-align: center;

  336. 			    font-weight: 300;

  337. 			}

  338. 			.add_border{

  339. 				font-weight: 300;

  340. 			}

  341. 			.add_border:hover{

  342. 				border-bottom: 1px solid;

  343. 			}

  344. 		</style>

  345. 	</head>

  346. 	<body style="background-color: #f4f5f9;">

  347. 		<div class="find_box">

  348. 			<div id="navStep" class="ui-stepBar-wrap" style="margin: 16px auto;width: 1168px;font-weight: initial;">

  349. 			    <div class="ui-stepBar">

  350. 			        <div class="ui-stepProcess"></div>

  351. 			    </div>

  352. 			    <div class="ui-step-box">

  353. 			        <div class="ui-stepInfo">

  354. 			            <div class="ui-step-every">

  355. 			                <div class="ui-stepSequence">1</div>

  356. 			                <div class="ui-stepName">确认帐号</div>

  357. 			            </div>

  358. 			        </div>

  359. 			        <div class="ui-stepInfo">

  360. 			            <div class="ui-step-every">

  361. 			                <div class="ui-stepSequence">2</div>

  362. 			                <div class="ui-stepName">身份验证</div>

  363. 			            </div>

  364. 			        </div>

  365. 			        <div class="ui-stepInfo">

  366. 			       	    <div class="ui-step-every">

  367. 			                <div class="ui-stepSequence">3</div>

  368. 			                <div class="ui-stepName">密码重置</div>

  369. 			            </div>

  370. 			        </div>

  371. 			    </div>

  372. 			</div>

  373. 			<!--修改密码操作区域 第一步-->

  374. 			<div class="pwd_box_p1">

  375. 				<div class="part1"></div>

  376. 				<div class="part2"></div>

  377. 				<div class="part3">

  378. 					<div class="find_user">

  379. 		    				<div class="find_name">确认帐号</div>

  380. 		    				<div class="find_user_input">

  381. 		    					<input class="add_input" id="user" type="text" id="" value="" placeholder="请输入帐号" />

  382. 		    				</div>

  383. 		    			</div>

  384. 				</div>

  385. 	    			<div class="part4">

  386. 	    				<div id="submit_warning1" class="alert_warning"></div>

  387. 	    			</div>

  388. 				<div class="part5">

  389. 					<div id="step_first" class="find_submit">下一步</div>

  390. 				</div>

  391. 				<div class="part6">

  392. 					<div class="go_login"><span onclick="findPwdStep.backLogin()" class="back_login add_border" style="cursor: pointer;">返回登录</span></div>

  393. 				</div>

  394. 			</div>

  395. 			<!--操作区域 第二步-->

  396. 			<div class="pwd_box_p2">

  397. 				<div class="part1">

  398. 					<div class="cut_user">

  399. 						<div id="have_tel" class="cut_sel">发送至手机</div>

  400. 						<div id="nothave_tel" class="cut_nosel">手机未绑定或已停用</div>

  401. 					</div>

  402. 				</div>

  403. 				<div class="part2">

  404. 					<div id="bind_phone_no" class="bind_phone" ></div>

  405. 					<div id="no_tel" class="no_tel">

  406. 						<div class="no_tel_text">手机未绑定或已停用，</div>

  407. 						<div class="no_tel_text">请发送帐号和新手机号至邮箱info@zhizhuchuxing.com</div>

  408. 						<div class="no_tel_text">申请修改！</div>

  409. 					</div>

  410. 				</div>

  411. 				<div class="part3">

  412. 					<div id="control_code" class="find_user">

  413. 		    				<div class="find_name">输入验证码</div>

  414. 		    				<div class="find_input">

  415. 		    					<input id="code_input" type="text" value="" placeholder="请输入验证码" />

  416. 		    					<div id="get_code" class="find_code">获取验证码</div>

  417. 		    				</div>

  418. 		    			</div>

  419. 					

  420. 				</div>

  421. 	    			<div class="part4">

  422. 	    				<div id="submit_warning2" class="alert_warning"></div>

  423. 	    			</div>

  424. 				<div class="part5">

  425. 					<div id="step_second" class="find_submit nosub_bg_color">下一步</div>

  426. 				</div>

  427. 				<div class="part6">

  428. 					<div class="go_login"><span onclick="findPwdStep.backLogin()" class="back_login add_border" style="cursor: pointer;">返回登录</span></div>

  429. 				</div>

  430. 			</div>

  431. 			<!--操作区域 第三步-->

  432. 			<div class="pwd_box_p3">

  433. 				<div class="part1"></div>

  434. 				<div style="height: 60px;margin-top: 26px;" class="part2">

  435. 					<div class="find_user">

  436. 		    				<div class="find_name">输入新密码</div>

  437. 		    				<div class="write_user_input">

  438. 		    					<input id="new_pwd" type="password" value="" />

  439. 		    					<div class="pwd_eye_on" onclick="findPwdStep.seePwd(this)" id="cut_new_pwd1"></div>

  440. 		    				</div>

  441. 		    			</div>

  442. 				</div>

  443. 				<div class="part3">

  444. 					<div class="find_user">

  445. 		    				<div class="find_name">确认新密码</div>

  446. 		    				<div class="write_user_input">

  447. 		    					<input id="confirm_new_pwd" type="password" value="" />

  448. 		    					<div class="pwd_eye_on" onclick="findPwdStep.seePwd(this)" id="cut_new_pwd2"></div>

  449. 		    				</div>

  450. 		    			</div>

  451. 				</div>

  452. 	    			<div class="part4">

  453. 	    				<div id="submit_warning3" class="alert_warning"></div>

  454. 	    			</div>

  455. 				<div class="part5">

  456. 					<div id="step_third" class="find_submit">确认提交</div>

  457. 				</div>

  458. 				<div class="part6">

  459. 					<div class="go_login"><span onclick="findPwdStep.backLogin()" class="back_login add_border" style="cursor: pointer;">返回登录</span></div>

  460. 				</div>

  461. 			</div>

  462. 			

  463. 			<!--操作区域 第四步-->

  464. 			<div class="pwd_box_p4">

  465. 				<div class="part7">

  466. 					<div class="reset_img"></div>

  467. 					<div class="reset_text">密码重置成功</div>

  468. 				</div>

  469. 				<div class="part5">

  470. 					<div onclick="findPwdStep.backLogin()" id="step_four" class="find_submit">立即登录</div>

  471. 				</div>

  472. 			</div>

  473. 		</div>

  474. 		<div class="company_info">蜘蛛行网络科技有限公司版权所有，@2016 沪ICP备16006417</div>

  475. 		<script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>

  476. 		<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>

  477. 		<!--<script src="js/base_path.js" type="text/javascript" charset="utf-8"></script>-->

  478. 		<script src="js/navStep.js" type="text/javascript" charset="utf-8"></script>

  479. 		<script src="js/find_pwd.js" type="text/javascript" charset="utf-8"></script>

  480. 	</body>

  481. </html>