.credit-lottery {
    background     : url('@mobile/assets/images/lottery/lottery-bg.png') repeat-y center top;
    background-size: 100% auto;

    .app-navbar {
        &__backbutton {
            >.van-icon {
                color: #fff;
            }
        }

        &__wrapper {
            color           : #fff;
            background-color: transparent;
        }
    }

    &__title {
        text-align : center;
        padding-top: .48rem;

        img {
            width: 4.54rem;
        }
    }

    &__container {
        position      : relative;
        padding       : .32rem;
        padding-bottom: 1.5rem;

        &::after {
            content        : '';
            position       : absolute;
            left           : 0;
            bottom         : 0;
            width          : 1.36rem;
            height         : 2.08rem;
            background     : url('@mobile/assets/images/lottery/lottery-money.png') no-repeat left top;
            background-size: contain;
        }
    }

    &__container &__box {
        background-color: #FEB15B;
        border-radius   : .32rem;
        padding         : .2rem;

        &:not(:first-child) {
            margin-top: .32rem;
        }
    }

    &__draw {
        .block {
            background   : linear-gradient(180deg, #FFE8A2 0%, #FFD478 100%);
            box-shadow   : 0 .04rem .12rem 0 #FCA442;
            border-radius: .32rem;

            &-prize {
                display    : flex;
                align-items: center;
                gap        : .2rem;

                li {
                    position        : relative;
                    z-index         : 1;
                    flex            : 1;
                    display         : flex;
                    flex-direction  : column;
                    justify-content : center;
                    align-items     : center;
                    height          : 1.8rem;
                    color           : #FF4E1F;
                    background-color: #F5D484;
                    border-radius   : .32rem;
                    padding         : .2rem;
                    padding-bottom  : .28rem;

                    &::before {
                        position        : absolute;
                        z-index         : -1;
                        bottom          : .06rem;
                        content         : '';
                        width           : 100%;
                        height          : 100%;
                        background-color: #fff;
                        border-radius   : .32rem;
                    }

                    span {
                        white-space: nowrap;

                        &:first-child {
                            font-size  : .36rem;
                            font-weight: bold;
                        }
                    }
                }
            }

            &-button {
                margin: .36rem 0 .16rem 0;

                button {
                    position        : relative;
                    z-index         : 1;
                    width           : 100%;
                    height          : .9rem;
                    line-height     : 1;
                    font-size       : .36rem;
                    color           : #fff;
                    background-color: #DC3414;
                    border-radius   : .45rem;
                    padding-bottom  : .08rem;

                    &::before {
                        position     : absolute;
                        z-index      : -1;
                        bottom       : .08rem;
                        content      : '';
                        width        : 100%;
                        height       : 100%;
                        background   : linear-gradient(180deg, #FF8308 0%, #FF5331 100%);
                        border-radius: .45rem;
                    }
                }
            }

            &-image {
                img {
                    width: 100%;
                }
            }

            &-info {
                display        : flex;
                justify-content: space-between;
                align-items    : center;
                color          : #E84B2D;
                padding        : .24rem .36rem;
            }
        }
    }

    &__record {
        .block {
            background-color: #fff;
            box-shadow      : 0 .04rem .08rem 0 #FCA849;
            border-radius   : .32rem;
            padding         : .36rem;

            &-title {
                font-size : .36rem;
                text-align: center;
                color     : #AC1C00;
            }

            &-item {
                display        : flex;
                justify-content: space-between;
                align-items    : center;
                color          : #AC1C00;
                font-size      : .32rem;
                border-bottom  : 1px solid #eee;
                padding        : .24rem 0;
            }
        }
    }
}