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>