min-project/component/helperPop/helperPop.wxss

/* template/helper-pop/helper-pop.wxss */
/* 公共的 css 样式 */
.flexflex {
    display: flex;
}

.flexcenter {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flexjcenter {
    display: flex;
    justify-content: center;
}

.flexacenter {
    display: flex;
    align-items: center;
}

.flex1 {
    flex: 1;
}

@keyframes slidebj {
    0% {
        background-color: rgba(0, 0, 0, 0);
    }

    100% {
        background-color: rgba(0, 0, 0, 0.717647058823529);
    }
}

.helper-pop {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.717647058823529);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1004;
    align-items: flex-end;
    box-sizing: border-box;
    animation: slidebj 0.5s forwards;
}

@keyframes slideUp {
    0% {
        top: 100%;
    }

    100% {
        top: 0;
    }
}

.helper-pop .helper-box {
    animation: slideUp 0.5s forwards;

    box-sizing: border-box;
    flex-direction: column;
    width: 750rpx;
    height: 891rpx;
    background: -webkit-linear-gradient(270.192914353533deg, rgba(193, 206, 250, 1) 0%, rgba(226, 237, 251, 1) 28%, rgba(255, 255, 255, 1) 60%);
    background: -moz-linear-gradient(179.807085646467deg, rgba(193, 206, 250, 1) 0%, rgba(226, 237, 251, 1) 28%, rgba(255, 255, 255, 1) 60%);
    background: linear-gradient(179.807085646467deg, rgba(193, 206, 250, 1) 0%, rgba(226, 237, 251, 1) 28%, rgba(255, 255, 255, 1) 60%);
    border: none;
    border-radius: 30rpx;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    -moz-box-shadow: 0px 0px 22.5rpx rgba(0, 0, 0, 0.101960784313725);
    -webkit-box-shadow: 0px 0px 22.5rpx rgba(0, 0, 0, 0.101960784313725);
    box-shadow: 0px 0px 22.5rpx rgba(0, 0, 0, 0.101960784313725);
    position: relative;
}

.helper-pop .helper-box .cross-grey {
    width: 24rpx;
    height: 24rpx;
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    padding: 10rpx;
}

.helper-pop .helper-box .helper-text {
    box-sizing: border-box;
    /* width: 384rpx; */
    /* height: 110rpx; */
    /* height: 150rpx; */
    height: 155rpx;
    margin: 88rpx auto 45rpx;
}

.helper-pop .helper-box .helper-text1 {
    /* width: 424rpx; */
}


.helper-pop .helper-box .helper-box-box {
    position: absolute;
    bottom: 121.5rpx;
    box-sizing: border-box;
    width: 420rpx;
    background: -webkit-linear-gradient(310.572423002443deg, rgba(101, 137, 242, 1) 0%, rgba(116, 177, 240, 1) 100%);
    background: -moz-linear-gradient(139.427576997557deg, rgba(101, 137, 242, 1) 0%, rgba(116, 177, 240, 1) 100%);
    background: linear-gradient(139.427576997557deg, rgba(101, 137, 242, 1) 0%, rgba(116, 177, 240, 1) 100%);
    border: none;
    border-radius: 30rpx;
    -moz-box-shadow: 0px 0px 22.5rpx rgba(0, 0, 0, 0.176470588235294);
    -webkit-box-shadow: 0px 0px 22.5rpx rgba(0, 0, 0, 0.176470588235294);
    box-shadow: 0px 0px 22.5rpx rgba(0, 0, 0, 0.176470588235294);
    flex-direction: column;
    align-items: center;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    z-index: 1;
}

.helper-pop .helper-box .helper-box-box .helper-box-text {
    box-sizing: border-box;
    font-size: 24rpx;
    color: #FFFFFF;
    text-align: center;
    line-height: 42rpx;
    margin-top: 30rpx;
}

.helper-pop .helper-box .helper-QRcode-box {
    box-sizing: border-box;
    width: 360rpx;
    height: 360rpx;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 9rpx;
    position: relative;
}

.helper-pop .helper-box .helper-QRcode-box .helper-QRcode-box-icon {
    width: 36rpx;
    height: 36rpx;
    position: absolute;
}

.helper-pop .helper-box .helper-QRcode-box .left-top {
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.helper-QRcode-box .left-bottom {
    bottom: 0;
    left: 0;
    transform: rotate(180deg);
}

.helper-pop .helper-box .helper-QRcode-box .right-top {
    right: 0;
    top: 0;
}

.helper-pop .helper-box .helper-QRcode-box .right-bottom {
    right: 0;
    bottom: 0;
    transform: rotate(90deg);
}

.helper-pop .helper-box .helper-QRcode-box .helper-QRcode-img {
    width: 330rpx;
    height: 330rpx;
    box-sizing: border-box;
}

.helper-pop .helper-box .helper-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 226rpx;
}