@import "../sass/mixins";

$maincolor : #ff6b1a;

.v-mod-comment{
    background: #FFFFFF;
    font-size: px2rem(28);
    .comment-hd{
        text-align: center;
        padding: px2rem(70) 0 px2rem(20) 0;
        h2{
            span{
                display: inline-block;
                color: #181818;
                font-size: px2rem(32);
                padding: 0 px2rem(30);
                position: relative;
            }
        }
    }
    .comment-hd1{
        h2{
            span{
                em{
                    position: absolute;
                    top: px2rem(-20);
                    right: px2rem(-30);
                    color: $maincolor;
                    font-size: px2rem(20);
                    width: px2rem(55);
                    height: px2rem(40);
                    line-height: px2rem(32);
                    background: url(../../img/icon-num.png) no-repeat;
                    background-size: 100%;
                }
            }
        }
        ul{
            text-align: center;
            position: relative;
            margin-top: px2rem(30);
            &:before{
                content: '';
                position: absolute;
                left: 50%;
                margin-left: px2rem(-10);
                border-left: 1px solid #c8c8c8;
                height: 100%;
                transform: skewX(-30deg);
            }
            li{
                color: #181818;
                display: inline-block;
                margin: 0 px2rem(30);
                &.active{
                    color: $maincolor;
                }
            }
        }
    }
    .comment-hd2{
        h2{
            span{
                &:before{
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border-left: 1px solid #c8c8c8;
                    border-right: 1px solid #c8c8c8;
                    transform: skewX(-45deg);
                }
            }
        }
        p{
            color: $maincolor;
            margin-top: px2rem(12);
        }
    }
    .tag-cont{

    }
    .tag-panel{
        display: none;
        &.active{
            display: block;
        }
    }
    .tip-count{
        line-height: px2rem(70);
        color: #919090;
        padding: 0 px2rem(24);
        border-bottom: 1px solid #ebebeb;
        em{
            font-size: px2rem(24);
        }
    }
    .list-comment{
    }
    .item-comment{
        @include clearfix();
        padding: px2rem(20) px2rem(24) px2rem(30) px2rem(24);
    }
    .item-fl{
        width: px2rem(70);
        height: px2rem(70);
        border-radius: 50%;
        overflow: hidden;
        float: left;
        background: url(../../img/pic-head.png) no-repeat;
        background-size: 100%;
        img{
            display: block;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
    }
    .item-fr{
        margin-left: px2rem(84);
    }
    .info{
        display: flex;
        justify-content: space-between;
    }
    .info-fl{
        h4{
            color: #666666;
        }
        p{
            color: #919090;
            margin-top: px2rem(16);
        }
    }
    .info-fr{
        span{
            display: inline-block;
            height: px2rem(36);
            line-height: px2rem(36);
            padding-left: px2rem(48);
            color: #888888;
            font-size: px2rem(24);
            &.icon-zan{
                background: url(../../img/icon-zan.png) no-repeat;
                background-size: auto 100%;
            }
            &.icon-comment{
                background: url(../../img/icon-comment.png) no-repeat;
                background-size: auto 100%;
                margin-left: px2rem(30);
            }
        }
    }
    .cont{
        p{
            font-size: px2rem(32);
            color: #181818;
            line-height: px2rem(48);
            padding: px2rem(20) 0;
        }
    }
    .list-pic{
        @include clearfix;
        &.ext-list{
            .item-pic{
                width: px2rem(297);
                height: px2rem(297);
            }
        }
    }
    .item-pic{
        float: left;
        width: px2rem(180);
        height: px2rem(180);
        background-image: url(../../img/bg-pic.png);
        background-size: cover;
        margin: 0 px2rem(8) px2rem(8) 0;
    }
    .list-post{
        li{
            color: #181818;
            line-height: px2rem(50);
        }
        span{
            color: $maincolor;
        }
    }
    .tip{
        font-size: px2rem(24);
        color: #888888;
        line-height: px2rem(40);
        background: #f2f2f2;
        border-radius: px2rem(20);
        padding: 0 px2rem(30);
        margin-top: px2rem(20);
        @include ellipsis();
    }
    .btn-more{
        display: block;
        color: $maincolor;
        font-size: px2rem(32);
        line-height: px2rem(88);
        text-align: center;
        border: 1px solid #f59967;
        border-radius: px2rem(40);
        margin: 0 px2rem(24);
    }
    .no-comment{
        text-align: center;
        padding-top: px2rem(260);
        background: url(../../img/bg-comment.png) center px2rem(20) no-repeat;
        background-size: px2rem(240) auto;
        color: #999;
    }
}