update code
This commit is contained in:
Lwei
+2
-1
@@ -4,4 +4,5 @@
|
||||
*.log
|
||||
*.env
|
||||
/runtime/*
|
||||
/config/database.php
|
||||
/config/database.php
|
||||
/config/
|
||||
+278
-84
@@ -8,105 +8,299 @@
|
||||
<title>{:get_system_config('web','admin_title')}</title>
|
||||
<link rel="stylesheet" href="{__GOUGU__}/layui/css/layui.css?v={:get_system_config('system','version')}" media="all">
|
||||
<style type="text/css">
|
||||
html,body {width: 100%;height: 100%;background: #EAF3FF;}
|
||||
canvas{display:block;width:100%;height:100%; position: fixed; top: 0;left: 0;}
|
||||
input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0px 1000px white inset;
|
||||
}
|
||||
#container {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 99;background: url({__IMG__}/bg.png);background-size: cover;}
|
||||
.login-wrap {position: relative;overflow: hidden; background-color:#fff; width:800px; height: 448px; position: absolute;top: 50%;left: 50%;margin-top: -240px;margin-left: -400px; border-radius: 12px; display: flex;box-shadow: 0 0 16px rgba(31, 84, 167, 0.2);}
|
||||
|
||||
.login-side {width:400px; height:440px; padding:4px}
|
||||
.login-side .side-img{border-radius: 8px; width:100%; height:100%; background: url({__IMG__}/login.jpg);background-size: cover;}
|
||||
*{margin:0;padding:0;box-sizing:border-box;}
|
||||
html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','SF Pro Display','Helvetica Neue',sans-serif;}
|
||||
body{background:linear-gradient(160deg,#f5f3f0 0%,#eaecf0 25%,#f0f2f5 50%,#e8ecf1 75%,#f4f2ef 100%);}
|
||||
|
||||
.login-box{width: 392px;height: 404px;}
|
||||
.login-box .top {width: 392px; padding:36px 0; text-align:center; border-bottom:1px solid #eee;}
|
||||
.login-box .bottom {padding:32px;}
|
||||
/* 背景粒子画布 */
|
||||
#bg-layer{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;}
|
||||
canvas#bg-canvas{display:block;width:100%;height:100%;}
|
||||
|
||||
.layui-input,.layui-textarea {height: 44px;border: 1px solid #ddd;}
|
||||
.captcha_img img{width:150px; height:44px; cursor:pointer;}
|
||||
.layui-btn {height: 45px;font-size: 16px;margin-top: 6px;background-color: #FF6347!important}
|
||||
.foot {position: absolute; font-size: 12px; bottom: 24px;text-align: center;width: 100%;color: #458BF3;}
|
||||
/* 网格叠加 */
|
||||
#grid-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;
|
||||
background-image:
|
||||
linear-gradient(rgba(180,190,205,.12) 1px,transparent 1px),
|
||||
linear-gradient(90deg,rgba(180,190,205,.12) 1px,transparent 1px);
|
||||
background-size:80px 80px;
|
||||
animation:gridShift 20s linear infinite;}
|
||||
@keyframes gridShift{0%{transform:translate(0,0)}100%{transform:translate(0,80px)}}
|
||||
|
||||
/* 数据流垂直线 */
|
||||
.flow-v{position:fixed;z-index:1;pointer-events:none;width:1px;background:linear-gradient(180deg,transparent,rgba(160,175,200,.1),transparent);}
|
||||
.flow-v:nth-child(1){left:15%;height:60%;top:20%;animation:flowV 14s ease-in-out infinite;}
|
||||
.flow-v:nth-child(2){left:38%;height:45%;top:10%;animation:flowV 11s ease-in-out infinite 3s;}
|
||||
.flow-v:nth-child(3){left:62%;height:55%;top:30%;animation:flowV 16s ease-in-out infinite 6s;}
|
||||
.flow-v:nth-child(4){left:85%;height:40%;top:15%;animation:flowV 13s ease-in-out infinite 9s;}
|
||||
@keyframes flowV{0%,100%{opacity:.15;transform:scaleY(.8)}50%{opacity:.4;transform:scaleY(1.05)}}
|
||||
|
||||
/* 数据流水平线 */
|
||||
.flow-h{position:fixed;z-index:1;pointer-events:none;height:1px;background:linear-gradient(90deg,transparent,rgba(160,175,200,.1),transparent);}
|
||||
.flow-h:nth-child(5){top:28%;width:50%;left:25%;animation:flowH 18s ease-in-out infinite 2s;}
|
||||
.flow-h:nth-child(6){top:52%;width:40%;left:10%;animation:flowH 15s ease-in-out infinite 7s;}
|
||||
.flow-h:nth-child(7){top:74%;width:55%;left:35%;animation:flowH 20s ease-in-out infinite 4s;}
|
||||
@keyframes flowH{0%,100%{opacity:.1;transform:scaleX(.7)}50%{opacity:.35;transform:scaleX(1.1)}}
|
||||
|
||||
/* 环境光 orb */
|
||||
.amb-orb{position:fixed;border-radius:50%;z-index:1;pointer-events:none;filter:blur(80px);}
|
||||
.amb-orb:nth-child(8){width:500px;height:500px;top:-10%;left:-8%;background:rgba(180,200,230,.18);animation:orbFloat1 8s ease-in-out infinite;}
|
||||
.amb-orb:nth-child(9){width:400px;height:400px;bottom:-5%;right:-5%;background:rgba(200,190,220,.14);animation:orbFloat2 10s ease-in-out infinite 3s;}
|
||||
.amb-orb:nth-child(10){width:350px;height:350px;top:40%;right:10%;background:rgba(210,215,230,.1);animation:orbFloat3 12s ease-in-out infinite 6s;}
|
||||
@keyframes orbFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
|
||||
@keyframes orbFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-25px)}}
|
||||
@keyframes orbFloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,20px)}}
|
||||
|
||||
/* 主容器 */
|
||||
#container{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:center;}
|
||||
|
||||
/* 品牌区域 */
|
||||
.brand-area{margin-bottom:24px;position:relative;z-index:2;text-align:center;}
|
||||
.brand-text{font-size:28px;font-weight:300;letter-spacing:8px;color:rgba(60,70,90,.75);
|
||||
background:linear-gradient(135deg,#6b7d95,#8a9bb5,#6b7d95);-webkit-background-clip:text;
|
||||
-webkit-text-fill-color:transparent;background-clip:text;}
|
||||
.brand-sub{font-size:13px;font-weight:300;letter-spacing:6px;color:rgba(130,145,170,.55);margin-top:8px;}
|
||||
|
||||
/* 登录卡片 */
|
||||
.login-card{position:relative;width:400px;padding:40px 38px 34px;z-index:2;
|
||||
background:rgba(255,255,255,.45);backdrop-filter:blur(40px) saturate(1.4);-webkit-backdrop-filter:blur(40px) saturate(1.4);
|
||||
border-radius:22px;
|
||||
border:1px solid rgba(255,255,255,.5);
|
||||
box-shadow:
|
||||
0 2px 30px rgba(0,0,0,.04),
|
||||
0 8px 60px rgba(0,0,0,.05),
|
||||
0 0 0 .5px rgba(255,255,255,.8) inset,
|
||||
0 1px 3px rgba(255,255,255,.6) inset;
|
||||
transition:box-shadow .5s;}
|
||||
.login-card:hover{box-shadow:
|
||||
0 2px 40px rgba(0,0,0,.05),
|
||||
0 12px 70px rgba(0,0,0,.06),
|
||||
0 0 0 .5px rgba(255,255,255,.9) inset,
|
||||
0 1px 3px rgba(255,255,255,.7) inset;}
|
||||
|
||||
/* 珠光边框 */
|
||||
.login-card::before{content:'';position:absolute;inset:-1px;border-radius:23px;padding:1px;
|
||||
background:linear-gradient(135deg,
|
||||
rgba(200,210,225,.5),rgba(255,255,255,.7) 20%,rgba(220,215,230,.4) 40%,
|
||||
rgba(255,255,255,.6) 60%,rgba(190,200,215,.5) 80%,rgba(255,255,255,.5));
|
||||
-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1;pointer-events:none;
|
||||
animation:pearlShift 5s ease-in-out infinite;}
|
||||
@keyframes pearlShift{0%,100%{opacity:.85}50%{opacity:1}}
|
||||
|
||||
/* 卡片顶部高光线 */
|
||||
.login-card::after{content:'';position:absolute;top:0;left:15%;width:70%;height:1px;
|
||||
background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);border-radius:1px;}
|
||||
|
||||
/* 输入框组 */
|
||||
.input-group{position:relative;margin-bottom:22px;}
|
||||
.input-group .icon-prefix{position:absolute;left:15px;top:50%;transform:translateY(-50%);z-index:3;
|
||||
pointer-events:none;transition:all .3s;display:flex;align-items:center;}
|
||||
.input-group .icon-prefix svg{width:16px;height:16px;stroke:rgba(140,155,180,.4);fill:none;stroke-width:1.5;transition:stroke .3s;}
|
||||
.input-group input{width:100%;height:50px;padding:0 16px 0 42px;
|
||||
background:rgba(245,247,250,.5);border:1px solid rgba(200,210,225,.35);border-radius:14px;
|
||||
outline:none;color:#3a4458;font-size:14px;font-weight:400;
|
||||
transition:all .35s cubic-bezier(.25,.8,.25,1);letter-spacing:.5px;}
|
||||
.input-group input::placeholder{color:rgba(150,165,185,.4);font-weight:300;}
|
||||
.input-group input:focus{background:rgba(255,255,255,.7);border-color:rgba(160,175,200,.5);
|
||||
box-shadow:0 0 0 3px rgba(180,190,210,.08),0 2px 12px rgba(0,0,0,.03);}
|
||||
.input-group input:focus~.icon-prefix svg{stroke:rgba(110,125,155,.6);}
|
||||
|
||||
/* 输入框软蓝色下划线发光 */
|
||||
.input-group .flow-bar{position:absolute;bottom:0;left:4px;width:calc(100% - 8px);height:2px;border-radius:0 0 2px 2px;
|
||||
background:linear-gradient(90deg,transparent,rgba(140,180,225,.5),rgba(180,170,220,.45),rgba(140,180,225,.5),transparent);
|
||||
background-size:200% 100%;animation:flowBar 3.5s ease-in-out infinite;opacity:.6;
|
||||
filter:blur(1px);}
|
||||
.input-group input:focus~.flow-bar{opacity:.9;filter:blur(.5px);
|
||||
background:linear-gradient(90deg,transparent,rgba(120,170,225,.7),rgba(170,155,220,.6),rgba(120,170,225,.7),transparent);}
|
||||
@keyframes flowBar{0%{background-position:200% 0}100%{background-position:-200% 0}}
|
||||
|
||||
/* 验证码行 */
|
||||
.captcha-row{display:flex;gap:10px;align-items:center;}
|
||||
.captcha-row .input-group{flex:1;margin-bottom:0;}
|
||||
.captcha_img img{width:120px;height:50px;border-radius:14px;cursor:pointer;
|
||||
border:1px solid rgba(200,210,225,.35);transition:all .3s;filter:brightness(.98);}
|
||||
.captcha_img img:hover{border-color:rgba(160,175,200,.5);box-shadow:0 2px 12px rgba(0,0,0,.03);}
|
||||
|
||||
/* 登录按钮 - 淡蓝到柔紫渐变 */
|
||||
#login-submit{width:100%;height:50px;margin-top:14px;border:none;border-radius:14px;font-size:15px;
|
||||
letter-spacing:2px;cursor:pointer;color:#fff;font-weight:400;
|
||||
background:linear-gradient(135deg,#9bb5d4,#b8a0d4,#9bb5d4);background-size:200% 100%;
|
||||
animation:btnShimmer 5s ease-in-out infinite;
|
||||
box-shadow:0 2px 16px rgba(150,155,200,.2),0 0 0 .5px rgba(255,255,255,.4) inset;
|
||||
transition:all .4s cubic-bezier(.25,.8,.25,1);}
|
||||
#login-submit:hover{background:linear-gradient(135deg,#a8c0e0,#c4acdf,#a8c0e0);background-size:200% 100%;
|
||||
box-shadow:0 4px 24px rgba(150,155,200,.3),0 0 0 .5px rgba(255,255,255,.5) inset;
|
||||
transform:translateY(-1px);}
|
||||
#login-submit:active{transform:translateY(0) scale(.99);box-shadow:0 1px 8px rgba(150,155,200,.15);}
|
||||
@keyframes btnShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
|
||||
|
||||
/* 底部 */
|
||||
.foot{position:fixed;bottom:30px;text-align:center;width:100%;z-index:99;font-size:11px;
|
||||
color:rgba(150,165,185,.35);letter-spacing:2px;font-weight:300;}
|
||||
|
||||
/* 弹窗 */
|
||||
.toast-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;
|
||||
background:rgba(245,247,250,.35);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s;}
|
||||
.toast-overlay.show{opacity:1;pointer-events:all;}
|
||||
.sci-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);z-index:9999;
|
||||
pointer-events:none;opacity:0;transition:all .4s cubic-bezier(.25,.8,.25,1);}
|
||||
.sci-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
|
||||
.sci-toast-inner{position:relative;padding:30px 44px;min-width:260px;text-align:center;
|
||||
background:rgba(255,255,255,.75);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);
|
||||
border-radius:20px;border:1px solid rgba(255,255,255,.6);
|
||||
box-shadow:0 4px 40px rgba(0,0,0,.06),0 1px 2px rgba(255,255,255,.8) inset;}
|
||||
.sci-toast-inner::before{content:'';position:absolute;inset:-1px;border-radius:21px;padding:1px;
|
||||
background:linear-gradient(135deg,rgba(200,210,225,.4),rgba(255,255,255,.5),rgba(200,210,225,.4));
|
||||
-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1;}
|
||||
.sci-toast .icon-cyber{width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
|
||||
font-size:20px;font-weight:300;margin-bottom:14px;position:relative;}
|
||||
.sci-toast.success .icon-cyber{color:#6ba88a;background:rgba(130,190,155,.1);box-shadow:0 0 20px rgba(130,190,155,.15);}
|
||||
.sci-toast.error .icon-cyber{color:#c48080;background:rgba(200,140,140,.1);box-shadow:0 0 20px rgba(200,140,140,.15);}
|
||||
.sci-toast .toast-msg{color:rgba(60,70,90,.75);font-size:14px;letter-spacing:1px;font-weight:300;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="bg-layer"><canvas id="bg-canvas"></canvas></div>
|
||||
<div id="grid-overlay"></div>
|
||||
<div class="flow-v"></div><div class="flow-v"></div><div class="flow-v"></div><div class="flow-v"></div>
|
||||
<div class="flow-h"></div><div class="flow-h"></div><div class="flow-h"></div>
|
||||
<div class="amb-orb"></div><div class="amb-orb"></div><div class="amb-orb"></div>
|
||||
|
||||
<div id="container">
|
||||
<canvas id="canvas"></canvas>
|
||||
<div class="login-wrap">
|
||||
<div class="login-side"><div class="side-img"></div></div>
|
||||
<div class="login-box">
|
||||
<div class="top">
|
||||
<img src="{:get_system_config('web','logo')}" onerror="javascript:this.src='{__IMG__}/syslogo.png';this.onerror=null;" style="height: 66px;">
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<form class="layui-form" id="gougu-login">
|
||||
<div class="layui-form-item">
|
||||
<input type="text" name="username" lay-verify="required" value="" placeholder="请输入账户或手机号码" lay-reqText="请输入账户或手机号码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<input type="password" name="password" lay-verify="required" value="" placeholder="请输入密码" lay-reqText="请输入密码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline" style="width:168px;">
|
||||
<input type="text" name="captcha" lay-verify="required" placeholder="验证码" lay-reqText="请输入验证码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-input-inline captcha_img" style="width:142px; height:44px; margin-right:0">
|
||||
{:captcha_img()}
|
||||
<input type="hidden" value="{:make_token()}"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="login-submit" class="layui-btn layui-btn-fluid layui-bg-cyan" lay-submit lay-filter="login-submit">登入系统</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-area">
|
||||
<div class="brand-text">唯实夕创OA</div>
|
||||
<div class="brand-sub">Welcome Back</div>
|
||||
</div>
|
||||
<div class="foot">
|
||||
<!-- 版权标识 -->
|
||||
<!--
|
||||
+------------------------------------------------------------------------------------------
|
||||
勾股OA系统开源且可免费使用，但并不是自由软件，未经授权许可不能去除勾股OA的相关版权信息
|
||||
+------------------------------------------------------------------------------------------
|
||||
如需去除版权标识使用的，请微信(hdm588)联系作者去除，开源不易，请多支持！
|
||||
+------------------------------------------------------------------------------------------
|
||||
勾股工作室 <hdm58@qq.com>
|
||||
+------------------------------------------------------------------------------------------
|
||||
-->
|
||||
Copyright © 2022-2024 勾股OA - {:CMS_VERSION} ，Powered by GouguOPEN，<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow" style="color:#458BF3">{:get_system_config('web','icp')}</a><a target="_blank" rel="nofollow" style="margin-left: 15px;color:#458BF3" href="http://www.beian.gov.cn/portal/registerSystemInfo"> {:get_system_config('web','beian')}</a>
|
||||
<!-- /版权标识 -->
|
||||
|
||||
<div class="login-card">
|
||||
<form class="layui-form" id="gougu-login">
|
||||
<div class="input-group">
|
||||
<span class="icon-prefix"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg></span>
|
||||
<input type="text" name="username" lay-verify="required" value="" placeholder="请输入账户或手机号码" lay-reqText="请输入账户或手机号码" autocomplete="off">
|
||||
<div class="flow-bar"></div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="icon-prefix"><svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg></span>
|
||||
<input type="password" name="password" lay-verify="required" value="" placeholder="请输入密码" lay-reqText="请输入密码" autocomplete="off">
|
||||
<div class="flow-bar"></div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="captcha-row">
|
||||
<div class="input-group">
|
||||
<input type="text" name="captcha" lay-verify="required" placeholder="请输入验证码" lay-reqText="请输入验证码" autocomplete="off">
|
||||
<div class="flow-bar"></div>
|
||||
</div>
|
||||
<div class="captcha_img">
|
||||
{:captcha_img()}
|
||||
<input type="hidden" value="{:make_token()}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="login-submit" lay-submit lay-filter="login-submit">登 入 系 统</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="foot">{:get_system_config('web','admin_title')}</div>
|
||||
|
||||
<div class="toast-overlay" id="toastOverlay"></div>
|
||||
<div class="sci-toast" id="sciToast">
|
||||
<div class="sci-toast-inner">
|
||||
<div class="icon-cyber" id="toastIcon"></div>
|
||||
<div class="toast-msg" id="toastMsg"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{__GOUGU__}/layui/layui.js?v={:get_system_config('system','version')}"></script>
|
||||
<script type="text/javascript">
|
||||
var canvas=document.querySelector("#canvas"),ctx=canvas.getContext("2d");canvas.width=window.innerWidth,canvas.height=window.innerHeight,ctx.lineWidth=.3,ctx.strokeStyle=new Color(150).style;var movePos={x:30*canvas.width/100,y:30*canvas.height/100},dots={nb:250,distance:100,d_radius:150,array:[]};function colorValue(t){return Math.floor(255*Math.random()+t)}function createColorStyle(t,o,i){return"rgba("+t+","+o+","+i+", 0.618)"}function mixComponents(t,o,i,a){return(t*o+i*a)/(o+a)}function averageColorStyles(t,o){var i=t.color,a=o.color,s=mixComponents(i.r,t.radius,a.r,o.radius),n=mixComponents(i.g,t.radius,a.g,o.radius),e=mixComponents(i.b,t.radius,a.b,o.radius);return createColorStyle(Math.floor(s),Math.floor(n),Math.floor(e))}function Color(t){t=t||0,this.r=colorValue(t),this.g=colorValue(t),this.b=colorValue(t),this.style=createColorStyle(this.r,this.g,this.b)}function Dot(){this.x=Math.random()*canvas.width,this.y=Math.random()*canvas.height,this.vx=-.5+Math.random(),this.vy=-.5+Math.random(),this.radius=3*Math.random(),this.color=new Color}function createDots(){for(i=0;i<dots.nb;i++)dots.array.push(new Dot)}function moveDots(){for(i=0;i<dots.nb;i++){var t=dots.array[i];t.y<0||t.y>canvas.height?(t.vx=t.vx,t.vy=-t.vy):(t.x<0||t.x>canvas.width)&&(t.vx=-t.vx,t.vy=t.vy),t.x+=t.vx,t.y+=t.vy}}function connectDots(){for(i=0;i<dots.nb;i++)for(j=0;j<dots.nb;j++)i_dot=dots.array[i],j_dot=dots.array[j],i_dot.x-j_dot.x<dots.distance&&i_dot.y-j_dot.y<dots.distance&&i_dot.x-j_dot.x>-dots.distance&&i_dot.y-j_dot.y>-dots.distance&&i_dot.x-movePos.x<dots.d_radius&&i_dot.y-movePos.y<dots.d_radius&&i_dot.x-movePos.x>-dots.d_radius&&i_dot.y-movePos.y>-dots.d_radius&&(ctx.beginPath(),ctx.strokeStyle=averageColorStyles(i_dot,j_dot),ctx.moveTo(i_dot.x,i_dot.y),ctx.lineTo(j_dot.x,j_dot.y),ctx.stroke(),ctx.closePath())}function drawDots(){for(i=0;i<dots.nb;i++){dots.array[i].draw()}}function runDots(){ctx.clearRect(0,0,canvas.width,canvas.height),moveDots(),connectDots(),drawDots(),requestAnimationFrame(runDots)}Dot.prototype={draw:function(){ctx.beginPath(),ctx.fillStyle=this.color.style,ctx.arc(this.x,this.y,this.radius,0,3*Math.PI,!1),ctx.fill()}};var can=document.querySelector("#canvas");can.addEventListener("mousemove",function(t){movePos.x=t.pageX,movePos.y=t.pageY}),can.addEventListener("mouseleave",function(t){movePos.x=canvas.width/2,movePos.y=canvas.height/2}),createDots(),requestAnimationFrame(runDots);
|
||||
var canvas=document.querySelector("#bg-canvas"),ctx=canvas.getContext("2d");
|
||||
canvas.width=window.innerWidth,canvas.height=window.innerHeight;
|
||||
window.addEventListener("resize",function(){canvas.width=window.innerWidth,canvas.height=window.innerHeight;});
|
||||
|
||||
layui.use(['form'], function() {
|
||||
var form = layui.form,
|
||||
$ = layui.$,
|
||||
layer = layui.layer;
|
||||
// 登录过期的时候，跳出ifram框架
|
||||
if (top.location != self.location) top.location = self.location;
|
||||
form.on('submit(login-submit)', function(data) {
|
||||
var particles=[],COUNT=100;
|
||||
for(var i=0;i<COUNT;i++){
|
||||
particles.push({
|
||||
x:Math.random()*canvas.width,
|
||||
y:Math.random()*canvas.height,
|
||||
r:Math.random()*2+.5,
|
||||
vx:(Math.random()-.5)*.15,
|
||||
vy:(Math.random()-.5)*.15,
|
||||
baseAlpha:Math.random()*.25+.08,
|
||||
alphaDir:Math.random()>.5?1:-1,
|
||||
alphaSpd:Math.random()*.008+.002,
|
||||
alpha:Math.random()*.3+.05
|
||||
});
|
||||
}
|
||||
|
||||
var mouse={x:canvas.width/2,y:canvas.height/2};
|
||||
canvas.addEventListener("mousemove",function(e){mouse.x=e.pageX;mouse.y=e.pageY;});
|
||||
canvas.addEventListener("mouseleave",function(){mouse.x=canvas.width/2;mouse.y=canvas.height/2;});
|
||||
|
||||
function draw(){
|
||||
ctx.clearRect(0,0,canvas.width,canvas.height);
|
||||
for(var i=0;i<particles.length;i++){
|
||||
var p=particles[i];
|
||||
p.x+=p.vx;p.y+=p.vy;
|
||||
if(p.x<-10)p.x=canvas.width+10;if(p.x>canvas.width+10)p.x=-10;
|
||||
if(p.y<-10)p.y=canvas.height+10;if(p.y>canvas.height+10)p.y=-10;
|
||||
p.alpha+=p.alphaSpd*p.alphaDir;
|
||||
if(p.alpha>=p.baseAlpha+.15)p.alphaDir=-1;if(p.alpha<=p.baseAlpha-.08)p.alphaDir=1;
|
||||
ctx.beginPath();ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
|
||||
ctx.fillStyle="rgba(150,165,190,"+p.alpha+")";ctx.fill();
|
||||
ctx.beginPath();ctx.arc(p.x,p.y,p.r*2.5,0,Math.PI*2);
|
||||
ctx.fillStyle="rgba(180,195,215,"+(p.alpha*.2)+")";ctx.fill();
|
||||
}
|
||||
for(var i=0;i<particles.length;i++){
|
||||
for(var j=i+1;j<particles.length;j++){
|
||||
var dx=particles[i].x-particles[j].x,dy=particles[i].y-particles[j].y;
|
||||
var dist=Math.sqrt(dx*dx+dy*dy),maxD=130;
|
||||
var md=Math.sqrt(Math.pow((particles[i].x+particles[j].x)/2-mouse.x,2)+Math.pow((particles[i].y+particles[j].y)/2-mouse.y,2));
|
||||
if(md<180)maxD=160;
|
||||
if(dist<maxD){
|
||||
ctx.beginPath();ctx.moveTo(particles[i].x,particles[i].y);ctx.lineTo(particles[j].x,particles[j].y);
|
||||
var a=(1-dist/maxD)*.06;if(md<180)a*=1.4;
|
||||
ctx.strokeStyle="rgba(150,170,195,"+a+")";ctx.lineWidth=.4;ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
requestAnimationFrame(draw);
|
||||
|
||||
function showSciToast(msg,type,duration){
|
||||
var t=document.getElementById('sciToast'),o=document.getElementById('toastOverlay'),
|
||||
ic=document.getElementById('toastIcon'),me=document.getElementById('toastMsg');
|
||||
t.className='sci-toast '+type;me.textContent=msg;
|
||||
ic.innerHTML=type==='success'?'✓':'✗';
|
||||
t.classList.add('show');o.classList.add('show');
|
||||
clearTimeout(t._timer);
|
||||
t._timer=setTimeout(function(){t.classList.remove('show');o.classList.remove('show');},duration||2000);
|
||||
}
|
||||
|
||||
layui.use(['form'],function(){
|
||||
var form=layui.form,$=layui.$;
|
||||
if(top.location!=self.location)top.location=self.location;
|
||||
form.on('submit(login-submit)',function(data){
|
||||
$.ajax({
|
||||
url: "/home/login/login_submit",
|
||||
data: $('#gougu-login').serialize(),
|
||||
type: 'post',
|
||||
async: false,
|
||||
success: function(res) {
|
||||
layer.tips(res.msg, '#login-submit');
|
||||
if (res.code === 0) {
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime() + (-1 * 24 * 60 * 60 * 1000));
|
||||
var expires = "; expires=" + date.toGMTString();
|
||||
document.cookie = "gougutab=''" + expires + "; path=/";
|
||||
setTimeout(function() {
|
||||
parent.document.location.href="/";
|
||||
}, 1200);
|
||||
} else {
|
||||
$('[alt="captcha"]').click();
|
||||
url:"/home/login/login_submit",
|
||||
data:$('#gougu-login').serialize(),
|
||||
type:'post',
|
||||
async:false,
|
||||
success:function(res){
|
||||
if(res.code===0){
|
||||
showSciToast(res.msg,'success',2000);
|
||||
var d=new Date();d.setTime(d.getTime()+(-1*24*60*60*1000));
|
||||
document.cookie="gougutab=''; expires="+d.toGMTString()+"; path=/";
|
||||
setTimeout(function(){parent.document.location.href="/";},1600);
|
||||
}else{
|
||||
showSciToast(res.msg,'error',2000);
|
||||
setTimeout(function(){$('[alt="captcha"]').click();},800);
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user