press-pix/pmg-popup-container/css/index.less

基于 PixUI 的 Press 组件库

@import '../../common/styles/pubgm/mixins.less';

.pmg-popup-container{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 99;
}

.pmg-popup-mask{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, .7);
}

.pmg-popup-content{
  position: relative;
  display: flex;
  flex-direction: column;
  background-size: 100%;
  background-repeat: no-repeat;
  &.pmg-small{
    width: 6.4rem;
    height: 3.28rem;
    .bgUrl('comp/popup-s.png');
  }
  &.pmg-normal{
    width: 8.64rem;
    height: 5.09rem;
    padding: .06rem .04rem 0;
    padding-bottom: .04rem;
    .bgUrl('comp/popup-normal.png');
    .pmg-popup-close{
      right: .22rem;
    }
  }
  &.pmg-large{
    width: 10.06rem;
    height: 6.06rem;
    padding-top: .06rem;
    padding: .06rem .04rem 0;
    .bgUrl('comp/popup-big.png');
    .pmg-popup-close{
      right: .2rem;
    }
  }
  &.pmg-full,
  &.pmg-full-center{
    width: 100%;
    height: 7.5rem;
    .bgUrl('comp/popup-full.png');
    background-size: 100% 7.5rem;
  }
}

.pmg-popup-header{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: .5rem;
  padding: .04rem .55rem;
}

.pmg-popup-title{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: .5rem;
  .pmg-popup-title-text{
    color: #fff;
    font-size: .28rem;
    font-weight: bold;
    line-clamp: 1;
  }
}

.pmg-popup-close{
  position: absolute;
  right: .16rem;
  top: .09rem;
  width: .33rem;
  height: .33rem;
  .bgUrl('comp/icon-close.png');
  z-index: 2;
}

.pmg-popup-subtitle{
  color: rgba(255, 255, 255, .7);
  font-size: .22rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: .4rem;
}

.pmg-popup-children{
  position: relative;
  flex-grow: 1;
  z-index: 1;
}

.pmg-popup-btn-group{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 0.18rem;
  margin-bottom: .2rem;
  width: 100%;
}

.pmg-btn-cancel{
  margin-right: .2rem;
}

// 全屏弹窗
.pmg-full,
.pmg-full-center{
  .pmg-popup-header{
    justify-content: flex-end;
    height: 1.48rem;
    padding: .04rem .44rem;
  }
  .pmg-popup-title{
    font-size: .4rem;
    font-weight: bold;
    line-height: .6rem;
    position: absolute;
    right: 1.52rem;
  }
  .pmg-popup-close{
    position: relative;
    top: 0;
    right: .44rem;
  }
  .pmg-popup-btn-group{
    height: 1.52rem;
    align-items: flex-end;
    justify-content: flex-end;
    margin-bottom: 0;
    padding-bottom: .4rem;
    padding-right: .88rem;
  }
}

.pmg-full-center{
  .pmg-popup-header{
    padding: 0;
  }
  .pmg-popup-title{
    position: absolute;
    top: .48rem;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    line-height: .6rem;;
    padding: 0 .44rem;
  }
  .pmg-popup-btn-group{
    justify-content: center;
    padding-right: 0;
  }
}

.pmg-btn-system-auto{
  color: rgba(255, 255, 255, 0.70);
  font-size: .24rem;
  font-weight: bold;
  margin-right: .64rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: .64rem;
}

.pmg-btn-auto-icon{
  width: .24rem;
  height: .24rem;
  margin-right: .08rem;
  .bgUrl('comp/check.png');
  &.pmg-active{
    .bgUrl('comp/checked.png');
  }
}

// 弹窗
.pmg-dialog-content{
  width: 100%;
  height: 2.52rem;
  padding: .26rem .3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  .pmg-dialog-text-wrapper{
    overflow: scroll;
    max-height: 2rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    .pmg-dialog-text{
      color: rgba(255, 255, 255, .7);
      text-align: center;
      font-size: .22rem;
      line-height: .32rem;
    }
  }
}

.pmg-dialog-content-small{
  height: 1.62rem;
  .pmg-dialog-text-wrapper{
    max-height: 1.48rem;
  }
}

.pmg-dialog-content-mini{
  height: 1.22rem;
  align-items: flex-start;
  .pmg-dialog-text-wrapper{
    max-height: .65rem;
  }
}