lixin-web
Version:
vue and bootstrap
188 lines (177 loc) • 9.96 kB
HTML
<html lang="zh-CN" >
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<title>用户注册</title>
<!-- 引用样式文件开始 -->
<link rel="stylesheet" type="text/css" href="/css/common-all-plugin.css">
<link rel="stylesheet" type="text/css" href="/css/common.css">
<link rel="stylesheet" type="text/css" href="/css/regist.css">
<!-- 引用样式文件结束 -->
<!-- 引用脚本文件开始-->
<script type="text/javascript" src="/config.js"></script>
<!-- 引用脚本文件结束-->
</head>
<body>
<div class="menu01">
<nav class="navbar" id='main-nav' >
<div class="nav-min">
<div class='row' id="liixnnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="liixn-logo">
<a class="" href="index.html"><img src="img/lixinnew/logo1.png" alt="" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="liixn_nav">如果你已拥有利信账户,则可在此<a style="color:red;font-weight:800" href="login.html">登录!</a>
<a href="javascript:void(0)" data-command="kefu"><span class="glyphicon glyphicon-headphones"></span>在线客服</a>
</div><!-- /.navbar-collapse -->
<div class="mobliem"></div>
</div><!-- /.container-fluid -->
</div>
</nav>
<script type="text/javascript">
$('.menu01').next()
$('.lxnav li a').each(function() {
if ($(this)[0].pathname === window.location.pathname) {
$(this).parent().addClass('active');
}
});
$(".mobliem").click(function(){
$('.liixn_nav').stop().slideToggle();
$('.mobliem').toggleClass('activetm');
$('.liixn_nav li a').click(function(){
$('.liixn_nav').hide();
$('.mobliem').removeClass('activetm')
})
});
/* $(window).resize(function(){
location.reload()
}); */
</script>
</div>
<!-- 中间部分开始 -->
<div class="page-content">
<div class="fill">
<div class="reference"></div>
</div>
<div class="page-container">
<div class="sign-up-form">
<div class="regise-logo"><img style="visibility: hidden;" class="logo" src="img/regist/logo.png"></div>
<canvas id="particle"></canvas>
<h1><strong>利信娱乐</strong> - 利之根本,信乃源泉</h1>
<div class="logo-text">You are registering a new account</div>
</div>
<div class="wrapper">
<div class="regist">
<div class="y-qing">
<span class="id-user" id="id-user">利信娱乐</span>邀请您!联系QQ:<span id="qq"></span>
</div>
<div class="line"></div>
<div class="form">
<table class="form-control">
<tbody>
<tr>
<td class="value">
<span class="icon-user glyphicon glyphicon-user"></span>
<input name="username" placeholder="请输入用户名" type="text" class="form-control">
<div class="help-inline">例如:lixin666</div>
</td>
</tr>
<tr>
<td class="value">
<span class="glyphicon glyphicon-tags"></span>
<input name="nickname" placeholder="昵称" type="text" class="form-control">
<div class="help-inline">例如:利信888</div>
</td>
</tr>
<tr>
<td class="value">
<span class="glyphicon glyphicon-lock"></span>
<input name="password1" placeholder="设置密码" type="password" class="form-control">
<div class="help-inline">数字、字母</div>
</td>
</tr>
<tr>
<td class="value">
<span class="glyphicon glyphicon-lock"></span>
<input name="password2" placeholder="确认密码" type="password" class="form-control">
<div class="help-inline">手动输入,粘贴无效。</div>
</td>
</tr>
<tr>
<td class="value">
<span class="glyphicon glyphicon-envelope"></span>
<input name="email" placeholder="邮箱" type="text" class="form-control">
<div class="help-inline">请输入您的邮箱</div>
</td>
</tr>
<!-- <tr data-field="registCode">
<td class="label">注册码:</td>
<td class="value">
<input name="registCode" type="text" class="form-control">
<div class="help-inline"></div>
</td>
</tr> -->
<tr>
<td class="value">
<span class="glyphicon glyphicon-ok-sign"></span>
<input name="securityCode" placeholder="验证码" type="text" class="form-control">
<span class="refreshi glyphicon glyphicon-repeat"></span>
<div class="help-inline"></div>
<div class="img">
<img height="43" width="144" src="/api/utils/regist-security-code" />
</div>
</td>
</tr>
</tbody>
</table>
<div class="button-groups">
<input name="regist" class="button" value="立刻注册" type="button"/><br>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 中间部分结束 -->
<script >include('/common-all-plugin-01.js');</script>
<script >include('/common-all-plugin-02.js');</script><script >include('/common-all-plugin-03.js');</script>
<script >include('/app.js');</script>
<script >include('/common-all.js');</script>
<script >include('/game-regist.js');</script>
<script type="text/javascript">
var teamName = App.getUrl('teamName');
var qq = App.getUrl('qq');
$('#id-user').html(decodeURI(decodeURI(teamName)));
$('#qq').html(decodeURI(decodeURI(qq)));
if(typeof(teamName) == "undefined"){
$('#id-user').html("利信娱乐")
}
if(typeof(qq) == "undefined"){
$('#qq').html("无")
}
</script>
<img src="" alt="" id="rainyDay" width="100%" height="100%" />
</body>
</html>
<script type="text/javascript" src="/plugins/official/rainyday.min.js"></script>
<script type="text/javascript">
+ function() {
var image = document.getElementById('rainyDay');
image.onload = function() {
engine = new RainyDay({
image: this,
enableSizeChange:false
});
engine.rain([
[3, 2, 2]
], 100);
};
image.crossOrigin = 'anonymous';
image.src = 'img/regist/signup_bg.jpg';
}()
</script>
<script>
function animate(a){if("function"==typeof a){var b=16;ctx.clearRect(0,0,canvas.width,canvas.height),a(b),RAF(function(){animate(a)})}}function Particle(a,b,c,d,e,f,g){this.x=a,this.y=b,this.ex=c,this.ey=d,this.vx=e,this.vy=f,this.a=1500,this.color=g,this.width=particleSize_x,this.height=particleSize_y,this.stop=!1,this["static"]=!1,this.maxCheckTimes=10,this.checkLength=5,this.checkTimes=0}function useImage(){img.complete?canvasHandle.init():img.onload=function(){canvasHandle.init()}}var canvas=document.getElementById("particle"),ctx=canvas.getContext("2d");img=document.querySelector(".logo"),canvas.width=150,canvas.height=150;var mouseX=null,mouseY=null,mouseRadius=50,RAF=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}();Array.prototype.forEach2=function(a){for(var b=0;b<this.length;b++)a.call("object"==typeof this[b]?this[b]:window,b,this[b])};var particleArray=[],animateArray=[],particleSize_x=1,particleSize_y=2,canvasHandle={init:function(){img.style.visibility="hidden",this._reset(),this._initImageData(),this._execAnimate()},_reset:function(){particleArray.length=0,animateArray.length=0,this.ite=100,this.start=0,this.end=this.start+this.ite},_initImageData:function(){this.imgx=(canvas.width-img.width)/2,this.imgy=(canvas.height-img.height)/2,ctx.clearRect(0,0,canvas.width,canvas.height),ctx.drawImage(img,this.imgx,this.imgy,img.width,img.height);for(var a=ctx.getImageData(this.imgx,this.imgy,img.width,img.height),b=0;b<img.width;b+=particleSize_x)for(var c=0;c<img.height;c+=particleSize_y){var d=4*(c*a.width+b);if(a.data[d+3]>=125){var i,e="rgba("+a.data[d]+","+a.data[d+1]+","+a.data[d+2]+","+a.data[d+3]+")",f=b+20*Math.random(),g=200*-Math.random()+400,h=img.height/2-40*Math.random()+20;i=h<this.imgy+img.height/2?300*Math.random():300*-Math.random(),particleArray.push(new Particle(f+this.imgx,h+this.imgy,b+this.imgx,c+this.imgy,g,i,e)),particleArray[particleArray.length-1].drawSelf()}}},_execAnimate:function(){var a=this;particleArray.sort(function(a,b){return a.ex-b.ex}),this.isInit||(this.isInit=!0,animate(function(b){animateArray.length<particleArray.length&&(a.end>particleArray.length-1&&(a.end=particleArray.length-1),1400==a.end&&setTimeout(function(){img.style.visibility="visible",canvas.style.display="none"},1e3),animateArray=animateArray.concat(particleArray.slice(a.start,a.end)),a.start+=a.ite,a.end+=a.ite),animateArray.forEach2(function(a){this.update(b)})}))}},tickTime=16,oldColor="";Particle.prototype={constructor:Particle,drawSelf:function(){oldColor!=this.color&&(ctx.fillStyle=this.color,oldColor=this.color),ctx.fillRect(this.x-this.width/2,this.y-this.height/2,this.width,this.height)},move:function(a){if(this.stop)this.x=this.ex,this.y=this.ey;else{a/=1e3;var b=this.ex-this.x,c=this.ey-this.y,d=Math.atan(c/b),e=Math.abs(this.a*Math.cos(d));e=this.x>this.ex?-e:e;var f=Math.abs(this.a*Math.sin(d));f=this.y>this.ey?-f:f,this.vx+=e*a,this.vy+=f*a,this.vx*=.95,this.vy*=.95,this.x+=this.vx*a,this.y+=this.vy*a,Math.abs(this.x-this.ex)<=this.checkLength&&Math.abs(this.y-this.ey)<=this.checkLength?(this.checkTimes++,this.checkTimes>=this.maxCheckTimes&&(this.stop=!0)):this.checkTimes=0}},update:function(a){this.move(a),this.drawSelf()}},useImage();
</script>