403 lines
6.7 KiB
CSS
403 lines
6.7 KiB
CSS
|
||
/* 超小屏幕（手机，小于 768px） */
|
||
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
|
||
|
||
|
||
.back_gor{
|
||
background: url(/dzzyb/static/grzx/img/app_back.png)no-repeat;
|
||
background-size: 100% 142px;
|
||
background-position: bottom;
|
||
}
|
||
.left_pc {
|
||
display: none;
|
||
}
|
||
|
||
/* @media (max-width: 768px) {
|
||
|
||
} */
|
||
/*** pc ***/
|
||
@media (min-width: 1170px) {
|
||
.div_input input{
|
||
position: static!important;
|
||
width: 100%!important;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
padding-left: 20px!important;
|
||
box-sizing: border-box;
|
||
outline: none;
|
||
border-radius: 20px!important;
|
||
border: 1px solid rgba(0,0,0,.3)!important;
|
||
}
|
||
.ZC_box{
|
||
border-top: 3px solid #0069D9;
|
||
}
|
||
.ZC_box .div_input a{
|
||
display: block;
|
||
float: none;
|
||
}
|
||
.ZC_box .div_input input{
|
||
position: static!important;
|
||
width: 95%!important;
|
||
float: none;
|
||
height: 50px;
|
||
display: block;
|
||
line-height: 50px;
|
||
padding-left: 20px!important;
|
||
box-sizing: border-box;
|
||
outline: none;
|
||
margin: 0 auto;
|
||
border-radius: 20px!important;
|
||
border: 1px solid rgba(0,0,0,.3)!important;
|
||
}
|
||
.hqyzms{
|
||
margin-top: 20px!important;
|
||
}
|
||
.three{
|
||
overflow-y: scroll;
|
||
padding-bottom: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.three .div_input{
|
||
margin: 0px!important;
|
||
}
|
||
.login_top a{
|
||
cursor: pointer;
|
||
}
|
||
.div_input{
|
||
border-bottom: 0px!important;
|
||
height: auto!important;
|
||
}
|
||
.login_box{
|
||
width: 60%;
|
||
overflow: hidden;
|
||
}
|
||
.app_bottom{
|
||
color: #666666!important;
|
||
cursor: pointer;
|
||
}
|
||
.back_gor{
|
||
background: url(/dzzyb/static/grzx/img/pc_back.png);
|
||
background-size: 100% 100%;
|
||
|
||
}
|
||
.left_pc{
|
||
display: block;
|
||
}
|
||
.container{
|
||
height: 650px!important;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%,-50%);
|
||
}
|
||
.login_div{
|
||
background: #FFF;
|
||
overflow: hidden;
|
||
}
|
||
.left_pc{
|
||
background: url(/dzzyb/static/grzx/img/pc_leftBack.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
.login_box button{
|
||
|
||
background:#179ad9 !important;
|
||
|
||
}
|
||
.login_box >div{
|
||
text-align: left;
|
||
float: left;
|
||
margin: 30px 0px 20px 0px;
|
||
}
|
||
.row{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.div_input>a{
|
||
position: static!important;
|
||
display: block;
|
||
font-size: 18px;
|
||
margin-bottom: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
.div_input{
|
||
|
||
text-align: left;
|
||
margin: 5px 0px 20px 0px!important;
|
||
}
|
||
|
||
.d-clo-d-none{
|
||
display: none;
|
||
}
|
||
.d-clo-none{
|
||
display: block!important;
|
||
}
|
||
}
|
||
.d-clo-none{
|
||
display: none;
|
||
}
|
||
|
||
/*滚动条样式*/
|
||
.three::-webkit-scrollbar {
|
||
width: 5px!important;
|
||
}
|
||
.three{
|
||
/*border-radius: 15px 0px 0px 15px!important;*/
|
||
}
|
||
.three::-webkit-scrollbar-track {
|
||
background-color: rgba(0,0,0,.1)!important;
|
||
-webkit-border-radius: 2em!important;
|
||
-moz-border-radius: 2em!important;
|
||
border-radius: 2em!important;
|
||
}
|
||
|
||
.three::-webkit-scrollbar-thumb {
|
||
background-color: rgba(0,0,0,.2)!important;
|
||
-webkit-border-radius: 2em!important;
|
||
-moz-border-radius: 2em!important;
|
||
border-radius: 2em!important;
|
||
}
|
||
/*** app优先 登录***/
|
||
button{
|
||
outline: none!important;
|
||
}
|
||
html,body{
|
||
|
||
padding: 0px;
|
||
margin: 0px;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.container{
|
||
overflow-x: hidden;
|
||
position: absolute;
|
||
height: 100%;
|
||
}
|
||
.row{
|
||
/*width: 100%;*/
|
||
height: 100%;
|
||
}
|
||
.clearBox::after{
|
||
content: "";
|
||
display: block;
|
||
clear: both;
|
||
}
|
||
.back_gor{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
.login_div{
|
||
position: relative;
|
||
}
|
||
.login_box{
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
text-align: center;
|
||
transform: translate(-50%,-50%);
|
||
-webkit-transition: all .5s ease-in-out;
|
||
-o-transition: all .5s ease-in-out;
|
||
transition: all .5s ease-in-out;
|
||
}
|
||
.login_box >div{
|
||
text-align: left;
|
||
float: left;
|
||
margin: 10px 0px 20px 0px;
|
||
}
|
||
.login_box input{
|
||
width: 80%;
|
||
float: left;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
padding-left: 20px;
|
||
box-sizing: border-box;
|
||
outline: none;
|
||
border-radius: 0px;
|
||
|
||
border: 0px;
|
||
}
|
||
.ZC_box input{
|
||
width: 100%;
|
||
float: left;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
padding-left: 20px;
|
||
box-sizing: border-box;
|
||
outline: none;
|
||
border-radius: 0px;
|
||
|
||
border: 0px;
|
||
}
|
||
.login_box>a{
|
||
|
||
font-size: 18px;
|
||
margin-bottom: 15px;
|
||
margin-top: 20px;
|
||
}
|
||
.login_box> p{
|
||
text-align: center;
|
||
}
|
||
.login_box> p >a{
|
||
font-size: 25px;
|
||
}
|
||
|
||
.login_box button{
|
||
width: 100%;
|
||
height: 40px;
|
||
|
||
background: linear-gradient(90deg, #33b1fe, #0679dc);
|
||
color: #FFF;
|
||
font-size: 16px;
|
||
border:1px solid #179ad9;
|
||
border-radius:50px;
|
||
margin: 0 auto;
|
||
margin-top: 50px;
|
||
outline: none;
|
||
cursor: pointer;
|
||
}
|
||
.div_input{
|
||
position: relative;
|
||
color: #666666;
|
||
/*border-bottom: 1px solid rgba(0,0,0,.3);*/
|
||
padding-left: 10px;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
margin-bottom: 5px;
|
||
height: 50px;
|
||
}
|
||
.div_input input{
|
||
position: absolute;
|
||
width: 95%;
|
||
padding-left: 70px;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid rgba(0,0,0,.2);
|
||
color: #666666;
|
||
-webkit-transition: border .5s ease-in-out;
|
||
-o-transition: border .5s ease-in-out;
|
||
transition: border .5s ease-in-out;
|
||
}
|
||
|
||
.div_input a{
|
||
padding-left: 10px;
|
||
box-sizing: border-box;
|
||
z-index: 6666;
|
||
position: absolute;
|
||
width: 20%;
|
||
float: left;
|
||
font-size: 16px;
|
||
color: #666666;
|
||
line-height: 50px;
|
||
|
||
}
|
||
.login_top{
|
||
width: 100%;
|
||
text-align: right;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
color: #999999;
|
||
}
|
||
.login_top>a{
|
||
color: #0000CC!important;
|
||
}
|
||
input:focus{
|
||
border-bottom: 1px solid #0e81de;
|
||
}
|
||
.app_image{
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
background: #FFFFFF;
|
||
box-shadow:0px 0px 11px rgba(0,0,0,.13);
|
||
margin: 0 auto;
|
||
margin-bottom: 20px;
|
||
}
|
||
.app_image img{
|
||
width: 70%;
|
||
margin: 0 auto;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
/****注册***/
|
||
.ZC_box{
|
||
position: absolute;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 0px 6px rgba(0,0,0,.15);
|
||
border-radius: 15px;
|
||
height: 85%;
|
||
-webkit-transition: all .5s ease-in-out;
|
||
-o-transition: all .5s ease-in-out;
|
||
transition: all .5s ease-in-out;
|
||
}
|
||
|
||
|
||
.ZC_box>a{
|
||
|
||
font-size: 18px;
|
||
margin-bottom: 15px;
|
||
margin-top: 20px;
|
||
}
|
||
.ZC_box> p{
|
||
text-align: center;
|
||
}
|
||
.ZC_box> p >a{
|
||
font-size: 25px;
|
||
}
|
||
.ZC_box{
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
text-align: center;
|
||
transform: translate(-50%,-50%);
|
||
}
|
||
.ZC_box >div{
|
||
text-align: left;
|
||
float: left;
|
||
margin: 10px 0px 20px 0px;
|
||
}
|
||
.app_bottom{
|
||
position: absolute;
|
||
bottom: 10px;
|
||
/* width: 100%; */
|
||
padding: 0px 20px;
|
||
box-sizing: border-box;
|
||
left: 0px;
|
||
right: 0px;
|
||
color: #FFFFFF;
|
||
}
|
||
.jast_div{
|
||
float: left;
|
||
}
|
||
.next_div{
|
||
float: right;
|
||
}
|
||
.hqyzms{
|
||
width: 60%;
|
||
height: 40px;
|
||
|
||
background: linear-gradient(90deg, #33b1fe, #0679dc);
|
||
color: #FFF;
|
||
font-size: 16px;
|
||
border:1px solid #179ad9;
|
||
border-radius:50px;
|
||
margin: 0 auto;
|
||
margin-top: 10px;
|
||
outline: none;
|
||
cursor: pointer;
|
||
}
|
||
.two{
|
||
left: 100%;
|
||
transform: translate(0px,-50%);
|
||
}
|
||
.three{
|
||
left: 200%;
|
||
transform: translate(0px,-50%);
|
||
}
|
||
.four{
|
||
left: 300%;
|
||
transform: translate(0px,-50%);
|
||
} |