taro/src/components/layout/Modal.scss

/* #ifdef weapp */
.modal {
    position: fixed;
    top: -2px;
    left: 0;
    z-index: 100000;
    right: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: rgba($color: #000000, $alpha: 0);
    animation: modalBgAnim 0.2s linear forwards;
}

.rn_modal{
    position: fixed;
    top: -2px;
    left: 0;
    z-index: 100000;
    right: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: rgba($color: #000000, $alpha: 0);
}

@keyframes modalBgAnim {

    100% {
        background-color: rgba($color: #000000, $alpha: 0.15);
    }
}

.modal_dismiss {
    background-color: rgba($color: #000000, $alpha: 0.15);
    animation: modalBgHideAnim 0.2s linear forwards;
}

@keyframes modalBgHideAnim {
    100% {
        background-color: rgba($color: #000000, $alpha: 0);
    }
}


.modal_center_container {
    align-items: center;
    justify-content: center;
    // margin-bottom: 560px;
}

.center_modal_detail {
    margin-bottom: 192px;
}

.modal_center_content {
    // background-color: #1c1c1c;
    // border-radius: 36rpx;
    width: 658px;

}


.modal_bottom_content {
    // padding-bottom: 120px;
    width: 750px;
    background-color: #ffffff;
    border-top-left-radius: 36px;
    border-top-right-radius: 36px;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    z-index: 1000000;
    margin-bottom: -1000px;
    animation: modalAnim 0.2s linear forwards;
}

.modal_bottom_dismiss {
    margin-bottom: 0px;
    animation: modalHideAnim 0.2s linear forwards;
}

@keyframes modalAnim {
    0% {
        margin-bottom: -1000px;
    }

    100% {
        margin-bottom: 0;
    }
}

@keyframes modalHideAnim {
    100% {
        margin-bottom: -1000px;
    }
}

/* #endif */

/* #ifdef rn */

.modal {
    position: absolute;
    top: -2px;
    left: 0;
    z-index: 100000;
    right: 0;
    height: 700;
    // bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: rgba(0,0,0,0.95);
    // background-color: rgba($color: #000000, $alpha: 0);
    // animation: modalBgAnim 0.2s linear forwards;
}

.modal_bottom_content {
    // padding-bottom: 120px;
    width: 750px;
    background-color: #1c1c1c;
    border-top-left-radius: 36px;
    border-top-right-radius: 36px;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    z-index: 1000000;
    margin-bottom: 0;
    // height: 400;
    // margin-bottom: -1000px;
    // animation: modalAnim 0.2s linear forwards;
}

/* #endif */





.modal_title {
    font-size: 36px;
    line-height: 120px;
    height: 120px;
    font-weight: 500;
    width: 750px;
    text-align: center;
}

.modal_operate {
    display: flex;
    flex-direction: row;
    width: 750px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 36px;
}

.modal_btn {
    width: 260px;
    height: 84px;
    border-radius: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn_space {

    width: 90px;
}

.modal_cancel_text {
    font-weight: 500;
}


.modal_confirm_text {
    font-weight: 500;
}