my-courses.scss

#study {
    .info {
        display: flex;
        flex-wrap: wrap;
        width: 55%;

        .title {
            font-size: 15px;
            font-weight: 400;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .contact {
            font-size: 13px;
            color: $active;
            flex: 0 1 auto;
            width: 100%;
        }

        .process {
            &-status {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            &-wrapper {
                position: relative;
                width: 147px;
                height: 6px;
                background: #E5E5E5;
                border-radius: 4px;
                margin-right: 14px;
            }

            &-bar {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                background-color: $active;
                border-radius: 4px;
            }

            &-text {
                color: $active;
                font-size: 12px;
                line-height: 15px;
            }
        }

        .des {
            color: $color_999;
            font-size: 11px;
            align-self: flex-end;
            line-height: 1;

            .time {
                margin-right: 10px;
            }
        }

        .start-learn {
            display: block;
            box-sizing: border-box;
            align-self: flex-end;
            width: 78px;
            height: 22px;
            padding: 5px 14px;
            -webkit-appearance: none;
            outline: 0;
            border: none;
            background: $bg_active;
            color: $white;
            border-radius: 3px;
        }
    }

    .add-course {
        padding: 10px 12px;

        button.add {
            width: 150px;
            height: 108px;

            font-size: 15px;
            font-family: HiraginoSansGB-W3;
            font-weight: normal;
            color: $active;


            border: 1px dashed $active;
            background: transparent;
        }
    }

    .my-course-uid {
        width: 375px;
        height: 30px;
        background: $bg_FFF4CE;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: $color_333;
    }

    .empty {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 140px;

        .iconfish {
            width: 20px;
            height: 20px;
            color: #1a4263;
        }

        .empty-prompt {
            margin-bottom: 30px;
            font-size: $font_12;
            color: $color_666;
        }

        .select-course {
            display: block;
            width: 131px;
            height: 30px;
            border: 1px solid $active;
            border-radius: 15px;
            background: transparent;
            color: $active;
            font-size: $font_16;
            text-align: center;
            line-height: 30px;
        }
    }

    .status {
        position: absolute;
        top: 0;
        right: 0;
        padding: 2px 6px;
        border-radius: 11px 0 0 11px;
        font-size: 14px;
        color: #fff;
        background: linear-gradient(to bottom, #FF4000, #FD7700);
    }
    .course-expire{
        display: inline-block;
        text-align: center;
        position: absolute;
        bottom: 10px;
        left: 0;
        width:92px;
        height:20px;
        line-height: 21px;
        background-color: #FF3A3A;
        border-radius:0 10px 10px 0;
        color: #fff;
        font-size: 12px;
    }
}