dwweb-pc/2018专题/18073D模型展示专题/scss/iphonex1.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;
    }
    h3{
        text-align: center;
        font-size: px2rem(30);
        margin-top: px2rem(16);
        margin-bottom: px2rem(30);
    }
    p{
        text-align: center;
        font-size: px2rem(18);
        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: #ffffff;
    font-size: px2rem(48);
    padding-top: px2rem(74);
    margin-bottom: px2rem(44);
}
.p1-swiper-text{
    text-align: center;
    color: #ffffff;
    font-size: px2rem(18);
    line-height: 1.8;
}
.camera-swiper {
    .modal-left-img{
        display: block;
        position: relative;
        left: 0;
        width: px2rem(475);
        overflow: hidden;
    }
    .p1{
        background: url('../img/front-camera-pic4.jpg') center bottom no-repeat;
    }
    .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{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: px2rem(78);
                height: px2rem(78);
                background: url('../img/video-play-icon.png') no-repeat;
                background-size: 100%;
                z-index: 999;
            }
            &: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;
            }
        }
    }
    .p2-right-side{
        position: absolute;
        top: px2rem(270);
        right: px2rem(390);
        width: px2rem(470);
        .title{
            color: #ffffff;
            font-weight: bold;
            font-size: px2rem(40);
        }
        .text{
            margin: px2rem(30) 0;
            color: #ffffff;
            font-size: px2rem(18);
            line-height: 1.7;
        }
    }
    .p3-info{
        position: absolute;
        width: px2rem(684);
        top: px2rem(30);
        left: px2rem(510);
        h3{
            font-size: px2rem(40);
            font-weight: bold;
            color: #ffffff;
            line-height: 1.5;
        }
        p{
            color: #ffffff;
            font-size: px2rem(18);
            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;
    background: url('../img/swiper-bg.jpg') center center no-repeat;
    background-size: cover;
}

.screen-swiper {
    .p2{
        padding-top: px2rem(100);
        .p1-swiper-text{
            width: px2rem(900);
            margin: 0 auto;
            text-align: left;
        }
        img{
            display: block;
            width: px2rem(1163);
            margin: px2rem(100) auto 0 auto;
        }
    }
    .p3{
        padding-top: px2rem(100);
        img{
            display: block;
            width: px2rem(1340);
            margin: 0 auto;
            margin-bottom: px2rem(60);
        }
        .bottom-info{
            width: px2rem(1340);
            margin: 0 auto;
        }
        .left-side{
            float: left;
            p{
                font-size: px2rem(28);
                color: #ffffff;
                margin-bottom: px2rem(10);
            }
        }
        .right-side{
            float: right;
            font-size: px2rem(16);
            color: #ffffff;
            line-height: 1.7;
            width: px2rem(750);
            margin-right: px2rem(20);
        }
    }
    .p4{
        padding-top: px2rem(80);
        .p1-swiper-title{
            padding-top: 0;
            width: px2rem(1340);
            margin: 0 auto;
            text-align: left;
            margin-bottom: px2rem(2);
        }
        .p1-swiper-text {
            width: px2rem(1340);
            margin: 0 auto;
            text-align: left;
        }
        img{
            display: block;
            width: px2rem(1053);
            margin: px2rem(50) auto;
        }
    }
}

.plane-swiper{
    .p1-swiper-text{
        width: px2rem(1392);
        margin: 0 auto;
        text-align: left;
    }
    .p1-swiper-title {
        width: px2rem(1392);
        margin: 0 auto px2rem(10) auto;
        text-align: left;
    }
    .center-img{
        display: block;
        width: px2rem(1392);
        margin: 0 auto;
    }
    .p1 {
        .center-img{
            margin-top: px2rem(70);
        }
    }
    .p2{
        padding-top: px2rem(80);
        .p1-swiper-title{
            padding-top: px2rem(20);
        }
    }
}

.face-swiper{
    .faceId-gif{
        width: px2rem(775);
        display: block;
        margin: px2rem(30) auto 0 auto;
    }
    .p1{
        background: url('../img/faceId-pic4-blue.jpg') center -px2rem(40) no-repeat;
        // background-size: px2rem(900) auto;
    }
    .p2{
        background: url('../img/faceId-pic5-blue.jpg') center -px2rem(40) no-repeat;
        // background-size: px2rem(1400) auto;
        padding-top: px2rem(80);
        .p1-swiper-title{
            width: px2rem(1600);
            padding-top: 0;
            margin: 0 auto px2rem(10) auto;
            text-align: left;
        }
        .p1-swiper-text{
            width: px2rem(1600);
            margin: 0 auto px2rem(6) auto;
            text-align: left;
        }
    }
    .p3{
        padding-top: px2rem(30);
        .p1-swiper-title{
            width: px2rem(770);
            margin: 0 auto;
            padding-top: 0;
            text-align: left;
        }
        .mg-bottom{
            margin-bottom: px2rem(30);
        }
        .p1-swiper-text{
            width: px2rem(770);
            margin: 0 auto;
            text-align: left;
        }
    }
}

.back-camera-swiper{
    .p1{
        background: url('../img/back-camera-pic5-blue.jpg') center bottom no-repeat;
        // background-size: px2rem(1200) auto;
    }
    .p2{
        padding-top: px2rem(70);
        background: url('../img/back-camera-pic6-blue.jpg') center bottom no-repeat;
        .center-box{
            width: px2rem(1000);
            margin: px2rem(20) auto;
            .left-side{
                float: left;
                width: px2rem(420);
            }
            .right-side{
                float: right;
                width: px2rem(420);
            }
            .title{
                font-size: px2rem(38);
                color: #ffffff;
                margin-bottom: px2rem(10);
            }
            .text{
                font-size: px2rem(14);
                color: #ffffff;
                line-height: 1.7;
            }
        }
    }
    .p3{
        background: url('../img/back-camera-pic7.jpg') center center no-repeat;
        background-size: cover;
    }
}
.center-video{
    display: block;
    width: px2rem(1000);
    margin: px2rem(125) auto 0 auto; 
}
.close-swiper-btn{
    position: absolute;
    z-index: 99;
    bottom: px2rem(20);
    transform: translateX(-50%);
    left: 50%;
    border: none;
    outline: none;
    width: px2rem(99);
    height: px2rem(30);
    background: url('../img/close-btn.png') center center no-repeat;
    background-size: 100%;
    cursor: pointer;
    &:hover{
        background: url('../img/close-btn-active.png') center center no-repeat;
        background-size: 100%;
    }
}
.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%;
    }
}