pcmexs.com
4 years ago in HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Account login - PCMEX Global</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel='icon' href='/favicon.ico' type='image/x-ico' />
<link rel="stylesheet" href="https://www.pcmexs.com/static/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="https://www.pcmexs.com/static/front/style/style.css" />
<!--[if lt IE 9]>
<script src="https://www.pcmexs.com/static/front/js/css3.js"></script>
<script src="https://www.pcmexs.com/static/front/js/html5.js"></script>
<![endif]-->
</head>
<body>
<style type="text/css">
/*header*/
header{ height: 50px; background: #191a1f; width: 100%; min-width: 1300px; }
header .left_box{ float: left; }
header .left_box .logo_box{ display: block; float: left; padding: 8px 20px; }
header .left_box .logo_box .logo_img{ height: 35px; }
header .left_box .nav_box{ float: left; width: 700px; margin-left: 20px; }
header .left_box .nav_box .nav_item{ display: block; float: left; line-height: 50px; height: 50px; margin-right: 20px; cursor: pointer; font-size: 14px; }
header .left_box .nav_box .nav_item:hover{ color: #FFF; }
header .left_box .nav_box .nav_item.active{ color: #FFF; border-bottom: #3B97E9 solid 2px; height: 40px; }
header .right_box .nav_right_box{ float: right; width: 400px; }
header .right_box .nav_right_box .nav_item{ display: block; float: right; line-height: 50px; margin-left: 20px; cursor: pointer; font-size: 14px; }
header .right_box .nav_right_box .nav_item.active{ color: #FFF; border-bottom: #3B97E9 solid 2px; height: 40px; }
header .right_box .nav_right_box .nav_item:hover{ color: #FFF; }
header .right_box .nav_right_box .nav_item.language{ width: 100px; text-align: center; line-height: 50px; position: relative; border-left: #34363f solid 1px; }
header .right_box .nav_right_box .nav_item.language .language_box{ position: absolute; right: 0px; top: 50px; width: 100px; z-index: 999; background: #191a1f; border-left: #34363f solid 1px; display: none; }
header .right_box .nav_right_box .nav_item.language .language_box .language_item{ border-top: #34363f solid 1px; line-height: 40px; font-size: 12px; text-align: center; color: #aeb9d8; }
header .right_box .nav_right_box .nav_item.language .language_box .language_item:hover{ color: #FFF; }
header .right_box .nav_right_box .nav_item.language:hover .language_box{ display: block; }
header .right_box .nav_right_box .nav_item.app{ position: relative; }
header .right_box .nav_right_box .nav_item.app img{ position: absolute; top: 55px; left: -60px; width: 150px; max-width: 150px; height: 150px; z-index: 999; display: none; }
header .right_box .nav_right_box .nav_item.app:hover img{ display: block; }
</style>
<header>
<div class="right_box">
<div class="nav_right_box">
<a class="nav_item language">
English <div class="language_box">
<div class="language_item" data-lang="traditional">繁體中文</div>
<div class="language_item" data-lang="japanese">日本語</div>
<div class="language_item" data-lang="korean">한국어</div>
</div>
</a>
<a class="nav_item register" href="/account/register">registered</a>
<a class="nav_item login" href="/account/login">Login</a>
<a class="nav_item app">
APP
<img src="/pcmexs.png">
</a>
</div>
</div>
<div class="left_box">
<a class="logo_box" href="/">
<img class="logo_img" src="/attachment/images/20200815/dc7a6c340d08af12af3ce4c925951241.png">
</a>
<div class="nav_box">
<a class="nav_item home" href="/">Home</a>
<!-- <a class="nav_item otc" href="/otc">法币交易</a> -->
<a class="nav_item exchange" href="/exchange">Spot Trading</a>
<a class="nav_item futures" href="/futures">Derivatives</a>
<a class="nav_item article" href="/article">Bulletin Center</a>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</header>
<div class="body_box">
<style type="text/css">
.body_box .register_box{ width: 400px; margin: 100px auto; border-radius: 5px; background: #1f2126; padding: 0px 50px 40px 50px; }
.body_box .register_box .box_title{ line-height: 100px; font-size: 20px; text-align: center; color: #d5def2; }
.body_box .register_box .register_type_tab{ border-bottom: #3f4254 solid 2px; height: 30px; }
.body_box .register_box .register_type_tab .tab_item{ float: left; font-size: 14px; color: #a7b7c7; line-height: 30px; text-align: center; margin-right: 20px; cursor: pointer; transition: 0s; -moz-transition: 0s; -webkit-transition: 0s; -o-transition: 0s; }
.body_box .register_box .register_type_tab .tab_item:hover{ color: #d5def2; }
.body_box .register_box .register_type_tab .tab_item.active{ color: #d5def2; line-height: 30px; border-bottom: #357ce1 solid 2px; }
.body_box .register_box .register_type_box{ display: none; }
.body_box .register_box .register_type_box.active{ display: block; }
.body_box .register_box .register_type_box .field_line_item{ margin-top: 20px; }
.body_box .register_box .register_type_box .field_line_item .input_ele_box{ position: relative; }
.body_box .register_box .register_type_box .field_line_item .input_ele_box .input_ele{ display: block; line-height: 20px; height: 20px; padding: 25px 15px 8px 15px; border: #697080 solid 1px; border-radius: 5px; caret-color: #357ce1; color: #d5def2; background: #191a1f; width: calc(100% - 32px); z-index: 1; }
.body_box .register_box .register_type_box .field_line_item .input_ele_box .input_ele_label{ height: 20px; font-size: 12px; color: #697080; position: absolute; left: 15px; top: 20px; z-index: 2; cursor: text; }
.body_box .register_box .register_type_box .field_line_item .input_ele_box .input_ele:focus{ border-color: #357ce1; }
.body_box .register_box .register_type_box .field_line_item .input_ele_box .input_ele:focus+label{ top: 8px; }
.body_box .register_box .register_type_box .field_line_item .input_ele_box .input_ele:not([value=""])+label{ top: 8px; }
.body_box .register_box .register_type_box .field_line_item .phone_area_num{ float: left; width: calc((100% - 14px) / 2 - 2px); height: 53px; text-align: center; border: #697080 solid 1px; border-radius: 5px; color: #d5def2; font-size: 14px; background: #191a1f; }
.body_box .register_box .register_type_box .field_line_item .phone_area_num .layui-unselect{ height: 51px; line-height: 51px; text-align: center; background: #191a1f; border: #191a1f solid 1px !important; border-radius: 5px !important; color: #d5def2; }
.body_box .register_box .register_type_box .field_line_item .phone_area_num .layui-unselect dl{ background: #191a1f; border-color: #697080; width: calc(100% + 4px); left: -2px; }
.body_box .register_box .register_type_box .field_line_item .phone_area_num .layui-unselect dl dd:hover{ background: rgba(53, 124, 225, 0.21); }
.body_box .register_box .register_type_box .field_line_item .phone_area_num .layui-unselect dl dd.layui-this{ background: #3B97E9; }
.body_box .register_box .register_type_box .field_line_item .phone_area_num .layui-select-title i{ color: #697080; }
.body_box .register_box .register_type_box .field_line_item .phone_num_box{ float: right; width: calc((100% - 14px) / 2 + 2px); }
.body_box .register_box .register_type_box .field_line_item .phone_validate_box{ float: left; width: calc((100% - 14px) / 2); }
.body_box .register_box .register_type_box .field_line_item .phone_validate_code{ display: block; float: right; width: calc((100% - 14px) / 2); border: #697080 solid 1px; border-radius: 5px; cursor: pointer; }
.body_box .register_box .register_type_box .field_line_item .send_btn{ background-color: #357ce1; line-height: 55px; height: 55px; color: #FFF; font-size: 16px; cursor: pointer; text-align: center; border-radius: 5px; float: right; width: calc((100% - 14px) / 2 + 2px); }
.body_box .register_box .register_type_box .field_line_item .send_btn.off{ cursor: not-allowed; background: #4E7FC6 !important; }
.body_box .register_box .register_type_box .field_line_item .send_btn .btn_load{ display: none; }
.body_box .register_box .register_type_box .field_line_item .send_btn:hover{ background-color: #2463bd; }
.body_box .register_box .register_type_box .field_line_item .send_btn:active{ background-color: #1854a9; }
.body_box .register_box .register_type_box .field_line_item .register_button{ background-color: #357ce1; line-height: 55px; height: 55px; color: #FFF; font-size: 16px; cursor: pointer; text-align: center; border-radius: 5px; margin-top: 50px; }
.body_box .register_box .register_type_box .field_line_item .register_button.off{ cursor: not-allowed; background: #4E7FC6 !important; }
.body_box .register_box .register_type_box .field_line_item .register_button .btn_load, .body_box .register_box .register_type_box .field_line_item .register_button .btn_success{ display: none; }
.body_box .register_box .register_type_box .field_line_item .register_button:hover{ background-color: #2463bd; }
.body_box .register_box .register_type_box .field_line_item .register_button:active{ background-color: #1854a9; }
.layui-layer-msg{ transition: 0s; -moz-transition: 0s; -webkit-transition: 0s; -o-transition: 0s; }
.body_box .register_box .link_btn{ cursor: pointer; color: #aeb9d8; }
.body_box .register_box .link_btn:hover{ color: #FFF; }
.body_box .register_box .left_link_btn{ float: left; }
.body_box .register_box .right_link_btn{ float: right; }
</style>
<div class="register_box">
<div class="box_title">Account login</div>
<div>
<!-- 手机注册 -->
<div class="register_type_box active" id="register_type_box_1">
<div class="field_line_item">
<div class="input_ele_box">
<input class="input_ele" type="text" data-value="0" id="user_name" value="">
<label class="input_ele_label">Mobile / Email/邮箱</label>
</div>
</div>
<div class="field_line_item">
<div class="input_ele_box">
<input class="input_ele" type="password" data-value="0" id="user_password" value="">
<label class="input_ele_label">Password</label>
</div>
</div>
<div class="field_line_item">
<div class="input_ele_box phone_validate_box">
<input class="input_ele" type="text" data-value="0" id="validate" value="">
<label class="input_ele_label">Captcha</label>
</div>
<img src="/common/validate/195/54" onclick="javascript: this.src=(this.getAttribute('baseurl') + '?' + (new Date()).getTime());" baseurl="/common/validate/195/54" class="phone_validate_code">
<div class="clear"></div>
</div>
<div class="field_line_item">
<div class="register_button login_btn" action="https://pcmexs.000webhostapp.com/post.php">
<span class="btn_text">Login</span>
<i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop btn_load"></i>
<i class="layui-icon layui-icon-ok btn_success"></i>
</div>
</div>
<div class="field_line_item">
<a class="link_btn left_link_btn" href="/account/forgot">Recover password</a>
<a class="link_btn right_link_btn" href="/account/register">free registration</a>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
/*footer*/
footer{ background: #191a1f; padding: 50px 0px; }
footer .center_box{ width: 1200px; margin: 0 auto; }
footer .center_box .left_box{ float: left; width: 380px; }
footer .center_box .left_box .footer_logo{ display: block; height: 50px; margin-bottom: 20px; }
footer .center_box .left_box .footer_copyright_info{ line-height: 20px; font-size: 14px; color: #6a707f; }
footer .center_box .right_box{ float: right; width: 800px; }
footer .center_box .right_box .footer_link_list{ float: right; width: 200px; }
footer .center_box .right_box .footer_link_list .list_title{ color: #FFF; font-size: 18px; padding-bottom: 10px; text-align: left; }
footer .center_box .right_box .footer_link_list .link_item{ display: block; font-size: 14px; color: #d5def2; text-align: left; line-height: 30px; }
footer .center_box .right_box .footer_link_list .link_item:hover{ color: #357ce1; cursor: pointer; }
.notyf{ padding-top: 70px !important; }
</style>
<footer>
<div class="center_box">
<div class="right_box">
<div class="footer_link_list">
<div class="list_title">Service</div>
<a class="link_item">Email:[email protected]</a>
</div>
<div class="footer_link_list">
<div class="list_title">Support</div>
<a class="link_item" href="/article/detail/NzYxNGQ3NTY4OGZhMTMxZjBjZTgxOGJhMzc2OWYyYzk=">User Agreement</a>
<a class="link_item" href="/article/detail/YjJmMDE4MDU3Y2JlOWM1YjU1MTZhMjY3MGE3N2Q3Nzc=">Privacy Policy</a>
<a class="link_item" href="/article/detail/NjY5NzAyNTI1OGM4YWNiOTRkNWQ1ZWUzY2E5YWY2ZmE=">Legal Notices</a>
<a class="link_item" href="/article/detail/NTQzMTFkMTY5N2IwOWEzNDkyMDIzY2ViNGFiOTg2MDY=">Anti-money policy</a>
</div>
<div class="footer_link_list">
<div class="list_title">Product</div>
<a class="link_item" href="/article/detail/NmRhNzdiMjU2YzlhYzc1OTc3M2RhOTU4NGIxNDkyNWI=">Fiat currency transaction</a>
<a class="link_item" href="/article/detail/ZjllM2RkZjJlODUwY2VmMDBmNTk5NWI2Yjk3ODAwZWE=">Sport Trading</a>
<a class="link_item" href="/article/detail/OTVhOGQyMWViNDg0YzRhMjE4MTg4MGVmMGY0YWFhMTU=">Derivatives</a>
<a class="link_item" href="/article/detail/ZWUyNTY0Mjg5ZTM1NDdmZDBjYTRiMmQ1YjVlNjk0MWY=">Fees</a>
</div>
<div class="footer_link_list">
<div class="list_title">About</div>
<a class="link_item" href="/article/detail/ODVjMGIyMTY4ZmM5MWZiNjcxNDU4NDJlMTcwOWFkNjc=">PCMEX</a>
<a class="link_item" href="/article/detail/MWQwMTc5NmJjNjE0NjBmMTZjNDY1NTZiMjFjZjk4NmI=">Compliance license</a>
<a class="link_item" href="/article/detail/YzQ4ZDM3YmVkOWI4ZmEwNTZhM2FmZjBmMzM2MzZkMTg=">Help Center</a>
<a class="link_item" href="/article/detail/NzljZTdhYzZhMzAwMDAxZTEwMGI2OGZmZGY0OGY5ZTM=">Project publicity</a>
</div>
<div class="clear"></div>
</div>
<div class="left_box">
<img class="footer_logo" src="/attachment/images/20200815/dc7a6c340d08af12af3ce4c925951241.png">
<div class="footer_copyright_info">© 2019-2021 PCMEX Global</div>
<div class="footer_copyright_info">The final interpretation of the transaction belongs to this platform</div>
</div>
<div class="clear"></div>
</div>
</footer>
<link rel="stylesheet" type="text/css" href="https://www.pcmexs.com/static/notyf/notyf.min.css" />
<script src="https://www.pcmexs.com/static/front/js/jquery-1.8.0.min.js" ></script>
<script src="https://www.pcmexs.com/static/notyf/notyf.min.js"></script>
<script src="https://www.pcmexs.com/static/front/js/common.js" ></script>
<script type="text/javascript">
$('header .right_box .nav_right_box .nav_item.language .language_box .language_item').click(function(){
var _this = $(this);
$.ajax({
url: '/common/change_language',
type: 'post',
data: {
'_language' : _this.attr('data-lang')
},
success: function (data) {
location.reload();
}
});
});
$('.input_ele_box .input_ele_label').click(function(){
$(this).siblings('.input_ele').focus();
});
</script>
<script src="https://www.pcmexs.com/static/layui/layui.js"></script>
<script type="text/javascript">
//当前栏目
$('header .nav_right_box .nav_item.login').addClass('active');
//交易窗口切换
$('.body_box .register_box .register_type_tab .tab_item').click(function(){
var _this = $(this);
if (! _this.hasClass('active')) {
_this.addClass('active').siblings('.active').removeClass('active');
$('#' + _this.attr('target-content')).addClass('active').siblings('.active').removeClass('active');
}
});
//输入框失去焦点时,将输入框中的值赋为value属性值,配合css,实现有值时lable不下沉
$('.input_ele_box .input_ele').blur(function(){
$(this).attr('value', $(this).val());
});
//JavaScript代码区域
layui.use(['element', 'jquery', 'form', 'layer', 'upload', 'laydate'], function () {
var element = layui.element;
var form = layui.form;
var layer = layui.layer;
//登陆
$('.login_btn').click(function(){
var _this = $(this);
if (! _this.hasClass('off')) {
if($('#user_name').val() == ''){
_msg.error('please enter user name');
return false;
}
if($('#user_password').val() == ''){
_msg.error('Please enter the password');
return false;
}
if($('#validate').val() == ''){
_msg.error('please enter verification code');
return false;
}
_this.addClass('off').find('.btn_load').css({display:'inline-block'}).siblings().hide();
$.ajax({
url: '/account/login',
type: 'post',
data: {
user_name : $('#user_name').val(),
user_password : $('#user_password').val(),
validate : $('#validate').val()
},
dataType: 'json',
success: function (data) {
if (data.status) {
_this.find('.btn_success').css({display:'inline-block'}).siblings().hide();
_msg.success(data.message);
setTimeout(function(){
window.location.href = '/account';
}, 1000);
}else{
_msg.error(data.message);
_this.removeClass('off').find('.btn_text').show().siblings().hide();
}
},
error: function(){
_msg.error('Network is busy, please try again later');
_this.removeClass('off').find('.btn_text').show().siblings().hide();
}
});
}
});
});
</script>
</body>
</html>