sj-miniprogram/components/phone-popup/phone-popup.scss

.popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.popup-content {
    background-color: #fff;
    border-radius: 40rpx 40rpx 0 0;
    padding: 60rpx 40rpx calc(120rpx + env(safe-area-inset-bottom));
    height: 650rpx;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    animation: slide-up 0.3s ease-out;
}

@keyframes slide-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.popup-header {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;

    .logo-circle {
        width: 48rpx;
        height: 48rpx;
        background-color: #1F6CFF;
        border-radius: 50%;
        margin-right: 16rpx;
    }

    .title {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
    }
}

.popup-body {
    margin-bottom: 50rpx;

    .phone-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 30rpx;
    }

    .phone-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx solid #eeeeee;
        padding-bottom: 30rpx;
        margin-bottom: 20rpx;

        .phone-info {
            display: flex;
            align-items: baseline;

            .phone-num {
                font-size: 40rpx;
                color: #333;
                margin-right: 20rpx;
                font-weight: 500;
            }

            .phone-desc {
                font-size: 24rpx;
                color: #999;
            }
        }
    }

    .use-other {
        font-size: 26rpx;
        color: #576b95; // Wechat link color is good here
        padding-top: 10rpx;
    }
}

.popup-footer {
    display: flex;
    justify-content: space-between;

    button {
        width: 48%;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 10rpx;
        font-size: 32rpx;
        margin: 0;

        &::after {
            border: none;
        }
    }

    .btn-cancel {
        background-color: #f2f2f2;
        color: #0cbb07; // green text, wait, image shows red/green/dark gray? Image shows grey btn with green text: "取消" in green color. Ah wait, looking closely at image 2: btn-cancel ("取消") has a grayish background and green text. Actually the text is just #07C160 or similar.
        color: #07c160;
    }

    .btn-allow {
        background-color: #07c160; // WeChat green
        color: #fff;
    }
}