JenkinsTest/page/video/scss/_detail.scss

@import "./mixins";

$maincolor : #ff6b1a;

.page-video-detail{
    overflow: hidden;
    .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);
        }
        .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{
                border-top: 1px solid #dcdcdc;
                &:first-child{
                    border: 0;
                }
            }
            a{
                padding: px2rem(20) px2rem(24);
                display: flex;
                color: #181818;
            }
            .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);
                }
            }
        }
        .btn-more{
            color: #999;
            display: block;
            text-align: center;
            font-size: px2rem(26);
            line-height: px2rem(70);
            &:after{
                content: '';
                position: relative;
                top: px2rem(-6);
                display: inline-block;
                width: px2rem(10);
                height: px2rem(10);
                border: 1px solid #999;
                border-top: 0;
                border-right: 0;
                vertical-align: middle;
                transform: rotate(-45deg);
                margin-left: px2rem(10);
            }
        }
    }
    .mod-album{
        margin-top: px2rem(16);
        background: #FFFFFF;
        padding: px2rem(10) px2rem(24) 0 px2rem(24);
        h2{
            line-height: px2rem(90);
            font-size: px2rem(32);
        }
        .list-album{
            white-space: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            li{
                display: inline-block;
                width: px2rem(306);
                height: px2rem(180);
                margin-right: px2rem(16);
                overflow: hidden;
                text-align: center;
                position: relative;
                vertical-align: middle;
                background-size: cover;
                background-position: center;
                &.item-preview{
                    font-size: px2rem(28);
                    a{
                        position: relative;
                        display: block;
                        height: 100%;
                    }
                    .mask{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0,0,0,0.5);
                    }
                    h3{
                        position: relative;
                        color: #888888;
                        display: inline-block;
                        padding: 0 px2rem(40);
                        border-bottom: 1px solid #d1d1d1;
                        line-height: px2rem(60);
                        margin: px2rem(34) 0 px2rem(14) 0;
                    }
                    p{
                        position: relative;
                        color: $maincolor;
                    }
                }
            }
        }
        .btn-more{
            color: #999;
            display: block;
            text-align: center;
            font-size: px2rem(24);
            line-height: px2rem(100);
        }
    }
}