dwweb-pc/2018专题/1812古剑奇谭/src/sass/global.scss

@charset "UTF-8";
$yahei: "Microsoft YaHei",
SimHei,
sans-serif;
$maincolor: #e94646;
$titleFont: PingFang sc,
"Helvetica Neue",
Helvetica,
Tahoma,
Arial,
"Liberation Sans",
"Hiragino Sans GB",
"Source Han Sans CN",
"Source Han Sans SC",
"Microsoft YaHei",
"Wenquanyi Micro Hei",
"WenQuanYi Zen Hei",
"ST Heiti",
SimHei,
"WenQuanYi Zen Hei Sharp",
sans-serif;
@import "lego/lego";
@import "base/mixins";
@import "base/ui-dialog";
@import "page/gallery";
@import "page/bindWx";
$yellow: #CEBE95;
$yellow-lighter: #CAB98D;
html{
    font-size: 12px;
    height: 100%; // overflow-y: scroll;
    font: 12px/1.5 PingFang sc, "Helvetica Neue", Helvetica, Tahoma, Arial, SimSun, TW-Sung, "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", serif; // font-family: $yahei;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body{
    font-family: '微软雅黑';
    a{
        text-decoration: none;
        &:hover{
            text-decoration: underline;
        }
    }
    p,
    a,
    span,
    em,
    i,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6{
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }
}
a:focus{
    outline: none;
}
.hide{
    display: none;
}

