first commit
This commit is contained in:
@@ -0,0 +1,281 @@
|
||||
<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>
|
||||
Fai riferimento in un nuovo problema
Block a user