<template>
    <section id="template">
        <div class="title-sec">
            <img :src="serverUrl+'/previewModel/bg.png'"/>
            <p class="text-center text-why" maxlength="10" v-html="content.headerTitle2"></p>
            <p class="text-detail" v-html="content.headerContain"></p>
        </div>
        <h2 class="text-center" v-html="content.pageheaderTitle1"></h2>
        <p class="text-sub" v-html="content.pageheaderTitle2"></p>
        <div class="apartment-sec">
            <img :src="content.Imgurl"/>
            <div class="apartment-detail">
                <p class="apartment-title" v-html="content.decTitle"></p>
                <p class="apartment-text" v-html="content.decContain"></p>
            </div>
        </div>
        <p class="text-apert" v-html="content.detailContain1"></p>
        <div class="slide1-sec">
            <mt-swipe :auto="4000" class="swiper-img">
                <mt-swipe-item v-for="(item,index) in content.imageFile" :key="item.imgUrl"><img :src="item.imgUrl"/></mt-swipe-item>
            </mt-swipe>
            <p class="slide1-title" v-html="content.slide1Title1"></p>
            <p class="slide1-sub" v-html="content.slide1Title2"></p>
            <p class="slide1-detail" v-html="content.slide1Contain1"></p>
        </div>
        <div class="slide2-sec">
            <mt-swipe :auto="4000" class="swiper-img">
                <mt-swipe-item v-for="(item,index) in content.imageFile2" :key="item.imgUrl"><img :src="item.imgUrl"/></mt-swipe-item>
            </mt-swipe>
            <div class="slide2-bot">
                <div>
                    <p class="slide2-title text-right" v-html="content.slide2Title1"></p>
                    <p class="slide2-sub text-right" v-html="content.slide2Title2"></p>
                </div>
                <div>
                    <p class="slide2-r" v-html="content.slide2Contain1"></p>
                </div>
            </div>
        </div>
        <div class="slide3-sec">
            <div class="slide3-bg"></div>
            <mt-swipe :auto="4000" class="slide3-main swiper-img">
                <mt-swipe-item v-for="(item,index) in content.imageFile3" :key="item.imgUrl"><img :src="item.imgUrl"/></mt-swipe-item>
            </mt-swipe>
            <div class="slide3-bot">
                <div>
                    <p class="slide3-title" v-html="content.footContain1"></p>
                </div>
                <div>
                    <p class="slide3-r" v-html="content.footTitle1"></p>
                    <p class="slide3-sub" v-html="content.footContain2"></p>
                </div>
            </div>
        </div>
        <!--<div class="tel-sec">-->
            <!--<p class="tel-title">请填写手机号，置业顾问将以{{telephone}}联络您。</p>-->
            <!--<div class="tel-sec1">-->
                <!--<input type="tel" v-model="phone" placeholder="手机号"/>-->
                <!--<div class="btn text-center" @click="getVerifyFn" v-html="verifyText"></div>-->
            <!--</div>-->
            <!--<div class="tel-sec1">-->
                <!--<input type="tel" placeholder="验证码" v-model="verify"/>-->
                <!--<div class="btn text-center" @click="submit">提交</div>-->
            <!--</div>-->
            <!--<div class="tel-bot">-->
                <!--<div class="tel-main">-->
                    <!--<div class="tel-btn" @click="contactCounselor">-->
                        <!--<p>在线顾问</p>-->
                        <!--<i></i>-->
                    <!--</div>-->
                    <!--<div class="coun-btn">-->
                        <!--<a v-on:click="trackTel" :href="'tel:'+telephone">-->
                            <!--<p>电话咨询</p>-->
                            <!--<i></i>-->
                        <!--</a>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<img :src="appQrcode" class="code-img" v-if="appQrcode==''?false:true"/>-->
                <!--<p class="text-center text-code" v-if="appQrcode==''?false:true">扫描下载APP</p>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="tel-sec">-->
            <!--<p class="tel-title">请填写手机号，置业顾问将以‭(0574) 5568 6666联络您。</p>-->
            <!--<div class="tel-sec1">-->
                <!--<input type="tel" v-model="phone" placeholder="手机号"/>-->
                <!--<div class="btn text-center" @click="getVerifyFn">{{verifyText}}</div>-->
            <!--</div>-->
            <!--<div class="tel-sec1">-->
                <!--<input type="tel" placeholder="验证码" v-model="verify"/>-->
                <!--<div class="btn text-center" @click="submit">提交</div>-->
            <!--</div>-->
            <!--<div class="tel-bot">-->
                <!--<div class="tel-main">-->
                    <!--<div class="tel-btn" @click="contactCounselor">-->
                        <!--<p>在线顾问</p>-->
                        <!--<i></i>-->
                    <!--</div>-->
                    <!--<div class="coun-btn">-->
                        <!--<a v-on:click="trackTel" href="tel:0574-55686666">-->
                            <!--<p>电话咨询</p>-->
                            <!--<i></i>-->
                        <!--</a>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<img :src="serverUrl+'/detail/a-download.png'" class="code-img"/>-->
                <!--<p class="text-center text-code">扫描下载APP</p>-->
                <!--<div class="edite-code">-->
                    <!--<img :src="content.finalImg"/>-->
                    <!--<div class="code-title">-->
                        <!--<p class="title">{{content.finalTitle1}}</p>-->
                        <!--<p class="sub-title">{{content.finalTitle2}}</p>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <footTemplate bgc="#e4dcd1" btnColor="#bf9760"></footTemplate>

        <div class="edite-code">
            <img :src="!content.finalImg||content.finalImg=='' ?'http://skyforest.static.elab-plus.com/detail/defaultCode.png':content.finalImg"/>
            <div class="code-title">
                <p class="title" v-html="content.finalTitle1"></p>
                <p class="sub-title" v-html="content.finalTitle2"></p>
            </div>
        </div>
    </section>
