更新登录页面背景

pull/64/head
fengshuonan 2021-01-19 21:56:47 +08:00
parent 562a6e3f93
commit ca7c6c94ef
1 changed files with 88 additions and 4 deletions

View File

@ -15,7 +15,7 @@
<![endif]-->
<style>
body {
background-image: url("${ctxPath}/assets/common/images/bg-login.jpg");
background-image:linear-gradient(135deg, #168af0 0%, #6eeaa4 100%);
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
@ -157,9 +157,19 @@
.layui-link {
color: #5FB878 !important;
}
canvas {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" width="1920" height="1080"></canvas>
<div class="login-wrapper layui-anim layui-anim-scale layui-hide">
<form class="layui-form">
<h2>用户登录</h2>
@ -219,8 +229,6 @@
var admin = layui.admin;
var notice = layui.notice;
$('.login-wrapper').removeClass('layui-hide');
var errorMsg = "${tips!}";
@ -245,6 +253,7 @@
@if(constants.getCaptchaOpen()){
getKaptcha();
@}
// 登录操作
form.on('submit(loginSubmit)', function (data){
admin.btnLoading('#loginSubmit',"登录中");
@ -269,8 +278,83 @@
request.start(true);
return false;
});
// canvas绘画
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var w = canvas.width = canvas.offsetWidth;
var h = canvas.height = canvas.offsetHeight;
var circles = [];
init(180);
function init(num) {
for (var i = 0; i < num; i++) {
newobject(Math.random() * w, Math.random() * h);
}
draw();
}
function newobject(x, y) {
var object = new Object();
object.x = x;
object.y = y;
object.r = Math.random() * 3;
object._mx = Math.random();
object._my = Math.random();
circles.push(object);
}
function drawCircle(obj) {
ctx.beginPath();
ctx.arc(obj.x, obj.y, obj.r, 0, 360);
ctx.closePath();
ctx.fillStyle = "rgba(204, 204, 204, 0.3)";
ctx.fill();
}
function drawLine(obj1, obj) {
let dx = obj1.x - obj.x;
let dy = obj1.y - obj.y;
let d = Math.sqrt(dx * dx + dy * dy);
if (d < 60) {
ctx.beginPath();
ctx.lineWidth = 0.5;
ctx.moveTo(obj1.x, obj1.y); //start
ctx.lineTo(obj.x, obj.y); //end
ctx.closePath();
ctx.strokeStyle = "rgba(204, 204, 204, 0.3)";
ctx.stroke();
}
}
function move(obj) {
obj._mx = obj.x < w && obj.x > 0 ? obj._mx : -obj._mx;
obj._my = obj.y < h && obj.y > 0 ? obj._my : -obj._my;
obj.x += obj._mx / 2;
obj.y += obj._my / 2;
}
function draw() {
ctx.clearRect(0, 0, w, h);
for (let i = 0; i < circles.length; i++) {
move.call(circles[i], circles[i]);
drawCircle.call(circles[i], circles[i]);
for (let j = i + 1; j < circles.length; j++) {
drawLine.call(circles[i], circles[i], circles[j]);
}
}
requestAnimationFrame(draw);
}
});
</script>
</body>
</html>
</html>