JenkinsTest/page/act/scss/invite.scss

@import "../../../sass/base/mixins";

.page-act-invite{
    position: relative;
    min-height: 100%;
    background: #ffffff;
    padding: px2rem(120) 0 px2rem(60) 0;
    color: #333333;
    text-align: center;
    background: url(./../../img/bg-act-invite.png) no-repeat #ffffff;
    background-size: px2rem(250) auto;
    padding-top: px2rem(60);
    &.is-app{
        padding-top: px2rem(280);
        .invite-info{
            width: px2rem(454);
            height: px2rem(296);
            padding-top: px2rem(110);
            .u-head{
                top: px2rem(-78);
                img{
                    width: px2rem(140);
                    height: px2rem(140);
                }
            }
            .u-code{
                border-bottom: 1px solid #cacaca;
            }
        }
    }
    h1{
        color: #292929;
        font-size: px2rem(40);
        line-height: px2rem(60);
        margin-bottom: px2rem(100);
    }
    .invite-info{
        position: relative;
        background: #FFF;
        border-radius: px2rem(30);
        width: px2rem(414);
        height: px2rem(228);
        margin: 0 auto;
        box-shadow: 0 0 px2rem(40) px2rem(10) #dedede;
        text-align: center;
        padding-top: px2rem(80);
        .u-head{
            position: absolute;
            top: px2rem(-58);
            left: 50%;
            transform: translateX(-50%);
            background: #FFF;
            padding: px2rem(8);
            img{
                display: block;
                width: px2rem(100);
                height: px2rem(100);
                overflow: hidden;
                border-radius: 50%;
            }
        }
        .u-title{
            font-size: px2rem(28);
        }
        .u-code{
            font-size: px2rem(44);
            line-height: px2rem(70);
            width: px2rem(288);
            margin: px2rem(30) auto px2rem(30) auto;
            letter-spacing: px2rem(12);
        }
        .u-tips{
            color: #999999;
            font-size: px2rem(24);
            em{
                color: #ff6b1a;
            }
        }
    }
    .invite-btn{
        .btn-copy{
            color: #fff;
            font-size: px2rem(32);
            line-height: px2rem(88);
            width: px2rem(610);
            margin: px2rem(66) auto px2rem(38) auto;
            border-radius: .96rem;
            background-image: -webkit-radial-gradient(ellipse at right bottom,#ff6b1a,#ff8e2a);
            background: radial-gradient(ellipse at right bottom,#ff6b1a,#ff8e2a);
            box-shadow: 1px 2px 8px 1px #fbb06d;
            &:active{
                opacity: .8;
            }
        }
        p{
            color: #999999;
            font-size: px2rem(24);
        }
    }
    .invite-share{
        h2{
            position: relative;
            font-size: px2rem(32);
            line-height: px2rem(70);
            margin: px2rem(30) 0 px2rem(30) 0;
            &:before,&:after{
                content: '';
                position: absolute;
                top: 50%;
                transform: translateY(50%);
                width: px2rem(190);
                height: 1px;
                background: #d8d8d8;
            }
            &:before{
                left: px2rem(90);
            }
            &:after{
                right: px2rem(90);
            }
        }
        ul{
            display: flex;
            justify-content: center;
        }
        li{
            width: px2rem(120);
            color: #181818;
            font-size: px2rem(24);
        }
        i{
            display: inline-block;
            width: px2rem(44);
            height: px2rem(44);
            margin-bottom: px2rem(20);
        }
        @for $i from 0 through 4{
            .icon-share#{$i}{
                background: url(./../../img/icon-share#{$i}.png) center center no-repeat; 
                background-size: auto 100%;
            }
        }
        .icon-share0,.icon-share2{
            background-size: 100% auto;
        }
    }
    .invite-list{
        margin-top: px2rem(60);
        h2{
            color: #181818;
            font-size: px2rem(28);
            margin-bottom: px2rem(30);
            em{
                color: #ff6b1a;
            }
        }
        ul{
        }
        li{
            display: inline-block;
            width: px2rem(120);
            color: #666666;
            font-size: px2rem(24);
            margin: 0 px2rem(10) px2rem(15);
            overflow: hidden;
        }
        img{
            display: inline-block;
            width: px2rem(90);
            height: px2rem(90);
            overflow: hidden;
            border-radius: 50%;
            margin-bottom: px2rem(14);
        }
        p{
            white-space: nowrap;
            font-size: px2rem(20);
        }
        .is-empty{
            color: #999999;
            font-size: px2rem(28);
            padding-top: px2rem(108);
            background: url(./../../img/icon-share-gif.png) center 0 no-repeat;
            background-size: auto px2rem(80);
        }
    }

    .invite-add{
        img{
            width: 100%;
            overflow: hidden;
            display: block;
        }
        .box-add2{
            margin-top: px2rem(20);
            background: url(./../../img/act/bg-invite3.jpg) no-repeat;
            background-size: 100% auto;
            color: #ffffff;
            padding: px2rem(140) 0 px2rem(100) 0;
            height: px2rem(767);
            h2{
                font-size: px2rem(40);
                line-height: px2rem(70);
            }
            p{
                font-size: px2rem(24);
                line-height: px2rem(50);
            }
            ul{
                @include clearfix();
                padding: px2rem(40) 0 0 px2rem(20);
            }
            li{
                float: left;
                width: px2rem(196);
                margin-right: px2rem(20);
                span{
                    display: block;
                }
                a{
                    color: #FFFFFF;
                }
            }
            .item-cover{
                height: px2rem(276);
                position: relative;
                em{
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    width: 100%;
                    color: #ff6b1a;
                    font-size: px2rem(28);
                    line-height: px2rem(40);
                    padding: 0 px2rem(5);
                    text-align: right;
                    @include gradient(rgba(0,0,0,0),rgba(0,0,0,1));
                }
                img{
                    height: 100%;
                }
            }
            .item-title{
                font-size: px2rem(30);
                line-height: px2rem(70);
                @include ellipsis();
            }
            .item-num{
                font-size: px2rem(24);
            }
        }
        .box-add3{
            h2{
                color: #ff5e00;
                font-size: px2rem(40);
                margin-top: px2rem(50);
            }
        }
    }

    .invite-sugg{
        width: 100%;
        position: fixed;
        bottom: 0;
        line-height: px2rem(60);
        font-size: px2rem(24);
        background: #FFF;
        span{
            color: #ff6b1a;
            text-decoration: underline;
        }
    }
    .v-mod-footer{
        text-align: left;
    }
}