CINXE.COM
用户登录 - 信息系统建设与服务能力评估工作管理平台
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8" /> <title>用户登录 - 信息系统建设与服务能力评估工作管理平台</title> <link rel="stylesheet" href="/static/plugins/bootstrap-validator/dist/css/bootstrap-validator.css" /> <link rel="stylesheet" href="/static/adminlte/bootstrap/css/bootstrap.min.css" /> <!-- Font Awesome Icons --> <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.min.css" /> <link rel="stylesheet" href="/static/plugins/toastr/css/toastr.css" /> <link rel="stylesheet" href="/static/adminlte/dist/css/AdminLTE.css" /> <link rel="stylesheet" href="/static/cs/css/style.css" /> <link rel="stylesheet" href="/static/cs/css/login.css" /> <link rel="stylesheet" href="/static/cs/css/footer.css" /> <link rel="stylesheet" href="/static/captcha/css/verify2.css" /> <link rel="stylesheet" href="/static/fontawesome/css/all.css" /> <style> * { margin: 0; padding: 0; } #container { position: absolute; height: 100%; width: 100%; } #output { width: 100%; height: 100%; } button { cursor: pointer; } .has-error { color: red; } .modal { z-index: 9999; } /* 弹窗 (background) */ #myModal .modal { display: none; /* 默认隐藏 */ position: fixed; /* 固定定位 */ z-index: 1; /* 设置在顶层 */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; } /* 添加动画 */ @-webkit-keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; } } @keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; } } /* 弹窗内容 */ #myModal .modal-content { background-color: #fefefe; margin: 15% auto; border: 1px solid #888; width: fit-content; max-width: 450px; border-radius: 20px; } #sliderInner-capture-bd i { position: relative; top: 6px; left: 36px; color: white; } </style> </head> <body> <div class="login-warpper"> <div class="login-warpper__top"> <a class="logo" href="/"> <img class="img" src="/static/cs/img/logo-new.png" alt="logo" /> </a> <div class="tips"> <div> 还没有帐号？立即 <span onclick="toggleDiaglog()">注册</span> </div> <a class="home-btn" href="/">首页</a> </div> </div> <div class="login-warpper__content"> <div class="login-page__left"> <!-- <a class="logo" href="/"> <img src="/static/cs/img/logo-new.png" alt=""> </a> --> </div> <div class="login-page__right"> <div class="logo"> <!-- <img src="/static/cs/img/logo.png" alt=""> --> <span class="name"> 信息系统建设与服务能力 <br /> 评估工作管理平台 </span> </div> <div class="title">用户登录</div> <a class="tohome" href="/"> <span title="返回首页"> <i class="fa fa fa-home"></i> </span> </a> <div class="form-warpper"> <form id="login-form"> <div class="loginForm form-group"> <input type="text" id="username" name="username" class="form-control" placeholder="用户名" /> <input type="hidden" id="acptureUuid" name="acptureUuid" class="form-control" /> <input type="hidden" id="offsetHorizontalX" name="offsetHorizontalX" class="form-control" /> </div> <div class="loginForm form-group"> <input type="password" id="password" name="password" class="form-control" placeholder="密码" /> </div> <!-- <div class="loginForm form-group code" hidden> <input type="text" name="verifyCode" id="verifyCode" class="form-control" placeholder="验证码"> <img id="verificationCode" class="verificationCode" src="/tool/kaptcha/verification?d='+new Date()*1" onclick="this.src='/tool/kaptcha/verification?d='+new Date()*1" class="img-responsive" alt="验证码"/> </div> --> <div class="loginForm-btn" style="margin-top: 0"> <button class="loginBtn" onclick="loginFn()">立即登录</button> </div> <div class="forgetit"> <div> 还没有帐号？立即 <!-- <a href="/cs/institution/register" target="__blank">注册</a> --> <span onclick="toggleDiaglog()">注册</span> </div> <a href="/cs/resetPassword">忘记密码?</a> </div> <button type="submit" id="loginSubmit" style="display: none"></button> </form> </div> </div> </div> </div> <div class="page-footer"> <ul class="infos"> <li class="info-item">地址：<span>北京市海淀区万寿路27号院</span></li> <li class="info-item">联系电话：<span>010-68208057</span></li> <li class="info-item">邮编：<span>100846</span></li> </ul> <a href="https://beian.miit.gov.cn/" target="__blank">粤ICP备05096650号</a> </div> <div class="choose-dialog" id="choose-dialog"> <div class="dialog-warpper"> <div class="dialog-top"> <div class="title">选择身份</div> <div class="close-btn" onclick="toggleDiaglog()">✖</div> </div> <div class="dialog-content"> <div class="dialog-content__left"> <div class="name">我是评估机构</div> <div class="items"> <div class="item"> <img src="/static/cs/img/机构.png" alt="" /> <span>评估机构</span> <div class="btns"> <div class="pick-btn" onclick="window.open('/cs/institution/register');toggleDiaglog()" > 选 择 </div> </div> </div> </div> </div> <div class="dialog-content__right"> <div class="name">我是企业用户</div> <div class="items"> <div class="item"> <img src="/static/cs/img/企业1.png" alt="" /> <span> 企业用户 </span> <div class="btns"> <!-- <div class="pick-btn" onclick="alert('该功能正在开发中，敬请期待')">选 择</div> --> <div class="pick-btn" onclick="window.open('/cs/enterprise/register?checkCertificate=true');toggleDiaglog()" > 有资质证书 </div> <div class="pick-btn" onclick="window.open('/cs/enterprise/register?checkCertificate=false');toggleDiaglog()" > 无资质证书 </div> </div> </div> </div> </div> </div> </div> </div> <!-- 验证码弹窗 --> <div id="myModal" class="modal"> <div class="modal-content"> <div id="mpanel5" style="margin: 24px"> <div class="imageDiv-capture-bd"> <img id="validateImage-capture-bd" src="" alt=""/> <img id="slideImage-capture-bd" src="" alt=""/> </div> <div class="resultDiv-capture-bd"> <button class="btn btn-default" onclick="exchange();"><i class="fas fa-redo"></i> </button> <span id="operateResult-capture-bd"></span> </div> <div> <div id="sliderOuter-capture-bd" class="outer-capture-bd"> <div id="dragDiv-capture-bd">拖动滑块完成拼图</div> <div id="sliderInner-capture-bd" class="inner-capture-bd"> <i class="fas fa-angle-double-right"></i> <div class="coverIcon-capture-bd"></div> </div> </div> </div> </div> </div> </div> <!-- jQuery --> <script src="/static/plugins/jquery/jquery-2.2.4.min.js"></script> <!-- Bootstrap 3.3.6 --> <script src="/static/adminlte/bootstrap/js/bootstrap.min.js"></script> <!-- iCheck --> <script src="/static/plugins/iCheck/icheck.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="/static/plugins/md5/md5.js"></script> <script src="/static/login/ie10-viewport-bug-workaround.js"></script> <script src="/static/common/js/base.js"></script> <script src="/static/common/js/base-form.js"></script> <script src="/static/plugins/bootstrap-validator/dist/js/bootstrap-validator.js"></script> <script src="/static/plugins/toastr/js/toastr.js"></script> <script src="/static/common/js/base-toastr.js"></script> <script src="/static/common/js/base-cookies.js"></script> <script src="/static/common/js/base-modal.js"></script> <script type="text/javascript" src="/static/captcha/js/Tdrag.js"></script> <script> if (window != top) top.location.href = location.href; var form = null; $(function () { // 初始化图片验证码 initImageValidate(); /* 初始化按钮拖动事件 */ $("#sliderInner-capture-bd").Tdrag({ scope: ".outer-capture-bd", axis: "x", cbStart: function (obj, self, ev) {//移动前的回调函数 }, cbMove: function (obj, self, ev) {//移动中的回调函数 left_binarydance = obj.offsetLeft; $("#sliderInner-capture-bd").css("left", (left_binarydance) + "px"); $("#slideImage-capture-bd").css("left", (left_binarydance) + "px"); }, cbEnd: function (obj, self, ev) {//移动结束时候的回调函数 //停止移动时候的滑块距离 left_binarydance = obj.offsetLeft; //停止移动时候、去校验 checkImageValidate(); } }); // 获取弹窗 var modal = document.getElementById('myModal'); // 在用户点击其他地方时，关闭弹窗 window.onclick = function (event) { if (event.target == modal) { modal.style.display = 'none'; } }; $('#login-form').bootstrapValidator({ message: '请输入有效值', submitHandler: function (validator, myform, submitButton) { var params = $('#login-form').form().getFormSimpleData(); params.password = hex_md5(params.password); params.acptureUuid = acptureUuid_binarydance; params.offsetHorizontalX = left_binarydance; console.log("aaaaaa:"+hex_md5("aaaaaa")); ajaxPost('/cs/login', params, function (data, status) { if (data.success) { toastr.success('登陆成功', '成功'); setCookie('token', data.data); window.location.href = '/cs/index'; } else { resetVer(); if (data.code == '-5') { $('#login-form').data('bootstrapValidator').updateStatus('verifyCode', 'INVALID'); } if (data.code == '666') { toastr.info(data.data); modals.openWin({ winId: 'changePwWin', title: '修改密码', width: '800px', url: '/cs/changePW?userId=' + data.message, }); }else if(data.code == '777'){ toastr.info(data.data); modals.openWin({ winId: 'changePwWin', title: '修改密码', width: '800px', url: '/cs/changePW?userId=' + data.message+"&weakPwd=1", }); }else { toastr.error(data.data, '失败'); exchange(); } } }); }, fields: { username: { validators: { notEmpty: { message: '请输入用户名', }, }, }, password: { validators: { notEmpty: { message: '请输入密码', }, }, }, }, }); }); function resetVer() { $('#verificationCode').attr('src', "/tool/kaptcha/verification?d='+new Date()*1"); $('#verifyCode').val(''); var username = $('#username').val(); var password = $('#password').val(); $('#login-form').data('bootstrapValidator').resetForm(true); $('#username').val(username); $('#password').val(password); } function checkCertficate() { modals.error(); var _CONFIG = { title: '注册企业', text: '是否已经拥有cs证书?', ok_label: '是', cancel_label: '否', callback: function () { window.open('/cs/enterprise/register?checkCertificate=true'); }, cancel_call: function () { window.open('/cs/enterprise/register?checkCertificate=false'); }, }; modals.confirm(_CONFIG); } function toggleDiaglog() { $('#choose-dialog').toggleClass('show-dialog'); } function loginFn() { let username = $('#username').val(); let psw = $('#password').val(); if (username !== '' && psw !== '') { $('#myModal').toggle(); } } // x轴=轴线滑动的距离 var left_binarydance = 0; // 服务器返回的acptureUuid参数，注意保存，校验时候同left_binarydance参数一起传入 var acptureUuid_binarydance = ''; // 存储不带描边的抠图 var _noLineImg = null; // 存储带描边的抠图 var _lineImg = null; //$("抖动元素").shake(次数, 距离, 持续时间); jQuery.fn.shake = function (intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) { this.each(function () { var jqNode = $(this); jqNode.css({position: 'relative'}); for (var x = 1; x <= intShakes; x++) { jqNode.animate({left: (intDistance * -1)}, (((intDuration / intShakes) / 4))) .animate({left: intDistance}, ((intDuration / intShakes) / 2)) .animate({left: 0}, (((intDuration / intShakes) / 4))); } }); return this; } //服务器生成图片 function initImageValidate() { $.ajax({ async: false, type: "POST", url: "/capture/img", dataType: "json", data: {}, success: function (data) { if (data.success) { // 设置图片的src属性 $("#validateImage-capture-bd").attr("src", data.data.oriCopyImage); $("#slideImage-capture-bd").attr("src", data.data.newImage); _noLineImg = data.data.noLineImg; _lineImg = data.data.newImage; //acptureUuid acptureUuid_binarydance = data.data.acptureUuid; } }, error: function () { } }); } //点击按钮请求切换图片 function exchange() { // 验证未通过，将按钮和拼图恢复至原位置 $("#sliderInner-capture-bd").animate({"left": "0px"}, 200); $("#slideImage-capture-bd").animate({"left": "0px"}, 200); initImageValidate(); } //服务器校验 function checkImageValidate() { $.ajax({ async: false, type: "POST", url: "/capture/checkImgValidate", dataType: "json", data: { acptureUuid: acptureUuid_binarydance, offsetHorizontalX: left_binarydance, }, success: function (data) { //0成功，!1失败 if (data.success) { $("#operateResult-capture-bd").html(data.message).css("cssText", "color:lightpink!important;"); if (_noLineImg != null) { $("#slideImage-capture-bd").attr("src", _noLineImg); } setTimeout(function () { $('#myModal').toggle(); $('#acptureUuid').val(acptureUuid_binarydance); $('#offsetHorizontalX').val(left_binarydance); $('#loginSubmit').click(); }, 1000); } else { $("#operateResult-capture-bd").html(data.message).css("cssText", "color:red!important;"); // 验证未通过，将按钮和拼图恢复至原位置 if (_lineImg != null) { $("#slideImage-capture-bd").attr("src", _lineImg); } $("#sliderInner-capture-bd").animate({"left": "0px"}, 200); $("#slideImage-capture-bd").animate({"left": "0px"}, 200); //震动 $("#container-capture-bd").shake(4, 20, 400); } }, error: function () { } }); } </script> </body> </html>