react-app-shell/activity/src/components/modal/base.less

react打包脚本和example, 这里的版本请忽略

.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) !important;;
  .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) !important;
    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;
      }
    }
  }
}