JenkinsTest/sass/page/video.scss

@import "../base/mixins";

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

.pb-150{
    padding-bottom: px2rem(150);
}

.mt-16{
    margin-top: px2rem(16);
}

.v-mod-video{
    background: #FFF;
    font-size: px2rem(28);
    padding-bottom: px2rem(20);
    .info-row1{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: px2rem(24);
        .img-wrap{
            display: inline-block;
            width: px2rem(70);
            height: px2rem(70);
            border-radius: 50%;
            overflow: hidden;
            background: url(./../img/pic-head.png) no-repeat;
            background-size: 100%;
            img{
                display: block;
                overflow: hidden;
                width: 100%;
                height: 100%;
            }
        }
        h2{
            font-size: px2rem(34);
            color: #000;
            margin-left: px2rem(12);
        }
        .col-fl{
            display: flex;
            align-items: center;
        }
        .col-fr{
            background: url(./../img/icon-watch.png) left center no-repeat;
            background-size: auto px2rem(24);
            padding-left: px2rem(40);
            color: #666666;
        }
    }
    .info-row2{
        h1{
            font-size: px2rem(26);
            color: #333333;
            padding: 0 px2rem(24);
            line-height: px2rem(40);
        }
        .btn-more{
            display: block;
            font-size: px2rem(20);
            line-height: px2rem(40);
            text-align: center;
            color: #999;
            margin-top: px2rem(24);
        }
    }
}

