.video-play {
    .video-list__item:first-child:before{
        height: 0;
    }
    .video-list__item:before{
        content: '';
        display: block;
        background: #F7F7F7;
        height: px2rem(20);
    }
    .user-info {
        position: relative;
        @include webkitbox();
        height: px2rem(80);
        -webkit-box-align: center;
        padding: 0 px2rem(25);
        line-height: px2rem(80);
        .user-icon {
            display: block;
            width: px2rem(62);
            height: px2rem(62);
            border-radius: 50%;
            overflow: hidden;
        }
        .user-name {
            margin-left: px2rem(20);
            color: #333;
        }
        .follow-btn {
            position: absolute;
            right: px2rem(25);
            top: 50%;
            height: px2rem(44);
            cursor: pointer;
            background-color: transparent;
            font-size: 13px;
            line-height: px2rem(40);
            transform: translateY(-50%);
            &.not-follow {
                border: 1px solid $highLightColor;
                color: $highLightColor;
            }
            &.followed {
                border: 1px solid #cccccc;
                color: #cccccc;
            }
        }
    }
    .video-content {
        height: px2rem(420);
        overflow: hidden;
        video{
            height: 100%;
            width: 100%;
        }
    }
    .video-info {
        padding: 0 px2rem(25);
    }
    .video-title {
        @include webkitbox();
        -webkit-box-pack: justify;

        border-bottom: $baseBorder;
        span{
            @include inline-block;
            @include ellipsis;
            width: px2rem(550);
            line-height: px2rem(78);
        }
        .detail-btn {
            position: relative;
            display: block;
            -webkit-appearance: none;
            padding-right: px2rem(45);
            background-color: transparent;
            color: #cccccc;
            font-size: 12px;
            line-height: px2rem(78);
            &:before,
            &:after {
                border: px2rem(12) solid transparent;
                border-top: px2rem(12) solid #fff;
                width: 0;
                height: 0;
                position: absolute;
                top: px2rem(35);
                right: 0;
                content: ' ';
                transition: transform .5s ease;
            }
            &:before {
                transform-origin: 50% px2rem(5);
            }
            &:after {
                transform-origin: 50% px2rem(7);
            }
            &:before {
                border-top-color: #cccccc;
                top: px2rem(37);
            }
            &.on:before,
            &.on:after {
                transform: rotate(-180deg);
            }
        }
    }
    .video-info-detail {
        border-bottom: $baseBorder;
        .video-mata-info {
            @include webkitbox();
            -webkit-box-pack: justify;
            margin: px2rem(25) 0 px2rem(40);
            font-size: 12px;
            color: #999999;
            label {
                margin-left: px2rem(25);
            }
            .play-times {
                display: block;
                height: 12px;
                margin-left: 0;
                padding-left: px2rem(40);
                line-height: 12px;
                font-size: $smallFontSize;
                color: #cccccc;
                background: url(../img/play_time_icon.png) no-repeat left center;
                background-size: auto 100%;
            }
        }
        .video-desc {
            font-size: 13px;
            line-height: px2rem(36);
            color: #333333;
        }
        .video-tags {
            padding-top: px2rem(25);
            @include clearfix;
            label {
                float: left;
                font-size: 12px;
                color: #999;
                line-height: px2rem(44);
            }
            button {
                float: left;
                height: px2rem(44);
                margin-left: px2rem(25);
                background-color: transparent;
                line-height: px2rem(40);
                border: 1px solid #cccccc;
                margin-bottom: px2rem(17);
                a{
                    color: #cccccc;
                }
            }
        }
    }
    //.video-user-ops {
    //    @include webkitbox();
    //    -webkit-box-align: center;
    //    padding: 0 px2rem(25);
    //    height: px2rem(98);
    //    line-height: px2rem(98);
    //    a,span {
    //        @include webkitbox();
    //        -webkit-box-align: center;
    //        -webkit-box-pack: center;
    //        width: 0;
    //        height: 100%;
    //        cursor: pointer;
    //        @include flex(1);
    //        color: #999;
    //        //line-height: px2rem(98);
    //        &.clicked{
    //            color: #e94647;
    //        }
    //        &:first-child {
    //            -webkit-box-pack: start;
    //        }
    //        &:last-child {
    //            -webkit-box-pack: end;
    //        }
    //        &:before {
    //            content: '';
    //            display: block;
    //            height: 100%;
    //            margin-right: px2rem(25);
    //            vertical-align: middle;
    //            background-position: center;
    //            background-repeat: no-repeat;
    //            background-size: 100% auto;
    //        }
    //    }
    //    .video-share {
    //        &:before {
    //            width: px2rem(27);
    //            background-image: url(../img/video_share_icon.png);
    //        }
    //    }
    //    .video-agree {
    //        &:before {
    //            width: px2rem(27);
    //            background-image: url(../img/video_agree_icon.png);
    //        }
    //        &.clicked:before {
    //            background-image: url(../img/icon-like-clicked.png);
    //        }
    //
    //    }
    //    .video-collect {
    //        &:before {
    //            width: px2rem(33);
    //            background-image: url(../img/video_collect_icon.png);
    //        }
    //        &.clicked:before {
    //            background-image: url(../img/video_collect_icon-clicked.png);
    //        }
    //    }
    //    .video-comment {
    //        &:before {
    //            width: px2rem(27);
    //            background-image: url(../img/comment_num_icon.png);
    //        }
    //        &.clicked:before {
    //            background-image: url(../img/comment_num_icon-clicked.png);
    //        }
    //    }
    //}
    .video-user-ops {
        padding: 0 px2rem(25);
        height: px2rem(98);
        a,span {
            @include inline-block;
            width: px2rem(165);
            height: 100%;
            text-align: center;
            cursor: pointer;
            color: #999;
            line-height: px2rem(98);
            &.clicked{
                color: #e94647;
            }
            &:first-child {
                text-align: left;
            }
            &:last-child {
                text-align: right;
            }
            em{
                vertical-align: middle;
                @include inline-block;
                padding-left: px2rem(60);
                height: px2rem(35);
                background-image: url("../img/video_share_icon.png");
                background-repeat: no-repeat;
                background-size: px2rem(27) auto;
                line-height: px2rem(35);
            }

        }
        //.video-share {
        //    &:before {
        //        width: px2rem(27);
        //        background-image: url(../img/video_share_icon.png);
        //    }
        //}
        .video-agree {
            em {
                width: px2rem(27);
                background-image: url(../img/video_agree_icon.png);
                background-position: 0 px2rem(6);
            }
            &.clicked em {
                background-image: url(../img/icon-like-clicked.png);
            }

        }
        .video-collect {
            em {
                width: px2rem(33);
                background-image: url(../img/video_collect_icon.png);
                background-position: 0 px2rem(6);
            }
            &.clicked em {
                background-image: url(../img/video_collect_icon-clicked.png);
            }
        }
        .video-comment {
            em {
                margin-right: px2rem(20);
                width: px2rem(27);
                background-image: url(../img/comment_num_icon.png);
                background-position: 0 px2rem(5);
            }
            &.clicke em {
                background-image: url(../img/comment_num_icon-clicked.png);
            }
        }
    }
}

