lst.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552
  1. <!DOCTYPE html>
  2. {__NOLAYOUT__}
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7. <title>站群后台管理系统</title>
  8. <link rel="stylesheet" href=" __ROOT__/css/layui.css">
  9. <script src="__ROOT__/layui.js"></script>
  10. <style type="text/css">
  11. h1 {text-align:center;color:#1d598e;font-size:30px;}
  12. .layui-input{
  13. width: 106%;
  14. }
  15. .layui-btn{
  16. width: 100%;
  17. }
  18. /*特效css*/
  19. .tb960x90 {
  20. display:none!important;
  21. display:none
  22. }
  23. body {
  24. background-color:#232323;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div id="container"></div>
  30. <div class="mainfrm" style="position:relative;margin:0 auto;top:80%;margin-top:-650px;border:10px solid #efefef;width:370px;height:300px;padding:30px 0 0 20px;">
  31. <div class="layui-row layui-col-space10" style="margin:0 10px;">
  32. <div class="layui-col-xs12" style="width:320px;">
  33. <form class="layui-form layui-form-pane" lay-filter="form" action="" method="post">
  34. <div class="layui-form-item">
  35. <h1>站群后台管理系统</h1>
  36. </div>
  37. <div class="layui-form-item" style="text-align: center;" >
  38. <label class="layui-form-label">用户名</label>
  39. <div class="layui-input-inline" >
  40. <input type="text" name="uname" id="uname" value="" autocomplete="off" placeholder="不能为空" class="layui-input">
  41. </div>
  42. </div>
  43. <div class="layui-form-item" style="text-align: center">
  44. <label class="layui-form-label">密码</label>
  45. <div class="layui-input-inline">
  46. <input type="password" name="upass" id="upass" value="" autocomplete="off" placeholder="" class="layui-input">
  47. </div>
  48. </div>
  49. <div class="layui-form-item" style="text-align: center">
  50. <div id="slider"></div><!-- 滑块验证 -->
  51. </div>
  52. <div class="layui-form-item" id="login" style="text-align: center;">
  53. <button class="layui-btn" lay-submit lay-filter="login" >登录</button>
  54. </div>
  55. </form>
  56. </div>
  57. </div>
  58. </div>
  59. <!-- </div> -->
  60. <script>
  61. layui.config({
  62. base: '__ROOT__/module/'
  63. }).
  64. use(['form', 'layedit', 'jquery',"sliderVerify"], function(){
  65. var form = layui.form
  66. ,layer = layui.layer
  67. ,$ = layui.jquery
  68. ,sliderVerify = layui.sliderVerify
  69. ;
  70. var slider = sliderVerify.render({
  71. elem: '#slider',
  72. })
  73. // 表单监听登录,调用后台接口进行处理
  74. form.on("submit(login)", function (data) {
  75. var uname =$.trim($("#uname").val());
  76. var upass =$.trim($("#upass").val());
  77. if (uname == '') { //如果验证码输入为空
  78. layer.msg('用户名不能为空!');
  79. } else if (upass == '') {
  80. layer.msg('密码不能为空!')
  81. } else {
  82. if(slider.isOk())
  83. {
  84. var user = data.field; //将表单提交数据赋值给变量
  85. //console.log(user);
  86. //弹出loading
  87. //{:url("/lst")}:为后台登录地址,设置路由进行替换的(在route.php中查看)
  88. $.post('{:url("/lst")}', user, function (data) { //利用ajax把表单数据传递过去 验证账户 密码
  89. if (data==1) { //用户 密码经过后台验证 通过 后登录 跳转
  90. layer.msg('登录中····');
  91. setTimeout(function () {
  92. window.location.href = "{:url('index/server')}";
  93. }, 2000);
  94. }else{
  95. layer.msg('账户或者密码不对!');
  96. }
  97. });
  98. }else{
  99. layer.msg("请先通过滑块验证");
  100. }
  101. }
  102. return false;
  103. });
  104. });
  105. </script>
  106. <!-- 特效js -->
  107. <script>
  108. var Sketch = function() {
  109. function e(e) {
  110. e = n(e || {}, l);
  111. var t = "sketch-" + r++,
  112. o = e.hasOwnProperty("canvas"),
  113. u = o ? e.canvas : document.createElement("canvas");
  114. switch (e.type) {
  115. case m:
  116. try {
  117. s = u.getContext("webgl", e)
  118. } catch (d) {}
  119. try {
  120. s = s || u.getContext("experimental-webgl", e)
  121. } catch (d) {}
  122. if (!s) throw "WebGL not supported";
  123. break;
  124. case c:
  125. try {
  126. s = u.getContext("2d", e)
  127. } catch (d) {}
  128. if (!s) throw "Canvas not supported";
  129. break;
  130. default:
  131. u = s = document.createElement("div")
  132. }
  133. return s.canvas = u, u.className = "sketch", o ? e.autoresize = !1 : (e.container.appendChild(u), e.hasOwnProperty("autoresize") || (e.autoresize = l.autoresize), u.id = t), n(self, g), n(s, e), n(s, p), a(), e.autoresize && i(), w.push(s), s.autostart && setTimeout(s.start, 0), s
  134. }
  135. function n(e, n) {
  136. for (var t in n) e.hasOwnProperty(t) || (e[t] = n[t]);
  137. return e
  138. }
  139. function t(e) {
  140. function n(e, n) {
  141. return function() {
  142. e.call(n, arguments)
  143. }
  144. }
  145. var t = {};
  146. for (var o in e) t[o] = "function" == typeof e[o] ? n(e[o], e) : e[o];
  147. return t
  148. }
  149. function o(e, n) {
  150. e.length = 0;
  151. for (var t = 0, o = n.length; o > t; t++) e[t] = n[t];
  152. return e
  153. }
  154. function a() {
  155. function e(e) {
  156. return M[e] || String.fromCharCode(e)
  157. }
  158. function n(e) {
  159. s.mouse.ox = s.mouse.x, s.mouse.oy = s.mouse.y, s.mouse.x = e.x, s.mouse.y = e.y, s.mouse.dx = s.mouse.x - s.mouse.ox, s.mouse.dy = s.mouse.y - s.mouse.oy
  160. }
  161. function a(e) {
  162. var n, o = t(e);
  163. o.original = e;
  164. for (var a = s.canvas, u = 0, i = 0; a; a = a.offsetParent) u += a.offsetLeft, i += a.offsetTop;
  165. if (o.touches && o.touches.length)
  166. for (var r, c = o.touches.length - 1; c >= 0; c--) r = o.touches[c], r.x = r.pageX - u, r.y = r.pageY - i, n = A[c] || r, r.dx = r.x - n.x, r.dy = r.y - n.x, r.ox = n.x, r.oy = n.y, A[c] = t(r);
  167. else o.x = o.pageX - u, o.y = o.pageY - i, n = A.mouse || o, o.dx = o.x - n.x, o.dy = o.y - n.y, o.ox = n.x, o.oy = n.y, A.mouse = o;
  168. return o
  169. }
  170. function u(e) {
  171. e.preventDefault(), e = a(e), o(s.touches, e.touches), n(s.touches[0]), s.touchstart && s.touchstart(e), s.mousedown && s.mousedown(e)
  172. }
  173. function r(e) {
  174. e = a(e), o(s.touches, e.touches), n(s.touches[0]), s.touchmove && s.touchmove(e), s.mousemove && s.mousemove(e)
  175. }
  176. function c(e) {
  177. if (e = a(e), e.touches.length)
  178. for (var n in A) e.touches[n] || A[n];
  179. else A = {};
  180. s.touchend && s.touchend(e), s.mouseup && s.mouseup(e)
  181. }
  182. function m(e) {
  183. e = a(e), s.mouseover && s.mouseover(e)
  184. }
  185. function d(e) {
  186. e = a(e), s.dragging || (x(s.canvas, "mousemove", h), x(s.canvas, "mouseup", v), y(document, "mousemove", h), y(document, "mouseup", v), s.dragging = !0), o(s.touches, [e]), s.touchstart && s.touchstart(e), s.mousedown && s.mousedown(e)
  187. }
  188. function h(e) {
  189. e = a(e), n(e), o(s.touches, [e]), s.touchmove && s.touchmove(e), s.mousemove && s.mousemove(e)
  190. }
  191. function f(e) {
  192. e = a(e), s.mouseout && s.mouseout(e)
  193. }
  194. function v(e) {
  195. e = a(e), s.dragging && (x(document, "mousemove", h), x(document, "mouseup", v), y(s.canvas, "mousemove", h), y(s.canvas, "mouseup", v), s.dragging = !1), A.mouse, s.touchend && s.touchend(e), s.mouseup && s.mouseup(e)
  196. }
  197. function w(e) {
  198. e = a(e), s.click && s.click(e)
  199. }
  200. function l(n) {
  201. s.keys[e(n.keyCode)] = !0, s.keys[n.keyCode] = !0, s.keydown && s.keydown(n)
  202. }
  203. function g(n) {
  204. s.keys[e(n.keyCode)] = !1, s.keys[n.keyCode] = !1, s.keyup && s.keyup(n)
  205. }
  206. var M = {
  207. 8: "BACKSPACE",
  208. 9: "TAB",
  209. 13: "ENTER",
  210. 16: "SHIFT",
  211. 27: "ESCAPE",
  212. 32: "SPACE",
  213. 37: "LEFT",
  214. 38: "UP",
  215. 39: "RIGHT",
  216. 40: "DOWN"
  217. };
  218. for (var k in M) p.keys[M[k]] = !1;
  219. var A = {};
  220. y(s.canvas, "touchstart", u), y(s.canvas, "touchmove", r), y(s.canvas, "touchend", c), y(s.canvas, "mouseover", m), y(s.canvas, "mousedown", d), y(s.canvas, "mousemove", h), y(s.canvas, "mouseout", f), y(s.canvas, "mouseup", v), y(s.canvas, "click", w), y(document, "keydown", l), y(document, "keyup", g), y(window, "resize", i)
  221. }
  222. function u() {
  223. if (!h) {
  224. var e = Date.now();
  225. s.dt = e - s.now, s.millis += s.dt, s.now = e, s.update && s.update(s.dt), s.autoclear && s.clear(), s.draw && s.draw(s)
  226. }
  227. h = ++h % s.interval, f = requestAnimationFrame(u)
  228. }
  229. function i() {
  230. if (s.autoresize) {
  231. var e = s.type === d ? s.style : s.canvas;
  232. s.fullscreen ? (s.height = e.height = window.innerHeight, s.width = e.width = window.innerWidth) : (e.height = s.height, e.width = s.width), s.resize && s.resize()
  233. }
  234. }
  235. var s, r = 0,
  236. c = "canvas",
  237. m = "web-gl",
  238. d = "dom",
  239. h = 0,
  240. f = -1,
  241. v = {},
  242. w = [],
  243. l = {
  244. fullscreen: !0,
  245. autostart: !0,
  246. autoclear: !0,
  247. autopause: !0,
  248. autoresize: !0,
  249. container: document.body,
  250. interval: 1,
  251. type: c
  252. },
  253. g = {
  254. PI: Math.PI,
  255. TWO_PI: 2 * Math.PI,
  256. HALF_PI: Math.PI / 2,
  257. QUARTER_PI: Math.PI / 4,
  258. abs: Math.abs,
  259. acos: Math.acos,
  260. asin: Math.asin,
  261. atan2: Math.atan2,
  262. atan: Math.atan,
  263. ceil: Math.ceil,
  264. cos: Math.cos,
  265. exp: Math.exp,
  266. floor: Math.floor,
  267. log: Math.log,
  268. max: Math.max,
  269. min: Math.min,
  270. pow: Math.pow,
  271. round: Math.round,
  272. sin: Math.sin,
  273. sqrt: Math.sqrt,
  274. tan: Math.tan,
  275. random: function(e, n) {
  276. return e && "number" == typeof e.length && e.length ? e[Math.floor(Math.random() * e.length)] : ("number" != typeof n && (n = e || 1, e = 0), e + Math.random() * (n - e))
  277. }
  278. },
  279. p = {
  280. millis: 0,
  281. now: 0 / 0,
  282. dt: 0 / 0,
  283. keys: {},
  284. mouse: {
  285. x: 0,
  286. y: 0,
  287. ox: 0,
  288. oy: 0,
  289. dx: 0,
  290. dy: 0
  291. },
  292. touches: [],
  293. initialized: !1,
  294. dragging: !1,
  295. running: !1,
  296. start: function() {
  297. s.running || (s.setup && !s.initialized && (s.autopause && (y(window, "focus", s.start), y(window, "blur", s.stop)), s.setup()), s.initialized = !0, s.running = !0, s.now = Date.now(), u())
  298. },
  299. stop: function() {
  300. cancelAnimationFrame(f), s.running = !1
  301. },
  302. toggle: function() {
  303. (s.running ? s.stop : s.start)()
  304. },
  305. clear: function() {
  306. s.canvas && (s.canvas.width = s.canvas.width)
  307. },
  308. destroy: function() {
  309. var e, n, t, o, a, u;
  310. w.splice(w.indexOf(s), 1), s.stop();
  311. for (n in v) {
  312. for (t = v[n], a = 0, u = t.length; u > a; a++) e = t[a], x(e.el, n, e.fn);
  313. v[n]
  314. }
  315. s.container.removeChild(s.canvas);
  316. for (o in s) s.hasOwnProperty(o) && s[o]
  317. }
  318. },
  319. y = function() {
  320. function e(e, n, t) {
  321. v[n] || (v[n] = []), v[n].push({
  322. el: e,
  323. fn: t
  324. })
  325. }
  326. return window.addEventListener ? function(n, t, o) {
  327. n.addEventListener(t, o, !1), e(n, t, o)
  328. } : window.attachEvent ? function(n, t, o) {
  329. n.attachEvent("on" + t, o), e(n, t, o)
  330. } : function(n, t, o) {
  331. n["on" + t] = o, e(n, t, o)
  332. }
  333. }(),
  334. x = function() {
  335. function e(e, n, t) {
  336. if (v[n])
  337. for (var o, a = v[n].length - 1; a >= 0; a--) o = v[n][a], o.el === e && o.fn === t && v[n].splice(a, 1)
  338. }
  339. return window.removeEventListener ? function(n, t, o) {
  340. n.removeEventListener(t, o, !1), e(n, t, o)
  341. } : window.detachEvent ? function(n, t, o) {
  342. n.detachEvent("on" + t, o), e(n, t, o)
  343. } : (el["on" + ev] = null, e(el, ev, fn), void 0)
  344. }();
  345. return {
  346. CANVAS: c,
  347. WEB_GL: m,
  348. DOM: d,
  349. instances: w,
  350. create: e
  351. }
  352. }();
  353. Date.now || (Date.now = function() {
  354. return +new Date
  355. }),
  356. function() {
  357. for (var e = 0, n = ["ms", "moz", "webkit", "o"], t = 0; n.length > t && !window.requestAnimationFrame; ++t) window.requestAnimationFrame = window[n[t] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[n[t] + "CancelAnimationFrame"] || window[n[t] + "CancelRequestAnimationFrame"];
  358. window.requestAnimationFrame || (window.requestAnimationFrame = function(n) {
  359. var t = Date.now(),
  360. o = Math.max(0, 16 - (t - e)),
  361. a = window.setTimeout(function() {
  362. n(t + o)
  363. }, o);
  364. return e = t + o, a
  365. }), window.cancelAnimationFrame || (window.cancelAnimationFrame = function(e) {
  366. clearTimeout(e)
  367. })
  368. }();
  369. function Particle(x, y, radius) {
  370. this.init(x, y, radius);
  371. }
  372. Particle.prototype = {
  373. init: function(x, y, radius) {
  374. this.alive = true;
  375. this.radius = radius || 10;
  376. this.wander = 0.15;
  377. this.theta = random(TWO_PI);
  378. this.drag = 0.92;
  379. this.color = '#fff';
  380. this.x = x || 0.0;
  381. this.y = y || 0.0;
  382. this.vx = 0.0;
  383. this.vy = 0.0;
  384. },
  385. move: function() {
  386. this.x += this.vx;
  387. this.y += this.vy;
  388. this.vx *= this.drag;
  389. this.vy *= this.drag;
  390. this.theta += random(-0.5, 0.5) * this.wander;
  391. this.vx += sin(this.theta) * 0.1;
  392. this.vy += cos(this.theta) * 0.1;
  393. this.radius *= 0.96;
  394. this.alive = this.radius > 0.5;
  395. },
  396. draw: function(ctx) {
  397. ctx.beginPath();
  398. ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
  399. ctx.fillStyle = this.color;
  400. ctx.fill();
  401. }
  402. };
  403. // ----------------------------------------
  404. // Example
  405. // ----------------------------------------
  406. var MAX_PARTICLES = 280;
  407. var COLOURS = ['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423'];
  408. var particles = [];
  409. var pool = [];
  410. var demo = Sketch.create({
  411. container: document.getElementById('container')
  412. });
  413. demo.setup = function() {
  414. // Set off some initial particles.
  415. var i, x, y;
  416. for (i = 0; i < 20; i++) {
  417. x = (demo.width * 0.5) + random(-100, 100);
  418. y = (demo.height * 0.5) + random(-100, 100);
  419. demo.spawn(x, y);
  420. }
  421. };
  422. demo.spawn = function(x, y) {
  423. if (particles.length >= MAX_PARTICLES)
  424. pool.push(particles.shift());
  425. particle = pool.length ? pool.pop() : new Particle();
  426. particle.init(x, y, random(5, 40));
  427. particle.wander = random(0.5, 2.0);
  428. particle.color = random(COLOURS);
  429. particle.drag = random(0.9, 0.99);
  430. theta = random(TWO_PI);
  431. force = random(2, 8);
  432. particle.vx = sin(theta) * force;
  433. particle.vy = cos(theta) * force;
  434. particles.push(particle);
  435. }
  436. demo.update = function() {
  437. var i, particle;
  438. for (i = particles.length - 1; i >= 0; i--) {
  439. particle = particles[i];
  440. if (particle.alive) particle.move();
  441. else pool.push(particles.splice(i, 1)[0]);
  442. }
  443. };
  444. demo.draw = function() {
  445. demo.globalCompositeOperation = 'lighter';
  446. for (var i = particles.length - 1; i >= 0; i--) {
  447. particles[i].draw(demo);
  448. }
  449. };
  450. demo.mousemove = function() {
  451. var particle, theta, force, touch, max, i, j, n;
  452. for (i = 0, n = demo.touches.length; i < n; i++) {
  453. touch = demo.touches[i], max = random(1, 4);
  454. for (j = 0; j < max; j++) demo.spawn(touch.x, touch.y);
  455. }
  456. };
  457. </script>
  458. </body>
  459. </html>