wap端经典弹窗的布局方法【wap端弹窗】
sass:
.Dialog-tuaning-cover { position: fixed; top: 0; left: 0; width: 100%; background-color: #000; height: 100%; opacity: 0.85; z-index: 250; display: none; } .Dialog-tuaning { position: fixed;background: #fff; font-size: 0.18667rem; bottom: 0; left: 50%; padding:px2rem(20); margin-left:px2rem(-375); display: none; z-index: 99999; border-radius: px2rem(20) px2rem(20) 0 0; .tuaning{position: relative; border: none; width: px2rem(710); .list{font-size: px2rem(22); overflow-y: scroll; min-height: px2rem(100); max-height:px2rem(700); li{border-bottom: #dedede 1px solid;} } } } .Dialog-tuaning .closes{position: absolute; top: px2rem(10); left: auto; right: px2rem(10); width: px2rem(40); height: px2rem(40); background: url("../images/close.png") center no-repeat; background-size: 70%; } /*修改正在拼团列表 2019.6.28*/ .tuaning{ border-top: #aeaeae 1px solid; padding: px2rem(30) 0 0; color: #000; h2{font-size: px2rem(26); margin-bottom: px2rem(20); line-height: px2rem(50); span{float: right; color: #ef9279;} } .list{font-size: px2rem(22); ul{ li{ display: flex; padding: px2rem(10) 0; .useface{width: px2rem(100); height: px2rem(100); border-radius: px2rem(50); margin: 0 px2rem(20) 0 0;} /*.nickname{flex: 2; display: flex; align-items: center; }*/ .nickname{flex: 2; text-align: left; display: flex; justify-content:center; flex-direction: column; span{ line-height: px2rem(30); float: left; } } .center{flex: 2; text-align: right; display: flex;justify-content:center; flex-direction: column; span{font-size: px2rem(22); line-height: px2rem(24); b{color: #fe8c72; font-weight: normal;} } span.lastTime{ font-size: px2rem(22); color: #3e3e3e; line-height: px2rem(20); b{color: #3e3e3e; font-weight: normal;} } } .go-tuan{flex: 1; display: flex; align-items: center; margin-left: px2rem(20); span{display: block; width: px2rem(100); line-height: px2rem(40); color: #fff; text-align: center; background: #ef9279; margin: 0 auto; border-radius: px2rem(40);} } } } } }
html:
<div class="Dialog-tuaning-cover"></div> <div class="Dialog-tuaning"> <div class="tuaning"> <div class="closes"></div> <h2>TA们正在拼团 </h2> <div class="list" > <ul> <li> <div class="useface" style="background:#cccccc url('images/img-1.jpg') center no-repeat; background-size: cover;"></div> <div class="nickname"> <span class="username">13482258452</span> </div> <div class="center"> <span>还差<b>1</b><b>人</b></span> <span class="lastTime">剩余 <b class="lastt"></b></span> </div> <div class="go-tuan"> <span>去参团</span> </div> </li> <li> <div class="useface" style="background:#cccccc url('images/img-1.jpg') center no-repeat; background-size: cover;"></div> <div class="nickname"> <span class="username">13482258452</span> </div> <div class="center"> <span>还差<b>1</b><b>人</b></span> <span class="lastTime">剩余 <b class="lastt"></b></span> </div> <div class="go-tuan"> <span>去参团</span> </div> </li> <li> <div class="useface" style="background:#cccccc url('images/img-1.jpg') center no-repeat; background-size: cover;"></div> <div class="nickname"> <span class="username">13482258452</span> </div> <div class="center"> <span>还差<b>1</b><b>人</b></span> <span class="lastTime">剩余 <b class="lastt"></b></span> </div> <div class="go-tuan"> <span>去参团</span> </div> </li> </ul> </div> </div> </div>
给心灵一个纯净空间,让思想,情感,飞扬!