@import "src/assets/css/variable";
.pay-order {
    width: 100%;
    height: calc(100% - 44px);
    background-color: #f5f5f5;

    .order-number {
        background-color: #fff;

        span {
            font-size: 15px;
            color: #333333;
        }

        .number {
            font-size: 12px;
            color: #666666;
        }

        .money {
            color: #ff3131;
        }
    }

    .pay-type-list {
        .am-list-body {
            &::after {
                display: none;
            }
        }

        .am-list-header {
            color: #333333;
            font-size: 15px;
            background-color: #fff;
        }

        .iconalipay {
            font-size: 22px;
            color: #01aaef;
        }

        .iconweixinzhifu {
            font-size: 22px;
            color: #3baf34;
        }

        .iconhuabei {
            font-size: 22px;
            color: #01aaef;
        }

        .am-radio-inner {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #c1c1c1;
        }

        .am-radio-inner:after {
            display: block;
            border-color: #fff;
            top: 0;
            right: 6px;
        }

        .am-radio.am-radio-checked .am-radio-inner {
            background-color: #009aff;
            border-radius: 50%;
            width: 20px;
            height: 20px;
        }

        .am-radio.am-radio-checked .am-radio-inner:after {
            display: block;
        }

    }

    .agreement {
        margin-top: 8px;
        background: #fff;

        .am-checkbox-agree{
            .am-checkbox {
                left: unset;
                right: 6px;
            }
            .am-checkbox-agree-label{
                margin-left: 3px;
            }
        }

    }


    .pay-tip {
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: #ff3131;
        background-color: #fff4ce;
    }

    .pay-button {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 44px;
        line-height: 44px;
        text-align: center;
        color: #fff;
        font-size: 18px;
        background-color: #18b4ed;
        z-index: 9;
        &.invalid{
            background: #BBB;
        }
    }

    .check-staging {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, $alpha: 0.6);
        z-index: 19;

        .container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            border-radius: 6px;
            background-color: #FFF;
            padding-bottom: 10px;

            .check-title {
                color: #333333;
                font-size: 16px;
                text-align: center;
                width: 100%;
                height: 44px;
                line-height: 44px;
                border-bottom: 1px solid #DDDDDD;
                border-top-left-radius: 6px;
                border-top-right-radius: 6px;
            }
        }

        .am-list-item .am-list-line .am-list-extra {
            flex-basis: 16%;
        }

        .am-radio-inner {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #BFBFBF;
            background-color: #fff;
        }

        .am-radio-inner:after {
            display: block;
            border-color: #fff;
            top: 0;
            right: 6px;
        }

        .am-radio.am-radio-checked .am-radio-inner {
            background-color: #009aff;
            border: 1px solid #FFF;
            border-radius: 50%;
            width: 20px;
            height: 20px;
        }

        .am-radio.am-radio-checked .am-radio-inner:after {
            display: block;
        }


    }

    .order-info {
        position: relative;
        flex: 1;

        .order-title {
            font-size: 16px;
            color: $color_333;
        }

        .order-content {
            font-size: 14px;
            color: $color_666;
            margin-top: 14px;
            line-height: 18px;
        }

        .order-des {
            height: 24px;
            line-height: 33px;
            position: absolute;
            bottom: 0;

            .order-newprice {
                font-size: 16px;
                color: $redprice;
            }

            .order-price {
                font-size: 12px;
                color: $color_999;
                margin-left: 15px;
                text-decoration: line-through;
            }
        }
    }

    .v-list-item {
        padding: 10px 15px;
        background-color: #fff;

        .content {
            border: none;
            padding-bottom: 0;

            .cover {
                flex: inherit;
                width: 42.2%;

                img {
                    width: 100%;
                    height: 100%;
                }

                .course-status {
                    background-color: rgba(224, 46, 36, 0.6);
                }
            }

            .price-des {
                color: #999;
                font-size: 11px;
            }

        }

        .info {
            width: 52.3%;
            position: relative;
            display: block;

            .title {
                font-size: 16px;
                color: $color_333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                height: 16px;
                line-height: 16px;
            }

            .contact {
                font-size: 14px;
                color: $color_666;
                margin-top: 14px;
            }

            .des {
                position: absolute;
                bottom: 0;

                .course-price {
                    .price {
                        color: $red;
                        font-size: 12px;
                    }

                    .new {
                        color: $red;
                        font-size: 16px;
                    }

                    .old {
                        color: $color_999;
                        font-size: 12px;
                        display: inline-block;
                        margin-left: 15px;
                        text-decoration: line-through;
                    }
                }

                .isbuy {
                    display: inline-block;
                    width: 61px;
                    height: 18px;
                    background-color: $bg_active;
                    border-radius: 9px;
                    color: $white;
                    font-size: 12px;
                    text-align: center;
                    line-height: 18px;
                }
            }
        }
    }
}
