验证码

最新推荐文章于 2025-02-26 20:36:13 发布

原创最新推荐文章于 2025-02-26 20:36:13 发布 · 935 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>登录主页</title>
<link rel="icon" type="image/x-icon" href=""/>
<link rel="stylesheet" href="../../assets/layui/css/layui.css">

<link rel="stylesheet" href="../../assets/bootstrap-3.3.7/bootstrap3/css/bootstrap.min.css">

<script src="../../assets/js/jquery-3.1.1.min.js"></script>
<script src="../../assets/layui/layui.all.js"></script>
<script src="../../assets/js-v/config.js"></script>

.inputDiv {
position: absolute;
margin-top: 3%;
width: 90%;
margin-left: 7%;
border: 0;
border-bottom: 1px solid rgba(230, 230, 230, 1);
}

/*.inputDiv1 {*/
/* position: absolute;*/
/* margin-top: 3%;*/
/* width: 80%;*/
/* padding-left: -10%;*/
/* border: 0;*/
/* border-bottom: 1px solid rgba(230, 230, 230, 1);*/
/*}*/

.input-p {
position: absolute;
margin-top: 2.4%;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(58, 58, 58, 1);
line-height: 12px;
}

.input-a {

width: 50%;
position: absolute;
margin-top: -7%;
margin-left: 67%;
font-size: 15px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgb(201, 68, 53);
line-height: 12px;
}

.layui-input::-webkit-input-placeholder {
font-size: 15px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(179, 179, 179, 1);
line-height: 19px;
}

li {
width: 50%;
}

.layui-tab-brief > .layui-tab-title .layui-this {
color: rgba(58, 58, 58, 1);
}

.layui-tab-brief > .layui-tab-more li.layui-this:after, .layui-tab-brief > .layui-tab-title .layui-this:after {
border: none;
border-radius: 0;
border-bottom: 2px solid rgba(58, 58, 58, 1);
}

.reg {
position: absolute;
margin-top: 14%;
margin-left: 7%;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(179, 179, 179, 1);
line-height: 17px;
}

.f-div {
position: absolute;
margin-top: 43%;
}

.f-div img {
position: absolute;
margin-top: 10%;
margin-left: 30%;
}

.f-div span {
margin-left: 14%;
height: 16px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(179, 179, 179, 1);
line-height: 18px;
}

h3 {
height: 18px;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: bold;
color: rgba(255, 255, 255, 1);
line-height: 17px;
}

body {
margin: 0;
padding: 0;
}

.modal_content {
padding: 30px;
display: flex;
justify-content: center;
flex-direction: column;
}

.modal_content > div {
margin-bottom: 20px;
}

.modal_content > h5:first-child {
margin: 30px 0px;
}

#dialog label {
color: #666;
}

#phone1 {
display: block;
width: 100%;
height: 70px;
background: none;
padding-top: 30px;
border: 0;
outline: none;
text-align: center;
margin-top: -30px;
font-size: 16px;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-radius: 0;
}

.code1 {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
height: 70px;
background: none;
padding-top: 30px;
margin-top: -30px;
font-size: 16px;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-radius: 0;
}

#code1 {
width: calc(100% - 90px);
height: 55px;
background: none;
padding-top: 20px;
border: 0;
outline: none;
text-align: center;
margin-top: -20px;
font-size: 16px;
}

#btnSendCode1 {
width: 90px;
height: 30px;
padding: 0 5px;
margin-top: -13%;
margin-left: 74%;
font-size: 14px;
text-align: center;
background: transparent;
border-radius: 30px;
color: #a07941;
border-color: #a07941;

}

::-webkit-input-placeholder { /* WebKit browsers */
font-size: 14px;
color: rgba(0, 0, 0, .4);
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size: 14px;
color: rgba(0, 0, 0, .4);
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size: 14px;
color: rgba(0, 0, 0, .4);
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
font-size: 14px;
color: rgba(0, 0, 0, .4);
}

.next {
text-align: center;
margin: 20px 0;
}

.next button {
width: 100%;
height: 45px;
padding: 0;
margin: 0;
background: #007BFF;
color: #fff;
border: 0;
outline: none;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="rwo">

<div class="topImg">
<a> <img style="margin-top: -30%; margin-left: 5%" src="../../assets/img/login/x.png" width="4%" alt=""/></a>
<img style="margin-left: 25%;margin-top: 25%" src="../../assets/img/login/house.png" width="25%" alt=""/>
</div>

<div class="tab">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">账号密码登录</li>
<li>手机快捷登录</li>
</ul>

<div class="f-div" style="width: 80%" id="go">
<img src="../../assets/img/login/juxing.png" alt="" style="margin-left: 7%;;margin-top: -27%;float:left"/>
<h3 alt="" style="position:absolute;margin-left:50%;margin-top: -23%;float: left">登录</h3>
</div>

<div class="f-div" style="width: 100%">
<span>——————更多登录方式——————</span>
<br/>
<img src="../../assets/img/login/weixin.png" alt=""/>
<img src="../../assets/img/login/zhifubao.png" alt="" style="margin-left: 55%"/>
</div>
</div>
</body>
<script>

}
function SetRemainTime1() {
if (curCount1 == 0) {
window.clearInterval(InterValObj1);//停止计时器
$("#btnSendCode1").removeAttr("disabled");//启用按钮
$("#btnSendCode1").val("重新发送");
} else {
curCount1--;
$("#btnSendCode1").val(+curCount1 + "秒再获取");
}
}

//点用户注册
$('#regi').on('click',function () {
window.location.href="/views/login/app-register.html"
})

/*提交*/
function binding() {
alert(1)
}

$('#go').on('click', function () {
var username = $.trim($("#un").val());
var password = $.trim($("#pwd").val());
if(!username){
layer.msg("！请输入账户名", {icon: 6});
return;
}
if(!password){
layer.msg("！请输入密码", {icon: 6});
return;
}
$.ajax({
url: httpurl + "/api/login",
type: "post",
dataType: "json",
data: {userName: username, passWord: password},
success: function (result) {
if (result.code == 200) {
layer.msg("登录成功！", {icon: 6});
var token = result.data;
localStorage.setItem("token",JSON.stringify(result.data));
window.location.href="/views/login/person/personindex.html";
} else {
layer.msg("用户名或密码错误", {icon: 7})
}
//console.log("登录返回结果：" + result.code);
}
})
});

layui.use(['carousel', 'form'], function () {
var carousel = layui.carousel
, form = layui.form;

//图片轮播
carousel.render({
elem: '#shuffing'
, width: '100%'
, height: '156px'
, interval: 1800
});

//事件
carousel.on('change(shuffing)', function (res) {
console.log(res)
});

var $ = layui.$, active = {
set: function (othis) {
var THIS = 'layui-bg-normal'
, key = othis.data('key')
, options = {};

othis.css('background-color', '#5FB878').siblings().removeAttr('style');
options[key] = othis.data('value');
ins3.reload(options);
}
};
var userName = $("#id").val();

//监听开关
form.on('switch(autoplay)', function () {
ins3.reload({
autoplay: this.checked
});
});

$('.demoSet').on('keyup', function () {
var value = this.value
, options = {};
if (!/^\d+$/.test(value)) return;

options[this.name] = value;
ins3.reload(options);
});

//其它示例
$('.demoTest .layui-btn').on('click', function () {
var othis = $(this), type = othis.data('type');
active[type] ? active[type].call(this, othis) : '';
});
});
</script>
</html>