281 lines
6.0 KiB
Plaintext
281 lines
6.0 KiB
Plaintext
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>【HTML+CSS】实现移动端高级简约的登录注册界面</title>
|
|
</head>
|
|
${Scripts.src(zhiqim_uploadlarge.js)}
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* 去除a标签的下划线 */
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* 去除li标签的序列符号（小黑点） */
|
|
li {
|
|
list-style: none;
|
|
}
|
|
|
|
body {
|
|
background-image: linear-gradient(to right, #3e9597, #214c52);
|
|
}
|
|
|
|
.box {
|
|
/* 分布式布局 */
|
|
display: flex;
|
|
justify-self: center;
|
|
}
|
|
|
|
/* 登录、注册外div公用样式 */
|
|
.login,
|
|
.register {
|
|
width: 20rem;
|
|
height: 30.5rem;
|
|
background-color: white;
|
|
border-radius: 0.5rem;
|
|
margin: 1.25rem;
|
|
}
|
|
|
|
/* 登录、注册顶部div共同样式 */
|
|
.login_top,.register_top{
|
|
width: 20rem;
|
|
height: 12rem;
|
|
color: white;
|
|
border-radius: 0.5rem 0.5rem 0 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.login_top{
|
|
background: #214c52;
|
|
}
|
|
.register_top{
|
|
background: #3e9597;
|
|
}
|
|
|
|
.login_top img {
|
|
width: 5.5rem;
|
|
height: 5.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.register_top {
|
|
padding-top: 2.5rem;
|
|
/* 添加内间距防止div扩充 */
|
|
box-sizing:border-box;
|
|
}
|
|
.register_top div{
|
|
width: 5.5rem;
|
|
height: 5.5rem;
|
|
background: white;
|
|
border-radius: 10rem;
|
|
color: silver;
|
|
font-size: 4rem;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
line-height: 5.5rem;
|
|
}
|
|
|
|
.login_bottom,.register_bottom{
|
|
text-align: center;
|
|
}
|
|
|
|
/* 登录、注册表单共同样式 */
|
|
.login_bottom .input{
|
|
width: 17.5rem;
|
|
height: 2.5rem;
|
|
margin-top: 2rem;
|
|
padding-left: 0.6rem;
|
|
border-radius: 0.6rem;
|
|
border: 0.1rem solid silver;
|
|
/* 去除表单点击后出现的边框 */
|
|
outline: none;
|
|
color: reb(107,107,107);
|
|
}
|
|
.register_bottom .input{
|
|
width: 17.5rem;
|
|
height: 2.5rem;
|
|
margin-top: 1rem;
|
|
padding-left: 0.6rem;
|
|
border-radius: 0.6rem;
|
|
border: 0.1rem solid silver;
|
|
/* 去除表单点击后出现的边框 */
|
|
outline: none;
|
|
color: reb(107,107,107);
|
|
}
|
|
|
|
|
|
.login_bottom p{
|
|
font-size: 0.8rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* 使复选框与后面文字水平对齐 */
|
|
.login_bottom p input{
|
|
vertical-align: middle;/* vertical 垂直的 middle 中间 */
|
|
}
|
|
|
|
.login_bottom p span{
|
|
margin-right: 0.5rem;
|
|
color: #757575;
|
|
}
|
|
|
|
.login_bottom p a{
|
|
color: #214c52;
|
|
}
|
|
|
|
.register_bottom p{
|
|
font-size: 0.8rem;
|
|
margin-top: 1rem;
|
|
}
|
|
.register_bottom p span{
|
|
margin-right: 0.5rem;
|
|
color: #757575;
|
|
}
|
|
|
|
.register_bottom p a{
|
|
color: #214c52;
|
|
}
|
|
|
|
/* 登录、注册按钮共同样式 */
|
|
.login_bottom button,.register_bottom button{
|
|
width: 18rem;
|
|
height: 2.8rem;
|
|
color: white;
|
|
margin-top: 2rem;
|
|
border-radius: 0.6rem;
|
|
border: none;
|
|
}
|
|
|
|
.login_bottom button{
|
|
background: #214c52;
|
|
margin-top: 3.6rem;
|
|
}
|
|
.register_bottom button{
|
|
background: #3e9597;
|
|
}
|
|
|
|
/* 鼠标滑过按钮出现阴影效果 */
|
|
.login_bottom button:hover,.register_bottom button:hover{
|
|
box-shadow: 0.2rem 0.2rem 0 rgba(0,0,0,0.3);
|
|
}
|
|
.login_bottom .inputYzm{
|
|
width: 10.5rem;
|
|
height: 2.5rem;
|
|
margin-top: 0.1rem;
|
|
padding-left: 0.6rem;
|
|
border-radius: 0.6rem;
|
|
border: 0.1rem solid silver;
|
|
/* 去除表单点击后出现的边框 */
|
|
outline: none;
|
|
color: reb(107,107,107);
|
|
}
|
|
.login_bottom .sendYzm{
|
|
width: 6rem;
|
|
height: 2.5rem;
|
|
color: white;
|
|
border-radius: 0.6rem;
|
|
border: none;
|
|
}
|
|
</style>
|
|
<script>
|
|
function iphoneLogin(){
|
|
var yzm = designId = Z("#yzm").val();
|
|
var mobile = designId = Z("#mobile").val();
|
|
|
|
if(mobile == null || mobile == ""){
|
|
Z.alert("请填写手机号");
|
|
return;
|
|
}
|
|
|
|
if(yzm == null || yzm == ""){
|
|
Z.alert("请填写验证码");
|
|
return;
|
|
}
|
|
|
|
var ajax = new Z.Ajax();
|
|
ajax.setClassName("IphoneLoginPresenter");
|
|
ajax.setMethodName("doLogin");
|
|
ajax.addParam("yzm", yzm);
|
|
ajax.addParam("mobile", mobile);
|
|
ajax.setFailureAlert();
|
|
ajax.setSuccess();
|
|
ajax.execute();
|
|
}
|
|
|
|
|
|
function doSendSmsCode(){
|
|
|
|
var operatorMobile = Z("#mobile").val();
|
|
if (Z.V.isEmptyBlank(operatorMobile))
|
|
{
|
|
Z.failure("手机号不能为空！");
|
|
Z("#mobile").focus();
|
|
return;
|
|
}
|
|
|
|
if (Z('#getsms-submit')[0].innerHTML != "获取验证码" && Z('#getsms-submit')[0].innerHTML != "重新发送") {
|
|
Z.failure("请稍后再试");
|
|
return ;
|
|
}
|
|
|
|
var ajax = new Z.Ajax();
|
|
ajax.setContextPath("${context.getContextPath()}");
|
|
ajax.setClassName("IphoneLoginPresenter");
|
|
ajax.setMethodName("sendSms");
|
|
ajax.addParam("operatorCode", "简奈编辑器用户");
|
|
ajax.addParam("mobile", operatorMobile);
|
|
ajax.setFailureAlert();
|
|
ajax.setSuccess();
|
|
ajax.execute();
|
|
setYzmLabel();
|
|
}
|
|
|
|
var wait = 60;
|
|
function setYzmLabel() {
|
|
if (wait == 0)
|
|
{
|
|
Z('#getsms-submit')[0].innerHTML = "重新发送";
|
|
wait = 60;
|
|
}
|
|
else
|
|
{
|
|
Z('#getsms-submit')[0].innerHTML = "已发送(" + wait + ")";
|
|
wait--;
|
|
setTimeout(function () {
|
|
setYzmLabel()
|
|
}, 1000);
|
|
}
|
|
|
|
};
|
|
</script>
|
|
<body>
|
|
<div class="box" style="margin-left:20px;">
|
|
<!-- 登录 -->
|
|
<div class="login">
|
|
<div class="login_top">
|
|
<img src="/zinc/images/login_new.png">
|
|
<h2>欢迎登录简奈自助设计平台</h2>
|
|
</div>
|
|
<div class="login_bottom">
|
|
|
|
|
|
<!-- 密码输入框 -->
|
|
<input type="textt" id="mobile" class="input" placeholder="请输入手机号" />
|
|
<!--验证码-->
|
|
<input type="text" id="yzm" class="inputYzm" placeholder="请输入验证码" />
|
|
<button class="sendYzm" id="getsms-submit" onclick="doSendSmsCode()">获取验证码</button>
|
|
<!-- 登录按钮 -->
|
|
<button OnClick="iphoneLogin();">登录</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html> |