Skip to content

T
tl_estate
Commit 6ec4a57c authored by xishifeng's avatar xishifeng
Browse files
Options

登录页

parent b53699a0
Hide whitespace changes
Inline Side-by-side
Showing with 462 additions and 271 deletions
application/index/view/login/login.html
View file @ 6ec4a57c
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8"> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>同联地产管理后台</title> <meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="/resource/css/login.css" type="text/css"/> <title>同联地产管理后台</title>
</head> <link rel="stylesheet" href="/resource/css/login.css" type="text/css" />
<body> </head>
<div class="main-container">
<div class="main-content"> <body>
<div class="login-container"> <header>
<div class="center"> <div>
<h1> <img src="/resource/image/logo.png" />
<i class="ace-icon fa fa-leaf green"></i> </div>
<span class="red">同联地产</span> </header>
<span class="white" id="id-text2">管理后台</span> <div class="main-area">
</h1> <img src="/resource/image/bg_pic.jpg" />
</div> <div class="edit-area">
<div class="loginbox"> <p>后台管理云平台帐号登录</p>
<form action="/admin.php/index/loginVerify" method="post"> <p><span></span><span></span></p>
<div class="input-icon"> <div class="input-area">
<input class="input-block" type="text" id="username" name="username" autofocus <div class="img-cell"></div>
placeholder="请输入用户名" maxlength="16" required> <input type="text" placeholder="请输入帐号" id="username" />
</div> </div>
<div class="input-icon"> <div class="input-area">
<input class="input-block" type="password" id="passwd" name="passwd" placeholder="请输入登录密码" <div class="img-cell"></div>
maxlength="16" required> <input type="password" placeholder="请输入密码" id="passwd" />
<span style="color: #fff;display: block;text-align: center;font-size: 12px">{$msg}</span> </div>
</div> <div class="btn-area">
<div class="center" style="margin-top: 15px"> <a href="javascript:;" id="btn_login">登录</a>
<button type="submit" style="background: #87b1ff;">立即登陆</button> <a href="javascript:;" id="btn_login_temp">正在登录...</a>
</div> </div>
</form> </div>
</div> </div>
</div> <footer>
</div> <p>Copyright 2006-2017 Tonglian Property Co., Ltd. 上海同联房地产经纪事务所 All rights</p>
</div> </footer>
<canvas></canvas>
<script src="/resource/lib/js/jquery-2.0.3.min.js"></script> <script src="/resource/lib/js/jquery-2.0.3.min.js"></script>
<script src="/resource/js/login.js"></script> <script src="/resource/js/login.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
public/resource/css/login.css
View file @ 6ec4a57c
.login-layout { @charset "utf-8";
background-color: #1D2024; body{
} margin: 0;
.login-container { }
width: 375px; p{
position: absolute; margin: 0;
z-index: 1001; }
top: 50%; header>div{
left: 50%; margin: 0 auto;
transform: translate(-50%, -70%); width: 1200px;
} height: 115px;
.center { overflow: hidden;
text-align: center!important; }
} header>div>img{
h1 { float: left;
font-size: 32px; width: 200px;
font-weight: 400; padding-top: 34px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; }
} .main-area{
.blue { overflow: hidden;
color: #478fca!important; width: 100%;
} height: 850px;
.red { position: relative;
color: #dd5a43!important; }
} .main-area>img{
.white { float: left;
color: #fff!important; width: 100%;
} height: 850px;
.loginbox { object-fit: cover;
border-bottom: none;
padding: 6px;
/*background-color: #ffffff;*/
transform: scale(0,1) translate(0);
transition: transform .3s ease;
border-width: 20px 0;
transform-style: preserve-3d;
/*box-shadow: 0 0 25px 0 #CCC;*/
}
.loginbox.active {
transform: scale(1,1) translate(0);
}
.sui-form {
/*background-color: #ffffff;*/
margin: 0;
padding-top: 20px;
}
.input-icon {
position: relative;
}
.input-block {
height: 34px !important;
font-size: 14px !important;
width: 250px !important;
margin: 0 auto !important;
display: block !important;
margin-bottom: 20px !important;
}
html, body {
background: #000;
margin: 0;
}
button[type=submit] {
background: transparent;
border-width: 2px;
box-shadow: 0 0 9px 3px #28a3ef;
} }
canvas { .edit-area{
position: absolute; width: 440px;
height: 450px;
box-sizing: border-box;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
margin-left: -220px;
margin-top: -225px;
padding: 60px 60px 0;
}
.edit-area>p:nth-of-type(1){
font-size: 24px;
color: #333;
font-weight: bold;
padding-bottom: 20px;
}
.edit-area>p:nth-of-type(2){
overflow: hidden;
}
.edit-area>p:nth-of-type(2)>span:nth-of-type(1){
float: left;
width: 32px;
height: 6px;
background-color: #FF9419;
}
.edit-area>p:nth-of-type(2)>span:nth-of-type(2){
float: left;
margin-left: 24px;
width: 6px;
height: 6px;
background-color: #FF9419;
}
.edit-area>div.input-area{
padding-top: 40px;
padding-bottom: 20px;
overflow: hidden;
border-bottom: 1px solid #ccc;
}
.edit-area>div.input-area-active{
border-bottom: 1px solid #FF9419;
}
.edit-area>div.input-area>div.img-cell{
float: left;
width: 14px;
height: 18px;
margin-right: 20px;
}
.edit-area>div.input-area:nth-of-type(1)>div.img-cell{
background: url("/resource/image/ic_zhanghao_nor.png") no-repeat center center/14px 18px;
}
.edit-area>div.input-area:nth-of-type(2)>div.img-cell{
background: url("/resource/image/ic_mima_nor.png") no-repeat center center/14px 18px;
}
.edit-area>div.input-area-active:nth-of-type(1)>div.img-cell{
background: url("/resource/image/ic_zhanghao_sel.png") no-repeat center center/14px 18px;
}
.edit-area>div.input-area-active:nth-of-type(2)>div.img-cell{
background: url("/resource/image/ic_mima_sel.png") no-repeat center center/14px 18px;
}
.edit-area>div.input-area>input{
float: left;
outline: none;
box-sizing: border-box;
border: 0;
padding: 0;
font-size: 14px;
}
.edit-area>div.btn-area{
overflow: hidden;
padding-top: 50px;
}
.edit-area>div.btn-area>a{
float: left;
width: 320px;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
color: white;
}
a#btn_login{
background-color: #FF9419;
}
a#btn_login_temp{
display: none;
background-color: #999;
} }
.input-block {
background: rgba(0,255,204, .2) !important; footer>p{
color: #FFF !important; line-height: 115px;
font-weight: 500; text-align: center;
} font-size: 14px;
.input-block::-webkit-input-placeholder { color: #999;
color: #00CCCC !important;
} }
.input-block::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #00CCCC !important;
}
\ No newline at end of file
public/resource/css/login_old.css 0 → 100644
View file @ 6ec4a57c
.login-layout {
background-color: #1D2024;
}
.login-container {
width: 375px;
position: absolute;
z-index: 1001;
top: 50%;
left: 50%;
transform: translate(-50%, -70%);
}
.center {
text-align: center!important;
}
h1 {
font-size: 32px;
font-weight: 400;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.blue {
color: #478fca!important;
}
.red {
color: #dd5a43!important;
}
.white {
color: #fff!important;
}
.loginbox {
border-bottom: none;
padding: 6px;
/*background-color: #ffffff;*/
transform: scale(0,1) translate(0);
transition: transform .3s ease;
border-width: 20px 0;
transform-style: preserve-3d;
/*box-shadow: 0 0 25px 0 #CCC;*/
}
.loginbox.active {
transform: scale(1,1) translate(0);
}
.sui-form {
/*background-color: #ffffff;*/
margin: 0;
padding-top: 20px;
}
.input-icon {
position: relative;
}
.input-block {
height: 34px !important;
font-size: 14px !important;
width: 250px !important;
margin: 0 auto !important;
display: block !important;
margin-bottom: 20px !important;
}
html, body {
background: #000;
margin: 0;
}
button[type=submit] {
background: transparent;
border-width: 2px;
box-shadow: 0 0 9px 3px #28a3ef;
}
canvas {
position: absolute;
}
.input-block {
background: rgba(0,255,204, .2) !important;
color: #FFF !important;
font-weight: 500;
}
.input-block::-webkit-input-placeholder {
color: #00CCCC !important;
}
.input-block::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #00CCCC !important;
}
\ No newline at end of file
public/resource/js/login.js
View file @ 6ec4a57c
!(function () { $(function(){
$ (window).on ('load', function () { var _loginBtn = $('#btn_login'),
console.log (1); _loginTempBtn = $('#btn_login_temp');
$ ('.loginbox').addClass ('active'); $('.input-area>input').focus(function(){
$(this).parent().addClass('input-area-active');
}).blur(function(){
$(this).parent().removeClass('input-area-active');
}); });
$ (function () { _loginBtn.click(function(e){
var canvas = document.querySelector ('canvas'), e.preventDefault();
ctx = canvas.getContext ('2d'); e.stopPropagation();
canvas.width = window.innerWidth; var _userName = $.trim($('#username').val()),
canvas.height = window.innerHeight; _passWord = $.trim($('#passwd').val());
ctx.lineWidth = .3;
ctx.strokeStyle = (new Color (150)).style; if(_userName == ''){
alert('请输入用户名');
var mousePosition = { return false;
x: 30 * canvas.width / 200, };
y: 30 * canvas.height / 200 if(_passWord == ''){
}; alert('请输入登录密码');
return false;
var dots = { };
nb: ((document.body.clientWidth || 1000) / 3) | 0, $.ajax({
distance: 120, type: 'POST',
d_radius: 150, url: '/admin.php/index/loginVerify',
array: [] data: {
}; 'username': _userName,
'passwd': _passWord
function colorValue (min) { },
return Math.floor (Math.random () * 255 + min); timeout: 30000,
} dataType: 'json',
beforeSend: function() {
function createColorStyle (r, g, b) { _loginBtn.hide();
return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)'; _loginTempBtn.show();
} },
success: function(data) {
function mixComponents (comp1, weight1, comp2, weight2) { if(typeof data === 'object') {
return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2); if (data.code == 200) {
} console.log('登录成功');
location.href = '/admin.php/index/banner';
function averageColorStyles (dot1, dot2) { }else {
var color1 = dot1.color, alert(data['msg']);
color2 = dot2.color; };
}else{
var r = mixComponents (color1.r, dot1.radius, color2.r, dot2.radius), alert('数据错误');
g = mixComponents (color1.g, dot1.radius, color2.g, dot2.radius), };
b = mixComponents (color1.b, dot1.radius, color2.b, dot2.radius); },
return createColorStyle (Math.floor (r), Math.floor (g), Math.floor (b)); error: function() {
} alert('error');
},
function Color (min) { complete: function(xhr, textStatus){
min = min || 0; _loginTempBtn.hide();
this.r = colorValue (min); _loginBtn.show();
this.g = colorValue (min); if(textStatus === 'timeout'){
this.b = colorValue (min); alert('请求超时');
this.style = createColorStyle (this.r, this.g, this.b); };
} }
});
function Dot () { })
this.x = Math.random () * canvas.width; });
this.y = Math.random () * canvas.height; \ No newline at end of file
this.vx = -.5 + Math.random ();
this.vy = -.5 + Math.random ();
this.radius = Math.random () * 2;
this.color = new Color ();
//console.log(this);
}
Dot.prototype = {
draw: function () {
ctx.beginPath ();
ctx.fillStyle = this.color.style;
ctx.arc (this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fill ();
}
};
function createDots () {
for (i = 0; i < dots.nb; i++) {
dots.array.push (new Dot ());
}
}
function moveDots () {
for (i = 0; i < dots.nb; i++) {
var dot = dots.array[i];
if (dot.y < 0 || dot.y > canvas.height) {
dot.vx = dot.vx;
dot.vy = -dot.vy;
}
else if (dot.x < 0 || dot.x > canvas.width) {
dot.vx = -dot.vx;
dot.vy = dot.vy;
}
dot.x += dot.vx;
dot.y += dot.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];
if ((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) {
if ((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > -dots.d_radius && (i_dot.y - mousePosition.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++) {
var dot = dots.array[i];
dot.draw ();
}
}
function animateDots () {
ctx.clearRect (0, 0, canvas.width, canvas.height);
moveDots ();
connectDots ();
drawDots ();
requestAnimationFrame (animateDots);
}
$ ('canvas').on ('mousemove', function (e) {
mousePosition.x = e.pageX;
mousePosition.y = e.pageY;
});
$ ('canvas').on ('mouseleave', function (e) {
mousePosition.x = canvas.width / 2;
mousePosition.y = canvas.height / 2;
});
createDots ();
requestAnimationFrame (animateDots);
});
}) ();
\ No newline at end of file
public/resource/js/login_old.js 0 → 100644
View file @ 6ec4a57c
!(function () {
$ (window).on ('load', function () {
console.log (1);
$ ('.loginbox').addClass ('active');
});
$ (function () {
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 mousePosition = {
x: 30 * canvas.width / 200,
y: 30 * canvas.height / 200
};
var dots = {
nb: ((document.body.clientWidth || 1000) / 3) | 0,
distance: 120,
d_radius: 150,
array: []
};
function colorValue (min) {
return Math.floor (Math.random () * 255 + min);
}
function createColorStyle (r, g, b) {
return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
}
function mixComponents (comp1, weight1, comp2, weight2) {
return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
}
function averageColorStyles (dot1, dot2) {
var color1 = dot1.color,
color2 = dot2.color;
var r = mixComponents (color1.r, dot1.radius, color2.r, dot2.radius),
g = mixComponents (color1.g, dot1.radius, color2.g, dot2.radius),
b = mixComponents (color1.b, dot1.radius, color2.b, dot2.radius);
return createColorStyle (Math.floor (r), Math.floor (g), Math.floor (b));
}
function Color (min) {
min = min || 0;
this.r = colorValue (min);
this.g = colorValue (min);
this.b = colorValue (min);
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 = Math.random () * 2;
this.color = new Color ();
//console.log(this);
}
Dot.prototype = {
draw: function () {
ctx.beginPath ();
ctx.fillStyle = this.color.style;
ctx.arc (this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fill ();
}
};
function createDots () {
for (i = 0; i < dots.nb; i++) {
dots.array.push (new Dot ());
}
}
function moveDots () {
for (i = 0; i < dots.nb; i++) {
var dot = dots.array[i];
if (dot.y < 0 || dot.y > canvas.height) {
dot.vx = dot.vx;
dot.vy = -dot.vy;
}
else if (dot.x < 0 || dot.x > canvas.width) {
dot.vx = -dot.vx;
dot.vy = dot.vy;
}
dot.x += dot.vx;
dot.y += dot.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];
if ((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) {
if ((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > -dots.d_radius && (i_dot.y - mousePosition.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++) {
var dot = dots.array[i];
dot.draw ();
}
}
function animateDots () {
ctx.clearRect (0, 0, canvas.width, canvas.height);
moveDots ();
connectDots ();
drawDots ();
requestAnimationFrame (animateDots);
}
$ ('canvas').on ('mousemove', function (e) {
mousePosition.x = e.pageX;
mousePosition.y = e.pageY;
});
$ ('canvas').on ('mouseleave', function (e) {
mousePosition.x = canvas.width / 2;
mousePosition.y = canvas.height / 2;
});
createDots ();
requestAnimationFrame (animateDots);
});
}) ();
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment