You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
408 lines
13 KiB
HTML
408 lines
13 KiB
HTML
5 years ago
|
<div id="login_box">
|
||
|
|
<link href="__CSS__/unlr.css" rel="stylesheet" >
|
||
|
|
<if condition="ACTION_NAME eq 'publish2'">
|
||
|
|
<link href="__CSS__/iconfont.css" rel="stylesheet" >
|
||
|
|
<style>
|
||
|
|
body{min-height: 100%;}
|
||
|
|
input, select, button, textarea {
|
||
|
|
outline: none;
|
||
|
|
font-family: inherit;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
border: none;
|
||
|
|
color: #18b1ea;
|
||
|
|
}
|
||
|
|
.trunker {}
|
||
|
|
.trunker .xg-back {display: block;
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
width: .8rem;
|
||
|
|
height: .8rem;
|
||
|
|
}
|
||
|
|
.trunker .xg-back img{width:100%;height:100%;}
|
||
|
|
.banner {
|
||
|
|
background: url(__IMG__/user_bg.png) center 0 no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
text-align: center;
|
||
|
|
color: #FFF;
|
||
|
|
padding-top: 1rem;
|
||
|
|
}
|
||
|
|
.login-banner .imgbox {
|
||
|
|
padding: .62rem 0;
|
||
|
|
}
|
||
|
|
.login-banner .imgbox img {
|
||
|
|
width: 1.8rem;
|
||
|
|
height: 1.8rem;
|
||
|
|
border-radius: 100%;
|
||
|
|
background: #FFF;
|
||
|
|
display: block;
|
||
|
|
margin: 2.8vw auto 0rem;
|
||
|
|
box-shadow: 0 0 0 4px rgba(255,255,255,.6);
|
||
|
|
}
|
||
|
|
.t-form .login-box {
|
||
|
|
margin: .6rem .5rem;
|
||
|
|
font-size: .34rem;
|
||
|
|
color: #777;
|
||
|
|
}
|
||
|
|
.login-form .input-group {
|
||
|
|
padding: .1rem 11% .1rem 10%;
|
||
|
|
}
|
||
|
|
.t-form .input-group .input-prefix {
|
||
|
|
width: 10%;
|
||
|
|
}
|
||
|
|
.t-form .input-group .input-suffix {
|
||
|
|
width: 11%;
|
||
|
|
}
|
||
|
|
.t-form .input-group .txt, .t-form .input-group .getcode, .register-box .input-group .getcode2, .t-form .input-mark {
|
||
|
|
font-size: .39rem;
|
||
|
|
}
|
||
|
|
.username_record_list {
|
||
|
|
position: absolute;
|
||
|
|
top: 1rem;
|
||
|
|
left: 0;right:0;
|
||
|
|
z-index: 100;
|
||
|
|
background: #FFF;
|
||
|
|
width: 100%;
|
||
|
|
border: 1px solid #cdcdcd;
|
||
|
|
border-radius: 3px;
|
||
|
|
padding: 0.1rem 0;
|
||
|
|
}
|
||
|
|
.username_record_list li {
|
||
|
|
padding: 0.1rem 0.25rem;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.username_record_list li .name {font-size:0.34rem;display:inline-block;width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
|
||
|
|
.username_record_list li .delete_btn {float:right;background:url(__IMG__/trade1/icon_normal_shan.png) center center no-repeat;background-size:100% 100%;width:.4rem;height:.4rem;}
|
||
|
|
#mobile:focus~.username_record_list {display:block;}
|
||
|
|
.t-form .btn-group .submit {
|
||
|
|
background: #18B1EA;
|
||
|
|
color: #FFF;
|
||
|
|
font-size: .42rem;
|
||
|
|
width: 100%;
|
||
|
|
border: none;
|
||
|
|
border-radius: 2rem;
|
||
|
|
padding: 1.5vw 0;
|
||
|
|
}
|
||
|
|
.t-form .agree {
|
||
|
|
margin: .3rem 0 .6rem;
|
||
|
|
}
|
||
|
|
.t-form .link-group {
|
||
|
|
padding: .1rem 0;
|
||
|
|
}
|
||
|
|
.t-form .input-group .input-fix {
|
||
|
|
position: absolute;
|
||
|
|
top: .4rem;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.t-form .input-group .input-fix .iconfont {
|
||
|
|
font-size: .48rem;
|
||
|
|
color: #999;
|
||
|
|
height: 100%;
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
.login-form .input-group .txt::-webkit-input-placeholder {
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
.login-form .input-group .txt:-moz-placeholder {
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
.login-form .input-group .txt::-moz-placeholder {
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
.login-form .input-group .txt:-ms-input-placeholder {
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
@media screen and (max-width:500px) {
|
||
|
|
.t-form .login-box {font-size:.32rem;}
|
||
|
|
.t-form .input-group .txt,.t-form .input-group .getcode,.register-box .input-group .getcode2,.t-form .input-mark {font-size:.38rem;}
|
||
|
|
}
|
||
|
|
@media screen and (max-width:400px) {
|
||
|
|
.t-form .login-box {font-size:.30rem;}
|
||
|
|
}
|
||
|
|
@media screen and (max-width:350px) {
|
||
|
|
.t-form .login-box {font-size:.28rem;}
|
||
|
|
.t-form .input-group .txt,.t-form .input-group .getcode,.register-box .input-group .getcode2,.t-form .input-mark {font-size:.36rem;}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<else />
|
||
|
|
<style>
|
||
|
|
.username_record_list {position:absolute;top:100%;left:0;right:0;z-index:100;background:#FFF;width:100%;border:1px solid #cdcdcd;border-radius:3px;padding:0.6rem 0;}
|
||
|
|
.username_record_list li {padding:0.6rem 0.9rem 0.6rem 5.5%;position:relative;}
|
||
|
|
.username_record_list li .name {display:inline-block;width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
|
||
|
|
.username_record_list li .delete_btn {float:right;background:url(__IMG__/trade1/icon_normal_shan.png) center center no-repeat;background-size:100% 100%;width:2rem;height:2rem;}
|
||
|
|
#mobile:focus~.username_record_list {display:block;}
|
||
|
|
.trunker .xg-back {display: block;
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
width: 4.1rem;
|
||
|
|
height: 4.1rem;
|
||
|
|
}
|
||
|
|
.login-form .input-group .txt {border:none;padding:.4rem 1% .4rem 6%;}
|
||
|
|
.login-form .input-group .txt::-webkit-input-placeholder {
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
.login-form .input-group .txt:-moz-placeholder {
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
.login-form .input-group .txt::-moz-placeholder {
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
.login-form .input-group .txt:-ms-input-placeholder {
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
.trunker .container .hbtn {
|
||
|
|
width: 6rem;
|
||
|
|
height: 5rem;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
display: block;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.trunker .container .caption {
|
||
|
|
position:absolute;top:0;left:0;right:0;margin:0 6rem;text-align:center;color:#FFF;
|
||
|
|
font-weight: normal;
|
||
|
|
height: 3rem;
|
||
|
|
font-size: 2.5rem;
|
||
|
|
padding: 1rem 1rem;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.trunker .container .hbtn .iconfont {
|
||
|
|
font-size: 3.6rem;
|
||
|
|
color: #FFF;
|
||
|
|
margin: .8rem 0;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 450px){
|
||
|
|
.trunker .container .caption {
|
||
|
|
font-size: 2.2rem;
|
||
|
|
height: 2.8rem;
|
||
|
|
margin: 0 4rem;
|
||
|
|
}
|
||
|
|
.trunker .container .hbtn {
|
||
|
|
font-size: 1.4rem;
|
||
|
|
}
|
||
|
|
.trunker .container .hbtn .iconfont {
|
||
|
|
font-size: 3.2rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 350px){
|
||
|
|
.trunker .container .caption {
|
||
|
|
font-size: 2rem;
|
||
|
|
height: 2.2rem;
|
||
|
|
margin: 0 4rem;
|
||
|
|
}
|
||
|
|
.trunker .container .hbtn {
|
||
|
|
width: 4rem;
|
||
|
|
}
|
||
|
|
.trunker .container .hbtn .iconfont {
|
||
|
|
font-size: 3rem;
|
||
|
|
margin: .7rem 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</if>
|
||
|
|
|
||
|
|
<section class="trunker" style="min-height:auto;margin-bottom:0;">
|
||
|
|
<section class="container" style="position:relative;height:100vh;">
|
||
|
|
<if condition="ACTION_NAME eq 'publish' or ACTION_NAME eq 'record' ">
|
||
|
|
<a href="{:U('Trade/index')}" class="hbtn back"><i class="iconfont icon-drop-left"></i></a>
|
||
|
|
<else />
|
||
|
|
<!--<a id="close_login" href="javascript:;" class="hbtn back"><i class="iconfont icon-drop-left"></i></a>-->
|
||
|
|
</if>
|
||
|
|
<h1 class="caption">用户登录</h1>
|
||
|
|
<div class="banner login-banner">
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="imgbox">
|
||
|
|
<img src="__IMG__/portrait_not.png">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="t-form login-form">
|
||
|
|
<form class="login-box" id="login_form" url="{$url}">
|
||
|
|
<div class="form-group clearfix">
|
||
|
|
<div class="input-group clearfix" id="url_list">
|
||
|
|
<span class="input-fix input-prefix"><i class="iconfont icon-mobile"></i></span>
|
||
|
|
<!-- <span class="input-fix input-suffix jsdel" style="right:8.5%;"><i class="iconfont icon-error3"></i></span>
|
||
|
|
-->
|
||
|
|
<span class="input-fix input-suffix jsdrop"><i class="iconfont icon-drop-down"></i></span>
|
||
|
|
<input type="text" name="" id="mobile" class="txt" placeholder="请输入账号/手机号">
|
||
|
|
</div>
|
||
|
|
<div class="input-group clearfix">
|
||
|
|
<span class="input-fix input-prefix"><i class="iconfont icon-lock"></i></span>
|
||
|
|
<input type="password" name="" id="password" class="txt" placeholder="请输入密码">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="agree"><!-- 注册账号表示您同意<a href="">最终用户协议</a> --></p>
|
||
|
|
<div class="btn-group">
|
||
|
|
<input type="button" class="submit" value="登录">
|
||
|
|
</div>
|
||
|
|
<div class="link-group clearfix">
|
||
|
|
<a href="{:U('User/step1')}" class="register-btn">账号注册 | </a><a href="{:U('User/step')}" class="register-btn"> 手机注册</a>
|
||
|
|
<a href="{:U('User/forget')}" class="forget-btn" style="color: #999">忘记密码</a>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer class="footer">
|
||
|
|
<div class="foot-nav">
|
||
|
|
<div class="foot-nav-list">
|
||
|
|
<a href="{:U('Index/index')}" class="">
|
||
|
|
<i class="iconfont icon-home"></i>
|
||
|
|
<p>首页</p>
|
||
|
|
</a>
|
||
|
|
<a href="{:U('Trade/index')}" class="">
|
||
|
|
<i class="iconfont icon-trade"></i>
|
||
|
|
<p>交易</p>
|
||
|
|
</a>
|
||
|
|
<a href="{:U('Shop/index')}" class="">
|
||
|
|
<i class="iconfont icon-shop"></i>
|
||
|
|
<p>商城</p>
|
||
|
|
</a>
|
||
|
|
<a href="{:U('Gift/index')}" class="">
|
||
|
|
<i class="iconfont icon-gift"></i>
|
||
|
|
<p>礼包</p>
|
||
|
|
</a>
|
||
|
|
<a href="{:U('User/index')}" class="on">
|
||
|
|
<i class="iconfont icon-user"></i>
|
||
|
|
<p>我的</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
<div class="pop pop-window">
|
||
|
|
<div class="pop-box pop-sign">
|
||
|
|
<div class="pop-wrap"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="popmsg pop-dialog"></div>
|
||
|
|
<script src="__JS__/pop.lwx.min.js"></script>
|
||
|
|
<script>
|
||
|
|
$(document).keyup(function(event){
|
||
|
|
if(event.keyCode == 13){
|
||
|
|
$('.submit').click();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#close_login').click(function() {
|
||
|
|
var p = $('.popwin').fadeOut(200);
|
||
|
|
setTimeout(function(){p.find('#login_box').remove();},210);
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
function delete_url(e,str,i) {
|
||
|
|
var arr = str.split(',');
|
||
|
|
var index = arr.indexOf(i);
|
||
|
|
if(index>-1)
|
||
|
|
arr.splice(index,1);
|
||
|
|
lwx.setItem('username',arr.join(','));
|
||
|
|
$(e).closest('li').remove();
|
||
|
|
if($('#url_list #username_record_list li').length<1) {
|
||
|
|
$('#url_list #username_record_list').remove();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function input_name(e,i) {
|
||
|
|
$('#mobile').val(i);
|
||
|
|
$(e).closest('#username_record_list').hide();
|
||
|
|
}
|
||
|
|
|
||
|
|
var username = lwx.getItem('username');
|
||
|
|
if(username) {
|
||
|
|
var uname = username.split(',');
|
||
|
|
var html = '<ul class="username_record_list" id="username_record_list" style="display:none;">';
|
||
|
|
for(var i=0,len=uname.length;i<len;i++) {
|
||
|
|
html += '<li><span class="name" onclick="input_name(this,''+uname[i]+'')">'+uname[i]+'</span><a class="delete_btn" onclick="delete_url(this,''+username+'',''+uname[i]+'')" href="javascript:;"></a></li>';
|
||
|
|
}
|
||
|
|
html += '</ul>';
|
||
|
|
$('#url_list').append(html);
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#mobile').focus(function() {
|
||
|
|
|
||
|
|
if($('#url_list #username_record_list').length>0) {
|
||
|
|
$('#url_list #username_record_list').show();
|
||
|
|
}
|
||
|
|
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.jsdrop').on('click',function() {
|
||
|
|
var url = $('#url_list #username_record_list');
|
||
|
|
if(url.is(':visible')) {
|
||
|
|
url.hide();$(this).find('i').removeClass('icon-drop-up').addClass('icon-drop-down');
|
||
|
|
} else {
|
||
|
|
url.show();$(this).find('i').removeClass('icon-drop-down').addClass('icon-drop-up');
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('body').click(function(event) {
|
||
|
|
var e = event || window.event;
|
||
|
|
var target = $(e.target);
|
||
|
|
if(target.closest('#url_list').length<1 && target.attr('id')!='url_list') {
|
||
|
|
$('#url_list #username_record_list').hide();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var pmsg = $('.popmsg').pop();
|
||
|
|
$('.submit').click(function(event) {
|
||
|
|
var mobile = $.trim($('#mobile').val());
|
||
|
|
var password = $.trim($('#password').val());
|
||
|
|
if (mobile) {
|
||
|
|
if (password) {
|
||
|
|
$.ajax({
|
||
|
|
type:'POST',
|
||
|
|
url:'{:U("User/login")}',
|
||
|
|
data:{'phone':mobile,'password':password},
|
||
|
|
dataType:"Json",
|
||
|
|
success:function(data){
|
||
|
|
if(data.status == 1){
|
||
|
|
pmsg.msg(data.msg);
|
||
|
|
|
||
|
|
var username = lwx.getItem('username');
|
||
|
|
if(username) {
|
||
|
|
var arr = username.split(',');
|
||
|
|
if(arr.length>=5) {arr = arr.splice(0,4);}
|
||
|
|
for(var i=0,len=arr.length;i<len;i++) {
|
||
|
|
if((!arr[i] && typeof(arr[i]) != 0) || arr[i] == mobile) {arr.splice(i,1);}
|
||
|
|
}
|
||
|
|
arr.unshift(mobile);
|
||
|
|
mobile = arr.join(',');
|
||
|
|
}
|
||
|
|
lwx.setItem('username',mobile);
|
||
|
|
var url = $('#login_form').attr('url');
|
||
|
|
setTimeout(function(){
|
||
|
|
if(url) {
|
||
|
|
window.location.href = url;
|
||
|
|
} else
|
||
|
|
window.location.href = "{:U('Trade/detail',array('id'=>$_POST['id']))}";
|
||
|
|
},1500);
|
||
|
|
}else{
|
||
|
|
pmsg.msg(data.msg);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else{
|
||
|
|
pmsg.msg('请输入密码');event.preventDefault();
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
pmsg.msg('请输入手机号码');event.preventDefault();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".jsdel").click(function(){
|
||
|
|
$('#mobile').val("");
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</div>
|