</template>

<script>
import util from "../../utils/util";
import ubt from '../../utils/ubt.js'
import  system from "../../utils/system.js"
import configMes from '../../utils/configMes.js'
import {previewService} from '@/services'
import { Toast } from "mint-ui";
import _ from 'lodash'
import queryString from 'query-string'
import footTemplate from '../footTemplate.vue';

const parsed = queryString.parse(location.search);
const code = parsed.code || null;

    export default {
        data() {
            var serverUrl="http://skyforest.static.elab-plus.com";
            return {
                serverUrl:serverUrl,
                templateContentId:'',
                phone:'',//手机号
                //title:'投放宝',
                customerId:'',//在线顾问跳转变量
                isSend:'', //是否跟顾问聊过天
                verifyText:'获取验证码',//验证码文案
                templateId:'',//模板ID
                projectId:'',//项目ID
                //imgUrl:'',//空白模板图片
                templateType:'',//模板类型
                verify:'',//验证码
                houseId:'',
                tfbContentId:'',
                channel:'',//渠道
                sharerImage:'',//二维码
                sendingCode:false,//控制验证码
                submitFlag:false,//防止多次提交
                appcodeImg:'',//底部二维码
                uid:'',//uid
                source:4,//来源
                platform:4,//渠道来源
                sessionId:'',//sessionId
                //id:'',//投放内容ID
                onlineFlag:'',//在线状态控制
                tmpprojectId:'',
                keyvalue:'tfb.laypoint.page.enter',//埋点 key值
                telephone:'',//底部电话号码
                appQrcode:'',//底部二维码
            }
        },
        props:{
            //telephone:String,
            content:Object,
            isMini:Boolean,
            //tfbContent1:Object,
            // id:null,
            // appQrcode:String,
            // projectId:null,
            // houseId:null,
            // imgUrl:null,
        },
        watch:{
            content(val){
                this.content=val
            },
            // tfbContent1(val){
            //     this.tfbContent1 = val
            // },
            // projectId(val){
            //     this.tmpprojectId = val;
            // },
            // appQrcode(val){
            //     this.appcodeImg = val;
            // },
            // source(val){
            //     this.sourceFlag = val;
            // },
            // telephone(val){
            //     this.telephone = val;
            // },
            // id(val){
            //     this.id=val
            // },
            // houseId(val){
            //     this.houseId=val
            // },

        },
        created(){
            this.houseId = this.$store.state.tfbContent1.houseId;
            // /util.setTitle(this.title);

            //this.projectId = localStorage.getItem('_projectId');


            this.templateContentId = this.$route.query.templateContentId;

            if(this.projectId){//绑定小程序
                this.source = '3';
            }
            if(this.templateContentId){//未绑定小程序
                this.source = '4';
            }

            if(this.sendingCode){
                this.getVerifyFn();
            }

        },
        components:{
            footTemplate
        },
        mounted() {

            try{
             window.getWidth= function(){
                if(window.innerWidth!= undefined){
                    return window.innerWidth;
                }
                else{
                    var B= document.body, D= document.documentElement;
                    return B==null?D.clientWidth:Math.min(D.clientWidth, B.clientWidth);
                }
            }
            console.log("******",window.getWidth(),innerWidth)
            let mywidth= window.getWidth() > 640?"640":window.getWidth();
            document.documentElement.style.fontSize = 100 * mywidth / 750 + 'px';
            }
            catch(e){
                alert(e.message);
            }
            this.sharerImage = this.$route.query.sharerImage||'';
            this.channel = this.$route.query.fromChannel||'';
            this.templateContentId = this.$route.query.templateContentId;
            this.trueProjectId = this.$route.query.projectId||'';
            this.uid=configMes.getUuid();
            if(sessionStorage.getItem('sid')){
                this.sessionId=sessionStorage.getItem('sid');
            }else{
              sessionStorage.setItem('sid',new Date().getTime());
                this.sessionId=sessionStorage.getItem('sid');
            }

            if(localStorage.getItem('uid')){
                this.uid=localStorage.getItem('uid');
            }else{
              localStorage.setItem('uid', configMes.getUuid());
                this.uid=localStorage.getItem('uid');
            }
            console.log(this.houseId,'jjj')
            this.customerId = localStorage.getItem('localCustomerId'+this.houseId);
            this.isSend = localStorage.getItem(this.customerId+'&isSendMsg'+this.houseId);
            if(this.templateContentId){//未绑定小程序
                //this.source = 4;
            }
            if(system.isIosApp()){
                this.source = 1;
            }
            if(system.isAndroidApp()){
                this.source = 2;
            }

            this.telephone = this.$store.state.tfbContent1.telephone;
            this.appQrcode = this.$store.state.tfbContent1.appQrCode||false;
            this.projectId = this.$store.state.tfbContent1.projectId;
            this.tfbContentId = this.$store.state.tfbContent1.id;
            console.log('仓库',this.$store.state.tfbContent1,this.appQrCode)
        },
        updated(){

        },
        beforeDestroy(){
            document.documentElement.style.fontSize ='16px';
        },
        methods: {
            async verifyCodeFn(){//验证码
                let data = {
                    sms_mobile: this.phone,
                    sms_template: 'verification.code',
                    sms_code: this.houseId==109 ? 'SMS_004' : 'SMS_002',
                    sms_type: '1',
                    sms_params: '{"":""}'
                };
                console.log('---验证码---',data)
                let result = await previewService.verifyCode(data);
                if(result.data.success){
                }else{
                    Toast(result.data.message)
                }
            },
            async checkVerifyCodeEffective(){// 校验验证码
                if(this.submitFlag){
                    return;
                }
                let data = {
                    mobile: this.phone,
                    type: 'verification.code',
                    verifycode: this.verify
                };
                console.log('---校验验证码---',data)
                let result = await previewService.checkVerifyCodeEffective(data);
                if(result.data.success){
                    this.submitFlag = true;
                    this.telData();
                    this.layPointFn();
                    Toast('提交成功')
                }else{
                    this.submitFlag = false;
                    Toast(result.data.message)
                }
            },
            async telData(){//留电
                let data = {
                    houseId: this.houseId,
                    customerMobile: this.phone,
                    sharerImage: this.sharerImage,
                    channel:this.channel,
                    platForm:this.platform,
                    refer:location.href
                };

                let result = await previewService.telData(data);
                if(result.data.success){
                    Toast('提交成功')
                }else{
                    Toast(result.data.message);
                }
            },
            async layPointFn(val){//进入页面埋点

                let data = {
                    projectId:this.projectId,
                    system:this.source,
                    tfbContentId:this.tfbContentId,
                    uid:this.uid,
                    version:"1.0",
                    sessionId:this.sessionId,
                    source:this.source,
                    mobile:this.phone,
                    keyvalue:this.keyvalue
                }
                let result = await previewService.layPoint(data);
                console.log(result,'dasdsadasdsad')
            },

            getVerifyFn() {
                let vm = this;
                if (this.sendingCode) {
                    return;
                }

                if (!this.phone) {
                    Toast('请输入手机号');
                    return;
                }

                if (!/^1\d{10}$/.test(this.phone)) {
                    Toast('输入的手机号不合法');
                    return;
                }
                this.sendingCode = true;
                this.verifyCodeFn();
                let time = 60;
                vm.verifyText = time + 's';
                vm.timer1 = setInterval(() => {
                    if (time > 0) {
                        time = time - 1;
                        vm.verifyText = time + 's';
                    } else {
                        vm.sendingCode = false;
                        vm.verifyText = '获取验证码';
                        clearInterval(vm.timer1);
                    }
                }, 1000)


            },
            submit(){

                let vm = this;

                if (!vm.phone) {
                    Toast('请输入手机号');
                    return;
                }
                if (!/^1\d{10}$/.test(this.phone)) {
                    Toast('输入的手机号不合法');
                    return;
                }

                if (!vm.verify) {
                    Toast('请输入验证码');
                    return;
                }
                this.keyvalue = 'tfb.laypoint.leavephone.sendverifycode.click';
                if(this.submitFlag){
                    Toast('已经提交')
                    return;
                }

                this.checkVerifyCodeEffective();

            },
            trackTel(){//电话咨询
                this.keyvalue = 'tfb.laypoint.concat.tel.click';
                this.layPointFn();
            },
            contactCounselor(){
                this.keyvalue = 'tfb.laypoint.im.click';
                this.layPointFn();
                if(this.isMini){
                    wx.miniProgram.navigateTo({url:'../counselorList/counselorList'})
                    return
                }
                let param = {
                    pathName:this.$route.name,
                    templateContentId:this.$route.query.templateContentId,
                    projectId:this.$route.query.projectId,
                    templateCode:this.$route.query.templateCode,
                    houseid:this.$store.state.tfbContent1.houseId,
                    sharerImage:this.$route.query.sharerImage,
                    channel:this.$route.query.channel
                };
                console.log(param,'op')

                console.log(this.isSend,this.customerId,'ooo')
                if(this.isSend&&this.customerId){
                    this.$router.push({ name: "messageList",query:param});
                }else{
                    this.$router.push({ name: "AdviserList" ,query:param});
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    //@media screen and (max-width:768px) {
        body,html,#app{
            max-width: 640px!important;
            background: #f4f4f4;
            color: #737373;
            height: 100%;
        };
        #template{
            max-width: 640px!important;
            margin:0 auto;
        }

    .edite-code{
        background:#e4dcd1 ;
        padding:1.22rem  0.4rem 0.46rem;
        position: relative;
        img{
            width:1.11rem;
            height:1.11rem;
            background-color: #fff;
            display: block;
            // position: absolute;
            // left:0.4rem;
        }
        .code-title{
            width:4.8rem;
            position: absolute;
            bottom:0.46rem;
            right:0;
            left: 1.6rem;
            .title{
                font-size: 0.28rem;
                color: #737373;
                border-bottom:1px solid #737373;
                margin:0;
                line-height:0.4rem;
            }
            .sub-title{
                font-size: 0.24rem;
                color: #737373;
                line-height:0.33rem;
                margin:0;
            }
        }
    }
        .title-sec{
            position: relative;
            margin-bottom:35px;
            img{
                width:100%;
                display: block;
            }
            p{
                width:100%;
                position: absolute;
                left:0;
                color:#fff;
                margin:0;
            }
            .text-why{
                font-size:0.26rem;
                top:0.5rem;
            }
            .text-detail{
                width:80%;
                padding-top:10px;
                border-top:1px solid #fff;
                top:0.98rem;
                left:10%;
                font-size:0.24rem;
            }
        }
        p{
            word-wrap:break-word;
        }
        h2{
            font-size: 0.62rem;
            line-height: 0.92rem;
            margin:0;
            color: #737373;
        }
        .text-sub{
            width:85%;
            margin:0 auto 35px;
            padding-top:5px;
            font-size: 0.34rem;
            color: #737373;
            border-top:1px solid #737373;
        }
        .apartment-sec{
            width:100%;
            height:3.2rem;
            background-color: #CDC9BE;
            padding:0 5%;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            position: relative;
            img{
                width:2.3rem;
                height:3.2rem;
                position: absolute;
                top:0.4rem;
            }
            .apartment-detail{
                width:48%;
                height:120px;
                padding-left:0.4rem;
                border-left:1px solid #737373;
                position: absolute;
                top:0.4rem;
                right:5%;
            }
            .apartment-title{
                font-size: 0.34rem;
                color: #737373;
                margin:0 0 6px;
            }
            .apartment-text{
                font-size: 0.18rem;
                color: #737373;
                margin:0;
            }
        }
        .text-apert{
            width:5.53rem;
            margin:1.22rem auto 0.82rem;
            font-size: 0.24rem;
            color: #737373;
            line-height:0.36rem;
        }
        .swiper-img,.swiper-img img{
            width:6.7rem;
            height:4.52rem;
            overflow: visible;
        }
        .slide1-sec{
            background-color: #CDC9BE;
            padding:0.4rem;
            .slide1-title{
                font-size: 0.34rem;
                color: #454545;
                margin:0.32rem 0 0;
                line-height:0.5rem;
            }
            .slide1-sub{
                width:6.7rem;
                border-top:1px solid #454545;
                font-size: 0.24rem;
                color: #454545;
                line-height:0.36rem;
                margin:0;
            }
            .slide1-detail{
                margin:0.3rem auto 0.08rem;
                font-size: 0.24rem;
                color: #454545;
            }
        }
        .slide2-sec{
            padding:0.4rem;
            margin-top:0.7rem;
            .slide2-bot{
                margin:0.64rem 0 0.33rem 0;
                display: flex;

                div:first-child{
                    margin-right:0.22rem;
                    width:calc(50% - 0.02rem);
                }
                div:last-child{
                    width:calc(50% - 0.2rem);
                }
                .slide2-title{
                    margin:0;
                    font-size: 0.32rem;
                    color: #737373;
                    line-height: 0.5rem;
                    border-bottom:1px solid #737373;
                }
                .slide2-sub{
                    font-size: 0.24rem;
                    color: #737373;
                    margin:0 0 0 -0.3rem;
                }
                .slide2-r{
                    font-size: 0.24rem;
                    color: #737373;
                    margin:0;
                }
            }
        }
        .slide3-sec{
            position: relative;
            .slide3-bg{
                width:100%;
                height:4.52rem;
                background-color: #CDC9BE;
            }
            .slide3-main{
                width:6.7rem;
                position: absolute;
                top:0.4rem;
                left:0.4rem;
            }
            .slide3-bot{
                padding:0.72rem 0.4rem 0.7rem;
                display: flex;
                div{
                    flex:1;
                }
                div:first-child{
                    margin-right:0.32rem;
                    width:calc(50% - 0.16rem);
                }
                div:last-child{
                    width:calc(50% - 0.16rem);
                }
                .slide3-title{
                    font-size: 0.24rem;
                    line-height:0.36rem;
                    color: #737373;
                    margin:0;
                }
                .slide3-r{
                    border-bottom:1px solid #737373;
                    font-size: 0.34rem;
                    color: #737373;
                    margin:0;
                }
                .slide3-sub{
                    font-size: 0.24rem;
                    color: #737373;
                    margin:0;
                }
            }
        }
        .tel-sec{
            background-color: #CDC9BE;
            padding:0.55rem 0.4rem 0;
            .tel-title{
                color:#fff;
                font-size: 0.24rem;
                color: #FFFFFF;
                line-height:0.36rem;
                margin-top:0;
            }
            .tel-sec1{
                display: flex;
                align-items: center;
                padding:0;
                margin-bottom: 0.2rem;
                input{
                    flex:2;
                    height:0.6rem;
                    border-radius: 0.08rem;
                    outline: none;
                    border:none;
                    padding-left:0.2rem;
                }
                div{
                    height:0.6rem;
                    line-height:0.6rem;
                    font-size: 0.26rem;
                    color: #FFFFFF;
                    background: #737373;
                    box-shadow: 0 5px 28px 0 rgba(0,0,0,0.39);
                    border-radius: 0.08rem;
                    flex: 1;
                    margin-left:0.2rem;
                }
            }
            .tel-bot{
                margin-top:0.6rem;
                padding-top:0.6rem;
                border-top:1px solid #737373;
                .tel-main{
                    display: flex;
                    width:5rem;
                    height:0.8rem;
                    margin:0 auto;
                    font-size: 0.3rem;
                    color: #737373;
                    p{
                        position: absolute;
                        right:0.45rem;
                        top:50%;
                        transform: translateY(-50%);
                        -webkit-transform: translateY(-50%);
                        margin:0;
                    }
                    a{
                        color: #737373;
                    }
                    i{
                        width:0.38rem;
                        height:0.38rem;
                        display: block;
                        position: absolute;
                        left:0.4rem;
                        top:50%;
                        transform: translateY(-50%);
                        -webkit-transform: translateY(-50%);
                    }
                    .tel-btn{
                        flex: 1;
                        border-radius: 1rem 0 0 1rem;
                        background-color: #fff;
                        border-right:1px solid #CDC9BE;
                        position: relative;
                        i{
                            background: url('http://skyforest.static.elab-plus.com/previewModel/counselor.png');
                            background-size: 100% 100%;
                        }
                    }
                    .coun-btn{
                        flex: 1;
                        border-radius: 0 1rem 1rem 0;
                        background-color: #fff;
                        position: relative;
                        i{
                            background: url('http://skyforest.static.elab-plus.com/previewModel/tel.png');
                            background-size: 100% 100%;
                        }
                    }
                }
                .code-img{
                    width:2.4rem;
                    height:2.4rem;
                    border:0.06rem solid #fff;
                    box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                    margin:1.6rem auto 0.4rem;
                    display: block;
                }
                .text-code{
                    font-size: 0.24rem;
                    color: #737373;
                    line-height:0.33rem;
                    margin:0;
                }
            }
        }
    //}

// @media screen and (min-width:768px){
//     body,html,#app{
//         max-width: 750px!important;
//         background: #f4f4f4;
//         color: #737373;
//         height: 100%;
//     };
//     #template{
//         max-width: 750px!important;
//         margin:0 auto;
//     }
//     .title-sec{
//         position: relative;
//         margin-bottom:35px;
//         img{
//             width:100%;
//             display: block;
//         }
//         p{
//             width:100%;
//             position: absolute;
//             left:0;
//             color:#fff;
//             margin:0;
//         }
//         .text-why{
//             font-size:26px;
//             top:50px;
//         }
//         .text-detail{
//             width:80%;
//             padding-top:10px;
//             border-top:1px solid #fff;
//             top:98px;
//             left:10%;
//             font-size:24px;
//         }
//     }
//     h2{
//         font-size: 62px;
//         line-height: 92px;
//         margin:0;
//         color: #737373;
//     }
//     .text-sub{
//         width:85%;
//         margin:0 auto 35px;
//         padding-top:5px;
//         font-size: 34px;
//         color: #737373;
//         border-top:1px solid #737373;
//     }
//     .apartment-sec{
//         width:100%;
//         height:320px;
//         background-color: #CDC9BE;
//         padding:0 5%;
//         box-sizing: border-box;
//         -webkit-box-sizing: border-box;
//         position: relative;
//         img{
//             position: absolute;
//             top:40px;
//         }
//         .apartment-detail{
//             width:270px;
//             height:120px;
//             padding-left:40px;
//             border-left:1px solid #737373;
//             position: absolute;
//             top:40px;
//             right:5%;
//         }
//         .apartment-title{
//             font-size: 34px;
//             color: #737373;
//             margin:0 0 6px;
//         }
//         .apartment-text{
//             font-size: 18px;
//             color: #737373;
//             margin:0;
//         }
//     }
//     .text-apert{
//         width:530px;
//         margin:122px auto 82px;
//         font-size: 24px;
//         color: #737373;
//         line-height:36px;
//     }
//     .slide1-sec{
//         background-color: #CDC9BE;
//         padding:40px;
//         .slide1-title{
//             font-size: 34px;
//             color: #454545;
//             margin:0;
//             line-height:50px;
//         }
//         .slide1-sub{
//             width:670px;
//             border-top:1px solid #454545;
//             font-size: 24px;
//             color: #454545;
//             line-height:36px;
//             margin:0;
//         }
//         .slide1-detail{
//             margin:30px auto 8px;
//             font-size: 24px;
//             color: #454545;
//         }
//     }
//     .slide2-sec{
//         padding:40px;
//         margin-top:70px;
//         .slide2-bot{
//             margin:32px 40px 33px 19px;
//             display: flex;
//             div:first-child{
//                 margin-right:22px;
//             }
//             .slide2-title{
//                 width:335px;
//                 margin:0;
//                 font-size: 34px;
//                 color: #737373;
//                 line-height: 50px;
//                 border-bottom:1px solid #737373;
//             }
//             .slide2-sub{
//                 font-size: 24px;
//                 color: #737373;
//             }
//             .slide2-r{
//                 font-size: 20px;
//                 color: #737373;
//                 margin:0;
//             }
//         }
//     }
//     .slide3-sec{
//         position: relative;
//         .slide3-bg{
//             width:100%;
//             height:452px;
//             background-color: #CDC9BE;
//         }
//         .slide3-main{
//             width:670px;
//             position: absolute;
//             top:40px;
//             left:40px;
//         }
//         .slide3-bot{
//             padding:32px 40px 70px;
//             display: flex;
//             div{
//                 flex:1;
//             }
//             div:first-child{
//                 margin-right:32px;
//             }
//             .slide3-title{
//                 font-size: 24px;
//                 line-height:36px;
//                 color: #737373;
//                 margin:0;
//             }
//             .slide3-r{
//                 border-bottom:1px solid #737373;
//                 font-size: 34px;
//                 color: #737373;
//                 margin:0;
//             }
//             .slide3-sub{
//                 font-size: 24px;
//                 color: #737373;
//                 margin:0;
//             }
//         }
//     }
//     .tel-sec{
//         background-color: #CDC9BE;
//         padding:55px 40px 0;
//         .tel-title{
//             color:#fff;
//             font-size: 24px;
//             color: #FFFFFF;
//             line-height:36px;
//             margin-top:0;
//         }
//         .tel-sec1{
//             display: flex;
//             align-items: center;
//             padding:0;
//             margin-bottom: 20px;
//             input{
//                 flex:2;
//                 height:60px;
//                 border-radius: 8px;
//                 outline: none;
//                 border:none;
//                 padding-left:20px;
//             }
//             div{
//                 height:60px;
//                 line-height:60px;
//                 font-size: 26px;
//                 color: #FFFFFF;
//                 background: #737373;
//                 box-shadow: 0 5px 28px 0 rgba(0,0,0,0.39);
//                 border-radius: 8px;
//                 flex: 1;
//                 margin-left:20px;
//             }
//         }
//         .tel-bot{
//             margin-top:60px;
//             padding-top:60px;
//             border-top:1px solid #737373;
//             .tel-main{
//                 display: flex;
//                 width:500px;
//                 height:80px;
//                 margin:0 auto;
//                 font-size: 30px;
//                 color: #737373;
//                 p{
//                     position: absolute;
//                     right:45px;
//                     top:50%;
//                     transform: translateY(-50%);
//                     -webkit-transform: translateY(-50%);
//                     margin:0;
//                 }
//                 a{
//                     color: #737373;
//                 }
//                 i{
//                     width:38px;
//                     height:38px;
//                     display: block;
//                     position: absolute;
//                     left:40px;
//                     top:50%;
//                     transform: translateY(-50%);
//                     -webkit-transform: translateY(-50%);
//                 }
//                 .tel-btn{
//                     flex: 1;
//                     border-radius: 100px 0 0 100px;
//                     background-color: #fff;
//                     border-right:1px solid #CDC9BE;
//                     position: relative;
//                     i{
//                         background: url('http://skyforest.static.elab-plus.com/previewModel/counselor.png');
//                         background-size: 100% 100%;
//                     }
//                 }
//                 .coun-btn{
//                     flex: 1;
//                     border-radius: 0 100px 100px 0;
//                     background-color: #fff;
//                     position: relative;
//                     i{
//                         background: url('http://skyforest.static.elab-plus.com/previewModel/tel.png');
//                         background-size: 100% 100%;
//                     }
//                 }
//             }
//             .code-img{
//                 width:240px;
//                 height:240px;
//                 border:6px solid #fff;
//                 box-sizing: border-box;
//                 -webkit-box-sizing: border-box;
//                 margin:160px auto 40px;
//                 display: block;
//             }
//             .text-code{
//                 font-size: 24px;
//                 color: #737373;
//                 line-height:33px;
//                 margin:0;
//             }
//             .edite-code{
//                 padding:122px  40px 46px;
//                 position: relative;
//                 img{
//                     width:111px;
//                     height:111px;
//                     background-color: #fff;
//                     display: block;
//                     // position: absolute;
//                     // left:0.4rem;
//                 }
//                 .code-title{
//                     width:480px;
//                     position: absolute;
//                     bottom:46px;
//                     right:0;
//                     .title{
//                         font-size: 28px;
//                         color: #737373;
//                         border-bottom:1px solid #737373;
//                         margin:0;
//                         line-height:40px;
//                     }
//                     .sub-title{
//                         font-size: 24px;
//                         color: #737373;
//                         line-height:33px;
//                         margin:0;
//                     }
//                 }
//             }
//         }
//     }
// }
</style>
<style>
    .mint-swipe-indicator.is-active{
        background-color: #fff;
        opacity:1;
    }
</style>
