<!DOCTYPE html> 
 | 
<html  lang="zh" xmlns:th="http://www.thymeleaf.org"> 
 | 
<head> 
 | 
    <meta charset="utf-8"> 
 | 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
 | 
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" /> 
 | 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
 | 
    <title>钻探工程信息化系统</title> 
 | 
    <meta name="description" content="钻探工程信息化系统"> 
 | 
    <!--[if lt IE 9]> 
 | 
    <meta http-equiv="refresh" content="0;ie.html" /> 
 | 
    <![endif]--> 
 | 
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/> 
 | 
    <style type="text/css">label.error { position:inherit;  }</style> 
 | 
    <script> 
 | 
        if(window.top!==window.self){window.top.location=window.location}; 
 | 
    </script> 
 | 
    <style> 
 | 
        body,html{color:#000;margin:0;overflow:hidden;font:400 13px arial,Microsoft Yahei!important} 
 | 
        a{font-size:inherit;text-decoration:none;color:#666;cursor:pointer} 
 | 
        .txt{width:90%;padding:4px 20px;border-radius:22px;border:solid 1px #ccc;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:3.6em;outline:0} 
 | 
        .txt:focus{border-color:#4386f5}.button{background:#4386f5;color:#fff;padding:6px 0;height:25px;line-height:25px;border-radius:5px;width:90%;border-radius:22px;display:inline-block;cursor:pointer} 
 | 
        .container{ 
 | 
            /*text-align:center;*/ 
 | 
            /*width:400px;*/ 
 | 
            margin:0 auto; 
 | 
            /*height:362px;*/ 
 | 
            position:absolute; 
 | 
            top:30%; 
 | 
            margin-top:-181px; 
 | 
            /*left:50%;*/ 
 | 
            margin-left:-200px; 
 | 
            /*background-color:#fff;*/ 
 | 
            /*padding:27px;*/ 
 | 
            /*border-radius:5px;*/ 
 | 
            /*border:1px solid #e8e1e1;*/ 
 | 
        } 
 | 
        .page-con .sep{border-top:1px solid #ddd;height:20px;text-align:center} 
 | 
        .page-con label{color:#666;display:inline-block;padding:0 10px;} 
 | 
        .page-con .signup{font-size:12px;margin-top:19px;color:#666;text-align:left;padding-left:26px} 
 | 
        .page-con .signup a{color:#333}#bg-canvas{position:absolute;z-index:-1} 
 | 
        #logo-text{ 
 | 
            display:inline-block; 
 | 
            /*margin-left:8px;*/ 
 | 
            font-size:35px; 
 | 
            vertical-align:7px; 
 | 
            font-family:arial; 
 | 
            /*height:60px;*/ 
 | 
            text-shadow:1px 1px 2px #bbb inset 
 | 
        } 
 | 
        #logo-text .logo-dot{width:68px;height:6px;display:inline-block;position:absolute;left:50%;top:50%;margin-left:-34px;margin-top:-3px;display:none}#logo-text .logo-dot:after{width:6px;background:#4386f5;height:6px;display:inline-block;position:absolute;right:-4px;border-radius:50%;content:""}#logo-text label{display:inline-block;background:#4386f5;border-radius:50%;color:#fff;padding:11px 8px;margin-left:6px;position:relative;box-shadow:1px 1px 6px #ccc}.login-input{position:relative}.login-input a{position:absolute;right:33px;top:13px;width:auto;height:20px;line-height:20px;text-align:right;color:#888;z-index:1}.weixin-con{display:none;padding:15px;background:#fff;position:absolute;z-index:9;width:362px;height:410px;left:50%;top:50%;margin-left:-181px;margin-top:-205px;text-align:center;border-raidus:5px;box-shadow:1px 1px 4px #ccc}.error-tip{height:30px;line-height:30px;position:absolute;right:32px;color:red;bottom:6px;font-size:12px;z-index:2;background:#fff}.success-tip{position:absolute;width:194px;top:155px;display:none;right:96px;padding:5px 8px;border:1px solid green;border-radius:3px;box-shadow:1px 1px 5px #d6e9c6;background-color:#dff0d8;color:#468847;text-shadow:0 1px 0 rgba(255,255,255,.5)}.icons{background:url(/resources/images/login_processon.png) no-repeat;display:inline-block;width:42px;height:42px;cursor:pointer;}.icons.weixin{background-position:0 0;background-size:42px}.icons.qq{background-position:0 -85px;background-size:43px}.icons.weibo{background-position:0 -131px;background-size:44px}.icons.google{background-position:0 -45px;background-size:44px}.icons.somemore{border-radius:100%;border:1px solid #ddd;background-position:-1px -165px;background-size:42px;width:38px;height:38px}.icons.somemore:hover{-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,.2);-moz-box-shadow:inset 0 0 1px rgba(0,0,0,.2);box-shadow:inset 0 0 1px rgba(0,0,0,.2);cursor:pointer}.morelogo-con{background-color:#fff;padding:10px;position:absolute;left:249px;opacity:0;top:30px;z-index:3;border-radius:5px;box-shadow:0 1px 2px 0 rgba(0,0,0,.2);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.morelogo-con.popover{opacity:1;top:45px}.morelogo-con>span{display:block;font-size:13px;color:#3d474d}.morelogo-con .mingdao{display:inline-block;vertical-align:middle;background-position:0 -257px;background-size:44px;margin-right:11px}.rotate{animation:.8s infinite rotate;-webkit-animation:.8s infinite rotate;-o-animation:.8s infinite rotate;-moz-animation:.8s infinite rotate;-ms-animation:.8s infinite rotate}@-webkit-keyframes rotate{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@-ms-keyframes rotate{from{-ms-transform:rotate(0)}to{-ms-transform:rotate(360deg)}}@-o-keyframes rotate{from{-o-transform:rotate(0)}to{-o-transform:rotate(360deg)}}@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}.bind{width:600px;margin-left:-300px}.bind .button,.bind .txt{width:55%}.bind #logo-text{vertical-align:-7px}.bind .icons{background:url(/resources/images/login_processon.png) no-repeat;display:inline-block;width:74px;height:74px;vertical-align:top}.bind .icons.weixin{background-position:0 0;background-size:70px;width:70px;height:68px}.bind .icons.qq{background-position:0 -141px;background-size:70px;width:70px;height:68px}.bind .icons.weibo{background-position:0 -211px;background-size:70px;width:70px;height:68px}.bind .icons.google{background-position:0 -73px;background-size:70px;width:70px;height:68px}.bind_item{position:relative}.bind-arrow{margin-left:30px;display:inline-block;position:relative;color:#666;margin-right:30px}.bind-tip{margin-top:40px}.des{margin-top:10px;font-size:14px}@media screen and (max-width:760px){.page-con{width:100%;left:0;margin-left:0}} 
 | 
         body{ 
 | 
          background-image :url(images/loginPage/bg1.png); 
 | 
          background-size:100% 100%;    
 | 
        }   
 | 
        html,body{ 
 | 
            height: 100%; 
 | 
            touch-action: manipulation; 
 | 
        } 
 | 
        html { 
 | 
            touch-action: manipulation; 
 | 
        } 
 | 
        #logo-text{ 
 | 
            /*color: rgba(51, 51, 51, 1);*/ 
 | 
            font-size: 36px; 
 | 
            /*margin-left: 25px;*/ 
 | 
            color: #000000; 
 | 
            /*margin-bottom: 20px;*/ 
 | 
        } 
 | 
        .container{ 
 | 
            width: 495px; 
 | 
            height: 621px; 
 | 
            border-radius: 24px; 
 | 
            /*background-color: #ffffff;*/ 
 | 
            /*box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);*/ 
 | 
            border-width: 0px; 
 | 
            margin-left: 0px; 
 | 
            /*text-align: left;*/ 
 | 
            left: 70%; 
 | 
            padding: 0px; 
 | 
            color: white; 
 | 
        } 
 | 
        .page-con{ 
 | 
            padding:20px; 
 | 
        } 
 | 
        .bar-line{ 
 | 
            display: block; 
 | 
            width: 66px; 
 | 
            height: 8px; 
 | 
            background-color: rgba(64, 149, 229, 0); 
 | 
            margin-bottom: 27px; 
 | 
        } 
 | 
        .txt{ 
 | 
            border-radius: 0px; 
 | 
            border-width: 0px; 
 | 
            font-size: 26px; 
 | 
            padding: 0px 0px 0px 10px; 
 | 
            height: 45px; 
 | 
        } 
 | 
        .input-container{ 
 | 
            /*border-bottom: 1px solid rgba(187, 187, 187, 1);*/ 
 | 
            /*margin: auto;*/ 
 | 
            box-sizing: border-box; 
 | 
            width:418px; 
 | 
            height:60px; 
 | 
            border-bottom:1px solid #999999; 
 | 
            /*padding: 18px 28px 18px 28px;*/ 
 | 
            padding: 10px 0px; 
 | 
            /*border-radius: 10px;*/ 
 | 
            display: flex; 
 | 
            align-items: center; 
 | 
        } 
 | 
        #signin_btn{ 
 | 
            width: 418px; 
 | 
            height: 88px; 
 | 
            line-height: 88px; 
 | 
            border-radius: 10px; 
 | 
            background-color: #008BFD; 
 | 
            /*background-color: rgba(94, 131, 248, 1);*/ 
 | 
            color: rgba(255, 255, 255, 1); 
 | 
            font-size: 24px; 
 | 
            text-align: center; 
 | 
            padding: 0px; 
 | 
        } 
 | 
        .signup{ 
 | 
            display: none; 
 | 
        } 
 | 
        .password-icon{ 
 | 
            position: relative; 
 | 
            top: 4px; 
 | 
            margin-right: 5px; 
 | 
        } 
 | 
        .verification-icon{ 
 | 
            position: absolute; 
 | 
            left: 0px; 
 | 
            top: 5px; 
 | 
            width: 28px; 
 | 
        } 
 | 
        .validate-line{ 
 | 
            border-bottom: 1px solid rgba(187, 187, 187, 0); 
 | 
        } 
 | 
        .text71{ 
 | 
            position: relative; 
 | 
            top:20%; 
 | 
            z-index: 1; 
 | 
            font-weight: 600; 
 | 
            font-size: 48px; 
 | 
            color: transparent; 
 | 
            /*color: #39B5E1;*/ 
 | 
            letter-spacing: 4px; 
 | 
            margin: 0; 
 | 
            padding: 0 16px; 
 | 
            background: linear-gradient(to right, #39B5E1 0, #4BE0FF 1%, #FFF 2%, #4BE0FF 3%, #39B5E1 4%); 
 | 
            background-position: -32px 0; 
 | 
            -webkit-background-clip: text; 
 | 
  
 | 
  
 | 
            /*animation: typing 2s steps(20, end) 1,eff71-pause 4s linear infinite, blink-caret 1s steps(1) infinite;*/ 
 | 
            animation: typing 2s steps(20, end) 1,eff71 1s linear 2s 1 forwards, blink-caret 1s steps(1) infinite; 
 | 
            display: inline-block; 
 | 
            overflow: hidden; 
 | 
            white-space: nowrap; 
 | 
        } 
 | 
        @keyframes eff71-pause { 
 | 
            0%, 24.9% { /* 第一个0%到24.9%的范围内播放eff71动画 */ 
 | 
                animation-name: eff71; 
 | 
            } 
 | 
            25%, 100% { /* 其余时间保持透明背景 */ 
 | 
                background-position: -32px 0; /* 或者任何不会显示动画效果的位置 */ 
 | 
            } 
 | 
        } 
 | 
        @keyframes eff71{ 
 | 
            to{ 
 | 
                background-position: 750px 0; 
 | 
            } 
 | 
        } 
 | 
        @keyframes typing { 
 | 
             from { width: 0 } 
 | 
             to { width: 100% } 
 | 
         } 
 | 
  
 | 
        @keyframes blink-caret { 
 | 
            50% { border-color: transparent } 
 | 
        } 
 | 
        .animation{ 
 | 
            position: relative; 
 | 
            display: inline-block; 
 | 
            /*left: 20%;*/ 
 | 
            /*left: 18%;*/ 
 | 
            /*top: 20%;*/ 
 | 
            z-index: 1; 
 | 
            /*width: 522px;*/ 
 | 
            width: 62.5%; 
 | 
            height: 100%; 
 | 
            /*background-image: url('images/loginPage/decora.png');*/ 
 | 
            /*background-size: cover;*/ 
 | 
            /*background-position: center;*/ 
 | 
            text-align: center; 
 | 
            /*align-content: center;*/ 
 | 
        } 
 | 
  
 | 
    </style> 
 | 
</head> 
 | 
  
 | 
<body> 
 | 
<canvas id="canv" width="1920" height="572" style="z-index:-1;position: absolute;top:0;left: 0;"></canvas> 
 | 
<div class="animation"> 
 | 
    <p class="text71" >北京市地面沉降监测网建设工程</p> 
 | 
</div> 
 | 
<div class="container" style="display: inline-block;"> 
 | 
    <div class="page-con" > 
 | 
        <span class="bar-line"></span> 
 | 
        <form name="loginform" id="loginform"> 
 | 
            <input type="hidden" id="redirectUrl" name="redirectUrl" value="${redirectUrl}" > 
 | 
            <div><span id="logo-text">您好,欢迎登录!</span></div> 
 | 
            <div style="width:100%"> 
 | 
                <div class="input-container" style="margin-top:124px;position:relative;"> 
 | 
                    <img src="images/loginPage/user1.png" style="margin-right:5px;"/> 
 | 
                    <input id="username" name="username" class="txt" value="" type="text" autocomplete="off" placeholder="请输入用户名/邮箱" > 
 | 
                    <div class="error-tip"></div> 
 | 
                </div> 
 | 
                <div class="login-input input-container" style="margin-top:42px;position:relative;"> 
 | 
                    <img class="password-icon" src="images/loginPage/password1.png"style="margin-top:-5px"/> 
 | 
                    <input name="password" id="password"  value="" class="txt" type="password" placeholder="请输入登录密码" autocomplete="off"  > 
 | 
                    <div class="error-tip"></div> 
 | 
                </div> 
 | 
  
 | 
                <div style="margin-top:25px;position:relative;" th:if="${captchaEnabled==true}"> 
 | 
                    <img class="verification-icon" src="images/loginPage/validate.svg" /> 
 | 
                    <input name="validateCode" id="validateCode" style="float: left;margin-left: 30px;width: 230px;" class="txt" type="text" placeholder="验证码" /> 
 | 
                    <a href="javascript:void(0);" title="点击更换验证码"> 
 | 
                        <img th:src="@{captcha/captchaImage(type=${captchaType})}" class="radius imgcode" width="100" height="30" style="position:absolute;right:40px;top:7px;"/> 
 | 
                    </a> 
 | 
                    <div style="display: inline-block;float: left;position: relative;top:10px;right: 150px;" class="error-tip"></div> 
 | 
                </div> 
 | 
            </div> 
 | 
  
 | 
            <div class="validate-line" style="clear:both;"></div> 
 | 
            <div style="margin-top:96px;"> 
 | 
                <span id="signin_btn" onclick="login.login();" class="button">登录</span> 
 | 
            </div> 
 | 
            <div class="signup"> 
 | 
                <label for="rememberMe" style="float:right;margin-right: 15px;color:#000;" > 
 | 
                    <input type="checkbox" id="rememberMe" name="rememberMe" >记住密码</label> 
 | 
            </div> 
 | 
        </form> 
 | 
  
 | 
    </div> 
 | 
</div> 
 | 
  
 | 
<div class="weixin-con" id="weixin_dlg"><div style="margin-top:200px;">加载中...</div> 
 | 
<!--粒子动画--> 
 | 
<script> 
 | 
    var num = 200; 
 | 
    var w = window.innerWidth*0.625; 
 | 
    // var w = 1200; 
 | 
    var h = window.innerHeight; 
 | 
    var max = 100; 
 | 
    var _x = 0; 
 | 
    var _y = 0; 
 | 
    var _z = 150; 
 | 
    var dtr = function(d) { 
 | 
        return d * Math.PI / 180; 
 | 
    }; 
 | 
  
 | 
    var rnd = function() { 
 | 
        return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180); 
 | 
    }; 
 | 
    var dist = function(p1, p2, p3) { 
 | 
        return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2)); 
 | 
    }; 
 | 
  
 | 
    var cam = { 
 | 
        obj: { 
 | 
            x: _x, 
 | 
            y: _y, 
 | 
            z: _z 
 | 
        }, 
 | 
        dest: { 
 | 
            x: 0, 
 | 
            y: 0, 
 | 
            z: 1 
 | 
        }, 
 | 
        dist: { 
 | 
            x: 0, 
 | 
            y: 0, 
 | 
            z: 200 
 | 
        }, 
 | 
        ang: { 
 | 
            cplane: 0, 
 | 
            splane: 0, 
 | 
            ctheta: 0, 
 | 
            stheta: 0 
 | 
        }, 
 | 
        zoom: 1, 
 | 
        disp: { 
 | 
            x: w / 2, 
 | 
            y: h / 2, 
 | 
            z: 0 
 | 
        }, 
 | 
        upd: function() { 
 | 
            cam.dist.x = cam.dest.x - cam.obj.x; 
 | 
            cam.dist.y = cam.dest.y - cam.obj.y; 
 | 
            cam.dist.z = cam.dest.z - cam.obj.z; 
 | 
            cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z); 
 | 
            cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z); 
 | 
            cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z); 
 | 
            cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z); 
 | 
        } 
 | 
    }; 
 | 
  
 | 
    var trans = { 
 | 
        parts: { 
 | 
            sz: function(p, sz) { 
 | 
                return { 
 | 
                    x: p.x * sz.x, 
 | 
                    y: p.y * sz.y, 
 | 
                    z: p.z * sz.z 
 | 
                }; 
 | 
            }, 
 | 
            rot: { 
 | 
                x: function(p, rot) { 
 | 
                    return { 
 | 
                        x: p.x, 
 | 
                        y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)), 
 | 
                        z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x)) 
 | 
                    }; 
 | 
                }, 
 | 
                y: function(p, rot) { 
 | 
                    return { 
 | 
                        x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)), 
 | 
                        y: p.y, 
 | 
                        z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y)) 
 | 
                    }; 
 | 
                }, 
 | 
                z: function(p, rot) { 
 | 
                    return { 
 | 
                        x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)), 
 | 
                        y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)), 
 | 
                        z: p.z 
 | 
                    }; 
 | 
                } 
 | 
            }, 
 | 
            pos: function(p, pos) { 
 | 
                return { 
 | 
                    x: p.x + pos.x, 
 | 
                    y: p.y + pos.y, 
 | 
                    z: p.z + pos.z 
 | 
                }; 
 | 
            } 
 | 
        }, 
 | 
        pov: { 
 | 
            plane: function(p) { 
 | 
                return { 
 | 
                    x: p.x * cam.ang.cplane + p.z * cam.ang.splane, 
 | 
                    y: p.y, 
 | 
                    z: p.x * -cam.ang.splane + p.z * cam.ang.cplane 
 | 
                }; 
 | 
            }, 
 | 
            theta: function(p) { 
 | 
                return { 
 | 
                    x: p.x, 
 | 
                    y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta, 
 | 
                    z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta 
 | 
                }; 
 | 
            }, 
 | 
            set: function(p) { 
 | 
                return { 
 | 
                    x: p.x - cam.obj.x, 
 | 
                    y: p.y - cam.obj.y, 
 | 
                    z: p.z - cam.obj.z 
 | 
                }; 
 | 
            } 
 | 
        }, 
 | 
        persp: function(p) { 
 | 
            return { 
 | 
                x: p.x * cam.dist.z / p.z * cam.zoom, 
 | 
                y: p.y * cam.dist.z / p.z * cam.zoom, 
 | 
                z: p.z * cam.zoom, 
 | 
                p: cam.dist.z / p.z 
 | 
            }; 
 | 
        }, 
 | 
        disp: function(p, disp) { 
 | 
            return { 
 | 
                x: p.x + disp.x, 
 | 
                y: -p.y + disp.y, 
 | 
                z: p.z + disp.z, 
 | 
                p: p.p 
 | 
            }; 
 | 
        }, 
 | 
        steps: function(_obj_, sz, rot, pos, disp) { 
 | 
            var _args = trans.parts.sz(_obj_, sz); 
 | 
            _args = trans.parts.rot.x(_args, rot); 
 | 
            _args = trans.parts.rot.y(_args, rot); 
 | 
            _args = trans.parts.rot.z(_args, rot); 
 | 
            _args = trans.parts.pos(_args, pos); 
 | 
            _args = trans.pov.plane(_args); 
 | 
            _args = trans.pov.theta(_args); 
 | 
            _args = trans.pov.set(_args); 
 | 
            _args = trans.persp(_args); 
 | 
            _args = trans.disp(_args, disp); 
 | 
            return _args; 
 | 
        } 
 | 
    }; 
 | 
  
 | 
    (function() { 
 | 
        "use strict"; 
 | 
        var threeD = function(param) { 
 | 
            this.transIn = {}; 
 | 
            this.transOut = {}; 
 | 
            this.transIn.vtx = (param.vtx); 
 | 
            this.transIn.sz = (param.sz); 
 | 
            this.transIn.rot = (param.rot); 
 | 
            this.transIn.pos = (param.pos); 
 | 
        }; 
 | 
  
 | 
        threeD.prototype.vupd = function() { 
 | 
            this.transOut = trans.steps( 
 | 
  
 | 
                this.transIn.vtx, 
 | 
                this.transIn.sz, 
 | 
                this.transIn.rot, 
 | 
                this.transIn.pos, 
 | 
                cam.disp 
 | 
            ); 
 | 
        }; 
 | 
  
 | 
        var Build = function() { 
 | 
            this.vel = 0.04; 
 | 
            this.lim = 360; 
 | 
            this.diff = 200; 
 | 
            this.initPos = 100; 
 | 
            this.toX = _x; 
 | 
            this.toY = _y; 
 | 
            this.go(); 
 | 
        }; 
 | 
  
 | 
        Build.prototype.go = function() { 
 | 
            this.canvas = document.getElementById("canv"); 
 | 
            // this.canvas.width = 1200; 
 | 
            this.canvas.width = window.innerWidth*0.625; 
 | 
            this.canvas.height = window.innerHeight; 
 | 
            this.$ = canv.getContext("2d"); 
 | 
            this.$.globalCompositeOperation = 'source-over'; 
 | 
            this.varr = []; 
 | 
            this.dist = []; 
 | 
            this.calc = []; 
 | 
  
 | 
            for (var i = 0, len = num; i < len; i++) { 
 | 
                this.add(); 
 | 
            } 
 | 
  
 | 
            this.rotObj = { 
 | 
                x: 0, 
 | 
                y: 0, 
 | 
                z: 0 
 | 
            }; 
 | 
            this.objSz = { 
 | 
                x: w / 5, 
 | 
                y: h / 5, 
 | 
                z: w / 5 
 | 
            }; 
 | 
        }; 
 | 
  
 | 
        Build.prototype.add = function() { 
 | 
            this.varr.push(new threeD({ 
 | 
                vtx: { 
 | 
                    x: rnd(), 
 | 
                    y: rnd(), 
 | 
                    z: rnd() 
 | 
                }, 
 | 
                sz: { 
 | 
                    x: 0, 
 | 
                    y: 0, 
 | 
                    z: 0 
 | 
                }, 
 | 
                rot: { 
 | 
                    x: 20, 
 | 
                    y: -20, 
 | 
                    z: 0 
 | 
                }, 
 | 
                pos: { 
 | 
                    x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180), 
 | 
                    y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180), 
 | 
                    z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180) 
 | 
                } 
 | 
            })); 
 | 
            this.calc.push({ 
 | 
                x: 360 * Math.random(), 
 | 
                y: 360 * Math.random(), 
 | 
                z: 360 * Math.random() 
 | 
            }); 
 | 
        }; 
 | 
  
 | 
        Build.prototype.upd = function() { 
 | 
            cam.obj.x += (this.toX - cam.obj.x) * 0.05; 
 | 
            cam.obj.y += (this.toY - cam.obj.y) * 0.05; 
 | 
        }; 
 | 
  
 | 
        Build.prototype.draw = function() { 
 | 
            this.$.clearRect(0, 0, this.canvas.width, this.canvas.height); 
 | 
            cam.upd(); 
 | 
            this.rotObj.x += 0.1; 
 | 
            this.rotObj.y += 0.1; 
 | 
            this.rotObj.z += 0.1; 
 | 
  
 | 
            for (var i = 0; i < this.varr.length; i++) { 
 | 
                for (var val in this.calc[i]) { 
 | 
                    if (this.calc[i].hasOwnProperty(val)) { 
 | 
                        this.calc[i][val] += this.vel; 
 | 
                        if (this.calc[i][val] > this.lim) this.calc[i][val] = 0; 
 | 
                    } 
 | 
                } 
 | 
  
 | 
                this.varr[i].transIn.pos = { 
 | 
                    x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180), 
 | 
                    y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180), 
 | 
                    z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180) 
 | 
                }; 
 | 
                this.varr[i].transIn.rot = this.rotObj; 
 | 
                this.varr[i].transIn.sz = this.objSz; 
 | 
                this.varr[i].vupd(); 
 | 
                if (this.varr[i].transOut.p < 0) continue; 
 | 
                var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2); 
 | 
                this.$.globalCompositeOperation = 'lighter'; 
 | 
                g.addColorStop(0, 'hsla(255, 255%, 255%, 1)'); 
 | 
                g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)'); 
 | 
                g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)'); 
 | 
                this.$.fillStyle = g; 
 | 
                this.$.beginPath(); 
 | 
                this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false); 
 | 
                this.$.fill(); 
 | 
                this.$.closePath(); 
 | 
            } 
 | 
        }; 
 | 
        Build.prototype.anim = function() { 
 | 
            window.requestAnimationFrame = (function() { 
 | 
                return window.requestAnimationFrame || 
 | 
                    function(callback, element) { 
 | 
                        window.setTimeout(callback, 1000 / 60); 
 | 
                    }; 
 | 
            })(); 
 | 
            var anim = function() { 
 | 
                this.upd(); 
 | 
                this.draw(); 
 | 
                window.requestAnimationFrame(anim); 
 | 
  
 | 
            }.bind(this); 
 | 
            window.requestAnimationFrame(anim); 
 | 
        }; 
 | 
  
 | 
        Build.prototype.run = function() { 
 | 
            this.anim(); 
 | 
  
 | 
            window.addEventListener('mousemove', function(e) { 
 | 
                this.toX = (e.clientX - this.canvas.width / 2) * -0.8; 
 | 
                this.toY = (e.clientY - this.canvas.height / 2) * 0.8; 
 | 
            }.bind(this)); 
 | 
            window.addEventListener('touchmove', function(e) { 
 | 
                e.preventDefault(); 
 | 
                this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8; 
 | 
                this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8; 
 | 
            }.bind(this)); 
 | 
            window.addEventListener('mousedown', function(e) { 
 | 
                for (var i = 0; i < 100; i++) { 
 | 
                    this.add(); 
 | 
                } 
 | 
            }.bind(this)); 
 | 
            window.addEventListener('touchstart', function(e) { 
 | 
                e.preventDefault(); 
 | 
                for (var i = 0; i < 100; i++) { 
 | 
                    this.add(); 
 | 
                } 
 | 
            }.bind(this)); 
 | 
        }; 
 | 
        var app = new Build(); 
 | 
        app.run(); 
 | 
    })(); 
 | 
    window.addEventListener('resize', function() { 
 | 
        // canvas.width = w = 1200; 
 | 
        canvas.width = w = window.innerWidth*0.625; 
 | 
        canvas.height = h = window.innerHeight; 
 | 
    }, false); 
 | 
</script> 
 | 
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]];var captchaEnabled= [[${captchaEnabled}]]; </script> 
 | 
<script  th:src="@{/js/jquery.min.js}"></script> 
 | 
<script  th:src="@{/ajax/libs/layer/layer.min.js}"></script> 
 | 
<script  th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script> 
 | 
<script  th:src="@{/ruoyi/js/ry-ui.js?v=4.1.0}"></script> 
 | 
<script  th:src="@{/ajax/libs/encrypt/jsencrypt.min.js}"></script> 
 | 
<script  th:src="@{/loginPage/process/login.js}"></script> 
 | 
  
 | 
<script type="text/javascript"> 
 | 
    window.addEventListener('wheel', function (event) { 
 | 
        if (event.ctrlKey === true || event.metaKey) { 
 | 
            event.preventDefault(); 
 | 
        } 
 | 
    }, { passive: false }); 
 | 
  
 | 
    //firefox 
 | 
    window.addEventListener('DOMMouseScroll', function (event) { 
 | 
        if (event.ctrlKey === true || event.metaKey) { 
 | 
            event.preventDefault(); 
 | 
        } 
 | 
    }, { passive: false }) 
 | 
  
 | 
</script> 
 | 
  
 | 
</body> 
 | 
</html> 
 |