.v-mod-detail{
    background: #FFFFFF;
    font-size: px2rem(28);
    position: relative;
    a.detail-wrap{
        &:hover{
            background: #f5f5f5;
        }
    }
    .detail-wrap{
        display: flex;
        padding: px2rem(24);
        position: relative;
        z-index: 1;
    }
    .detail-fl{
        width: px2rem(136);
        height: px2rem(190);
        overflow: hidden;
        position: relative;
        background-image: url(./../img/bg-pic.png);
        background-size: 100%;
        img{
            width: 100%;
            height: 100%;
            display: block;
            overflow: hidden;
        }
        p{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: px2rem(36);
            line-height: px2rem(36);
            background: rgba(0, 0, 0,0.8);
            color: #dcdcdc;
            text-align: center;
            font-size: px2rem(20);
        }
    } 
    .detail-fm{
        flex: 1;
        margin: 0 px2rem(20);
        h2{
            font-size: px2rem(32);
            color: #181818;
            line-height: px2rem(50);
        }
        p{
            font-size: px2rem(24);
            color: #919090;
            line-height: px2rem(36);
            height: px2rem(36);
            overflow: hidden;
        }
        span{
            margin-right: px2rem(6);
        }
    } 
    .detail-fr{
        .rate-wrap{
            width: px2rem(134);
            border: 1px solid #535353;
            border-radius: px2rem(8);
            text-align: center;
            font-size: px2rem(24);
        }
        p{
            color: #181818;
            margin-bottom: px2rem(15);
        }
        span{
            color: $maincolor;
            font-size: px2rem(40);
            line-height: px2rem(76);
        }
        .imdb-wrap{
            color: #ffffff;
            background: #535353;
            line-height: px2rem(46);
        }
    }  
    .btn-wrap{
        border-top: 1px solid #ebebeb;
        padding: px2rem(30) 0;
    }
    .btn-app{
        display: block;
        margin: 0 auto;
        color: #ffffff;
        line-height: px2rem(70);
        text-align: center;
        width: px2rem(410);
        height: px2rem(70);
        padding: 0 px2rem(40);
        font-size: px2rem(28);
        border-radius: px2rem(45);
        background-image: -webkit-radial-gradient(ellipse at right bottom,$maincolor,#ff8e2a);
        background: radial-gradient(ellipse at right bottom,$maincolor,#ff8e2a);
        box-shadow: 1px 2px 8px 1px #fbb06d;
    }
    .detail-filmmakers{
        border-top: 1px solid #dcdcdc;
        padding: 0 px2rem(24) px2rem(24) px2rem(24);
        color: #888888;
        h2{
            line-height: px2rem(80);
            color: #181818;
        }
        .intro{
            position: relative;
            font-size: px2rem(28);
            line-height: px2rem(40);
            height: px2rem(80);
            color: #666666;
            overflow: hidden;
            p{
                display: inline;
            }
            .btn-open{
                position: absolute;
                right: 0;
                bottom: 0;
                height: px2rem(40);
                line-height: px2rem(40);
                color: $maincolor;
                background: #FFFFFF;
            }
            &.is-open{
                height: auto;
                .btn-open{
                    position: relative;
                }
            }
        }
        .ticket{
            text-align: center;
            margin-top: px2rem(30);
        }
        .list-filmmakers{
            margin: px2rem(30) 0;
            white-space: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            li{
                display: inline-block;
                vertical-align: top;
                width: px2rem(120);
                text-align: center;
                margin: 0 px2rem(10);
                &.item-more{
                    .cover{
                        background-image: url(./../img/icon-filmmake-more.png);
                    }
                }
            }
            .cover{
                display: block;
                margin: 0 auto;
                width: px2rem(100);
                height: px2rem(100);
                overflow: hidden;
                border-radius: 50%;
                background-size: cover;
                background-color: #cccccc;
            }
            h3{
                color: #000000;
                font-size: px2rem(24);
                line-height: px2rem(62);
                @include ellipsis();
            }
            p{
                font-size: px2rem(20);
            }
        }
    }
    .detail-intro{
        border-top: 1px solid #ebebeb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: px2rem(80);
        padding: 0 px2rem(24);
        h3{
            color: #181818;
        }
        .btn-open{
            width: px2rem(20);
            height: px2rem(20);
            border-top: 1px solid #b4b4b4;
            border-right: 1px solid #b4b4b4;
            transform: rotate(45deg);
        }
    }
}

.v-mod-jieshuo{
    background: #FFFFFF;
    margin-top: px2rem(16);
    font-size: px2rem(32);
    padding: px2rem(30) 0 px2rem(10) 0;
    color: #181818;
    h2{
        line-height: px2rem(70);
        padding: 0 px2rem(24);
        a{
            float: right;
            font-size: px2rem(24);
            color: #888888;
        }
    }
    .list-ups{
        margin-right: px2rem(-24);
        padding-left: px2rem(24);
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        li{
            border: 1px solid #d4d4d4;
            display: inline-block;
            vertical-align: middle;
            font-size: px2rem(28);
            color: #888888;
            line-height: px2rem(70);
            padding: 0 px2rem(36);
            border-radius: px2rem(35);
            padding: 0 px2rem(24);
            margin: px2rem(12) px2rem(24) px2rem(12) 0;
            &.active{
                color: $maincolor;
                border: 1px solid $maincolor;
            }
        }
    }
    .list-jieshuo{
        overflow: hidden;
        max-height: px2rem(540);
        &.is-scroll{
            height: px2rem(540);
        }
        li{
            
        }
        a{
            padding: px2rem(20) px2rem(24);
            border-top: 1px solid #dcdcdc;
            display: flex;
            color: #181818;
            &:first-child{
                border: 0;
            }
        }
        .item-fl{
            position: relative;
            width: px2rem(240);
            height: px2rem(140);
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
                display: block;
                overflow: hidden;
            }
            em{
                position: absolute;
                top: 0;
                right: 0;
                line-height: px2rem(30);
                padding: 0 px2rem(10);
                color: #FFFFFF;
                font-size: px2rem(20);
                background: $maincolor;
            }
        }
        .item-fr{
            flex: 1;
            padding-left: px2rem(20);
        }
        h3{
            line-height: px2rem(44);
            height: px2rem(88);
            @include ellipsis-clamp(2);
        }
        p{
            display: flex;
            margin-top: px2rem(16);
            font-size: px2rem(24);
            color: #919090;
            line-height: px2rem(36);
            height: px2rem(36);
            overflow: hidden;
            img{
                width: px2rem(36);
                height: px2rem(36);
                border-radius: 50%;
                vertical-align: middle;
                margin-right: px2rem(12);
            }
        }
    }
    .list-jieshuo2{
        display: flex;
        padding: 0 px2rem(24) px2rem(20) px2rem(24);
        li{
            width: px2rem(230);
            margin-right: px2rem(8);
        }
        .cover{
            height: px2rem(146);
            overflow: hidden;
        }
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
        h3{
            margin-top: px2rem(14);
            color: #333333;
            line-height: px2rem(36);
            height: px2rem(72);
            font-size: px2rem(28);
            @include ellipsis-clamp(2);
        }
    }
    .btn-more{
        color: #999;
        display: block;
        text-align: center;
        font-size: px2rem(24);
        line-height: px2rem(70);
    }
}

.v-mod-preview{
    background: #FFFFFF;
    margin-top: px2rem(16);
    font-size: px2rem(32);
    padding: px2rem(30) 0 px2rem(10) 0;
    color: #181818;
    h2{
        line-height: px2rem(70);
        text-align: center;
    }
    .list-preview{
        li{
            padding: px2rem(20) px2rem(20);
            border-top: 1px solid #dcdcdc;
            display: flex;
            &:first-child{
                border: 0;
            }
            &.active{
                .item-fl{
                    &:after{
                        display: block;
                    }
                }
                h3{
                    color: $maincolor;
                }
            }
        }
        .item-fl{
            position: relative;
            width: px2rem(240);
            height: px2rem(140);
            overflow: hidden;
            &:after{
                content: '';
                display: none;
                position: absolute;
                right: px2rem(10);
                bottom: px2rem(10);
                width: px2rem(30);
                height: px2rem(30);
                background: url(./../img/icon-play2.png) no-repeat;
                background-size: 100%;
            }
        }
        .item-fr{
            flex: 1;
            padding-left: px2rem(20);
        }
        img{
            width: 100%;
            height: 100%;
            display: block;
            overflow: hidden;
        }
        h3{
            line-height: px2rem(44);
            height: px2rem(88);
            @include ellipsis-clamp(2);
        }
        p{
            margin-top: px2rem(16);
            font-size: px2rem(24);
            color: #919090;
        }
    }
    .btn-more{
        color: #999;
        display: block;
        text-align: center;
        font-size: px2rem(26);
        line-height: px2rem(70);
    }
}

.zt-list-film{
    &.has-commentary{
        .item-fr{
            height: px2rem(164);
        }
    }
    &.ext-list{
        .item-fr{
            h2{
                line-height: px2rem(40);
                margin-bottom: 2px;
            }
            p{
                margin-top: px2rem(16);
                line-height: 1;
                em{
                    color: $orange;
                }
            }
        }
    }
    .item-film{
        position: relative;
        border-top: 1px solid #f2f2f2;
        padding: px2rem(40) px2rem(24) px2rem(40) px2rem(30);
        @include clearfix;
        &:active{
            background: #f5f5f5;
        }
        
        &.active{
            .item-fr{
                height: auto;
                .btn-open{
                    top: px2rem(128);
                    &:before{
                        // transform: rotate(225deg);
                        @include rotate(225deg);
                    }
                }
            }
        }
    }
    .item-fl{
        position: relative;
        z-index: 2;
        width: px2rem(116);
        height: px2rem(164);
        float: left;
        border-radius: px2rem(6);
        overflow: hidden;
        background: #f2f2f2;
        img{
            width: 100%;
            height: 100%;
            display: block;
        }
    }
    .item-fr{
        position: relative;
        z-index: 2;
        padding: 0 px2rem(30) 0 px2rem(20);
        overflow: hidden;
        h2{
            font-size: px2rem(32);
            font-weight: bold;
            color: #181818;
            display: flex;
            vertical-align: middle;
            line-height: px2rem(50);
            em{
                font-size: px2rem(24);
                font-weight: normal;
                color: #919090;
                margin-left: px2rem(20);
            }
            .tag-new{
                display: inline-block;
                width: px2rem(76);
                height: px2rem(32);
                line-height: px2rem(36);
                vertical-align: middle;
                margin-left: px2rem(12);
                background: url(../img/icon-new.png) 0 0 /100% no-repeat;
            }
        }
        p{
            line-height: px2rem(50);
            font-size: px2rem(24);
            color: #919090;
            @include ellipsis();
        }
        .list-icons{
            margin-top: px2rem(10);
            display: flex;
            li{
                margin-right: px2rem(8);
            }
            i{
                display: block;
                width: px2rem(102);
                height: px2rem(44);
            }
            @for $i from 1 through 3{
                .icon-blueray#{$i}{
                    background: url(../img/icon-blueray#{$i}.png) no-repeat;
                    background-size: 100%;
                }
            }
        }
        .list-ups{
            @include clearfix();
            li{
                float: left;
                margin: px2rem(10) px2rem(26) px2rem(10) 0;
                color: #181818;
                font-size: px2rem(24);
                line-height: px2rem(44);
                @include webkitbox();
                img{
                    width: px2rem(44);
                    height: px2rem(44);
                    border-radius: 50%;
                    margin-right: px2rem(8);
                    display: table-row;
                    background: #f2f2f2;
                }
            }
        }
        .btn-open{
            position: absolute;
            top: px2rem(118);
            right: 0;
            width: px2rem(30);
            height: px2rem(30);
            padding: px2rem(4) 0 0 px2rem(4);
            &:before{
                content: '';
                display: block;
                width: px2rem(16);
                height: px2rem(16);
                border: 1px solid $orange;
                transform: rotate(45deg);
                border-top: none;
                border-left: none;
            }
        }
    }
    .item-link{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        &:active{
            background: #f5f5f5;
        }
    }
    .item-rank{
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        font-size: px2rem(22);
        color: #919090;
        line-height: px2rem(38);
        &.item-rank1{
            color: #ffffff;
            &:before{
                @include triangle-topleft(px2rem(30),#f94c4c);
            }
        }
        &.item-rank2{
            color: #ffffff;
            &:before{
                @include triangle-topleft(px2rem(30),#ff7e30);
            }
        }
        &.item-rank3{
            color: #ffffff;
            &:before{
                @include triangle-topleft(px2rem(30),#ffb027);
            }
        }
        &:before{
            content: '';
            position: absolute;
            display: block;
            @include triangle-topleft(px2rem(30),#efefef);
        }
        em{
            position: relative;
            margin-left: px2rem(10);
        }
    }
    .item-btns{
        .btn{
            display: inline-block;
            color: $orange;
            border: 1px solid $orange;
            line-height: px2rem(50);
            font-size: px2rem(24);
            text-align: center;
            padding: 0 px2rem(35);
            border-radius: px2rem(25);
            vertical-align: middle;
        }
    }
    .item-btns2{
        margin-top: px2rem(16);
        .btn{
            display: inline-block;
            color: $orange;
            font-size: px2rem(24);
            line-height: px2rem(28);
            height: px2rem(28);
            vertical-align: middle;
            padding-left: px2rem(40);
            margin-right: px2rem(40);
        }
        .btn-preview{
            background: url(../img/icon-preview.png) 0 0 / auto 100% no-repeat;
        }
        .btn-post{
            background: url(../img/icon-post.png) 0 0 / auto 100% no-repeat;
        }
    }
}