.modal{
  @include position(fixed);
  z-index: 20;
  transition: all 0.5s;
  .mask{
    @include position(fixed);
    background-color: $colorI;
    opacity: 0.5;
  }
  // &代表元素自身，即.modal, 这里表示.modal.slide-enter-active
  &.slide-enter-active{
    top:0;
  }
  &.slide-leave-active{
    top:-100%;
  }
  &.slide-enter{
    top:-100%;
  }
  .modal-dialog{
    @include position(absolute,40%,50%,660px,auto);
    background-color: $colorG;
    transform:translate(-50%,-50%);
    .modal-header{
      height:60px;
      background-color: $colorJ;
      padding:0 25px;
      line-height: 60px;
      font-size:$fontI;
      .icon-close{
        @include positionImg(absolute,23px,25px,14px,14px,'https://cdn.jsdelivr.net/gh/ZTY18873242003/img/优雅的使用图床/icon-close.png');
        transition: transform 0.3s;
        &:hover{
          transform: scale(1.5);
        }
      }
    }
    .modal-body{
      padding:42px 40px 54px;
      font-size:14px;
    }
    .modal-footer{
      height: 82px;
      line-height: 82px;
      text-align: center;
      background-color: $colorJ;
    }
  }
}
