root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed:完善login.html

master
bobi 2019-08-22 22:32:03 +08:00
parent a2b1923ec5
commit e18b311001
6 changed files with 365 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
css/okadmin.css
View File

@ -3,13 +3,14 @@
@import "../lib/fonts/myfont.css"; @import "../lib/fonts/myfont.css";
@import "../lib/nprogress/nprogress.css"; @import "../lib/nprogress/nprogress.css";
#navBar .layui-nav-child{ #navBar .layui-nav-child {
/*transition: height .5s;*/ /*transition: height .5s;*/
overflow: hidden; overflow: hidden;
padding: 5px 0!important; padding: 5px 0 !important;
} }
#navBar .layui-nav-itemed .layui-nav-child, #navBar .layui-nav-itemed .layui-nav-child,
#navBar .layui-nav-child dd{ #navBar .layui-nav-child dd {
overflow: hidden; overflow: hidden;
} }
@ -17,16 +18,19 @@
line-height: inherit; line-height: inherit;
font-size: 16px; font-size: 16px;
} }
/**不显示滚动条样式*/ /**不显示滚动条样式*/
.not-scroll::-webkit-scrollbar{ .not-scroll::-webkit-scrollbar {
height: 0; height: 0;
width: 0; width: 0;
background: transparent; background: transparent;
display: none; display: none;
} }
.scrollBody::-webkit-scrollbar{
.scrollBody::-webkit-scrollbar {
display: none; display: none;
} }
/**去掉after**/ /**去掉after**/
.no-line.layui-this:after { .no-line.layui-this:after {
background: transparent !important; background: transparent !important;
@ -476,20 +480,23 @@
} }
/*中国天气样式*/ /*中国天气样式*/
.weather-ok{ .weather-ok {
height: 49px; height: 49px;
line-height: 49px; line-height: 49px;
} }
.weather-ok .iframe-style{
.weather-ok .iframe-style {
/*height: 415px;*/ /*height: 415px;*/
/*height: 375px;*/ /*height: 375px;*/
height: 50px; height: 50px;
padding-top: 5px; padding-top: 5px;
box-sizing: border-box; box-sizing: border-box;
} }
.weather-ok .iframe-style:hover{
.weather-ok .iframe-style:hover {
height: 380px; height: 380px;
} }
/*主体内容样式*/ /*主体内容样式*/
.okadmin .content-body { .okadmin .content-body {
position: absolute; position: absolute;
@ -500,6 +507,7 @@
z-index: 1; z-index: 1;
overflow: hidden overflow: hidden
} }
.okadmin .content-body:after { .okadmin .content-body:after {
content: ""; content: "";
max-height: 1px; max-height: 1px;
@ -528,10 +536,11 @@
} }
/*主体内容选项卡内容样式*/ /*主体内容选项卡内容样式*/
.content-body .layui-tab{ .content-body .layui-tab {
margin: 0; margin: 0;
/*position: relative;*/ /*position: relative;*/
} }
.okadmin .content-body .layui-tab-content { .okadmin .content-body .layui-tab-content {
position: absolute; position: absolute;
top: 40px; top: 40px;
@ -621,27 +630,50 @@
} }
/**********登录页的样式**********/ /**********登录页的样式**********/
.page-fill{ .page-fill {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
} }
#login .layui-icon{ font-size:16px !important;}
#login .mag0{ margin:0 !important; } #login .layui-icon {
#login ::selection { background: #ff5722; color: #fff; } font-size: 16px !important;
#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 .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 { #login .layui-block {
width: 100% !important; width: 100% !important;
} }
#login { #login {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url('../images/login-bg.jpg'); background-image: url('../images/login-bg.jpg');
position: relative; position: relative;
} }
#login form.layui-form { #login form.layui-form {
padding: 0 20px 20px 20px; padding: 0 20px 20px 20px;
width: 300px; width: 300px;
@ -692,9 +724,11 @@
font-size: 14px; font-size: 14px;
cursor: text; cursor: text;
} }
#login #code{
#login #code {
padding-right: 110px; padding-right: 110px;
} }
#login #imgCode .img { #login #imgCode .img {
position: absolute; position: absolute;
top: 1px; top: 1px;
@ -704,29 +738,35 @@
width: 100px; width: 100px;
background: #C4E1CE; background: #C4E1CE;
} }
#login .layui-form-item input{
background: #FFF!important; #login .layui-form-item input {
background: #FFF !important;
} }
#login .layui-form-item input, #login .layui-form-item input,
#login .layui-form-item label{ #login .layui-form-item label {
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
-webkit-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 input::placeholder {
color: transparent !important;
} }
#login .layui-form-item.layui-input-focus input::placeholder{
color: #757575!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-focus label,
#login .layui-form-item.layui-input-active label{ #login .layui-form-item.layui-input-active label {
top: -10px; top: -10px;
font-size: 12px; font-size: 12px;
color: #ff6700; color: #ff6700;
background: #fff!important; background: #fff !important;
} }
#login #codeImg canvas{
cursor:pointer; #login #codeImg canvas {
cursor: pointer;
} }
/* /*
@ -755,9 +795,11 @@
background: rgba(0, 0, 0, .5); background: rgba(0, 0, 0, .5);
display: none; display: none;
} }
@media screen and (max-width: 970px) {/*当屏幕宽度小于970时执行*/
.ok-hide-md{ @media screen and (max-width: 970px) {
display: none!important; /*当屏幕宽度小于970时执行*/
.ok-hide-md {
display: none !important;
} }
} }

