login-1 界面更改

This commit is contained in:
suwings 2018-04-08 10:22:42 +08:00
parent c561c7ba2f
commit 8086cd2cdb
4 changed files with 234 additions and 88 deletions

View File

@ -39,14 +39,14 @@
<form class="form-horizontal" role="form">
<div class="form-group has-feedback">
<div class="col-sm-12">
<input type="text" class="form-control border-1" id="login-userid" placeholder="账号">
<input type="text" class="form-control border-1 minput" id="login-userid" placeholder="普通用户 | 管理用户">
<span class="glyphicon glyphicon-user form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-sm-12">
<input type="password" class="form-control border-1" id="login-passwd" placeholder="密码" onkeypress="enKeyPress()">
<input type="password" class="form-control border-1 minput" id="login-passwd" placeholder="密码" onkeypress="enKeyPress()">
<span class="glyphicon glyphicon-th form-control-feedback" aria-hidden="true"></span>
</div>
</div>
@ -63,11 +63,11 @@
</div>
</div>
</div>
</form>
<!-- 表单结束 -->
</div>
<div id="copyright" class="row text-justify">
<!-- 你可以删除这里的版权,添加你自己的版权 -->
<span>©2013-2018 Suwings. All rights reserved.</span>
</div>
</div>

View File

@ -1,41 +1,68 @@
html,body{
margin:0;
height: 100%;
font-family: "微软雅黑","幼圆","microsoft yahei";
html,
body {
margin: 0;
height: 100%;
font-family: "微软雅黑", "幼圆", "microsoft yahei";
overflow: hidden;
}
li,a,h1,h2,h3,h4,h5,p,span,input{
li,
a,
h1,
h2,
h3,
h4,
h5,
p,
span,
input {
-webkit-text-stroke-width: 0.2px;
}
a:link {
text-decoration: none;
text-decoration: none;
}
a:visited {
text-decoration: none;
text-decoration: none;
}
a:hover {
text-decoration: none;
text-decoration: none;
}
a:active {
text-decoration: none;
text-decoration: none;
}
/*信息提示框CSS*/
.tools-info{
.tools-info {
position: fixed;
bottom: 35px;
margin:auto;
left:0;
right:0;
margin: auto;
left: 0;
right: 0;
min-width: 200px;
max-width: 300px;
text-align: center;
display: none
}
#logo{
.minput {
border-radius: 1px;
border-width: 1px;
border-color: #666;
border-color: rgba(0, 0, 0, .6);
}
#logo {
height: 100%;
width: 100%;
max-width: 340px;
}
#view-bg{
#view-bg {
z-index: -5;
width: 100%;
height: 100%;
@ -43,153 +70,272 @@ a:active {
min-height: 475px;
}
#login-view{
padding-top: 40px;
/* 登录动画 */
@keyframes ActionloginIn {
0% {
margin-right: -420px;
}
100% {
margin-left: 0px
}
}
#login-view {
padding-top: 50px;
width: 100%;
height: 100%;
z-index: 999;
background-color: rgb(220,220,220);
background-color: rgb(220, 220, 220);
min-height: 475px;
animation: ActionloginIn 2s;
animation-fill-mode: forwards;
}
#login-sub{
#login-sub {
text-align: center;
margin: auto;
width: 95%;
max-width: 340px;
}
#login-form{
#login-form {
margin-top: 70px;
}
#login-button{
#login-button {
font-weight: 800;
width: 92%;
margin-top: 30px;
letter-spacing: 5px;
font-size: 14px;
}
#copyright{
#copyright {
margin-top: 10px;
}
#copyright span{
#copyright span {
display: block;
text-align: center;
font-size: 12px;
color: rgb(170,170,170);
color: rgb(170, 170, 170);
}
.doing-color{
.doing-color {
background-color: #EC971F;
}
.help-text{
.help-text {
font-size: 10px;
color: rgb(170,170,170);
color: rgb(170, 170, 170);
float: right;
margin: 0 5px;
}
@media (min-width: 760px) {
#login-view{
#login-view {
width: 420px;
height: 100%;
float: right;
}
#login-sub{
#login-sub {
width: 360px;
}
body{
background-image:none!important;
background-color: rgb(220,220,220);
body {
background-image: none !important;
background-color: rgb(220, 220, 220);
}
}
@media (max-width: 400px) {
#login-sub{
#login-sub {
width: 96%;
margin: auto;
background-color: rgb(220,220,220);
background-color: rgb(220, 220, 220);
}
}
/*-----—--原子CSS开始-------*/
.border-1{
border: 1px solid rgb(160,160,160);
.border-1 {
border: 1px solid rgb(160, 160, 160);
}
.ft-color-white {
color: #DDDDDD;
}
.ft-color-white{color:#DDDDDD;}
.ft-color-black{color:#262626;}
.ft-color-bule{color: #5BC0DE;}
.ft-color-yellow{color:#D58512;};
.ft-size-10{font-size: 10px;}
.ft-size-12{font-size: 12px;}
.ft-size-16{font-size: 16px;}
.ft-size-24{font-size: 24px;}
.ft-size-36{font-size: 36px;}
.ft-text-lookw{
.ft-color-black {
color: #262626;
}
.ft-color-bule {
color: #5BC0DE;
}
.ft-color-yellow {
color: #D58512;
}
;
.ft-size-10 {
font-size: 10px;
}
.ft-size-12 {
font-size: 12px;
}
.ft-size-16 {
font-size: 16px;
}
.ft-size-24 {
font-size: 24px;
}
.ft-size-36 {
font-size: 36px;
}
.ft-text-lookw {
letter-spacing: 5px;
-webkit-text-stroke-width: 2px;
}
.ft-text-index{
.ft-text-index {
text-align: left;
letter-spacing: 3px;
}
.margin-auto{margin: auto;}
.margin-5{margin: 5px;}
.margin-10{margin: 10px;}
.margin-left{margin-left: 10px;}
.margin-l-15{margin-left: 15px;}
.margin-l-30{margin-left: 30px;}
.margin-right{margin-right: 10px;}
.margin-r-15{margin-right: 15px;}
.margin-r-30{margin-right: 30px;}
.margin-top{margin-top: 10px;}
.margin-bottom{margin-bottom: 10px;}
.padding-10{padding: 10px;}
.margin-top-0{margin-top: 0;}
.show-ui{
-webkit-box-shadow: #666 0px 1px 6px;
-moz-box-shadow: #666 0px 1px 6px;
box-shadow: #666 0px 1px 6px;
.margin-auto {
margin: auto;
}
.margin-5 {
margin: 5px;
}
.margin-10 {
margin: 10px;
}
.margin-left {
margin-left: 10px;
}
.margin-l-15 {
margin-left: 15px;
}
.margin-l-30 {
margin-left: 30px;
}
.margin-right {
margin-right: 10px;
}
.margin-r-15 {
margin-right: 15px;
}
.margin-r-30 {
margin-right: 30px;
}
.margin-top {
margin-top: 10px;
}
.margin-bottom {
margin-bottom: 10px;
}
.padding-10 {
padding: 10px;
}
.margin-top-0 {
margin-top: 0;
}
.show-ui {
-webkit-box-shadow: #666 0px 1px 6px;
-moz-box-shadow: #666 0px 1px 6px;
box-shadow: #666 0px 1px 6px;
}
.back-black {
background-color: #222222;
}
.back-white {
background-color: rgb(240, 240, 240);
}
.back-bule {
background-color: #3278B3;
}
.back-yellow {
background-color: #D58512;
}
.back-green {
background-color: #5CB85C;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.back-black{background-color: #222222;}
.back-white{background-color: rgb(240,240,240);}
.back-bule{background-color: #3278B3;}
.back-yellow{background-color: #D58512;}
.back-green{background-color: #5CB85C;}
.float-left{float: left;}
.float-right{float: right;}
/*-------原子CSS结束-------*/
/*-------全局CSS开始-------*/
html,body{
margin:0;
height: 100%;
font-family: "微软雅黑","幼圆","microsoft yahei";
html,
body {
margin: 0;
height: 100%;
font-family: "微软雅黑", "幼圆", "microsoft yahei";
}
li,a,h1,h2,h3,h4,h5,p,span,input{
li,
a,
h1,
h2,
h3,
h4,
h5,
p,
span,
input {
-webkit-text-stroke-width: 0.2px;
text-stroke-width: 0.2px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
}
a:link {
text-decoration: none;
text-decoration: none;
}
a:visited {
text-decoration: none;
text-decoration: none;
}
a:hover {
text-decoration: none;
text-decoration: none;
}
a:active {
text-decoration: none;
text-decoration: none;
}
/*-------全局CSS结束-------*/

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 64 KiB