dwweb-h5/2018专题/18073D模型展示专题-H5/scss/iphonex.scss

@import 'mixin.scss';

.iphonex-wrapper{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: #ffffff;
    color: #000000;
    .iphone-pic{
        width: px2rem(194);
    }
    .down-iphone-pic {
        display: none;
        width: px2rem(460);
        margin-top: px2rem(70);
    }
    .img-box{
        img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        height: px2rem(386);
        position: relative;
        text-align: center;
    }
    .arrow{
        display: block;
        cursor: pointer;
        width: px2rem(50);
        margin: px2rem(40) auto 0 auto;
        animation: jump 1.4s ease-in-out 1500ms infinite;
    }
    .arrow-tips{
        margin-top: px2rem(120);
        animation: jump 1.4s ease-in-out 1500ms infinite;
    }
    h3{
        text-align: center;
        font-size: px2rem(36);
        margin-top: px2rem(16);
        margin-bottom: px2rem(30);
    }
    p{
        text-align: center;
        font-size: px2rem(26);
        margin-bottom: px2rem(22);
    }
}

.fade-In{
    opacity: 0;
}


.delay-300 {
    animation-delay: 600ms;
}
.delay-600 {
    animation-delay: 900ms;
}
.delay-900 {
    animation-delay: 1200ms;
}
.delay-1200 {
    animation-delay: 1500ms;
}
.delay-1500 {
    animation-delay: 1800ms;
}

