@charset "UTF-8";

$mainColor: #ff2b68;


.page-index {
    overflow: hidden;
    padding-bottom: px2rem(145);
    header {
        overflow: hidden;
        padding: 0 px2rem(25);
        
        
    }
    
    .block-content {
        width: px2rem(640);
        margin: 0 auto;
        padding-top: px2rem(70);
        padding-bottom: px2rem(160);    
        position: relative;    
        .block-ft {
            position: absolute ;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            
            a {
                color: #999;
                font-size: px2rem(24);
                &.cur {
                    color: #3db3f2;
                }
            }
            span {
                font-size: px2rem(24);
                color: #999;
                margin: 0 px2rem(10);
            }
        }
        .block-wrap {
            @include clearfix;
            margin-right: -px2rem(48);   
        }  
        .block-item {
            width: px2rem(180);
            float: left;
            margin-right: px2rem(48);
            margin-bottom: px2rem(45);
            position: relative;
            &.sign-in {
                &:before {
                    content: "";
                    position: absolute;
                    width: px2rem(58);
                    height: px2rem(58);
                    top: -px2rem(5);
                    right: px2rem(25);
                    background: url(../img/icon-tag.png) no-repeat;
                    background-size: 100% 100%; 
                    z-index: -5;
                }
            }
            &.follow {
                &:after {
                    content: "已关注";
                    position: absolute;
                    width: px2rem(80);
                    height: px2rem(32);
                    border-radius: 4px;
                    line-height: px2rem(32);
                    background: $mainColor;
                    color: #fff;
                    font-size: px2rem(20);
                    text-align: center;
                    top: px2rem(100);
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
            img {
                display: block;
                width: px2rem(120);
                height: px2rem(120);
                margin: 0 auto;
                border-radius: 50%;
                border: 1px solid #fff;
            }
            p {
                width: 100%;
                @include ellipsis;
                font-size: px2rem(26);
                color: #333;
                text-align: center;
                margin-top: px2rem(35);
            }
        }
    }
    
}
