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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>同联地产管理后台</title>
<link rel="stylesheet" href="/resource/css/login.css" type="text/css"/>
</head>
<body>
<div class="main-container">
<div class="main-content">
<div class="login-container">
<div class="center">
<h1>
<i class="ace-icon fa fa-leaf green"></i>
<span class="red">同联地产</span>
<span class="white" id="id-text2">管理后台</span>
</h1>
</div>
<div class="loginbox">
<form action="/admin.php/index/loginVerify" method="post">
<div class="input-icon">
<input class="input-block" type="text" id="username" name="username" autofocus
placeholder="请输入用户名" maxlength="16" required>
</div>
<div class="input-icon">
<input class="input-block" type="password" id="passwd" name="passwd" placeholder="请输入登录密码"
maxlength="16" required>
<span style="color: #fff;display: block;text-align: center;font-size: 12px">{$msg}</span>
</div>
<div class="center" style="margin-top: 15px">
<button type="submit" style="background: #87b1ff;">立即登陆</button>
</div>
</form>
</div>
</div>
</div>
</div>
<canvas></canvas>
<script src="/resource/lib/js/jquery-2.0.3.min.js"></script>
<script src="/resource/js/login.js"></script>
</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>同联地产管理后台</title>
<link rel="stylesheet" href="/resource/css/login.css" type="text/css" />
</head>
<body>
<header>
<div>
<img src="/resource/image/logo.png" />
</div>
</header>
<div class="main-area">
<img src="/resource/image/bg_pic.jpg" />
<div class="edit-area">
<p>后台管理云平台帐号登录</p>
<p><span></span><span></span></p>
<div class="input-area">
<div class="img-cell"></div>
<input type="text" placeholder="请输入帐号" id="username" />
</div>
<div class="input-area">
<div class="img-cell"></div>
<input type="password" placeholder="请输入密码" id="passwd" />
</div>
<div class="btn-area">
<a href="javascript:;" id="btn_login">登录</a>
<a href="javascript:;" id="btn_login_temp">正在登录...</a>
</div>
</div>
</div>
<footer>
<p>Copyright 2006-2017 Tonglian Property Co., Ltd. 上海同联房地产经纪事务所 All rights</p>
</footer>
<script src="/resource/lib/js/jquery-2.0.3.min.js"></script>
<script src="/resource/js/login.js"></script>
</body>
</html>
\ No newline at end of file
public/resource/css/login.css
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;
@charset "utf-8";
body{
margin: 0;
}
p{
margin: 0;
}
header>div{
margin: 0 auto;
width: 1200px;
height: 115px;
overflow: hidden;
}
header>div>img{
float: left;
width: 200px;
padding-top: 34px;
}
.main-area{
overflow: hidden;
width: 100%;
height: 850px;
position: relative;
}
.main-area>img{
float: left;
width: 100%;
height: 850px;
object-fit: cover;
}
canvas {
position: absolute;
.edit-area{
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;
color: #FFF !important;
font-weight: 500;
}
.input-block::-webkit-input-placeholder {
color: #00CCCC !important;
footer>p{
line-height: 115px;
text-align: center;
font-size: 14px;
color: #999;
}
.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 () {
$ (window).on ('load', function () {
console.log (1);
$ ('.loginbox').addClass ('active');
$(function(){
var _loginBtn = $('#btn_login'),
_loginTempBtn = $('#btn_login_temp');
$('.input-area>input').focus(function(){
$(this).parent().addClass('input-area-active');
}).blur(function(){
$(this).parent().removeClass('input-area-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
_loginBtn.click(function(e){
e.preventDefault();
e.stopPropagation();
var _userName = $.trim($('#username').val()),
_passWord = $.trim($('#passwd').val());
if(_userName == ''){
alert('请输入用户名');
return false;
};
if(_passWord == ''){
alert('请输入登录密码');
return false;
};
$.ajax({
type: 'POST',
url: '/admin.php/index/loginVerify',
data: {
'username': _userName,
'passwd': _passWord
},
timeout: 30000,
dataType: 'json',
beforeSend: function() {
_loginBtn.hide();
_loginTempBtn.show();
},
success: function(data) {
if(typeof data === 'object') {
if (data.code == 200) {
console.log('登录成功');
location.href = '/admin.php/index/banner';
}else {
alert(data['msg']);
};
}else{
alert('数据错误');
};
},
error: function() {
alert('error');
},
complete: function(xhr, textStatus){
_loginTempBtn.hide();
_loginBtn.show();
if(textStatus === 'timeout'){
alert('请求超时');
};
}
});
})
});
\ 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