react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
191 lines (180 loc) • 3.71 kB
text/less
.p_btn {
background:linear-gradient(270deg,rgba(255,156,80,1) 0%,rgba(255,86,21,1) 100%);
border-radius:40px;
color: #fff;
font-size:32px;
font-weight:400;
color:rgba(255,255,255,1);
line-height:45px;
outline:none;
display: block;
border: none;
cursor: pointer;
}
.p_input_wrapper {
margin-bottom: 26px;
padding-bottom: 8px;
border-bottom: 2px solid rgba(248,248,248,1);
&::after{
clear:both;
display: table;
overflow: hidden;
content: '';
}
> .icon {
width: 48px;
height: 48px;
margin-right: 20px;
float: left;
img {
width: 100%;
height: 100%;
vertical-align: middle;
}
}
}
.p_input{
float: left;
font-size:28px;
font-weight:400;
line-height:48px;
height: 48px;
width: 460px;
input {
width: 100%;
}
}
.p_btn_default {
background: none;
color: #000;
}
.super_height {
height: 940px ;
}
.p_auth {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
z-index: 100;
background: rgba(0,0,0,.6);
.modal {
transition: .1s height linear;
width: 660px;
height: 800px;
position: absolute;
bottom: 240px;
left: 50%;
transform: translate(-50%);
background: #fff;
border-radius:20px;
.header {
width: 400px;
height: 180px;
margin:60px auto 50px;
img {
width: 100%;
height: 100%;
}
}
.content {
padding: 0 50px;
}
> .title {
margin:0 auto 50px;
text-align: center;
font-size:32px;
font-weight:400;
color:rgba(51,51,51,1);
line-height:36px;
}
.login_btn {
.p_btn();
width:460px;
height:80px;
margin: 0 auto 30px;
}
.register_btn {
.p_btn();
.p_btn_default();
margin: 0 auto;
}
}
.close {
width: 40px;
height: 40px;
position: absolute;
bottom: -60px;
left: 50%;
transform: translate(-50%);
img {
width: 100%;
height: 100%;
cursor: pointer;
vertical-align: middle;
}
}
.desc, .desc a {
text-align: center;
height:20px;
font-size:20px;
font-weight:400;
color:rgba(153,153,153,1);
line-height:20px;
padding-top: 50px;
}
}
.code {
.p_input {
width: 300px;
}
.code_btn {
width:180px;
height:48px;
line-height: 48px;
background:rgba(255,192,5,1);
border-radius:4px;
color: #fff;
float: left;
text-align: center;
font-size:28px;
font-weight:400;
color:rgba(255,255,255,1);
&.disable {
color: #fff;
background:rgba(204,204,204,1);
}
}
}
.padding_top_20 {
padding-top: 20px;
}
.code_modal {
position: fixed;
z-index: 400;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 600px;
height: 320px;
background: #fff;
border-radius: 20px;
box-shadow: 0 0 100px 1px #000;
}
.image_code_wrapper {
.p_input {
width: 320px;
}
.icon {
height: auto ;
}
.image_code {
float: right;
width: 160px;
> img {
width: 100%;
height: auto;
}
}
}