38
lib/layui/lay/okmodules/okGVerify.js
View File

@ -1,18 +1,18 @@
layui.define(["jquery"], function (exprots) { layui.define(["jquery"], function (exprots) {
var $ = layui.jquery; var $ = layui.jquery;
function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数 function GVerify(options) {
this.options = { //默认options参数值 this.options = {
id: "", //容器Id id: "",
canvasId: "verifyCanvas", //canvas的ID canvasId: "verifyCanvas",
width: "100", //默认canvas宽度 width: "100",
height: "30", //默认canvas高度 height: "30",
type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母 type: "blend",
code: "" code: ""
}; };
if (Object.prototype.toString.call(options) == "[object Object]") {//判断传入参数类型 if (Object.prototype.toString.call(options) == "[object Object]") {
for (var i in options) { //根据传入的参数，修改默认参数值 for (var i in options) {
this.options[i] = options[i]; this.options[i] = options[i];
} }
} else { } else {
@ -27,13 +27,10 @@ layui.define(["jquery"], function (exprots) {
} }
GVerify.prototype = { GVerify.prototype = {
/**版本号**/
version: '1.0.0', version: '1.0.0',
/**初始化方法**/
_init: function () { _init: function () {
var con = $(this.options.id); var con = $(this.options.id);
// console.log(con);
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");
this.options.width = con.outerWidth() > 0 ? con.outerWidth() : "100"; this.options.width = con.outerWidth() > 0 ? con.outerWidth() : "100";
this.options.height = con.outerHeight() > 0 ? con.outerHeight() : "30"; this.options.height = con.outerHeight() > 0 ? con.outerHeight() : "30";
@ -50,7 +47,6 @@ layui.define(["jquery"], function (exprots) {
} }
}, },
/**生成验证码**/
refresh: function () { refresh: function () {
this.options.code = ""; this.options.code = "";
var canvas = document.getElementById(this.options.canvasId); var canvas = document.getElementById(this.options.canvasId);
@ -65,7 +61,7 @@ layui.define(["jquery"], function (exprots) {
ctx.fillStyle = randomColor(180, 240); ctx.fillStyle = randomColor(180, 240);
ctx.fillRect(0, 0, this.options.width, this.options.height); 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); var txtArr = this.options.numArr.concat(this.options.letterArr);
} else if (this.options.type == "number") { } else if (this.options.type == "number") {
var txtArr = this.options.numArr; var txtArr = this.options.numArr;
@ -76,8 +72,8 @@ layui.define(["jquery"], function (exprots) {
for (var i = 1; i <= 4; i++) { for (var i = 1; i <= 4; i++) {
var txt = txtArr[randomNum(0, txtArr.length)]; var txt = txtArr[randomNum(0, txtArr.length)];
this.options.code += txt; this.options.code += txt;
ctx.font = randomNum(this.options.height / 2, this.options.height) + 'px SimHei'; //随机生成字体大小 ctx.font = randomNum(this.options.height / 2, this.options.height) + 'px SimHei';
ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色 ctx.fillStyle = randomColor(50, 160);
ctx.shadowOffsetX = randomNum(-3, 3); ctx.shadowOffsetX = randomNum(-3, 3);
ctx.shadowOffsetY = randomNum(-3, 3); ctx.shadowOffsetY = randomNum(-3, 3);
ctx.shadowBlur = 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 x = this.options.width / 5 * i;
var y = this.options.height / 2; var y = this.options.height / 2;
var deg = randomNum(-30, 30); var deg = randomNum(-30, 30);
/**设置旋转角度和坐标原点**/
ctx.translate(x, y); ctx.translate(x, y);
ctx.rotate(deg * Math.PI / 180); ctx.rotate(deg * Math.PI / 180);
ctx.fillText(txt, 0, 0); ctx.fillText(txt, 0, 0);
/**恢复旋转角度和坐标原点**/
ctx.rotate(-deg * Math.PI / 180); ctx.rotate(-deg * Math.PI / 180);
ctx.translate(-x, -y); ctx.translate(-x, -y);
} }
/**绘制干扰线**/
for (var i = 0; i < 4; i++) { for (var i = 0; i < 4; i++) {
ctx.strokeStyle = randomColor(40, 180); ctx.strokeStyle = randomColor(40, 180);
ctx.beginPath(); ctx.beginPath();
@ -101,7 +94,6 @@ layui.define(["jquery"], function (exprots) {
ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height)); ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
ctx.stroke(); ctx.stroke();
} }
/**绘制干扰点**/
for (var i = 0; i < this.options.width / 4; i++) { for (var i = 0; i < this.options.width / 4; i++) {
ctx.fillStyle = randomColor(0, 255); ctx.fillStyle = randomColor(0, 255);
ctx.beginPath(); ctx.beginPath();
@ -110,31 +102,26 @@ layui.define(["jquery"], function (exprots) {
} }
}, },
/**验证验证码**/
validate: function (code) { validate: function (code) {
var code = code.toLowerCase(); var code = code.toLowerCase();
var v_code = this.options.code.toLowerCase(); var v_code = this.options.code.toLowerCase();
if (code == v_code) { if (code == v_code) {
return "true"; return "true";
} else { } else {
// this.refresh();
return "验证码不正确，请重新输入"; return "验证码不正确，请重新输入";
} }
} }
} }
/**生成字母数组**/
function getAllLetter() { 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"; 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(","); return letterStr.split(",");
} }
/**生成一个随机数**/
function randomNum(min, max) { function randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min); return Math.floor(Math.random() * (max - min) + min);
} }
/**生成一个随机色**/
function randomColor(min, max) { function randomColor(min, max) {
var r = randomNum(min, max); var r = randomNum(min, max);
var g = randomNum(min, max); var g = randomNum(min, max);
@ -143,6 +130,5 @@ layui.define(["jquery"], function (exprots) {
} }
exprots("okGVerify", GVerify); exprots("okGVerify", GVerify);
}); });

35
lib/layui/lay/okmodules/okMock.js Normal file
View File

@ -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);
});

39
lib/layui/lay/okmodules/okUtils.js
View File

@ -2,9 +2,13 @@
layui.define(["layer"], function(exprots) { layui.define(["layer"], function(exprots) {
var $ = layui.jquery; var $ = layui.jquery;
var okUtils = { var okUtils = {
// 是否前后端分离 /**
* 是否前后端分离
*/
isFrontendBackendSeparate: false, isFrontendBackendSeparate: false,
// 服务器地址 /**
* 服务器地址
*/
baseUrl: "http://localhost:8080", baseUrl: "http://localhost:8080",
/** /**
* 获取body的总宽度 * 获取body的总宽度
@ -47,7 +51,7 @@ layui.define(["layer"], function(exprots) {
success: function (data) { success: function (data) {
if (data.status == 1000) { if (data.status == 1000) {
// 业务正常 // 业务正常
deferred.resolve(data.data) deferred.resolve(data)
} else { } else {
// 业务异常 // 业务异常
layer.msg(data.msg, {icon: 7, time: 2000}); layer.msg(data.msg, {icon: 7, time: 2000});
@ -94,35 +98,6 @@ layui.define(["layer"], function(exprots) {
$(".layui-laypage-btn")[0].click(); $(".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); exprots("okUtils", okUtils);

7
lib/layui/layui.js
View File

@ -4,7 +4,7 @@ if (!Object.assign) {
enumerable: false, enumerable: false,
configurable: true, configurable: true,
writable: true, writable: true,
value: function(target, firstSource) { value: function (target, firstSource) {
"use strict"; "use strict";
if (target === undefined || target === null) if (target === undefined || target === null)
throw new TypeError("Cannot convert first argument to object"); throw new TypeError("Cannot convert first argument to object");
@ -34,8 +34,9 @@ if (!Object.assign) {
"jQqrcode": "okmodules/jQqrcode", "jQqrcode": "okmodules/jQqrcode",
"okAddlink": "okmodules/okAddlink", "okAddlink": "okmodules/okAddlink",
"okLayer": "okmodules/okLayer", "okLayer": "okmodules/okLayer",
"okMock": "okmodules/okMock",
}; };
var modulePath=Object.assign({ var modulePath = Object.assign({
layer: "modules/layer", layer: "modules/layer",
laydate: "modules/laydate", laydate: "modules/laydate",
laypage: "modules/laypage", laypage: "modules/laypage",
@ -58,7 +59,7 @@ if (!Object.assign) {
jquery: "modules/jquery", jquery: "modules/jquery",
mobile: "modules/mobile", mobile: "modules/mobile",
"layui.all": "../layui.all" "layui.all": "../layui.all"
},okmodules); }, okmodules);
var t = document, o = {modules: {}, status: {}, timeout: 10, event: {}}, n = function () { var t = document, o = {modules: {}, status: {}, timeout: 10, event: {}}, n = function () {
this.v = "2.5.4" this.v = "2.5.4"

33
pages/login.html
View File

@ -14,16 +14,16 @@
<form class="layui-form"> <form class="layui-form">
<div class="login_face"><img src="../images/logo.png" class="userAvatar"></div> <div class="login_face"><img src="../images/logo.png" class="userAvatar"></div>
<div class="layui-form-item input-item"> <div class="layui-form-item input-item">
<label for="userName">用户名</label> <label for="username">用户名</label>
<input type="text" lay-verify="required" name="userName" placeholder="请输入用户名" autocomplete="off" id="userName" class="layui-input"> <input type="text" lay-verify="required" name="username" placeholder="请输入账号" autocomplete="off" id="username" class="layui-input">
</div> </div>
<div class="layui-form-item input-item"> <div class="layui-form-item input-item">
<label for="password">密码</label> <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>
<div class="layui-form-item input-item" id="imgCode"> <div class="layui-form-item input-item" id="imgCode">
<label for="code">验证码</label> <label for="captcha">验证码</label>
<input type="text" lay-verify="required|yzmCode" name="code" placeholder="请输入验证码" autocomplete="off" id="code" class="layui-input"> <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 class="img ok-none-select" id="codeImg"></div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
@ -35,18 +35,19 @@
<!--js逻辑--> <!--js逻辑-->
<script src="../lib/layui/layui.js"></script> <script src="../lib/layui/layui.js"></script>
<script> <script>
layui.use(["form", "jquery", "okGVerify"], function () { layui.use(["form", "okGVerify", "okUtils", "okMock", "okLayer"], function () {
var form = layui.form; var form = layui.form;
var $ = layui.jquery; var $ = layui.jquery;
var okGVerify = layui.okGVerify; var okGVerify = layui.okGVerify;
var okUtils = layui.okUtils;
var okMock = layui.okMock;
var okLayer = layui.okLayer;
var verifyCode = new okGVerify("#codeImg"); var verifyCode = new okGVerify("#codeImg");
// var res = verifyCode.validate(document.getElementById("code").value);
form.verify({ form.verify({
pass: [ password: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
/^[\S]{6,12}$/, captcha: function (val) {
'密码必须6到12位，且不能出现空格'
],
yzmCode: function (val) {
if (verifyCode.validate(val) != "true") { if (verifyCode.validate(val) != "true") {
return verifyCode.validate(val) return verifyCode.validate(val)
} }
@ -54,13 +55,17 @@
}); });
form.on('submit(login)', function (data) { 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"; window.location = "../index.html";
})
}).fail(function (error) {
console.log(error)
}); });
return false; return false;
}); });
//表单输入效果
$("#login .input-item .layui-input").click(function (e) { $("#login .input-item .layui-input").click(function (e) {
e.stopPropagation(); e.stopPropagation();
$(this).addClass("layui-input-focus").find(".layui-input").focus(); $(this).addClass("layui-input-focus").find(".layui-input").focus();