.clearfix{
    @include clearfix();
}
.wrapper{
    padding: 0;
}
.page-index{
    position: relative;
    .mod-part{
        position: relative;
        background: no-repeat top center;
        .mod-title{
            height: 53px;
            background: no-repeat top center;
            @for $i from 1 through 4{
                &.title#{$i}{
                    background-image: url(../img/bg-title#{$i}.png);
                }
            }
        }
        .mod-inner{
            width: 1200px;
            margin: 0 auto;
            .inner-left{
                float: left;
            }
            .inner-right{
                float: right;
            }
            .bg-horn{
                height: 35px;
                width: 37px;
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                background: url(../img/bg-horn.png) no-repeat top left;
            }
        }
    }
    .mod-float{
        position: fixed;
        z-index: 999;
        right: 60px;
        bottom: 140px;
        &::after{
            height: 380px;
            width: 100%;
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            content: '';
            display: block;
            box-shadow: 0 39px 49px rgba(#18233e, 0.3);
        }
        .mod-inner{
            height: 365px;
            width: 147px;
            padding-top: 20px;
            background: url(../img/bg-float.png) no-repeat top center;
            position: relative;
            z-index: 3;
            .QRcode{
                width: 107px;
                display: block;
                margin: 0 auto;
            }
            .scan-note{
                font-size: 12px;
                color: #fff;
                line-height: 20px;
                text-align: center;
                margin: 26px 0;
            }
            .float-nav{
                font-size: 14px;
                line-height: 32px;
                text-align: center;
                a{
                    width: 85px;
                    display: block;
                    margin: 0 auto;
                    color: #ebc57c;
                    &:hover{
                        text-decoration: underline;
                    }
                    span{
                        padding-right: 15px;
                        background: url(../img/bg-float-arrow.png) right center no-repeat;
                    }
                }
            }
        }
    }
    .mod-banner{
        height: 1010px;
        background-image: url(../img/bg-banner.jpg);
        // .video-play{
        //     height: 96px;
        //     width: 96px;
        //     cursor: pointer;
        //     position: absolute;
        //     top: 480px;
        //     left: 50%;
        //     margin-left: 126px;
        // }
    }
    .mod-giftbag{
        height: 1142px;
        background-image: url(../img/bg-giftbag.jpg);
        .mod-inner{
            padding-top: 21px;
            .part-head{
                height: 45px;
                padding-top: 22px;
                em,span{
                    font-size: 24px;
                    color: #a6653e;
                    font-family: arial,'微软雅黑';
                    text-shadow: 0 3px 6px rgba(#4c4e55, 0.2);
                    float: left;
                    position: relative;
                    z-index: 3;
                    &::before, &::after{
                        height: 100%;
                        width: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        content: attr(data-text);
                        display: block;
                    }
                    &::before{
                        color: #0c0603;
                        z-index: 1;
                        -webkit-mask: linear-gradient(transparent 30%, #000);
                    }
                    &::after{
                        color: #a6653e;
                        z-index: 2;
                        -webkit-mask: linear-gradient(#000, transparent);
                    }
                }
                em{
                    font-size: 24px;
                    line-height: 30px;
                    // font-weight: bold;
                }
                span{
                    font-size: 16px;
                    margin: 7px 0 0 12px;
                    line-height: 21px;
                }
                .arrow{
                    height: 7px;
                    width: 10px;
                    margin-left: 11px;
                    margin-top: 15px;
                    float: left;
                    position: relative;
                    z-index: 3;
                    i{
                        height: 100%;
                        width: 100%;
                        background: url(../img/bg-part-head1.png) center no-repeat;
                        position: relative;
                        z-index: 3;
                        display: block;
                    }
                    &::after{
                        height: 4px;
                        width: 4px;
                        box-shadow: 0 0 5px rgba(#000, 0.6);
                        content: '';
                        display: block;
                        position: absolute;
                        z-index: -1;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%) rotate(45deg);
                    }
                }
                b{
                    font-size: 14px;
                    color: #030917;
                    float: left;
                    position: relative;
                    bottom: -6px;
                    margin-left: 22px;
                }
            }
            .part-inner{
                border: 2px #A28E6A solid;
                border-radius: 3px;
                position: relative;
                z-index: 3;
            }
            .inner-left{
                width: 339px;
                .register{
                    .part-inner{
                        height: 464px;
                        border: none;
                        border-radius: 0;
                        padding-top: 10px;
                        background: url(../img/bg-register.png) top center no-repeat;
                        iframe{
                            width: 339px;
                            margin-left: 40px;
                        }
                    }
                }
                .download{
                    .part-head{
                        em, span{
                            color: #fff3dd;
                            &::before{
                                color: #ebc57c;
                                z-index: 1;
                                -webkit-mask: linear-gradient(transparent 30%, #000);
                            }
                            &::after{
                                color: #fff3dd;
                                z-index: 2;
                                -webkit-mask: linear-gradient(#000, transparent);
                            }
                        }
                        i{
                            background-image: url(../img/bg-part-head2.png);
                        }
                    }
                    .part-inner{
                        height: 340px;
                        background: url(../img/bg-download1.jpg) no-repeat top center;
                        .bg{
                            height: 74px;
                            width: 109px;
                            position: absolute;
                            left: 96px;
                            top: -74px;
                            background: url(../img/bg-download2.png) no-repeat top center;
                        }
                        .btn-warp{
                            height: 147px;
                            width: 293px;
                            position: absolute;
                            left: 21px;
                            bottom: 18px;
                            padding-top: 4px;
                            background: url(../img/btn-download.png) no-repeat top center;
                            .btn{
                                height: 58px;
                                width: 275px;
                                display: block;
                                margin: 0 auto 21px;
                            }
                        }
                    }
                }
            }
            .inner-right{
                width: 829px;
                .gift{
                    .part-inner{
                        height: 868px;
                        padding-top: 15px;
                        border-top-left-radius: 0;
                        .lingqu-wrap{
                            .linqu-sn{
                                display: none;
                            }
                            &.is-active{
                                .linqu-sn{
                                    display: block;
                                }
                                .btn-lingqu{
                                    display: none;
                                }
                            }
                        }
                        .item-title{
                            font-size: 20px;
                            color: #ffdb9d;
                            line-height: 66px;
                            text-align: center;
                            font-weight: bold;
                            font-family: '微软雅黑';
                        }
                        .item-tip{
                            font-size: 16px;
                            color: #fff;
                            line-height: 21px;
                            margin: 12px auto;
                        }
                        .linqu-sn{
                            display: table;
                            margin-left: 132px;
                            input{
                                height: 39px;
                                width: 205px;
                                border: 1px #4d5a86 solid;
                                box-sizing: border-box;
                                padding: 0 8px;
                                background: none;
                                font-size: 14px;
                                color: #D0D2D6;
                                float: left;
                                outline: none;
                                background: #323B54;
                            }
                        }
                        .btn-copy,.btn-active{
                            display: inline-block;
                            height: 40px;
                            cursor: pointer;
                            color: transparent;
                            font-size: 0;
                            margin-left: 10px;
                            vertical-align: middle;
                            box-shadow: 0 2px 10px rgba(#030a1b, 0.4);
                        }
                        .btn-copy{
                            width: 85px;
                            background: url(../img/bg-copy.jpg) no-repeat top center;
                        }
                        .btn-active{
                            width: 135px;
                            background: url(../img/bg-active.jpg) no-repeat top center;
                        }
                        .gift-btn{
                            height: 40px;
                            width: 135px;
                            margin: 0 auto;
                            cursor: pointer;
                            background: no-repeat top center;
                            &.receive-btn{
                                background-image: url(../img/bg-receive.jpg);
                            }
                            &.activation-btn{
                                background-image: url(../img/bg-active.jpg);
                            }
                        }
                        .gift-item{
                            width: 730px;
                            margin: 0 auto;
                            &.receive{
                                padding-bottom: 49px;
                                margin-bottom: 25px;
                                border-bottom: 1px #4d5a86 solid;
                                .gift-warp{
                                    height: 103px;
                                    .gift-switch{
                                        height: 60px;
                                        width: 22px;
                                        background: url(../img/gift-switch.png) no-repeat top left;
                                        display: block;
                                        float: left;
                                        position: relative;
                                        &::after{
                                            height: 0;
                                            width: 0;
                                            content: '';
                                            display: block;
                                            position: absolute;
                                            top: 50%;
                                            left: 50%;
                                            border: 8px #3A425A solid;
                                        }
                                        &.prev{
                                            &::after{
                                                margin: -8px 0 0 -12px;
                                                border-color: transparent #3A425A transparent transparent;
                                            }
                                            &.is-disabled::after{
                                                cursor: default;
                                                border-color: transparent #E2E2E2 transparent transparent;
                                            }
                                        }
                                        &.next{
                                            background-position: -22px top;
                                            &::after{
                                                margin: -8px 0 0 -4px;
                                                border-color: transparent transparent transparent #3A425A;
                                            }
                                            &.is-disabled::after{
                                                cursor: default;
                                                border-color: transparent transparent transparent #E2E2E2;
                                            }
                                        }
                                    }
                                    .gift-slider{
                                        height: 103px;
                                        width: 686px;
                                        float: left;
                                        overflow: hidden;
                                        ul{
                                            position: relative;
                                            li{
                                                width: 98px;
                                                float: left;
                                                p{
                                                    height: 58px;
                                                    width: 58px;
                                                    background: #171C2D;
                                                    border: 1px #4d5a86 solid;
                                                    margin: 0 auto;
                                                    img{
                                                        height: 100%;
                                                        width: 100%;
                                                        display: block;
                                                    }
                                                }
                                                em{
                                                    font-size: 12px;
                                                    color: #bba271;
                                                    line-height: 29px;
                                                    text-align: center;
                                                    font-weight: bold;
                                                    display: block;
                                                    text-overflow: ellipsis;
                                                    overflow: hidden;
                                                    white-space: nowrap;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            &.activation{
                                .item-title{
                                    height: 45px;
                                    line-height: 45px;
                                    padding-top: 8px;
                                }
                                ul{
                                    li{
                                        font-size: 16px;
                                        color: #8799d2;
                                        line-height: 28px;
                                        overflow: hidden;
                                        margin-top: 8px;
                                        &:first-child{
                                            margin-top: 0;
                                        }
                                        p,span{
                                            float: left;
                                        }
                                        p{
                                            color: #d2ddff;
                                            font-weight: bold;
                                        }
                                        span{
                                            width: 90%;
                                        }
                                    }
                                }
                                .activation-btn{
                                    margin-top: 6px;
                                }
                            }
                        }
                    }
                }
            }
            .transparent-bg{
                position: absolute;
                z-index: -1;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: #1A2039;
                opacity: 0.7;
                filter: alpha(opacity=70);
            }
        }
    }
    .mod-luckdraw{
        height: 699px;
        background-image: url(../img/bg-luckdraw.jpg);
        .mod-inner{
            .lottery-tip{
                height: 90px;
                font-size: 14px;
                color: #ebf1ff;
                line-height: 36px;
                text-align: center;
                padding-top: 12px;
                .top{
                    font-size: 24px;
                    font-weight: bold;
                }
                em{
                    font-size: 20px;
                    color: #ea1003;
                    line-height: 40px;
                }
            }
            .lottery-cot{
                position: relative;
                li{
                    height: 136px;
                    width: 136px;
                    position: absolute;
                    z-index: 1;
                    &.active{
                        .img-wrap{
                            span{
                                background-image: url(../img/bg-lottery-item-active.png);
                            }
                        }
                    }
                    &.left{
                        left: 50%;
                    }
                    &.right{
                        right: 50%;
                    }
                    &.item1{
                        top: 162px;
                        margin-left: -486px;
                    }
                    &.item2{
                        top: 162px;
                        margin-left: -282px;
                        z-index: 2;
                    }
                    &.item3{
                        top: 53px;
                        margin-left: -174px;
                        p{
                            top: -28px;
                        }
                    }
                    &.item4{
                        top: 53px;
                        margin-right: -174px;
                        p{
                            top: -28px;
                        }
                    }
                    &.item5{
                        top: 162px;
                        margin-right: -282px;
                        z-index: 2;
                    }
                    &.item6{
                        top: 162px;
                        margin-right: -486px;
                    }
                    &.item7{
                        top: 273px;
                        margin-right: -174px;
                    }
                    &.item8{
                        top: 273px;
                        margin-left: -174px;
                    }
                    &.is-active{
                        .img-wrap{
                            border-color: #fcd538;
                        }
                    }
                    &.btn-lottery{
                        height: 191px;
                        width: 190px;
                        top: 136px;
                        left: 50%;
                        margin-left: -95px;
                        cursor: pointer;
                        position: relative;
                        &::after{
                            height: 131px;
                            width: 130px;
                            content: '';
                            display: block;
                            position: absolute;
                            z-index: -1;
                            top: 30px;
                            left: 30px;
                            box-shadow: 0 0 54px rgba(#ffac35, 0.12);
                            transform: rotate(45deg);
                        }
                        span{
                            height: 100%;
                            width: 100%;
                            display: block;
                            background: url(../img/lottery-btn.png) no-repeat center;
                            position: relative;
                            z-index: 3;
                        }
                    }
                    .img-wrap{
                        height: 100%;
                        width: 100%;
                        transform: rotate(45deg);
                        background: #141415;
                        position: relative;
                        overflow: hidden;
                        span{
                            height: 100%;
                            width: 100%;
                            display: block;
                            position: absolute;
                            z-index: 3;
                            top: 0;
                            left: 0;
                            background: url(../img/bg-lottery-item.png) center no-repeat;
                        }
                        img{
                            height: 190px;
                            width: 190px;
                            position: relative;
                            top: 50%;
                            left: 50%;
                            margin: -95px 0 0 -95px;
                            display: block;
                            transform: rotate(-45deg);
                        }
                    }
                    p{
                        font-size: 14px;
                        color: #333;
                        line-height: 21px;
                        text-align: center;
                        font-weight: bold;
                        text-shadow: 1px 0 #fff,0 1px #fff,-1px 0 #fff,0 -1px #fff;
                        position: absolute;
                        left: 0;
                        right: 0;
                        bottom: -28px;
                    }
                }
            }
        }
    }
    .mod-cash{
        height: 883px;
        padding-top: 97px;
        background-image: url(../img/bg-cash.jpg);
        .mod-inner{
            margin-top: 49px;
            .redbag{
                height: 671px;
                width: 521px;
                float: left;
                margin-left: 119px;
                background: url(../img/bg-redbag.jpg) no-repeat top center;
                .title{
                    height: 125px;
                    font-size: 24px;
                    // color: #fedca9;
                    color: #FFF3DD;
                    font-weight: bold;
                    line-height: 42px;
                    text-align: center;
                    padding-top: 65px;
                    .bottom{
                        color: #fedca9;
                        position: relative;
                        &::before, &::after{
                            width: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: attr(data-text);
                            display: block;
                        }
                        &::before{
                            color: #fedca9;
                            z-index: 2;
                            -webkit-mask-image: linear-gradient(transparent 60%, #000 25%);
                        }
                        &::after{
                            color: #FFF3DD;
                            z-index: 1;
                            -webkit-mask-image: linear-gradient(#000 25%, transparent 60%);
                        }
                    }
                }
                .get-red{
                    height: 134px;
                    width: 134px;
                    display: block;
                    margin: 0 auto;
                    background: url(../img/btn-redbag.png?__sprite) no-repeat;
                    &.is-disabled{
                        background: url(../img/btn-redbag-disabled.png?__sprite) no-repeat;
                    }
                }
                .remain-time{
                    font-size: 16px;
                    color: #e4c392;
                    line-height: 21px;
                    text-align: center;
                    margin-top: 50px;
                    em{
                        color: #ff6600;
                        font-weight: bold;
                    }
                }
                .desc{
                    width: 320px;
                    margin: 34px auto 0;
                    text-align: justify;
                    font-size: 16px;
                    color: #ffddaa;
                    line-height: 29px;
                    padding: 14px 16px 14px 18px;
                    border: 1px #957244 solid;
                }
            }
            .step{
                height: 670px;
                width: 341px;
                float: right;
                margin-right: 120px;
                position: relative;
                background: url(../img/bg-step.png) no-repeat top center;
                .title{
                    font-size: 24px;
                    color: #fff;
                    font-weight: bold;
                    line-height: 80px;
                    text-align: center;
                    padding-top: 17px;
                }
                li{
                    width: 290px;
                    margin: 0 auto;
                    font-size: 16px;
                    color: #ffddaa;
                    line-height: 28px;
                    &.note{
                        font-size: 14px;
                        color: #9aacff;
                        line-height: 25px;
                        margin: 14px auto;
                    }
                }
                .auth{
                    height: 58px;
                    width: 309px;
                    display: block;
                    cursor: default;
                    background: url(../img/bg-auth.png) no-repeat top center;
                    position: absolute;
                    bottom: 73px;
                    left: 50%;
                    margin-left: -154px;
                    &.authed{
                        background-image: url(../img/bg-authed.png);
                        cursor: auto;
                    }
                    &.to-auth{
                        cursor: pointer;
                    }
                }
            }
        }
    }
    .mod-preview{
        height: 801px;
        padding-top: 99px;
        background-image: url(../img/bg-preview.jpg);
        .mod-inner{
            position: relative;
            margin-top: 62px;
            .preview-slider{
                height: 556px;
                width: 988px;
                margin: 0 auto;
                position: relative;
                a{
                    height: 552px;
                    width: 984px;
                    padding: 2px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    &.dg-center{
                        .bg{
                            display: block;
                        }
                    }
                    img{
                        height: 100%;
                        width: 100%;
                        display: block;
                    }
                    .bg{
                        display: none;
                        height: 100%;
                        width: 100%;
                        position: absolute;
                        z-index: 2;
                        top: 0;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        background: url(../img/bg-preview-slider.png) top center no-repeat;
                    }
                    .txtbox{
                        position: absolute;
                        z-index: 3;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        font-size: 14px;
                        color: #fff;
                        line-height: 25px;
                        text-align: left;
                        padding: 50px 18px 6px;
                        box-sizing: border-box;
                        background: url(../img/bg-gradual.png) repeat-x bottom left;
                        h3{
                            font-size: 42px;
                            font-weight: bold;
                            line-height: 67px;
                        }
                        p{
                            margin-bottom: 8px;
                            span{
                                font-weight: bold;
                                color: #ffd88c;
                            }
                        }
                    }
                }
            }
            .preview-switch{
                height: 60px;
                width: 30px;
                background: center no-repeat;
                cursor: pointer;
                display: block;
                position: absolute;
                top: 50%;
                margin-top: -30px;
                &.prev{
                    left: 2px;
                    background-image: url(../img/bg-switch-left.png?__sprite);
                }
                &.next{
                    right: 2px;
                    background-image: url(../img/bg-switch-right.png?__sprite);
                }
            }
        }
    }
}

 //弹窗基础样式
.ui-dialog {
    border-radius: 6px;
    .ui-dialog-title {
        font-family: "微软雅黑";
        padding-bottom: 5px;
        padding-top: 10px;
        color: #777;
        font-size: 14px;
        text-indent: 0;
    }
    .ui-dialog-close {
        background: 0;
        color: #777;
        text-indent: 0;
        font-size: 20px;
        top: 0;
        right: 0;
        &:hover {
            color: #30a5ef;
        }
    }
}

//验证码样式
.dialog-code {
    font-size: 14px;
    .code-wrap {
        @include clearfix;
        height: 65px;
        padding-bottom: 15px;
        .code-img {
            width: 205px;
            height: 100%;
            float: left;
            text-align: center;
            img {
                vertical-align: middle;
            }
        }
        .code-again {
            float: left;
            line-height: 24px;
            color: #333;
            margin-top: 5px;
            .change-codeimg {
                cursor: pointer;
                color: #30a5ef;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
    .input-line {
        color: #777;
        line-height: 36px;
        input {
            border: 1px solid #E3E3E3;
            width: 163px;
            height: 36px;
            line-height: 36px;
            padding-left: 10px;
        }
    }
    .btn-line {
        text-align: center;
        margin-top: 20px;
        span {
            @include inline-block; //width: 130px;
            width: 271px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            background: #30a5ef;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
            &:hover {
                background: #1386cf;
            }
        }
    }
}

.question-tips-dialog {
    display: table;
    min-width: 337px;
    height: 110px;
    text-align: center;
    .text-wrap {
        p {
            font-size: 16px;
            line-height: 32px;
        }
        span {
            color: $maincolor;
        }
    }
    .btn-wrap {
        margin-top: 30px;
    }
    .btn {
        display: inline-block;
        line-height: 36px;
        height: 36px;
        margin: 0 6px;
        cursor: pointer;
        border-radius: 3px;
        font-size: 16px;
        width: 100px;
    }
    .btn-cancel {
        color: #333;
        background-color: #f9f9f9;
        border: 1px solid #e3e3e3;
        &:hover {
            background-color: #fafafa;
        }
    }
    .btn-submit {
        background: #30a5ef;
        color: #fff;
        &:hover {
            background-color: #55b7f5;
        }
    }
}

.pop-flash{
    .btn-close{
        position: absolute;
        top: -40px;
        right: -60px;
        width: 40px;
        height: 40px;
        background: url(../img/icon-close.png?__sprite) no-repeat;
    }
    .video-wrap{
        height : 548px;
        width : 974px;
        background: #000000;
    }
}

/*抽奖弹窗*/
.ui-dialog .ui-dialog-close {
    font-size: 30px;
}

.lottery-tip-wrap {
    width: 400px;
    padding-bottom: 35px;
    text-align: center;
    .tip-title {
        font-size: 20px;
        font-weight: bold;
        line-height: 2;
        em {
            color: #ea1003;
        }
    }
    a {
        font-size: 14px;
        color: #0075a9;
        line-height: 40px;
    }
    p {
        font-size: 16px;
        color: #333;
        line-height: 40px;
    }
    .lottery-tips {
        height: 35px;
        margin-top: 15px;
        font-size: 0;
        .comfirm-btn {
            @include reset;
            @include inline-block;
            line-height: 35px;
            background-color: #ea1003;
            padding: 0 40px;
            font-size: 14px;
            color: #fff;
            border: none;
            outline: none;
        }
    }
}