JenkinsTest/page/zt/scss/schedule.scss

@import "../../../sass/base/mixins";

$borderColor : #dcdcdc;
$orange : #ff6b1a;

.page-video-schedule{
    min-height: 100%;
    background: #ffffff;
    padding-top: px2rem(140);
    .schedule-hd{
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 2;
        background: #FFFFFF;
    }
    .hd-row1{
        @include webkitbox();
        line-height: px2rem(80);
        text-align: center;
        font-size: px2rem(28);
        li{
            @include flex(1);
        }
        a{
            display: block;
            color: #292929;
            position: relative;
            &.active{
                color: $orange;
                &:before{
                    opacity: 1;
                }
            }
            &:before{
                content: '';
                position: absolute;
                left: 50%;
                margin-left: px2rem(-15);
                bottom: px2rem(15);
                width: px2rem(30);
                height: px2rem(5);
                background: $orange;
                border-radius: px2rem(5);
                opacity: 0;
            }
        }
    }
    .hd-row2{
        display: flex;
        justify-content: space-between;
        background: #f2f2f2;
        line-height: px2rem(60);
        height: px2rem(60);
        font-size: px2rem(24);
        padding: 0 px2rem(24);
        overflow: hidden;
        color: #666666;
        p{
            a{
                &.active{
                    color: $orange;
                }
            }
        }
        .tip{
            font-size: px2rem(20);
            color: #919090;
        }
    }
    .hd-row3{
        line-height: px2rem(60);
        padding-left: px2rem(30);
        color: #666;
        display: none;
        i{
            display: inline-block;
            width: px2rem(20);
            height: px2rem(20);
            border-radius: 50%;
            background: rgba(255,111,0,0.2);
            padding: px2rem(5) 0 0 px2rem(5);
            margin-right: px2rem(10);
            &:before{
                content: '';
                display: block;
                width: px2rem(10);
                height: px2rem(10);
                border-radius: 50%;
                background: $orange;
            }
        }
    }
    .schedule-bd{
        position: relative;
        z-index: 1;
        color: #888888;
    }
    .list-month{
        padding-top: px2rem(20);
    }
    .title-month{
        position: relative;
        z-index: 2;
        font-size: px2rem(28);
        padding: px2rem(12) 0 px2rem(12) px2rem(20);
        background: #FFF;
    }
    .title-date{
        font-size: px2rem(24);
        line-height: px2rem(26);
        padding-left: px2rem(50);
        position: relative;
        &:before{
            content: '';
            position: absolute;
            top: px2rem(13);
            left: 0;
            width: px2rem(20);
            height: 1px;
            background: $borderColor;
        }
        i{
            position: absolute;
            top: px2rem(3);
            left: px2rem(24);
            width: px2rem(20);
            height: px2rem(20);
            border-radius: 50%;
            background: rgba(255,111,0,0.2);
            padding: px2rem(5) 0 0 px2rem(5);
            &:before{
                content: '';
                display: block;
                width: px2rem(10);
                height: px2rem(10);
                border-radius: 50%;
                background: $orange;
            }
        }
    }
    .item-month{
        position: relative;
        &:before{
            content: '';
            position: absolute;
            z-index: 1;
            left: px2rem(40);
            width: 1px;
            height: 100%;
            background: $borderColor;
        }
    }
    .list-date{
        padding-left: px2rem(40);
    }
    .item-date{
        .item-film{
            border: none;
        }
    }
}