人大信访-登录页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="resources/css/bootstrap.min.css"> <link rel="stylesheet" href="resources/css/reset.css"> <link rel="stylesheet" href="resources/css/commen.css"> <link rel="stylesheet" href="resources/css/denglu.css"> <link rel="stylesheet" href="resources/css/style.css">  <link rel="stylesheet" href="resources/css/vue.css"> <script src="resources/js/renda.js" type="text/javascript" charset="utf-8"></script> <title>人大信访-登录页面</title> <style> .form-group { margin-bottom: 3px; } .form-group-yanzhengma { margin-top: 10px; } @media screen and (max-width: 1024px) { .form-group { margin-bottom: 2px; } label { margin-bottom: 0px; } .form-control { height: 30px !important; box-sizing: border-box; } .yanzhengma-input { margin-top: 6px; } .yanzhengma { margin-top: 6px; } .public-container { width: 65%; } .form-group-yanzhengma { margin-top: 4px; } } @media screen and (min-width:1367px) and (max-width: 1920px) { .form-group { margin-bottom: 20px; } .form-group-yanzhengma { margin-top: 23px; } .login { margin-top: 23px !important; } } </style> </head> <body style="position: relative">  <div id="myModal" class="modal" style=" width:800px; height:800px; position: absolute; left: 50%; top: 50%; margin-top: -200px ; margin-left: -500px ; z-index:9999; padding: 20px; border-radius:50px; overflow:hidden;" > <div class="modal-content" style="width:100%; heigth:100%; background: linear-gradient(to bottom, RGBA(250, 203, 206,1), #fff 50%);"> <h2 style="text-align:center; font-size:22px; margin-top:20px;">关于全国人大机关网上信访小程序</h2> <h2 style="text-align:center; font-size:22px; margin-top:20px;">上线试运行的通告</h2> <p style="padding: 20px; box-sizing:border-box; text-indent:32px; font-size:16px;"> 2025年1月6日，全国人大机关网上信访小程序开始上线试运行。可通过微信小程序搜索“全国人大机关网上信访”进入全国人大机关网上信访，完成实名验证注册后，按照流程和规则要求，实事求是提出诉求或意见。在中国人大网网上信访平台完成注册的用户，可直接登录，无需重复注册。 <br>      通过小程序提交信访事项后，工作人员将按照信访工作法治化要求，依法依规进行处理。 </p> <div style="text-align:right;"> <p class="office - name" style="padding: 1px 20px; box-sizing:border-box; text-indent:32px; font-size:16px;">全国人大常委会办公厅</p> <p class="date" style="padding: 1px 20px; box-sizing:border-box; text-indent:32px; font-size:16px;">2025年1月2日</p> </div> <p class = "butBox" style=" width: 100%; height: 50px; display: flex; align-items: center; justify-content: center;"> <span class="close1" style="display:block; width: 120px; color:#000; cursor:pointer; height: 30px; border:1px solid #ddd; border-radius:19px; line-height: 30px; font-size: 16px; text-align: center; background: linear-gradient(to left, rgb(252, 223, 225), rgba(252, 223, 225, 0.5)); ">我知道了</span> </p> </div> </div>   <link rel="stylesheet" href="resources/css/vue.css"> <script src="resources/js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> <script src='resources/js/jquery.base64.js'></script> <style type="text/css"> #noticeBox { position: fixed; z-index: 999999; height: 100%; left: 0; top: 0; } .noticeButton { position: absolute; width: 50px; height: 160px; writing-mode: horizontal-tb; top: 0; left: 0; bottom: 15%; margin: auto; background-color: #e00d0d; text-align: center; color: #ffffff; font-size: 26px; line-height: 32px; padding: 10px 0px; cursor: pointer; z-index: 2; border-top-right-radius: 30px; border-bottom-right-radius: 30px; } .noticeList { position: absolute; width: 270px !important; height: 50%; writing-mode: horizontal-tb; top: 0; left: 0; bottom: 7%; margin: auto; background-color: #FFE4E1; z-index: 9999; } #noticeContet { width: 100%; height: 100%; overflow: hidden; padding: 10px; font-size: 18px; } .noticeList p { line-height: 26px; margin-bottom: 10px; } .noticeButton-right { right: -320px; z-index: 9999; bottom: 14%; } </style>  <div class="public-header"> <div class="header-floor2"> <div class="public-container"> <div class="guohui">  </div> <div class="qgrdwsxf"> 全国人大机关网上信访 </div> <div class="qgrdw">  <a href="http://www.npc.gov.cn/"><img src="resources/images/qgrd.png" alt=""></a> </div> </div> </div> <div class="header-floor3"> <div class="public-container"> <ul class="daohang"> <li class="item itemzuo " id="itemzuo"><a class="daohang-a li-active" href="./rdxf-index"><span>登录</span></a></li> <li class="item itemzhong"><a class="daohang-a" href="./rdxf-yijianjianyi"><span>登记</span></a></li> <li class="item itemzhong2"><a class="daohang-a" href="./rdxf-wangshangchaxun"><span>查询</span></a></li> <li class="item itemyou"><a class="daohang-a" href="./rdxf-falvzhengce"><span>法律政策</span></a></li> </ul> </div> </div> </div>   <script src="resources/js/vue.js"></script>  <script src="resources/js/index.js"></script> <script type="text/javascript"> var noticeBoxVue = new Vue({ el: '#noticeBox', data:({ showList: true, noticeList: [], intervalEle: null, showNoticeList: false }), mounted:function () { this.getGzxx() }, methods: { getGzxx: function () { var that = this $.ajax( { type:"post", url:"wscx/getggxx", data: { "pageIndex" : 1, "pageSize" : 1000, "type" :"1" }, dataType:"json", success: function(data) { noticeBoxVue.noticeList = data.data if (data.data.length == 0) { that.showNoticeList = false } else { that.showNoticeList = true } /* setTimeout(() => { startmarquee(26,26,300,"noticeContet") }, 1000) */ setTimeout(function () { /* setInterval(move(),30); */ that.moveHandle(); /* console.log(that.$refs.noticeContet.scrollTop) console.log(that.$refs.noticeContet1.getBoundingClientRect()) */ }, 1000) }, error:function(data){ alert(data.meta.message); } }); }, moveHandle: function () { clearInterval(this.intervalEle) let noticeContet = this.$refs.noticeContet let noticeContet1 = this.$refs.noticeContet1 if(noticeContet.scrollTop>=noticeContet1.getBoundingClientRect().height){ noticeContet.scrollTop=0; } else{ noticeContet.scrollTop=noticeContet.scrollTop+1; } this.intervalEle = setInterval(this.moveHandle, 30); }, showGgxx: function () { clearInterval(this.intervalEle); this.showList = !this.showList setTimeout(function () { if (this.showList) { this.intervalEle = setInterval(this.moveHandle, 30); } else { clearInterval(this.intervalEle); } }, 1000) }, mouseOver: function () { clearInterval(this.intervalEle); }, mouseLeave: function () { this.intervalEle = setInterval(this.moveHandle, 30); } } }) </script> <script type="text/javascript"> function jianYi(){ $.ajax({ url : "WebYijian/sfYijian", type : "post", dataType : "json", success : function(data){ if(data.meta.success){ window.location.href="rdxf-yijianjianyi"; }else{ alert(data.meta.message); // window.location.reload(); } } }); } function startmarquee(lh,speed,delay,marqueeObj) { //lh---每行列表的高度，speed---滚动的速度，delay---间隔多久滚动一次,marqueeObj---需要实现这个效果的id /* noticeContet1 noticeContet1 */ /* var noticeContet=document.getElementById("noticeContet"); var noticeContet1=document.getElementById("noticeContet1"); var noticeContet2=document.getElementById("noticeContet2"); noticeContet2.innerHTML=noticeContet1.innerHTML; console.log(noticeContet.scrollTop); console.log(noticeContet1.offsetHeight); console.log(noticeContet2); function move(noticeContet, noticeContet1) { if(noticeContet.scrollTop>=noticeContet1.offsetHeight){ noticeContet.scrollTop=0; } else{ noticeContet.scrollTop=noticeContet.scrollTop+1; } } setInterval(move(),30); */ /* var p=false; var t; var o=document.getElementById(marqueeObj); o.innerHTML+=o.innerHTML; o.style.marginTop=0; o.onmouseover=function(){p=true;} //鼠标移入，停止滚动 o.onmouseout=function(){p=false;}//鼠标移出，继续滚动 function start(){ t=setInterval(scrolling,speed); //定时器，自动滚动 if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px"; } function scrolling(){ if(parseInt(o.style.marginTop)%lh!=0){ o.style.marginTop=parseInt(o.style.marginTop)-1+"px"; if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight - 80) o.style.marginTop=0; }else{ clearInterval(t); setTimeout(start,delay); } } setTimeout(start,delay); */ } </script>  <div class="body1" id="app2"> <div class="public-container public-container-bg"> <div class="content"> <div class="content-top"> <span class="content-top-left">网上信访</span> <span class="content-top-right">当前位置： <a href="">首页</a>><a href="">网上信访</a> </span> </div> <div class="content-body"> <div class="mainbody"> <div class="mainbody-left"> <img src="resources/images/renda.png" alt=""> </div> <div class="mainbody-right mainbodyr" id="userInfo"> <div style="width: 100%;"> <img style="width: 100%" src="resources/images/yhdl.png" alt=""> </div> <div class="form-group"> <label for="exampleInputEmail1">姓名 :</label> <input type="text" id="uname" name="uname" class="form-control" placeholder="" style="height: 30px !important;"> </div> <div class="form-group"> <label for="exampleInputPassword1">证件号码 :</label> <input id="idcard" name="idcard" type="text" class="form-control" placeholder="" style="height: 30px !important;"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码 :</label> <input id="passwd" name="passwd" type="password" class="form-control" placeholder="" style="height: 30px !important;"> </div>  <div class="form-group"> <div class="sliding"> 请按住滑块，拖至最右侧。 <p></p> <span class="span1_back" style="font-size: 30px; font-weight: 700; color: #ffffff;">></span> </div> </div> <a href="#" class="btn btn-default btn-danger login" style="margin-top: 10px;" onclick="login()">登录</a> <div class="wjmm-ljzc"> <span class="wjmm"><a href="./rdxf-wangjimima">忘记密码？</a></span> <span class="ljzc" id="lijizhuce" style="cursor: pointer"> <a href="./regist">立即注册</a> </span> </div> </div> </div> </div> </div> </div> </div>   <footer> <div class="public-foot"> <div class="public-container"> <div class="foot-txt"> <span> <a href="http://www.npc.gov.cn/npc/c30834/202107/1b661a77b3c34ec2bd82e33c53db26b4.shtml" target="_blank">关于我们</a> | <a href="">网站地图</a> </span> <br> 版权所有：全国人大信息中心 <br> 京ICP备06005931号 （浏览本网主页，使用IE8以外主流浏览器、将电脑显示屏的分辨率调为1920*1080） </div> <div class="foot-logo"> <img src="resources/images/dzjg.png" alt=""> </div> </div> </div> </footer> <script> var winH = $(window).height(); var bgH = $(".public-container-bg").height(winH -214 ); $(".content").height(winH -216); $(".content-body").height(winH-266); </script> <script> // 显示弹窗 window.onload = function() { var modal = document.getElementById('myModal'); modal.style.display = 'block'; // 获取关闭按钮并添加点击事件 var closeBtn = document.querySelector(".close1"); closeBtn.onclick = function() { modal.style.display = 'none'; } }; </script> <script> var isyanzheng = false $(function(){ $('.sliding > span').on('mousedown',function(ev){ //获取鼠标摁下的位置 var down_X=ev.clientX; //获取p,span的宽度 var p_W=$('.sliding > p').get(0).offsetWidth; var span_X=$('.sliding > span').get(0).offsetLeft; $(document).get(0).onmousemove=function(ev){ //获取鼠标移动的位置 var move_X=ev.clientX; //用移动过后的位置减去鼠标摁下的位置加上p的宽度或者 span 的left 值因为俩者是同步的所以减去其中一个就好 var size = move_X - down_X + p_W; if(size>0){// 移动的时候判断size>0的时候执行，Math.min选取最小值，让拖动过程中不至于超出 size=Math.min(($('.sliding').get(0).offsetWidth - $('.sliding > span').get(0).offsetWidth),size); }else{ //小于0的时候 size =0；防止有无聊的用户拖回超出边界 size=0; } $('.sliding > p').css('width', size + 'px'); $('.sliding > span').css('left', size + 'px'); //防止拖拽过程中选中文字 return false; } $(document).get(0).onmouseup=function(){ //鼠标松开执行,判段span到达边界时候执行 if(($('.sliding > span').get(0).offsetLeft) >= ($('.sliding').get(0).offsetWidth - $('.sliding > span').get(0).offsetWidth)){ //更改span的背景图片 $('.sliding > span').attr('class','span2_back'); //更改p标签中的内容 $('.sliding > p').text('验证通过'); $('.sliding > span').text('√'); //验证成功之后执行的方法 //successAfter(); isyanzheng = true //删除鼠标摁下方法防止用户无聊往回推拽 $('.sliding > span').off('mousedown'); }else{ //判断没到达边界让它再回到起点 //利用jquery让p 和 span 回到起始状态 $('.sliding > span').animate({left:'0px'},300); $('.sliding > p').animate({width:'0px'},300); } $(document).get(0).onmousemove=null; //最后让鼠标移动和鼠标松开事件停止 $(document).get(0).onmouseup=null; } }) }); </script> <script src="resources/js/jsencrypt.js"></script> <script> $(function(){ var rad = Math.floor(Math.random() * Math.pow(10, 8)); //uuuy是随便写的一个参数名称，后端不会做处理，作用是避免浏览器读取缓存的链接 $("#randCodeImage").attr("src", "VerificationCode/generate/" + rad); $.ajax({ type: "post", url: "login/Session", dataType: "json", success: function(data){ if(data.meta.success){ $("#userInfo").empty(); html = '<div class=""><div class="rightcon"><div style="margin-top:-10px;text-align: center"><span style="color: rgb(255, 255, 255); font-size: 24px; font-weight: bold;">欢迎'+data.data+'同志</span></div><ul><li>'; html+='<div><a href="./rdxf-gerenzhongxin"> <span>个人中心</span></a></div></li>'; html+='<li><div><span><a href="./rdxf-phoneContorl"><span>修改绑定手机</span></a></div></li>'; html+='<li><div><a href="./rdxf-xiugaimima"><span>修改密码</span></a></div></li>'; html+='<li><div><a href="#" onclick="logout()"><span>退出登录</span></a></div></li></ul></div></div>'; $("#userInfo").append(html); } } }); }) /** * 密码先使用base64进行加密之后在通过rsa2048进行加密 *身份证号直接通过rsa2048加密 */ function login(){ if (!isyanzheng) { alert("请通过滑动验证操作"); return false; } $.base64.utf8encode = true; var uname = $("#uname").val(); /* var passwd = $.base64.btoa($("#passwd").val()); var idcard = $.base64.btoa($("#idcard").val()); */ // 2022/04/09 修改加密规则密码加密：先使用base64进行加密之后在通过rsa2048进行加密身份证号加密直接使用rsa2048进行加密 var passwd = JSEncryptHandle($.base64.btoa($("#passwd").val())); var idcard = JSEncryptHandle($("#idcard").val()); var yzm = $("#yzm").val(); if(uname==""){ alert("姓名不能为空"); return false; } if(passwd==""){ alert("密码不能为空"); return false; } if(idcard==""){ alert("身份证不能为空"); return false; } $.ajax({ type: "post", url: "login", data: {uname:uname, passwd:passwd,idcard:idcard/* ,yzm:yzm */}, dataType: "json", success: function(data){ if(data.status==1){ $("#userInfo").empty(); html = '<div class=""><div class="rightcon"><div style="margin-top:-10px;text-align: center"><span style="color: rgb(255, 255, 255); font-size: 24px; font-weight: bold;">欢迎'+data.data+'同志</span></div><ul><li>'; html+='<div><a href="./rdxf-gerenzhongxin"> <span>个人中心</span></a></div></li>'; html+='<li><div><span><a href="./rdxf-phoneContorl"><span>修改绑定手机</span></a></div></li>'; html+='<li><div><a href="./rdxf-xiugaimima"><span>修改密码</span></a></div></li>'; html+='<li><div><a href="#" onclick="logout()"><span>退出登录</span></a></div></li></ul></div></div>'; $("#userInfo").append(html); }else{ alert(data.msg); $("#yzm").val(""); VerificationCode(); } } }); } function JSEncryptHandle (string) { //实例化一个JSEncrypt对象 var encrypt = new JSEncrypt(); //设置公钥 /* var publicKey = "-----BEGIN PUBLIC KEY-----\n" + "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCh9tZwZCGhk6TyerD4nTjim2x/\n" + "M6lCAJb2N128t07VHT/9tO/hrfJpeZ4lwyubWZ1OqvExc8bV/yEP68QHUWPf3HKI\n" + "Sy3C3zyxSkylw6jrnJDtU+DAloc8EmT6ieyhVpueCiT6ml/9+II+k80ua7QLdYz3\n" + "yKifzlwNBI2JHZQjpQIDAQAB\n" + "-----END PUBLIC KEY-----"; */ var publicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQChfKlOGvseEnFOqXsM5LxP67XCX7GD5qGn8Z1OLG7CD8l9gT3Ol3JytKtiR1WkzVlIDrI8kHQoz2EurTIPXp3jr0KRvpyRzJMiwYQN+PvJjqaZ3dueFOtJDhCooiEaTM1XRtQ65LIpe4taBsOIMZvKEVbtfpkJzwrTZjzHPRDSbwIDAQAB"; encrypt.setPublicKey(publicKey); //加密得到加密结果 var encodeData = encrypt.encrypt(string); return encodeData } function logout(){ $.ajax({ type: "post", url: "login/logout", dataType: "json", success: function(data){ if(data.meta.success){ $("#userInfo").empty(); html = '<div><img src="resources/images/yhdl.png" alt=""></div>'; html+='<div class="form-group"><label for="exampleInputEmail1">姓名 :</label> '; html+='<input type="text" id="uname" name="uname" class="form-control" placeholder="" style="height: 30px !important;">'; html+='</div><div class="form-group"><label for="exampleInputPassword1">证件号码 :</label> '; html+='<input id="idcard" name="idcard"type="text" class="form-control" placeholder="" style="height: 30px !important;">'; html+='</div><div class="form-group"><label for="exampleInputPassword1">密码 :</label> '; html+='<input id="passwd" name="passwd" type="password" class="form-control" placeholder="" style="height: 30px !important;">'; /* html+='</div><div class="form-group"><input type="text" class="form-control" id="yzm" placeholder="验证码" style="width: 46%; float: left;height: 30px !important;">'; html+='<div><div style="width: 60px; height: 30px; margin-left: 7px; margin-top: 2px; border: 1px #c5c5c5 solid; float: left; text-align: center;">'; html+='<a href="javascript:void(0);" onclick="VerificationCode()"><img style="width:69px;" id="randCodeImage" alt="验证码" src="" /></a>'; */ html+='<div class="form-group"><div class="sliding">请按住滑块，拖至最右侧。<p></p><span class="span1_back" style="font-size: 30px;font-weight: 700;color: #ffffff;">></span></div></div>'; html+='</div></div></div><a href="#" class="btn btn-default btn-danger login" style="margin-top: 10px;" onclick="login()">登录</a>'; html+='<div class="wjmm-ljzc"><span class="wjmm"><a href="./rdxf-wangjimima">忘记密码？</a></span> <span class="ljzc"><a href="./regist">立即注册</a></span></div>'; $("#userInfo").append(html); var rad = Math.floor(Math.random() * Math.pow(10, 8)); //uuuy是随便写的一个参数名称，后端不会做处理，作用是避免浏览器读取缓存的链接 $("#randCodeImage").attr("src", "VerificationCode/generate/" + rad); window.location.reload(); }else{ alert(data.meta.message); window.location.reload(); } } }); } /** *验证码刷新 */ function VerificationCode() { var rad = Math.floor(Math.random() * Math.pow(10, 8)); //uuuy是随便写的一个参数名称，后端不会做处理，作用是避免浏览器读取缓存的链接 $("#randCodeImage").attr("src", "VerificationCode/generate/" + rad); } /** *(8:00——18:00)跳转注册页面 */ $("#lijizhuce").click(function(){ var today = new Date(); var hour = today.getHours(); if (hour >= 8 && hour <18) { //window.open("./regist"); window.location.href="./regist"; }else{ alert("您好！注册时间为每天8:00—18:00"); } }); </script> <script src="resources/js/vue.js"></script> <script type="text/javascript"> var vmup = new Vue({ el: '#app2', data:({ beginClientX: 0 /*距离屏幕左端距离*/ , mouseMoveStata: false /*触发拖动状态判断*/ , maxwidth: '' /*拖动最大宽度，依据滑块宽度算出来的*/ , confirmWords: '向右滑动验证' /*滑块文字*/ , confirmSuccess: false /*验证成功判断*/ }), mounted () { this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth; document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn); document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn); }, methods: { } }); </script> </body> </html>

CINXE.COM

人大信访-登录页面