master

分支 (1)

管理

管理

master

tower-monitoring-system
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>登录</title>
		<!-- Bootstrap -->
		<link rel="stylesheet" href="css/bootstrap.min.css">
	</head>
	<body style=" background: url(images/login-background.jpg) no-repeat center center fixed; background-size: 100%;">
		<div style="height:50px;width: 200px;margin-left:63%;margin-top: 6%;">
			<h3 style="color: #FFFFFF;">铁塔监测系统</h3>
		</div>
		<div class="modal-dialog" style="margin-top: 2px;margin-left: 57%; border-color: #0000FF;">
			<div class="modal-content col-md-7" style="border: 4px solid #F0F0F0;">
				<div class="modal-header">
					<h4 class="modal-title text-center">登录</h4>
				</div>
				<form class="form-horizontal">
					<div class="modal-body" id = "model-body">
						<div class="form-group">
							<input style="width: 280px;margin-left: 16px;" id="phone" type="text" class="form-control"placeholder="手机号登录" autocomplete="off">
						</div>
						<div id="passworDiv" class="form-group">
							<div class="container">
								<div class="row" style="border: 0px;">
									<div class="col-lg-2" style="border: #000000 solid 0px; margin-left: 0px;">
										<input style="width: 280px;margin-left: 0px;" type="password" class="form-control left" placeholder="密码" autocomplete="new-password">
									</div>
								</div>
							</div>
						</div>
						<div id="messageDiv"  class="form-group" hidden>
							<div class="container">
								<div class="row" style="border: 0px;">
									<div class="col-lg-2" style="border: #000000 solid 0px; margin-left: 0px;">
										<input style="margin-left: 0px;" type="text" class="form-control left" placeholder="验证码" autocomplete="new-password">
									</div>
									<div class="col-lg-2">
										<button type="button" style="width:85px;height:30px" class="btn-sm btn-primary form-control">获取验证码</button>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<div class="form-group">
							<button type="button" class="btn btn-primary form-control" onclick="window.location.href='main.html';">登录</button>
						</div>
						<button id="changeButton" type="button" style="background-color: white;color: rgb(40, 96, 144);border-style :none;">验证码登录</button>
					</div>
				</form>
			</div>
		</div>


		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script>
			$("#changeButton").click(function(){
			  if($("#changeButton").text()=="验证码登录"){
				  $("#passworDiv").hide()
				  $("#messageDiv").show()
				  $("#changeButton").text("密码登录")
			  }else if($("#changeButton").text()=="密码登录"){
				  $("#messageDiv").hide()
				  $("#passworDiv").show()
				  $("#changeButton").text("验证码登录")
			  }
			})
		</script>
	</body>
</html>