fixed:完善login.html
bobi
parent
a2b1923ec5
commit
e18b311001
|
|
@ -8,6 +8,7 @@
|
|||
overflow: hidden;
|
||||
padding: 5px 0 !important;
|
||||
}
|
||||
|
||||
#navBar .layui-nav-itemed .layui-nav-child,
|
||||
#navBar .layui-nav-child dd {
|
||||
overflow: hidden;
|
||||
|
|
@ -17,6 +18,7 @@
|
|||
line-height: inherit;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/**不显示滚动条样式*/
|
||||
.not-scroll::-webkit-scrollbar {
|
||||
height: 0;
|
||||
|
|
@ -24,9 +26,11 @@
|
|||
background: transparent;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scrollBody::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**去掉after**/
|
||||
.no-line.layui-this:after {
|
||||
background: transparent !important;
|
||||
|
|
@ -480,6 +484,7 @@
|
|||
height: 49px;
|
||||
line-height: 49px;
|
||||
}
|
||||
|
||||
.weather-ok .iframe-style {
|
||||
/*height: 415px;*/
|
||||
/*height: 375px;*/
|
||||
|
|
@ -487,9 +492,11 @@
|
|||
padding-top: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.weather-ok .iframe-style:hover {
|
||||
height: 380px;
|
||||
}
|
||||
|
||||
/*主体内容样式*/
|
||||
.okadmin .content-body {
|
||||
position: absolute;
|
||||
|
|
@ -500,6 +507,7 @@
|
|||
z-index: 1;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.okadmin .content-body:after {
|
||||
content: "";
|
||||
max-height: 1px;
|
||||
|
|
@ -532,6 +540,7 @@
|
|||
margin: 0;
|
||||
/*position: relative;*/
|
||||
}
|
||||
|
||||
.okadmin .content-body .layui-tab-content {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
|
|
@ -627,21 +636,44 @@
|
|||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#login .layui-icon{ font-size:16px !important;}
|
||||
#login .mag0{ margin:0 !important; }
|
||||
#login ::selection { background: #ff5722; color: #fff; }
|
||||
#login .layui-red{ color:#f00 !important; font-weight:bold;}
|
||||
#login .layui-blue{ color:#01AAED !important;}
|
||||
#login .layui-form-item.layui-input-focus input{ border-color:#ff6700 !important;}
|
||||
|
||||
#login .layui-icon {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
#login .mag0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#login ::selection {
|
||||
background: #ff5722;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#login .layui-red {
|
||||
color: #f00 !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#login .layui-blue {
|
||||
color: #01AAED !important;
|
||||
}
|
||||
|
||||
#login .layui-form-item.layui-input-focus input {
|
||||
border-color: #ff6700 !important;
|
||||
}
|
||||
|
||||
#login .layui-block {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#login {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('../images/login-bg.jpg');
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#login form.layui-form {
|
||||
padding: 0 20px 20px 20px;
|
||||
width: 300px;
|
||||
|
|
@ -692,9 +724,11 @@
|
|||
font-size: 14px;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
#login #code {
|
||||
padding-right: 110px;
|
||||
}
|
||||
|
||||
#login #imgCode .img {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
|
|
@ -704,20 +738,25 @@
|
|||
width: 100px;
|
||||
background: #C4E1CE;
|
||||
}
|
||||
|
||||
#login .layui-form-item input {
|
||||
background: #FFF !important;
|
||||
}
|
||||
|
||||
#login .layui-form-item input,
|
||||
#login .layui-form-item label {
|
||||
transition: all 0.3s ease-in-out;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
#login .layui-form-item input::placeholder {
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
#login .layui-form-item.layui-input-focus input::placeholder {
|
||||
color: #757575 !important;
|
||||
}
|
||||
|
||||
#login .layui-form-item.layui-input-focus label,
|
||||
#login .layui-form-item.layui-input-active label {
|
||||
top: -10px;
|
||||
|
|
@ -725,6 +764,7 @@
|
|||
color: #ff6700;
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
#login #codeImg canvas {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -755,7 +795,9 @@
|
|||
background: rgba(0, 0, 0, .5);
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 970px) {/*当屏幕宽度小于970时执行*/
|
||||
|
||||
@media screen and (max-width: 970px) {
|
||||
/*当屏幕宽度小于970时执行*/
|
||||
.ok-hide-md {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
layui.define(["jquery"], function (exprots) {
|
||||
var $ = layui.jquery;
|
||||
|
||||
function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数
|
||||
this.options = { //默认options参数值
|
||||
id: "", //容器Id
|
||||
canvasId: "verifyCanvas", //canvas的ID
|
||||
width: "100", //默认canvas宽度
|
||||
height: "30", //默认canvas高度
|
||||
type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
|
||||
function GVerify(options) {
|
||||
this.options = {
|
||||
id: "",
|
||||
canvasId: "verifyCanvas",
|
||||
width: "100",
|
||||
height: "30",
|
||||
type: "blend",
|
||||
code: ""
|
||||
};
|
||||
|
||||
if (Object.prototype.toString.call(options) == "[object Object]") {//判断传入参数类型
|
||||
for (var i in options) { //根据传入的参数，修改默认参数值
|
||||
if (Object.prototype.toString.call(options) == "[object Object]") {
|
||||
for (var i in options) {
|
||||
this.options[i] = options[i];
|
||||
}
|
||||
} else {
|
||||
|
|
@ -27,13 +27,10 @@ layui.define(["jquery"], function (exprots) {
|
|||
}
|
||||
|
||||
GVerify.prototype = {
|
||||
/**版本号**/
|
||||
version: '1.0.0',
|
||||
|
||||
/**初始化方法**/
|
||||
_init: function () {
|
||||
var con = $(this.options.id);
|
||||
// console.log(con);
|
||||
var canvas = document.createElement("canvas");
|
||||
this.options.width = con.outerWidth() > 0 ? con.outerWidth() : "100";
|
||||
this.options.height = con.outerHeight() > 0 ? con.outerHeight() : "30";
|
||||
|
|
@ -50,7 +47,6 @@ layui.define(["jquery"], function (exprots) {
|
|||
}
|
||||
},
|
||||
|
||||
/**生成验证码**/
|
||||
refresh: function () {
|
||||
this.options.code = "";
|
||||
var canvas = document.getElementById(this.options.canvasId);
|
||||
|
|
@ -65,7 +61,7 @@ layui.define(["jquery"], function (exprots) {
|
|||
ctx.fillStyle = randomColor(180, 240);
|
||||
ctx.fillRect(0, 0, this.options.width, this.options.height);
|
||||
|
||||
if (this.options.type == "blend") { //判断验证码类型
|
||||
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;
|
||||
|
|
@ -76,8 +72,8 @@ layui.define(["jquery"], function (exprots) {
|
|||
for (var i = 1; i <= 4; 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.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);
|
||||
|
|
@ -85,15 +81,12 @@ layui.define(["jquery"], function (exprots) {
|
|||
var x = this.options.width / 5 * 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();
|
||||
|
|
@ -101,7 +94,6 @@ layui.define(["jquery"], function (exprots) {
|
|||
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();
|
||||
|
|
@ -110,31 +102,26 @@ layui.define(["jquery"], function (exprots) {
|
|||
}
|
||||
},
|
||||
|
||||
/**验证验证码**/
|
||||
validate: function (code) {
|
||||
var code = code.toLowerCase();
|
||||
var v_code = this.options.code.toLowerCase();
|
||||
if (code == v_code) {
|
||||
return "true";
|
||||
} else {
|
||||
// this.refresh();
|
||||
return "验证码不正确，请重新输入";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**生成字母数组**/
|
||||
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);
|
||||
|
|
@ -143,6 +130,5 @@ layui.define(["jquery"], function (exprots) {
|
|||
}
|
||||
|
||||
exprots("okGVerify", GVerify);
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
"use strict";
|
||||
layui.define([], function(exprots) {
|
||||
var okMock = {
|
||||
api: {
|
||||
login: "https://www.easy-mock.com/mock/5d5d0dd46cfcbd1b8627bf1d/ok-admin-v2.0/login",
|
||||
menu: {
|
||||
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/menu/list"
|
||||
},
|
||||
user: {
|
||||
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/list",
|
||||
batchNormal: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/batchNormal",
|
||||
batchStop: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/batchStop",
|
||||
batchDel: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/batchDel",
|
||||
add: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/add",
|
||||
edit: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/edit"
|
||||
},
|
||||
role: {
|
||||
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/role/list"
|
||||
},
|
||||
permission: {
|
||||
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/permission/list"
|
||||
},
|
||||
article: {
|
||||
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/article/list"
|
||||
},
|
||||
log: {
|
||||
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/log/list"
|
||||
},
|
||||
message: {
|
||||
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/message/list"
|
||||
}
|
||||
}
|
||||
};
|
||||
exprots("okMock", okMock);
|
||||
});
|
||||
|
|
@ -2,9 +2,13 @@
|
|||
layui.define(["layer"], function(exprots) {
|
||||
var $ = layui.jquery;
|
||||
var okUtils = {
|
||||
// 是否前后端分离
|
||||
/**
|
||||
* 是否前后端分离
|
||||
*/
|
||||
isFrontendBackendSeparate: false,
|
||||
// 服务器地址
|
||||
/**
|
||||
* 服务器地址
|
||||
*/
|
||||
baseUrl: "http://localhost:8080",
|
||||
/**
|
||||
* 获取body的总宽度
|
||||
|
|
@ -47,7 +51,7 @@ layui.define(["layer"], function(exprots) {
|
|||
success: function (data) {
|
||||
if (data.status == 1000) {
|
||||
// 业务正常
|
||||
deferred.resolve(data.data)
|
||||
deferred.resolve(data)
|
||||
} else {
|
||||
// 业务异常
|
||||
layer.msg(data.msg, {icon: 7, time: 2000});
|
||||
|
|
@ -94,35 +98,6 @@ layui.define(["layer"], function(exprots) {
|
|||
$(".layui-laypage-btn")[0].click();
|
||||
});
|
||||
}
|
||||
},
|
||||
mockApi: {
|
||||
login: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/login",
|
||||
menu: {
|
||||
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/menu/list"
|
||||
},
|
||||
user: {
|
||||
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/list",
|
||||
batchNormal: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/batchNormal",
|
||||
batchStop: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/batchStop",
|
||||
batchDel: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/batchDel",
|
||||
add: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/add",
|
||||
edit: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/user/edit"
|
||||
},
|
||||
role: {
|
||||
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/role/list"
|
||||
},
|
||||
permission: {
|
||||
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/permission/list"
|
||||
},
|
||||
article: {
|
||||
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/article/list"
|
||||
},
|
||||
log: {
|
||||
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/log/list"
|
||||
},
|
||||
message: {
|
||||
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/message/list"
|
||||
}
|
||||
}
|
||||
};
|
||||
exprots("okUtils", okUtils);
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ if (!Object.assign) {
|
|||
"jQqrcode": "okmodules/jQqrcode",
|
||||
"okAddlink": "okmodules/okAddlink",
|
||||
"okLayer": "okmodules/okLayer",
|
||||
"okMock": "okmodules/okMock",
|
||||
};
|
||||
var modulePath = Object.assign({
|
||||
layer: "modules/layer",
|
||||
|
|
|
|||
|
|
@ -14,16 +14,16 @@
|
|||
<form class="layui-form">
|
||||
<div class="login_face"><img src="../images/logo.png" class="userAvatar"></div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="userName">用户名</label>
|
||||
<input type="text" lay-verify="required" name="userName" placeholder="请输入用户名" autocomplete="off" id="userName" class="layui-input">
|
||||
<label for="username">用户名</label>
|
||||
<input type="text" lay-verify="required" name="username" placeholder="请输入账号" autocomplete="off" id="username" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" lay-verify="required|pass" name="password" placeholder="请输入密码" autocomplete="off" id="password" class="layui-input">
|
||||
<input type="password" lay-verify="required|password" name="password" placeholder="请输入密码" autocomplete="off" id="password" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item" id="imgCode">
|
||||
<label for="code">验证码</label>
|
||||
<input type="text" lay-verify="required|yzmCode" name="code" placeholder="请输入验证码" autocomplete="off" id="code" class="layui-input">
|
||||
<label for="captcha">验证码</label>
|
||||
<input type="text" lay-verify="required|captcha" name="captcha" placeholder="请输入验证码" autocomplete="off" id="captcha" class="layui-input">
|
||||
<div class="img ok-none-select" id="codeImg"></div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
|
|
@ -35,18 +35,19 @@
|
|||
<!--js逻辑-->
|
||||
<script src="../lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use(["form", "jquery", "okGVerify"], function () {
|
||||
layui.use(["form", "okGVerify", "okUtils", "okMock", "okLayer"], function () {
|
||||
var form = layui.form;
|
||||
var $ = layui.jquery;
|
||||
var okGVerify = layui.okGVerify;
|
||||
var okUtils = layui.okUtils;
|
||||
var okMock = layui.okMock;
|
||||
var okLayer = layui.okLayer;
|
||||
|
||||
var verifyCode = new okGVerify("#codeImg");
|
||||
// var res = verifyCode.validate(document.getElementById("code").value);
|
||||
|
||||
form.verify({
|
||||
pass: [
|
||||
/^[\S]{6,12}$/,
|
||||
'密码必须6到12位，且不能出现空格'
|
||||
],
|
||||
yzmCode: function (val) {
|
||||
password: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
|
||||
captcha: function (val) {
|
||||
if (verifyCode.validate(val) != "true") {
|
||||
return verifyCode.validate(val)
|
||||
}
|
||||
|
|
@ -54,13 +55,17 @@
|
|||
});
|
||||
|
||||
form.on('submit(login)', function (data) {
|
||||
layer.msg("登陆中...", {icon: 6, time: 1000, anim: 0}, function () {
|
||||
okUtils.ajax(okMock.api.login, "post", data.field).done(function (response) {
|
||||
console.log(response)
|
||||
okLayer.msg.greenTick(response.msg, function () {
|
||||
window.location = "../index.html";
|
||||
})
|
||||
}).fail(function (error) {
|
||||
console.log(error)
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
//表单输入效果
|
||||
$("#login .input-item .layui-input").click(function (e) {
|
||||
e.stopPropagation();
|
||||
$(this).addClass("layui-input-focus").find(".layui-input").focus();
|
||||
|
|
|
|||
Loading…
Reference in New Issue