@keyframes jump {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(15px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.full-video{
    position: fixed;
    z-index: 1999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    video{
        width: 100%;
    }
}

.logo-wrap{
    position: fixed;
    top: 0;
    left: px2rem(40);
}

.vr-logo{
    float: left;
    width: px2rem(140);
}
.xingshijie-logo{
    float: left;
    width: px2rem(140);
}
.video-next-btn{
    position: absolute;
    right: px2rem(30);
    bottom: px2rem(30);
    width: px2rem(100);
    height: px2rem(40);
    line-height: px2rem(40);
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #000000;
    background-color: rgba($color: #ffffff, $alpha: .8);
    font-size: px2rem(24);
    color: #000000;
}

.pub-swiper-box{
    display: none;
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
}
.p1-swiper-title{
    text-align: center;
    color: #333333;
    font-size: px2rem(52);
    padding-top: px2rem(160);
    margin-bottom: px2rem(44);
    font-weight: bold;
}
.p1-swiper-text{
    text-align: center;
    color: #333333;
    font-size: px2rem(26);
    line-height: 1.8;
}


.camera-swiper {
    .modal-left-img{
        display: block;
        position: relative;
        left: 0;
        width: px2rem(475);
        overflow: hidden;
    }
    .p1{
        background: url('../img/m/faceId-pic3.jpg') center center no-repeat;
        background-size: px2rem(750) auto;
    }
    .p2{
        .video-border-box{
            position: absolute;
            top: px2rem(120);
            left: px2rem(350);
            width: px2rem(352);
            height: px2rem(700);
            padding: px2rem(20);
            box-sizing: border-box;
            video{
                width: px2rem(312);
                height: px2rem(660);

            }
            .video-border{
                position: absolute;
                top: 0;
                left: 0;
                width: px2rem(352);
                height: px2rem(700);
                background: url('../img/ipx-border.png') center center no-repeat;
                background-size: 100%;
            }
        }
        .swiper-poster{
            position: relative;
            cursor: pointer;
            img{
                width: 100%;
                vertical-align: middle;
            }
            span{
                position: absolute;
                z-index: 10;
                left: 50%;
                transform: translateX(-50%);
                bottom: px2rem(25);
                color: #ffffff;
                height: px2rem(30);
                line-height: px2rem(30);
                font-size: px2rem(16);
            }
            .watch-icon{
                display: inline-block;
                margin-left: px2rem(4);
                width: px2rem(20);
                height: px2rem(20);
                background: url('../img/watch-icon.png') no-repeat;
                background-size: 100%;
                vertical-align: middle;
            }
            &:hover{
                span{
                    text-decoration: underline;
                }
                &:after{
                    opacity: 1;
                }
            }
            &:after{
                content: '';
                opacity: 0;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba($color: #000000, $alpha: .4);
                transition: .4s all ease-in-out;
            }
        }
    }
    .p3{
        img{
            display: block;
            width: px2rem(750);
        }
    }
    .p2{
        img{
            display: block;
            width: px2rem(360);
            margin: px2rem(36) auto;
        }
    }
    .p2-side{
        margin-top: px2rem(50);
        margin-left: px2rem(70);
        width: px2rem(500);
        .title{
            color: #000000;
            font-weight: bold;
            font-size: px2rem(52);
        }
        .text{
            margin: px2rem(30) 0;
            color: #000000;
            font-size: px2rem(26);
            line-height: 1.7;
        }
    }
    .p3-info{
        width: px2rem(640);
        margin: px2rem(200) auto px2rem(28) auto;
        h3{
            font-size: px2rem(52);
            font-weight: bold;
            color: #000000;
            line-height: 1.5;
        }
        p{
            color: #000000;
            font-size: px2rem(26);
            line-height: 1.6;
            margin-top: px2rem(10);
        }
    }
    .p3-video{
        position: absolute;
        top: px2rem(280);
        left: px2rem(510);
        width: px2rem(900);
        video{
            width: 100%;
        }
        .reset-video-btn{
            margin: px2rem(10) 0;
        }
    }
}

.swiper-slide{
    box-sizing: border-box;
}

.screen-swiper {
    .p1{
        .p1-swiper-title{
            padding-top: px2rem(40);
        }
        img{
            display: block;
            width: px2rem(740);
            margin: px2rem(100) auto 0 auto;
        }
    }
    .p2{
        padding-top: px2rem(100);
        .p1-swiper-text{
            text-align: center;
        }
        .p1-swiper-title{
            font-size: px2rem(40);
        }
        img{
            display: block;
            width: px2rem(700);
            margin: px2rem(100) auto 0 auto;
        }
    }
    .p3{
        .bottom-info{
            width: 100%;
            margin-top: px2rem(20);
        }
        .left-side{
            float: left;
            p{
                padding-left: px2rem(20);
                font-size: px2rem(28);
                color: #000000;
                margin: px2rem(15) 0;
            }
        }
        .right-side{
            float: right;
            font-size: px2rem(18);
            color: #000000;
            line-height: 1.7;
            width: px2rem(450);
            margin-right: px2rem(10);
        }
    }
    .p4{
        padding-top: px2rem(200);
        .p1-swiper-title{
            padding-top: 0;
            margin: 0 auto;
            text-align: left;
            margin-bottom: px2rem(16);
            padding-left: px2rem(20);
        }
        .p1-swiper-text {
            margin: 0 auto;
            text-align: left;
            padding: 0 px2rem(20);
        }
        img{
            display: block;
            width: 100%;
            margin: px2rem(100) auto;
        }
    }
}

.plane-swiper{
    .p1-swiper-text{
        padding: 0 px2rem(20);
    }
    // .p1-swiper-title {
    //     margin: 0 auto px2rem(10) auto;
    //     text-align: left;
    // }
    .p1-swiper-title{
        padding-top: px2rem(40);
        margin-bottom: px2rem(20);
    }
    .p2{
        .center-img{
            width: px2rem(400);
        }
    }
    .center-img{
        display: block;
        width: px2rem(700);
        margin: 0 auto;
        margin-top: px2rem(30);
    }
}

.face-swiper{
    .p1-swiper-title{
        padding-top: px2rem(40);
        margin-bottom: px2rem(10);
    }
    .p1{
        .bottom-img{
            margin: 0;
            width: 100%;
        }
    }
    .p1-swiper-text{
        padding: 0 px2rem(10);
    }
    img{
        display: block;
        width: px2rem(700);
        margin: px2rem(40) auto;
    }
    .faceId-gif{
        width: px2rem(775);
        display: block;
        margin: px2rem(30) auto 0 auto;
    }
    .p2{
        padding-top: px2rem(10);
        img{
            display: block;
            width: px2rem(540);
            margin: px2rem(40) auto 0 auto;
        }
    }
    .p3{
        padding-top: px2rem(80);
    }
    .p4{
        padding-top: px2rem(220);
        .p1-swiper-title{
            padding-top: 0;
            padding-left: px2rem(20);
            text-align: left;
            margin-bottom: px2rem(20);
        }
        img{
            width: 100%;
        }
    }
}

.back-camera-swiper{
    img{
        display: block;
        margin: px2rem(50) auto;
        width: 100%;
    }
    .p1{
        padding-top: px2rem(50);
    }
    .p2{
        padding-top: px2rem(70);
        .center-box{
            margin: px2rem(20) auto;
            .left-side{
                padding: 0 px2rem(20);
                .title{
                    text-align: left;
                }
                .text{
                    text-align: left;
                }
            }
            .right-side{
                padding: 0 px2rem(20);
                .title{
                    text-align: right;
                }
                .text{
                    text-align: right;
                }
            }
            .title{
                font-size: px2rem(38);
                color: #000;
                margin-bottom: px2rem(10);
                font-weight: bold;
            }
            .text{
                font-size: px2rem(24);
                color: #000;
                line-height: 1.7;
            }
        }
    }
    .p3{
        background: url('../img/m/back-camera-p3-bg.jpg') center center no-repeat;
        background-size: cover;
        .white-title{
            color: #ffffff;
            font-size: px2rem(52);
            font-weight: bold;
            margin-top: px2rem(20);
            padding-left: px2rem(30);
        }
        .white-text{
            width: px2rem(500);
            line-height: 1.7;
            color: #ffffff;
            font-size: px2rem(26);
            margin-top: px2rem(60);
            padding-left: px2rem(30);
        }
    }
}
.center-video{
    display: block;
    width: px2rem(1000);
    margin: px2rem(125) auto 0 auto; 
}
.close-swiper-btn{
    position: absolute;
    z-index: 99;
    bottom: px2rem(30);
    transform: translateX(-50%);
    left: 50%;
    border: none;
    outline: none;
    height: px2rem(60);
    line-height: px2rem(60);
    font-size: px2rem(16);
    color: #ffffff;
    border-radius: px2rem(30);
    background-color: #111111;
    width: px2rem(140);
    text-align: center;
    cursor: pointer;
    &:hover{
        background-color: #252525;
    }
    .circle-icon{
        display: inline-block;
        width: px2rem(20);
        height: px2rem(20);
        line-height: px2rem(20);
        border-radius: 50%;
        border: 1px solid #ffffff;
        font-size: px2rem(18);
        margin-right: px2rem(10);
    }
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-pagination{
    position: absolute;
    right: px2rem(10);
    top: 40%;
}

.reset-video-btn{
    color: #000000;
    width: px2rem(80);
    text-align: center;
    cursor: pointer;
    margin: px2rem(40) auto;
    font-size: px2rem(14);
    .reset-icon{
        display: inline-block;
        width: px2rem(16);
        height: px2rem(16);
        vertical-align: top;
        margin-left: px2rem(6);
        background: url('../img/reset-icon.png') center center no-repeat;
        background-size: 100%;
    }
}

.video-poster{
    position: relative;
    margin-top: px2rem(20);
    i{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url('../img/m/player-icon.png') center center no-repeat;
        width: px2rem(60);
        height: px2rem(60);
        background-size: 100%;
    }
    img{
        width: px2rem(240);
        vertical-align: middle;
    }
}