_info.scss 2.85 KB
.guang-info {
    margin-bottom: 30rem / $pxConvertRem;
    padding: 0 0 24rem / $pxConvertRem 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;

    .info-author {
        display: block;
        width: 100%;

        .avatar {
            float: left;
            margin-top: 20rem / $pxConvertRem;
            width: 50rem / $pxConvertRem;
            height: 50rem / $pxConvertRem;
            margin-left: 30rem / $pxConvertRem;
            @include border-radius(50%);
        }

        .name {
            float: left;
            margin-left: 30rem / $pxConvertRem;
            padding: 30rem / $pxConvertRem 0;
            font-size: 28rem / $pxConvertRem;
            color: #000;
        }
    }

    &:last-child {
        margin-bottom: 0;
    }

    .info-img {
        position: relative;
        width: 100%;

        img {
            display: block;
            width: 100%;
        }
    }

    .info-match {
        position: absolute;
        top: 0;
        left: 0;
        width: 130rem / $pxConvertRem;
        height: 50rem / $pxConvertRem;
        line-height: 50rem / $pxConvertRem;
        font-size: 28rem / $pxConvertRem;
        color: #fff;
        background: #000;
        text-align: center;
        text-decoration: none;
        z-index: 1;
    }   

    .info-tag {
        position: absolute;
        top: 0;
        left: 105rem / $pxConvertRem;
        height: 50rem / $pxConvertRem;
        width: 50rem / $pxConvertRem;

        &.collocation {
            background: image-url('guang/info/collocation.png');
            background-size: 100% 100%;
        }

        &.fashion-good {
            background: image-url('guang/info/fashion-good.png');
            background-size: 100% 100%;
        }

        &.fashion-man {
            background: image-url('guang/info/fashion-man.png');
            background-size: 100% 100%;
        }

        &.tip {
            background: image-url('guang/info/tip.png');
            background-size: 100% 100%;
        }

        &.topic {
            background: image-url('guang/info/topic.png');
            background-size: 100% 100%;
        }
    }

    .info-deps {
        margin: 32rem / $pxConvertRem 0 0 0;
        padding: 0 40rem / $pxConvertRem 0 30rem / $pxConvertRem;
        
        .info-title-container {
            text-decoration: none;
            color: #000;
        }
        
        .info-title{
            line-height: 44rem / $pxConvertRem;
            color: #000;
            font-size: 40rem / $pxConvertRem;
            font-weight:bold;

        }

        .info-text {
            margin: 16rem / $pxConvertRem 0 0 0;
            line-height: 46rem / $pxConvertRem;
            font-size: 28rem / $pxConvertRem;
            color: #444;
        }

        .time-view-like-share {
            margin-top: 16rem / $pxConvertRem;
        }
    }
}