react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
136 lines (132 loc) • 2.75 kB
text/less
.layer-wrapper-uc{
box-sizing: content-box;
z-index: 999;
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .4) ;;
.layermain {
font-family: Helvetica, arial, sans-serif;
pointer-events: none;
width: 100%;
height: 100%;
position: relative;
.layersection {
position: relative;
//vertical-align: middle;
text-align: center;
pointer-events: auto;
padding-top: 140px;
left: 50%;
transform: translateX(-50%);
.modal-body {
max-width: 660px;
background: #fff;
border-radius: 20px;
padding: 40px 30px;
margin: 0 auto;
transition: all .3s;
.header {
width: 100%;
position: relative;
}
.content {
width: 100%;
position: relative;
}
.footer {
width: 100%;
position: relative;
}
}
.closeBtn {
width: 96px;
height: 96px;
margin: 0 auto;
margin-top: 30px;
color: #fff;
text-align: center;
cursor: pointer;
img {
height: 48px;
width: 48px;
}
}
}
}
}
.layer-wrapper{
box-sizing: content-box;
position: relative;
z-index: 999;
.layershade{
background-color: rgba(0,0,0,.4) ;
pointer-events: auto;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.layermain{
display: table;
font-family: Helvetica,arial,sans-serif;
pointer-events: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
.layersection{
display: table-cell;
vertical-align: middle;
text-align: center;
pointer-events: auto;
.modal-body{
max-width: 660px;
background: #fff;
border-radius: 20px;
padding: 40px 30px;
margin: 0 auto;
.header{
width: 100%;
position: relative;
}
.content {
width: 100%;
}
.footer{
width: 100%;
}
}
.closeBtn {
width: 96px;
height: 96px;
margin: 0 auto;
margin-top: 30px;
color: #fff;
text-align: center;
cursor: pointer;
img {
height: 48px;
width: 48px;
}
}
}
.closeBtn {
width: 96px;
height: 96px;
margin: 0 auto;
margin-top: 30px;
color: #fff;
text-align: center;
cursor: pointer;
img {
height: 48px;
width: 48px;
}
}
}
}