diff --git a/src/mobile/need/layer.css b/src/mobile/need/layer.css index c8b32e07..08a9d2d9 100644 --- a/src/mobile/need/layer.css +++ b/src/mobile/need/layer.css @@ -1,87 +1,56 @@ - -/* - layer mobile -*/ - -.layui-m-layer{position:relative; z-index: 19891014;} -.layui-m-layer *{-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;} -.layui-m-layershade, -.layui-m-layermain{position:fixed; left:0; top:0; width:100%; height:100%;} -.layui-m-layershade{background-color:rgba(0,0,0, .7); pointer-events:auto;} -.layui-m-layermain{display:table; font-family: Helvetica, arial, sans-serif; pointer-events: none;} -.layui-m-layermain .layui-m-layersection{display:table-cell; vertical-align:middle; text-align:center;} -.layui-m-layerchild{position:relative; display:inline-block; text-align:left; background-color:#fff; font-size:14px; border-radius: 5px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); pointer-events:auto; -webkit-overflow-scrolling: touch;} -.layui-m-layerchild{-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .2s; animation-duration: .2s;} - - -/* 弹出动画 */ -@-webkit-keyframes layui-m-anim-scale { /* 默认 */ - 0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)} - 100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)} -} -@keyframes layui-m-anim-scale { /* 默认 */ - 0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)} - 100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)} -} -.layui-m-anim-scale{animation-name: layui-m-anim-scale; -webkit-animation-name: layui-m-anim-scale;} - -@-webkit-keyframes layui-m-anim-up{ - 0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)} - 100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)} -} -@keyframes layui-m-anim-up{ - 0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)} - 100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)} +/* layer弹层移动版样式 */ + +.layermbox{position:relative; z-index:19891014;} +.laymshade, +.layermmain{position:fixed; left:0; top:0; width:100%; height:100%;} +.laymshade{background-color:rgba(0,0,0, .5); pointer-events:auto;} +.layermmain{display:table; font-family: Helvetica, arial, sans-serif; pointer-events: none;} +.layermmain .section{display:table-cell; vertical-align:middle; text-align:center;} +.layermchild{position:relative; display:inline-block; text-align:left; background-color:#fff; font-size:14px; border-radius:3px; box-shadow:0 0 8px rgba(0, 0, 0, 0.1); pointer-events:auto; -webkit-overflow-scrolling: touch;} +.layermchild{-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .18s; animation-duration: .18s;} +.layermborder{border:1px solid #999;} +@-webkit-keyframes bounceIn { /* 默认 */ + 0% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5) + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1) + } } -.layui-m-anim-up{-webkit-animation-name: layui-m-anim-up;animation-name: layui-m-anim-up} - - -.layui-m-layer0 .layui-m-layerchild{width: 90%; max-width: 640px;} -.layui-m-layer1 .layui-m-layerchild{border:none; border-radius:0;} -.layui-m-layer2 .layui-m-layerchild{width:auto; max-width:260px; min-width:40px; border:none; background: none; box-shadow: none; color:#fff;} -.layui-m-layerchild h3{padding: 0 10px; height: 60px; line-height: 60px; font-size:16px; font-weight: 400; border-radius: 5px 5px 0 0; text-align: center;} -.layui-m-layerchild h3, -.layui-m-layerbtn span{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} -.layui-m-layercont{padding: 50px 30px; line-height: 22px; text-align:center;} -.layui-m-layer1 .layui-m-layercont{padding:0; text-align:left;} -.layui-m-layer2 .layui-m-layercont{text-align:center; padding: 0; line-height: 0;} -.layui-m-layer2 .layui-m-layercont i{width:25px; height:25px; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%;} -.layui-m-layer2 .layui-m-layercont p{margin-top: 20px;} - -/* loading */ -@-webkit-keyframes layui-m-anim-loading{ +.layermanim{animation-name: bounceIn; -webkit-animation-name: bounceIn;} + +.layermbox0 .layermchild{max-width:90%; min-width:150px;} +.layermbox1 .layermchild{border:none; border-radius:0;} +.layermbox2 .layermchild{width:auto; max-width:260px; min-width:40px; border:none; background: none; box-shadow: none; color:#fff;} +.layermchild h3{margin: 0; padding:0 45px 0 10px; height:50px; line-height:50px; border-bottom:1px solid #EBEBEB; font-size:16px; font-weight:400; border-radius:3px 3px 0 0; border-bottom:1px solid #EBEBEB;} +.layermchild h3, +.layermbtn span{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} +.layermcont{padding:20px 15px; line-height:22px; text-align:center;} +.layermbox1 .layermcont{padding:0; text-align:left;} +.layermbox2 .layermcont{text-align:center; padding: 0; line-height: 0;} +.layermbox2 .layermcont i{width:25px; height:25px; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%;} +.layermbox2 .layermcont i{-webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;} +@-webkit-keyframes bouncedelay{ 0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)} 40%{transform:scale(1); -webkit-transform:scale(1)} } -@keyframes layui-m-anim-loading{ +@keyframes bouncedelay{ 0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)} 40%{transform:scale(1); -webkit-transform:scale(1)} } -.layui-m-layer2 .layui-m-layercont i{-webkit-animation: layui-m-anim-loading 1.4s infinite ease-in-out; animation: layui-m-anim-loading 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;} - -.layui-m-layer2 .layui-m-layercont i:first-child{margin-left:0; -webkit-animation-delay: -.32s; animation-delay: -.32s;} -.layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay: -.16s; animation-delay: -.16s;} -.layui-m-layer2 .layui-m-layercont>div{line-height:22px; padding-top:7px; margin-bottom:20px; font-size: 14px;} -.layui-m-layerbtn{display: box; display: -moz-box; display: -webkit-box; width: 100%; position:relative; height: 50px; line-height: 50px; font-size: 0; text-align:center; border-top:1px solid #D0D0D0; background-color: #F2F2F2; border-radius: 0 0 5px 5px;} -.layui-m-layerbtn span{position:relative; display: block; -moz-box-flex: 1; box-flex: 1; -webkit-box-flex: 1; text-align:center; font-size:14px; border-radius: 0 0 5px 5px; cursor:pointer;} -.layui-m-layerbtn span[yes]{color: #40AFFE;} -.layui-m-layerbtn span[no]{border-right: 1px solid #D0D0D0; border-radius: 0 0 0 5px;} -.layui-m-layerbtn span:active{background-color: #F6F6F6;} -.layui-m-layerend{position:absolute; right:7px; top:10px; width:30px; height:30px; border: 0; font-weight:400; background: transparent; cursor: pointer; -webkit-appearance: none; font-size:30px;} -.layui-m-layerend::before, .layui-m-layerend::after{position:absolute; left:5px; top:15px; content:''; width:18px; height:1px; background-color:#999; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius: 3px;} -.layui-m-layerend::after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg);} - -/* 底部对话框风格 */ -body .layui-m-layer .layui-m-layer-footer{position: fixed; width: 95%; max-width: 100%; margin: 0 auto; left:0; right: 0; bottom: 10px; background: none;} -.layui-m-layer-footer .layui-m-layercont{padding: 20px; border-radius: 5px 5px 0 0; background-color: rgba(255,255,255,.8);} -.layui-m-layer-footer .layui-m-layerbtn{display: block; height: auto; background: none; border-top: none;} -.layui-m-layer-footer .layui-m-layerbtn span{background-color: rgba(255,255,255,.8);} -.layui-m-layer-footer .layui-m-layerbtn span[no]{color: #FD482C; border-top: 1px solid #c2c2c2; border-radius: 0 0 5px 5px;} -.layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top: 10px; border-radius: 5px;} - -/* 通用提示 */ -body .layui-m-layer .layui-m-layer-msg{width: auto; max-width: 90%; margin: 0 auto; bottom: -150px; background-color: rgba(0,0,0,.7); color: #fff;} -.layui-m-layer-msg .layui-m-layercont{padding: 10px 20px;} - +.layermbox2 .layermcont i:first-child{margin-left:0; -webkit-animation-delay: -.32s; animation-delay: -.32s;} +.layermbox2 .layermcont i.laymloadtwo{-webkit-animation-delay: -.16s; animation-delay: -.16s;} +.layermbox2 .layermcont>div{line-height:22px; padding-top:7px; margin-bottom:20px; font-size: 14px;} +.layermbtn{position:relative; height:40px; line-height:40px; font-size:0; text-align:center; border-top:1px solid #EBEBEB;} +.layermbtn span{position:relative; display:inline-block; width:50%; text-align:center; font-size:14px; cursor:pointer; border-radius: 0 3px 0 0;} +.layermbtn span:first-child{height:39px; background-color:#fff; border-radius: 0 0 0 3px;} +.layermbtn:before{content:'\20'; position:absolute; width:1px; height:39px; left:50%; top:0; background-color:#EBEBEB;} +.layermend{position:absolute; right:7px; top:10px; width:30px; height:30px; border: 0; font-weight:400; background: transparent; cursor: pointer; -webkit-appearance: none; font-size:30px;} +.layermend::before, .layermend::after{position:absolute; left:5px; top:15px; content:''; width:18px; height:1px; background-color:#999; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius: 3px;} +.layermend::after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}