SkyID
/
zheng
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

增加登录页

This commit is contained in:
shuzheng 2017-01-17 22:51:04 +08:00
parent 5b2aab6559
commit 027febe69f
3 changed files with 74 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
zheng-admin/src/css/login.css Normal file
View File

@ -0,0 +1,19 @@
body, html {height: 100%; font-family: 'Microsoft yahei'; font-size: 13px; font-weight: 400;}
img {vertical-align: middle;}
a, a:hover, a:active, a:focus {text-decoration: none; -webkit-user-drag: none;}
a i{font-size: 13px;}
body{background:#ECECEC;}
body:before{height:50%;width:100%;position:absolute;top:0;left:0;background:#29a176;content:"";z-index:0}
#login-window{position:relative;top:50%;left:50%;width:500px;height:200px;margin-left:-250px;margin-top:-100px;padding:35px 55px 35px 25px;z-index:10;background:#fff;box-shadow:0 1px 11px rgba(0,0,0,.27);border-radius:2px;}
.m-b-20{margin-bottom:20px !important;}
#login-bt{position:absolute;width:50px;height:50px;border-radius:50%;line-height:36px!important;top:50%;margin-top:-25px;right:-25px;background:#FF4F0F;}
#login-bt i{font-size:23px;color:#fff;}
.input-group-addon{border:none;background:none;font-size:16px;}
.form-control{position:relative;font-size:13px;border:1px solid #e0e0e0;border-left:0;border-right:0;border-top:0;padding:0;background:#fff;height:35px;line-height:35px;transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;box-shadow:none;}
.form-control:active, .form-control:focus{box-shadow:none;}
.fg-line{position:relative;vertical-align:top;display:inline-block;width:100%;}
.fg-line:after{position:absolute;z-index:3;bottom:0;left:0;height:2px;width:0;content:"";-webkit-transition:all;-o-transition:all;transition:all;-webkit-transition-duration:.3s;transition-duration:.3s;background:#29a176;}
.fg-line.fg-toggled:after{width:100%}

10
zheng-admin/src/js/login.js Normal file
View File

@ -0,0 +1,10 @@
$(function() {
// Waves初始化
Waves.displayEffect();
// 输入框获取焦点后出现下划线
$('.form-control').focus(function() {
$(this).parent().addClass('fg-toggled');
}).blur(function() {
$(this).parent().removeClass('fg-toggled');
});
});

45
zheng-admin/src/login.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录页</title>
<link href="plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
<link href="plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
<link href="css/login.css" rel="stylesheet"/>
</head>
<body>
<div id="login-window">
<div class="input-group m-b-20">
<span class="input-group-addon"><i class="zmdi zmdi-account"></i></span>
<div class="fg-line">
<input type="text" class="form-control" placeholder="帐号">
</div>
</div>
<div class="input-group m-b-20">
<span class="input-group-addon"><i class="zmdi zmdi-male"></i></span>
<div class="fg-line">
<input type="password" class="form-control" placeholder="密码">
</div>
</div>
<div class="clearfix">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
<i class="input-helper"></i>
自动登录
</label>
</div>
<a id="login-bt" href="javascript:;" class="waves-effect waves-button waves-float"><i class="zmdi zmdi-arrow-forward"></i></a>
</div>
<script src="plugins/jquery.1.12.4.min.js"></script>
<script src="plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="plugins/waves-0.7.5/waves.min.js"></script>
<script src="js/login.js"></script>
</body>
</html>