diff --git a/erp_web/css/css.css b/erp_web/css/css.css index 27148e1f..8e01aa8c 100644 --- a/erp_web/css/css.css +++ b/erp_web/css/css.css @@ -651,6 +651,18 @@ input.inputstyle:hover{ position:relative; background:url(../images/bg_loginmain.jpg) no-repeat; } +#login .login_btn{ + float:left; + width:230px; + height:50px; + margin:160px auto 0 120px; +} +#login .register_btn{ + float:left; + width:230px; + height:50px; + margin:218px auto 0 120px; +} #login_signal{ position:absolute; left: 63px; @@ -668,6 +680,18 @@ input.inputstyle:hover{ top: 119px; width: 54px; } +#txt_userpwd_repeat{ + position:absolute; + left: 65px; + top: 154px; + width: 54px; +} +#txt_captcha{ + position:absolute; + left: 65px; + top: 189px; + width: 54px; +} #txt_vcode{ position:absolute; left: 66px; @@ -698,6 +722,40 @@ input.inputstyle:hover{ left: 118px; top: 118px; } +#user_pwd_repeat{ + position:absolute; + width:132px; + padding:0 4px; + height:23px; + line-height:23px; + border:none; + font-family:Arial, Helvetica, sans-serif; + background:url(../images/bg_logininout.jpg) no-repeat; + left: 118px; + top: 152px; +} +#user_captcha{ + position:absolute; + width:132px; + padding:0 4px; + height:23px; + line-height:23px; + border:none; + font-family:Arial, Helvetica, sans-serif; + background:url(../images/bg_logininout.jpg) no-repeat; + left: 118px; + top: 186px; +} +#imgCaptcha{ + position:absolute; + width:132px; + padding:0 4px; + height:40px; + line-height:23px; + border:none; + left: 270px; + top: 170px; +} #vcode{ position:absolute; width:67px; @@ -716,17 +774,32 @@ input.inputstyle:hover{ top: 151px; } #btn_login{ - position:absolute; - width:81px; + width:100px; height:30px; border:none; cursor:pointer; - background:url(../images/btn_login.jpg) no-repeat; + color: white; + background:#318dff; left: 120px; top: 170px; + margin-right: 10px; } #btn_login:hover{ - background:url(../images/btn_loginon.jpg) no-repeat; + background:#54a0ff; +} +#btn_register{ + width:100px; + height:30px; + border:none; + cursor:pointer; + color: white; + background:#318dff; + left: 120px; + top: 170px; + margin-right: 10px; +} +#btn_register:hover{ + background:#54a0ff; } #tip_username{ position:absolute; diff --git a/erp_web/images/login_tip.jpg b/erp_web/images/login_tip.jpg index a41eb2d1..c6bb5a3d 100644 Binary files a/erp_web/images/login_tip.jpg and b/erp_web/images/login_tip.jpg differ diff --git a/erp_web/images/register_tip.jpg b/erp_web/images/register_tip.jpg new file mode 100644 index 00000000..23b7eb82 Binary files /dev/null and b/erp_web/images/register_tip.jpg differ diff --git a/erp_web/js/gVerify.js b/erp_web/js/gVerify.js new file mode 100644 index 00000000..c94c50bb --- /dev/null +++ b/erp_web/js/gVerify.js @@ -0,0 +1,138 @@ +!(function(window, document) { + var size = 4;//设置验证码长度 + function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数 + this.options = { //默认options参数值 + id: "", //容器Id + canvasId: "verifyCanvas", //canvas的ID + width: "100", //默认canvas宽度 + height: "30", //默认canvas高度 + type: "letter", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母 + code: "", + } + if(Object.prototype.toString.call(options) == "[object Object]"){//判断传入参数类型 + for(var i in options) { //根据传入的参数，修改默认参数值 + this.options[i] = options[i]; + } + }else{ + this.options.id = options; + } + + this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(","); + this.options.letterArr = getAllLetter(); + + this._init(); + this.refresh(); + } + + GVerify.prototype = { + /**版本号**/ + version: '1.0.0', + + /**初始化方法**/ + _init: function() { + var con = document.getElementById(this.options.id); + var canvas = document.createElement("canvas"); + this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100"; + this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30"; + canvas.id = this.options.canvasId; + canvas.width = this.options.width; + canvas.height = this.options.height; + canvas.style.cursor = "pointer"; + canvas.innerHTML = "您的浏览器版本不支持canvas"; + con.appendChild(canvas); + var parent = this; + canvas.onclick = function(){ + parent.refresh(); + } + }, + + /**生成验证码**/ + refresh: function() { + this.options.code = ""; + var canvas = document.getElementById(this.options.canvasId); + if(canvas.getContext) { + var ctx = canvas.getContext('2d'); + }else{ + return; + } + + ctx.textBaseline = "middle"; + + ctx.fillStyle = randomColor(180, 240); + ctx.fillRect(0, 0, this.options.width, this.options.height); + + if(this.options.type == "blend") { //判断验证码类型 + var txtArr = this.options.numArr.concat(this.options.letterArr); + } else if(this.options.type == "number") { + var txtArr = this.options.numArr; + } else { + var txtArr = this.options.letterArr; + } + + for(var i = 1; i <=size; i++) { + var txt = txtArr[randomNum(0, txtArr.length)]; + this.options.code += txt; + ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; //随机生成字体大小 + ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色 + ctx.shadowOffsetX = randomNum(-3, 3); + ctx.shadowOffsetY = randomNum(-3, 3); + ctx.shadowBlur = randomNum(-3, 3); + ctx.shadowColor = "rgba(0, 0, 0, 0.3)"; + var x = this.options.width / (size+1) * i; + var y = this.options.height / 2; + var deg = randomNum(-30, 30); + /**设置旋转角度和坐标原点**/ + ctx.translate(x, y); + ctx.rotate(deg * Math.PI / 180); + ctx.fillText(txt, 0, 0); + /**恢复旋转角度和坐标原点**/ + ctx.rotate(-deg * Math.PI / 180); + ctx.translate(-x, -y); + } + /**绘制干扰线**/ + for(var i = 0; i < 4; i++) { + ctx.strokeStyle = randomColor(40, 180); + ctx.beginPath(); + ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height)); + ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height)); + ctx.stroke(); + } + /**绘制干扰点**/ + for(var i = 0; i < this.options.width/4; i++) { + ctx.fillStyle = randomColor(0, 255); + ctx.beginPath(); + ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI); + ctx.fill(); + } + }, + + /**验证验证码**/ + validate: function(code){ + var code = code.toLowerCase(); + var v_code = this.options.code.toLowerCase(); + if(code == v_code){ + return true; + }else{ + this.refresh(); + return false; + } + } + } + /**生成字母数组**/ + function getAllLetter() { + var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z"; + return letterStr.split(","); + } + /**生成一个随机数**/ + function randomNum(min, max) { + return Math.floor(Math.random() * (max - min) + min); + } + /**生成一个随机色**/ + function randomColor(min, max) { + var r = randomNum(min, max); + var g = randomNum(min, max); + var b = randomNum(min, max); + return "rgb(" + r + "," + g + "," + b + ")"; + } + window.GVerify = GVerify; +})(window, document); \ No newline at end of file diff --git a/erp_web/login.html b/erp_web/login.html index 7a7fe7e5..20b3de32 100644 --- a/erp_web/login.html +++ b/erp_web/login.html @@ -26,7 +26,10 @@ - +
+ + +