mirror of
https://github.com/crmeb/CRMEB.git
synced 2025-12-17 06:52:49 +00:00
修改后台登录页面样式
This commit is contained in:
sugar1569
parent
2ff668fa34
commit
c979542cba
@ -4,7 +4,9 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="renderer" content="webkit">
|
||||
<title>登录 - CRMEB管理系统</title>
|
||||
<title>登录管理系统 - Powered by CRMEB!</title>
|
||||
<meta name="generator" content="CRMEB! v2.5" />
|
||||
<meta name="author" content="CRMEB! Team and CRMEB UI Team" />
|
||||
<link href="{__FRAME_PATH}css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
|
||||
<link href="{__FRAME_PATH}css/font-awesome.min.css?v=4.3.0" rel="stylesheet">
|
||||
<link href="{__FRAME_PATH}css/animate.min.css" rel="stylesheet">
|
||||
@ -14,13 +16,13 @@
|
||||
</script>
|
||||
</head>
|
||||
<body class="gray-bg login-bg">
|
||||
<canvas id="canvas" width="900" height="300" style="position: fixed;top: -50px;width: 60%;left: 20%"></canvas>
|
||||
<div class="middle-box text-center loginscreen animated fadeInDown">
|
||||
<div class="login-group">
|
||||
<h3 class="login-logo">
|
||||
<img src="{__ADMIN_PATH}images/logo.png">
|
||||
<p>CRMEB管理系统</p>
|
||||
</h3>
|
||||
<form class="m-t" role="form" action="{:url('verify')}" method="post">
|
||||
<form role="form" action="{:url('verify')}" method="post">
|
||||
<div class="form-group">
|
||||
<div class="input-group m-b"><span class="input-group-addon"><i class="fa fa-user"></i> </span>
|
||||
<input type="text" id="account" name="account" placeholder="用户名" placeholder="用户名" class="form-control">
|
||||
@ -51,23 +53,18 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer" style=" position: fixed;bottom: 0;width: 100%;left: 0;margin: 0;">
|
||||
<div class="pull-right">© 2000-2019 <a href="http://www.crmeb.com/" target="_blank">西安众邦网络科技有限公司</a>
|
||||
<div class="footer" style=" position: fixed;bottom: 0;width: 100%;left: 0;margin: 0;opacity: 0.8;">
|
||||
<div class="pull-right">© 2017-2019 <a href="http://www.crmeb.com/" target="_blank">CRMEB</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 全局js -->
|
||||
<script src="{__PLUG_PATH}jquery-1.10.2.min.js"></script>
|
||||
<script src="{__FRAME_PATH}js/bootstrap.min.js?v=3.4.0"></script>
|
||||
<script src="{__MODULE_PATH}login/flaotfont.js"></script>
|
||||
<script src="{__MODULE_PATH}login/ios-parallax.js"></script>
|
||||
<script src="{__MODULE_PATH}login/index.js"></script>
|
||||
<!--统计代码，可删除-->
|
||||
<!--点击刷新验证码-->
|
||||
<script>
|
||||
(function captcha(){
|
||||
var $captcha = $('#verify_img'),src = $captcha[0].src;
|
||||
$captcha.on('click',function(){
|
||||
this.src = src+'?'+Date.parse(new Date());
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
8
public/system/frame/css/style.min.css
vendored
8
public/system/frame/css/style.min.css
vendored
@ -817,7 +817,7 @@ body.modal-open{padding-right:inherit!important}
|
||||
.invoice-total>tbody>tr>td:last-child{border-bottom:1px solid #DDD;text-align:right;width:15%}
|
||||
.middle-box{max-width:400px;z-index:100;margin:0 auto;padding-top:40px}
|
||||
.lockscreen.middle-box{width:200px;padding-top:110px}
|
||||
.loginscreen.middle-box{width:300px}
|
||||
.loginscreen.middle-box{width:340px}
|
||||
.loginColumns{max-width:800px;margin:0 auto;padding:100px 20px 20px}
|
||||
.passwordBox{max-width:460px;margin:0 auto;padding:100px 20px 20px}
|
||||
.logo-name{color:#e6e6e6;font-size:180px;font-weight:800;letter-spacing:-10px;margin-bottom:0}
|
||||
@ -1366,8 +1366,8 @@ body.skin-3{background:#3e2c42}
|
||||
}
|
||||
.btn-default{background-color:#79c7e4;border-color:#79c7e4}
|
||||
.btn-default.btn-outline{background-color:#fff;border-color:#c2c2c2}
|
||||
.login-group{background-color: #2f4050;padding: 0 20px 20px;color: #111123;}
|
||||
.login-logo{font-family:"Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;color:#fff;overflow:hidden;margin-top:80%}
|
||||
.login-group{margin-top: 30vh;background-color: #00111C;padding: 0 20px 20px;color: #111123;opacity: 0.8;border-radius: 7px;box-shadow: 0 0 10px #3FBEEB; border: 1px solid #74B5C9; }
|
||||
.login-logo{font-family:"Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;color:#fff;overflow:hidden;margin-top:1vh}
|
||||
.login-logo img{width:90px}
|
||||
.login-logo p{color:#fff;font-weight:300;margin:0}
|
||||
.login-bg{background-image:url(../../images/bg-logo.jpg)}
|
||||
@ -1383,7 +1383,7 @@ body.skin-3{background:#3e2c42}
|
||||
.mini-navbar .dashbard-1{transform:translate3d(0,0,0)}
|
||||
.footer{position:fixed;width:100%;left:0;bottom:0;margin:0!important}
|
||||
#content-main{height:calc(100% - 80px)}
|
||||
.login-logo{margin-top:21vh}
|
||||
.login-logo{margin-top:1vh}
|
||||
.fixed-sidebar.mini-navbar .slimScrollDiv .nav{display: none;}
|
||||
.navbar-default .navbar-static-side{display: none;}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 126 KiB After Width: | Height: | Size: 271 KiB |
665
public/system/module/login/flaotfont.js
Normal file
665
public/system/module/login/flaotfont.js
Normal file
@ -0,0 +1,665 @@
|
||||
"use strict";
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
console.clear();
|
||||
|
||||
var TWOPI = Math.PI * 2;
|
||||
|
||||
function distance(x1, y1, x2, y2) {
|
||||
var dx = x1 - x2;
|
||||
var dy = y1 - y2;
|
||||
return Math.sqrt(dx * dx + dy * dy);
|
||||
}
|
||||
|
||||
var gravity = 0.5;
|
||||
|
||||
// VNode class
|
||||
|
||||
var VNode = function () {
|
||||
function VNode(node) {
|
||||
_classCallCheck(this, VNode);
|
||||
|
||||
this.x = node.x || 0;
|
||||
this.y = node.y || 0;
|
||||
this.oldX = this.x;
|
||||
this.oldY = this.y;
|
||||
this.w = node.w || 2;
|
||||
this.angle = node.angle || 0;
|
||||
this.gravity = node.gravity || gravity;
|
||||
this.mass = node.mass || 1.0;
|
||||
|
||||
this.color = node.color;
|
||||
this.letter = node.letter;
|
||||
|
||||
this.pointerMove = node.pointerMove;
|
||||
this.fixed = node.fixed;
|
||||
}
|
||||
// verlet integration
|
||||
|
||||
|
||||
_createClass(VNode, [{
|
||||
key: 'integrate',
|
||||
value: function integrate(pointer) {
|
||||
|
||||
if (this.lock && (!this.lockX || !this.lockY)) {
|
||||
this.lockX = this.x;
|
||||
this.lockY = this.y;
|
||||
}
|
||||
|
||||
if (this.pointerMove && pointer && distance(this.x, this.y, pointer.x, pointer.y) < this.w + pointer.w) {
|
||||
this.x += (pointer.x - this.x) / (this.mass * 18);
|
||||
this.y += (pointer.y - this.y) / (this.mass * 18);
|
||||
} else if (this.lock) {
|
||||
this.x += (this.lockX - this.x) * this.lock;
|
||||
this.y += (this.lockY - this.y) * this.lock;
|
||||
}
|
||||
|
||||
if (!this.fixed) {
|
||||
var x = this.x;
|
||||
var y = this.y;
|
||||
this.x += this.x - this.oldX;
|
||||
this.y += this.y - this.oldY + this.gravity;
|
||||
this.oldX = x;
|
||||
this.oldY = y;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'set',
|
||||
value: function set(x, y) {
|
||||
this.oldX = this.x = x;
|
||||
this.oldY = this.y = y;
|
||||
}
|
||||
// draw node
|
||||
|
||||
}, {
|
||||
key: 'draw',
|
||||
value: function draw(ctx) {
|
||||
if (!this.color) {
|
||||
return;
|
||||
}
|
||||
// ctx.globalAlpha = 0.8;
|
||||
ctx.translate(this.x, this.y);
|
||||
ctx.rotate(this.angle);
|
||||
ctx.fillStyle = this.color;
|
||||
|
||||
ctx.beginPath();
|
||||
if (this.letter) {
|
||||
ctx.globalAlpha = 1;
|
||||
ctx.rotate(Math.PI / 2);
|
||||
|
||||
ctx.rect(-7, 0, 14, 1);
|
||||
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.font = 'bold 75px "Bebas Neue", monospace';
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillText(this.letter, 0, this.w * .25 + 4);
|
||||
|
||||
ctx.fillStyle = this.color;
|
||||
ctx.fillText(this.letter, 0, this.w * .25);
|
||||
} else {
|
||||
ctx.globalAlpha = 0.2;
|
||||
ctx.rect(-this.w, -this.w, this.w * 2, this.w * 2);
|
||||
// ctx.arc(this.x, this.y, this.w, 0, 2 * Math.PI);
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
}]);
|
||||
|
||||
return VNode;
|
||||
}();
|
||||
// constraint class
|
||||
|
||||
|
||||
var Constraint = function () {
|
||||
function Constraint(n0, n1, stiffness) {
|
||||
_classCallCheck(this, Constraint);
|
||||
|
||||
this.n0 = n0;
|
||||
this.n1 = n1;
|
||||
this.dist = distance(n0.x, n0.y, n1.x, n1.y);
|
||||
this.stiffness = stiffness || 0.5;
|
||||
this.firstRun = true;
|
||||
}
|
||||
// solve constraint
|
||||
|
||||
|
||||
_createClass(Constraint, [{
|
||||
key: 'solve',
|
||||
value: function solve() {
|
||||
var dx = this.n0.x - this.n1.x;
|
||||
var dy = this.n0.y - this.n1.y;
|
||||
|
||||
var newAngle = Math.atan2(dy, dx);
|
||||
this.n1.angle = newAngle;
|
||||
|
||||
var currentDist = distance(this.n0.x, this.n0.y, this.n1.x, this.n1.y);
|
||||
var delta = this.stiffness * (currentDist - this.dist) / currentDist;
|
||||
dx *= delta;
|
||||
dy *= delta;
|
||||
|
||||
if (this.firstRun) {
|
||||
this.firstRun = false;
|
||||
if (!this.n1.fixed) {
|
||||
this.n1.x += dx;
|
||||
this.n1.y += dy;
|
||||
}
|
||||
if (!this.n0.fixed) {
|
||||
this.n0.x -= dx;
|
||||
this.n0.y -= dy;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
var m1 = this.n0.mass + this.n1.mass;
|
||||
var m2 = this.n0.mass / m1;
|
||||
m1 = this.n1.mass / m1;
|
||||
|
||||
if (!this.n1.fixed) {
|
||||
this.n1.x += dx * m2;
|
||||
this.n1.y += dy * m2;
|
||||
}
|
||||
if (!this.n0.fixed) {
|
||||
this.n0.x -= dx * m1;
|
||||
this.n0.y -= dy * m1;
|
||||
}
|
||||
}
|
||||
// draw constraint
|
||||
|
||||
}, {
|
||||
key: 'draw',
|
||||
value: function draw(ctx) {
|
||||
ctx.globalAlpha = 0.9;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(this.n0.x, this.n0.y);
|
||||
ctx.lineTo(this.n1.x, this.n1.y);
|
||||
ctx.strokeStyle = "#fff";
|
||||
ctx.stroke();
|
||||
}
|
||||
}]);
|
||||
|
||||
return Constraint;
|
||||
}();
|
||||
|
||||
var Rope = function () {
|
||||
function Rope(rope) {
|
||||
_classCallCheck(this, Rope);
|
||||
|
||||
var x = rope.x,
|
||||
y = rope.y,
|
||||
length = rope.length,
|
||||
points = rope.points,
|
||||
vertical = rope.vertical,
|
||||
fixedEnds = rope.fixedEnds,
|
||||
startNode = rope.startNode,
|
||||
letter = rope.letter,
|
||||
endNode = rope.endNode,
|
||||
stiffness = rope.stiffness,
|
||||
constrain = rope.constrain,
|
||||
gravity = rope.gravity,
|
||||
pointerMove = rope.pointerMove;
|
||||
|
||||
|
||||
this.stiffness = stiffness || 1;
|
||||
this.nodes = [];
|
||||
this.constraints = [];
|
||||
if (letter === ' ') {
|
||||
return this;
|
||||
}
|
||||
|
||||
var dist = length / points;
|
||||
|
||||
for (var i = 0, _last = points - 1; i < points; i++) {
|
||||
|
||||
var size = letter && i === _last ? 15 : 2;
|
||||
var spacing = dist * i + size;
|
||||
var node = new VNode({
|
||||
w: size,
|
||||
mass: .1, //(i === last ? .5 : .1),
|
||||
fixed: fixedEnds && (i === 0 || i === _last)
|
||||
});
|
||||
|
||||
node = i === 0 && startNode || i === _last && endNode || node;
|
||||
|
||||
node.gravity = gravity;
|
||||
//node.pointerMove = pointerMove;
|
||||
|
||||
if (i === _last && letter) {
|
||||
node.letter = letter;
|
||||
node.color = '#FFF';
|
||||
node.pointerMove = true;
|
||||
}
|
||||
|
||||
node.oldX = node.x = x + (!vertical ? spacing : 0);
|
||||
node.oldY = node.y = y + (vertical ? spacing : 0);
|
||||
|
||||
this.nodes.push(node);
|
||||
}
|
||||
|
||||
constrain ? this.makeConstraints() : null;
|
||||
}
|
||||
|
||||
_createClass(Rope, [{
|
||||
key: 'makeConstraints',
|
||||
value: function makeConstraints() {
|
||||
for (var i = 1; i < this.nodes.length; i++) {
|
||||
this.constraints.push(new Constraint(this.nodes[i - 1], this.nodes[i], this.stiffness));
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'run',
|
||||
value: function run(pointer) {
|
||||
// integration
|
||||
var _iteratorNormalCompletion = true;
|
||||
var _didIteratorError = false;
|
||||
var _iteratorError = undefined;
|
||||
|
||||
try {
|
||||
for (var _iterator = this.nodes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
var n = _step.value;
|
||||
|
||||
n.integrate(pointer);
|
||||
}
|
||||
// solve constraints
|
||||
} catch (err) {
|
||||
_didIteratorError = true;
|
||||
_iteratorError = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion && _iterator.return) {
|
||||
_iterator.return();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError) {
|
||||
throw _iteratorError;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0; i < 5; i++) {
|
||||
var _iteratorNormalCompletion2 = true;
|
||||
var _didIteratorError2 = false;
|
||||
var _iteratorError2 = undefined;
|
||||
|
||||
try {
|
||||
for (var _iterator2 = this.constraints[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
|
||||
var _n = _step2.value;
|
||||
|
||||
_n.solve();
|
||||
}
|
||||
} catch (err) {
|
||||
_didIteratorError2 = true;
|
||||
_iteratorError2 = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion2 && _iterator2.return) {
|
||||
_iterator2.return();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError2) {
|
||||
throw _iteratorError2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// draw(ctx) {
|
||||
// // draw constraints
|
||||
// this.constraints.forEach(n => {
|
||||
// n.draw(ctx);
|
||||
// });
|
||||
// // draw nodes
|
||||
// this.nodes.forEach(n => {
|
||||
// n.draw(ctx);
|
||||
// })
|
||||
// }
|
||||
|
||||
}, {
|
||||
key: 'draw',
|
||||
value: function draw(ctx) {
|
||||
|
||||
var vertices = Array.from(this.constraints).reduce(function (p, c, i, a) {
|
||||
p.push(c.n0);
|
||||
if (i == a.length - 1) p.push(c.n1);
|
||||
return p;
|
||||
}, []);
|
||||
|
||||
var h = function h(x, y) {
|
||||
return Math.sqrt(x * x + y * y);
|
||||
};
|
||||
var tension = 0.5;
|
||||
|
||||
if (!vertices.length) return;
|
||||
|
||||
var controls = vertices.map(function () {
|
||||
return null;
|
||||
});
|
||||
for (var i = 1; i < vertices.length - 1; ++i) {
|
||||
var previous = vertices[i - 1];
|
||||
var current = vertices[i];
|
||||
var next = vertices[i + 1];
|
||||
|
||||
var rdx = next.x - previous.x,
|
||||
rdy = next.y - previous.y,
|
||||
rd = h(rdx, rdy),
|
||||
dx = rdx / rd,
|
||||
dy = rdy / rd;
|
||||
|
||||
var dp = h(current.x - previous.x, current.y - previous.y),
|
||||
dn = h(current.x - next.x, current.y - next.y);
|
||||
|
||||
var cpx = current.x - dx * dp * tension,
|
||||
cpy = current.y - dy * dp * tension,
|
||||
cnx = current.x + dx * dn * tension,
|
||||
cny = current.y + dy * dn * tension;
|
||||
|
||||
controls[i] = {
|
||||
cp: {
|
||||
x: cpx,
|
||||
y: cpy
|
||||
},
|
||||
cn: {
|
||||
x: cnx,
|
||||
y: cny
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
controls[0] = {
|
||||
cn: {
|
||||
x: (vertices[0].x + controls[1].cp.x) / 2,
|
||||
y: (vertices[0].y + controls[1].cp.y) / 2
|
||||
}
|
||||
};
|
||||
|
||||
controls[vertices.length - 1] = {
|
||||
cp: {
|
||||
x: (vertices[vertices.length - 1].x + controls[vertices.length - 2].cn.x) / 2,
|
||||
y: (vertices[vertices.length - 1].y + controls[vertices.length - 2].cn.y) / 2
|
||||
}
|
||||
};
|
||||
|
||||
// Draw vertices & control points
|
||||
// ctx.fillStyle = 'blue';
|
||||
// ctx.fillRect(vertices[0].x, vertices[0].y, 4, 4);
|
||||
// for (let i = 1; i < vertices.length; ++i)
|
||||
// {
|
||||
// const v = vertices[i];
|
||||
// const ca = controls[i - 1];
|
||||
// const cb = controls[i];
|
||||
// ctx.fillStyle = 'blue';
|
||||
// ctx.fillRect(v.x, v.y, 4, 4);
|
||||
// ctx.fillStyle = 'green';
|
||||
// ctx.fillRect(ca.cn.x, ca.cn.y, 4, 4);
|
||||
// ctx.fillRect(cb.cp.x, cb.cp.y, 4, 4);
|
||||
// }
|
||||
|
||||
ctx.globalAlpha = 0.9;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(vertices[0].x, vertices[0].y);
|
||||
for (var _i = 1; _i < vertices.length; ++_i) {
|
||||
var v = vertices[_i];
|
||||
var ca = controls[_i - 1];
|
||||
var cb = controls[_i];
|
||||
|
||||
ctx.bezierCurveTo(ca.cn.x, ca.cn.y, cb.cp.x, cb.cp.y, v.x, v.y);
|
||||
}
|
||||
ctx.strokeStyle = 'white';
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
|
||||
// draw nodes
|
||||
this.nodes.forEach(function (n) {
|
||||
n.draw(ctx);
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return Rope;
|
||||
}();
|
||||
|
||||
// Pointer class
|
||||
|
||||
|
||||
var Pointer = function (_VNode) {
|
||||
_inherits(Pointer, _VNode);
|
||||
|
||||
function Pointer(canvas) {
|
||||
_classCallCheck(this, Pointer);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, (Pointer.__proto__ || Object.getPrototypeOf(Pointer)).call(this, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 8,
|
||||
color: '#F00',
|
||||
fixed: true
|
||||
}));
|
||||
|
||||
_this.elem = canvas;
|
||||
canvas.addEventListener("mousemove", function (e) {
|
||||
return _this.move(e);
|
||||
}, false);
|
||||
canvas.addEventListener("touchmove", function (e) {
|
||||
return _this.move(e);
|
||||
}, false);
|
||||
return _this;
|
||||
}
|
||||
|
||||
_createClass(Pointer, [{
|
||||
key: 'move',
|
||||
value: function move(e) {
|
||||
var touchMode = e.targetTouches;
|
||||
var pointer = e;
|
||||
if (touchMode) {
|
||||
e.preventDefault();
|
||||
pointer = touchMode[0];
|
||||
}
|
||||
var rect = this.elem.getBoundingClientRect();
|
||||
var cw = this.elem.width;
|
||||
var ch = this.elem.height;
|
||||
|
||||
// get the scale based on actual width;
|
||||
var sx = cw / this.elem.offsetWidth;
|
||||
var sy = ch / this.elem.offsetHeight;
|
||||
|
||||
this.x = (pointer.clientX - rect.left) * sx;
|
||||
this.y = (pointer.clientY - rect.top) * sy;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Pointer;
|
||||
}(VNode);
|
||||
|
||||
var Scene = function () {
|
||||
function Scene(canvas) {
|
||||
_classCallCheck(this, Scene);
|
||||
|
||||
this.draw = true;
|
||||
this.canvas = canvas;
|
||||
this.ctx = canvas.getContext('2d');
|
||||
|
||||
this.nodes = new Set();
|
||||
this.constraints = new Set();
|
||||
this.ropes = [];
|
||||
|
||||
this.pointer = new Pointer(canvas);
|
||||
this.nodes.add(this.pointer);
|
||||
|
||||
this.run = this.run.bind(this);
|
||||
this.addRope = this.addRope.bind(this);
|
||||
this.add = this.add.bind(this);
|
||||
}
|
||||
|
||||
// animation loop
|
||||
|
||||
|
||||
_createClass(Scene, [{
|
||||
key: 'run',
|
||||
value: function run() {
|
||||
var _this2 = this;
|
||||
|
||||
// if (!canvas.isConnected) {
|
||||
// return;
|
||||
// }
|
||||
requestAnimationFrame(this.run);
|
||||
// clear screen
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
|
||||
this.ropes.forEach(function (rope) {
|
||||
rope.run(_this2.pointer);
|
||||
});
|
||||
|
||||
this.ropes.forEach(function (rope) {
|
||||
rope.draw(_this2.ctx);
|
||||
});
|
||||
|
||||
// // integration
|
||||
// for (let n of nodes) {
|
||||
// n.integrate(pointer);
|
||||
// }
|
||||
// solve constraints
|
||||
// for (let i = 0; i < 4; i++) {
|
||||
// for (let n of constraints) {
|
||||
// n.solve();
|
||||
// }
|
||||
// }
|
||||
// // draw constraints
|
||||
// for (let n of constraints) {
|
||||
// n.draw(ctx);
|
||||
// }
|
||||
// draw nodes
|
||||
var _iteratorNormalCompletion3 = true;
|
||||
var _didIteratorError3 = false;
|
||||
var _iteratorError3 = undefined;
|
||||
|
||||
try {
|
||||
for (var _iterator3 = this.nodes[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
|
||||
var n = _step3.value;
|
||||
|
||||
n.draw(this.ctx);
|
||||
}
|
||||
} catch (err) {
|
||||
_didIteratorError3 = true;
|
||||
_iteratorError3 = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion3 && _iterator3.return) {
|
||||
_iterator3.return();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError3) {
|
||||
throw _iteratorError3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'addRope',
|
||||
value: function addRope(rope) {
|
||||
this.ropes.push(rope);
|
||||
}
|
||||
}, {
|
||||
key: 'add',
|
||||
value: function add(struct) {
|
||||
|
||||
// load nodes
|
||||
for (var n in struct.nodes) {
|
||||
this.nodes.add(struct.nodes[n]);
|
||||
/*
|
||||
const node = new Node(struct.nodes[n]);
|
||||
struct.nodes[n].id = node;
|
||||
nodes.add(node);
|
||||
*/
|
||||
}
|
||||
|
||||
// load constraints
|
||||
for (var i = 0; i < struct.constraints.length; i++) {
|
||||
var c = struct.constraints[i];
|
||||
this.constraints.add(c);
|
||||
/*
|
||||
new Constraint(
|
||||
struct.nodes[c[0]].id,
|
||||
struct.nodes[c[1]].id
|
||||
)
|
||||
);
|
||||
*/
|
||||
}
|
||||
}
|
||||
}]);
|
||||
|
||||
return Scene;
|
||||
}();
|
||||
|
||||
var scene = new Scene(document.querySelector('#canvas'));
|
||||
|
||||
scene.run();
|
||||
|
||||
// const pointer = new Pointer(canvas);
|
||||
|
||||
var phrase = ' CRMEB ';
|
||||
|
||||
var r = new Rope({
|
||||
x: scene.canvas.width * 0.15,
|
||||
y: 40,
|
||||
length: scene.canvas.width * 0.7,
|
||||
points: phrase.length,
|
||||
vertical: false,
|
||||
dangleEnd: false,
|
||||
fixedEnds: true,
|
||||
stiffness: 1.5,
|
||||
constrain: false,
|
||||
gravity: 0.1
|
||||
});
|
||||
|
||||
var center = r.nodes.length / 2;
|
||||
|
||||
var ropes = r.nodes.map(function (n, i) {
|
||||
|
||||
n.set(n.x, 60 + 80 * (1 - Math.abs((center - i) % center / center)));
|
||||
|
||||
if (phrase[i] !== ' ') {
|
||||
|
||||
//if ( i !== 0 && i !== r.nodes.length - 1 ) {
|
||||
return new Rope({
|
||||
startNode: n,
|
||||
x: n.x,
|
||||
y: n.y,
|
||||
length: 60,
|
||||
points: 4,
|
||||
letter: phrase[i],
|
||||
vertical: true,
|
||||
stiffness: 1, //2.5,,
|
||||
constrain: false,
|
||||
gravity: 0.5
|
||||
});
|
||||
}
|
||||
|
||||
//}
|
||||
});
|
||||
|
||||
var first = r.nodes[0];
|
||||
var last = r.nodes[r.nodes.length - 1];
|
||||
|
||||
first.set(2, -2);
|
||||
last.set(scene.canvas.width - 2, -2);
|
||||
|
||||
r.makeConstraints();
|
||||
|
||||
ropes = ropes;
|
||||
scene.addRope(r);
|
||||
ropes.filter(function (r) {
|
||||
return r;
|
||||
}).forEach(function (r) {
|
||||
r.makeConstraints();
|
||||
scene.addRope(r);
|
||||
});
|
||||
12
public/system/module/login/index.js
Normal file → Executable file
12
public/system/module/login/index.js
Normal file → Executable file
@ -11,3 +11,15 @@
|
||||
if(!pwd) return showError('请输入密码');
|
||||
})
|
||||
})(window,jQuery);
|
||||
$(document).ready(function() {
|
||||
$('.login-bg').iosParallax({
|
||||
movementFactor: 50
|
||||
});
|
||||
});
|
||||
|
||||
(function captcha(){
|
||||
var $captcha = $('#verify_img'),src = $captcha[0].src;
|
||||
$captcha.on('click',function(){
|
||||
this.src = src+'?'+Date.parse(new Date());
|
||||
});
|
||||
})();
|
||||
94
public/system/module/login/ios-parallax.js
Normal file
94
public/system/module/login/ios-parallax.js
Normal file
@ -0,0 +1,94 @@
|
||||
(function($){
|
||||
$.iosParallax = function(el, options){
|
||||
// To avoid scope issues, use 'base' instead of 'this'
|
||||
// to reference this class from internal events and functions.
|
||||
var base = this;
|
||||
|
||||
// Access to jQuery and DOM versions of element
|
||||
base.$el = $(el);
|
||||
base.el = el;
|
||||
|
||||
// Add a reverse reference to the DOM object
|
||||
base.$el.data("iosParallax", base);
|
||||
|
||||
var centerCoordinates = {x: 0, y: 0};
|
||||
var targetCoordinates = {x: 0, y: 0};
|
||||
var transitionCoordinates = {x: 0, y: 0};
|
||||
|
||||
function getBackgroundImageUrl(){
|
||||
var backgroundImage = base.$el.css('background-image').match(/url\(.*\)/ig);
|
||||
if ( ! backgroundImage || backgroundImage.length < 1) {
|
||||
throw 'No background image found';
|
||||
}
|
||||
return backgroundImage[0].replace(/url\(|'|"|'|"|\)$/ig, "");
|
||||
}
|
||||
|
||||
function getBackgroundImageSize(){
|
||||
var img = new Image;
|
||||
img.src = getBackgroundImageUrl();
|
||||
return {width: img.width, height: img.height};
|
||||
}
|
||||
|
||||
function setCenterCoordinates(){
|
||||
var bgImgSize = getBackgroundImageSize();
|
||||
centerCoordinates.x = -1 * Math.abs(bgImgSize.width - base.$el.width()) / 2;
|
||||
centerCoordinates.y = -1 * Math.abs(bgImgSize.height - base.$el.height()) / 2;
|
||||
targetCoordinates.x = centerCoordinates.x;
|
||||
targetCoordinates.y = centerCoordinates.y;
|
||||
transitionCoordinates.x = centerCoordinates.x;
|
||||
transitionCoordinates.y = centerCoordinates.y;
|
||||
}
|
||||
|
||||
function bindEvents(){
|
||||
base.$el.mousemove(function(e){
|
||||
var width = base.options.movementFactor / base.$el.width();
|
||||
var height = base.options.movementFactor / base.$el.height();
|
||||
var cursorX = e.pageX - ($(window).width() / 2);
|
||||
var cursorY = e.pageY - ($(window).height() / 2);
|
||||
targetCoordinates.x = width * cursorX * -1 + centerCoordinates.x;
|
||||
targetCoordinates.y = height * cursorY * -1 + centerCoordinates.y;
|
||||
});
|
||||
|
||||
// Slowly converge the background image position to the target coordinates in 60 FPS
|
||||
var loop = setInterval(function(){
|
||||
transitionCoordinates.x += ((targetCoordinates.x - transitionCoordinates.x) / base.options.dampenFactor);
|
||||
transitionCoordinates.y += ((targetCoordinates.y - transitionCoordinates.y) / base.options.dampenFactor);
|
||||
base.$el.css("background-position", transitionCoordinates.x+"px "+transitionCoordinates.y+"px");
|
||||
}, 16);
|
||||
|
||||
$(window).resize(function(){
|
||||
// Re-center the image
|
||||
setCenterCoordinates();
|
||||
});
|
||||
|
||||
// There's a problem with getting image height and width when the image isn't loaded.
|
||||
var img = new Image;
|
||||
img.src = getBackgroundImageUrl();
|
||||
$(img).load(function(){
|
||||
setCenterCoordinates();
|
||||
});
|
||||
};
|
||||
|
||||
base.init = function(){
|
||||
base.options = $.extend({}, $.iosParallax.defaultOptions, options);
|
||||
bindEvents();
|
||||
};
|
||||
|
||||
base.init();
|
||||
};
|
||||
|
||||
$.iosParallax.defaultOptions = {
|
||||
// How fast the background moves
|
||||
movementFactor: 50,
|
||||
// How much to dampen the movement (higher is slower)
|
||||
dampenFactor: 36
|
||||
};
|
||||
|
||||
$.fn.iosParallax = function(options){
|
||||
return this.each(function(){
|
||||
(new $.iosParallax(this, options));
|
||||
});
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user