<template>
    <div class="templatePush" id="temp" :style="
      pageData.mainProduct.bgColor !== null &&
      pageData.mainProduct.bgColor.length > 0
        ? { backgroundColor:pageData.mainProduct.bgColor[0] }
        : { backgroundColor: '#000' }
    ">
        <div class="bannerBox">
            <img class="banner" :src="imgUrl+pageData.mainProduct.bannerPics[0]" alt="">
        </div>
        <!-- 统一认证组件 -->
        <tong-ren @btnClick='openIframe' :pageData="pageData" @phoneNum="phoneFuction">
        </tong-ren>
        <div class="contentBox" v-if="pageData.mainProduct.guidancePic.p"
            :style="{backgroundColor:pageData.mainProduct.bgColor[3],color:pageData.mainProduct.bgColor[2]}">
            <div class="roundBox long">
                <div class="mini"
                    :style="pageData.mainProduct.bgColor[2]!==''?{backgroundColor:pageData.mainProduct.bgColor[2]}:{backgroundColor:'#fff'}">
                </div>
                <div class="small"
                    :style="pageData.mainProduct.bgColor[2]!==''?{backgroundColor:pageData.mainProduct.bgColor[2]}:{backgroundColor:'#fff'}">
                </div>
                <div class="model"
                    :style="pageData.mainProduct.bgColor[2]!==''?{backgroundColor:pageData.mainProduct.bgColor[2]}:{backgroundColor:'#fff'}">
                </div>
                <div class="text"
                    :style="{backgroundColor:pageData.mainProduct.bgColor[2],color:pageData.mainProduct.bgColor[3]}">
                    {{pageData.mainProduct.memberName}}</div>
                <div class="model"
                    :style="pageData.mainProduct.bgColor[2]!==''?{backgroundColor:pageData.mainProduct.bgColor[2]}:{backgroundColor:'#fff'}">
                </div>
                <div class="small"
                    :style="pageData.mainProduct.bgColor[2]!==''?{backgroundColor:pageData.mainProduct.bgColor[2]}:{backgroundColor:'#fff'}">
                </div>
                <div class="mini"
                    :style="pageData.mainProduct.bgColor[2]!==''?{backgroundColor:pageData.mainProduct.bgColor[2]}:{backgroundColor:'#fff'}">
                </div>
            </div>
            <div class="guidancePic">
                <img :src="imgUrl +pageData.mainProduct.guidancePic.p" style="width: 100%;height:100%" />
            </div>
        </div>
        <div class="contentBox" v-if="pageData.mainProduct.givePhoneInfo"
            :style="{backgroundColor:pageData.mainProduct.bgColor[3],color:pageData.mainProduct.bgColor[2]}">
            <div class="roundBox">
                <div class="mini"
                    :style="pageData.mainProduct.bgColor[2]!==''?{backgroundColor:pageData.mainProduct.bgColor[2]}:{backgroundColor:'#fff'}">
                </div>
                <div class="small"
                    :style="pageData.mainProduct.bgColor[2]!==''?{backgroundColor:pageData.mainProduct.bgColor[2]}:{backgroundColor:'#fff'}">
                </div>
                <div class="model"
                    :style="pageData.mainProduct.bgColor[2]!==''?{backgroundColor:pageData.mainProduct.bgColor[2]}:{backgroundColor:'#fff'}">
                </div>
                <div class="text"
                    :style="{backgroundColor:pageData.mainProduct.bgColor[2],color:pageData.mainProduct.bgColor[3]}">
                    产品说明</div>
                <div class="model"
                    :style="pageData.mainProduct.bgColor[2]!==''?{backgroundColor:pageData.mainProduct.bgColor[2]}:{backgroundColor:'#fff'}">
                </div>
                <div class="small"
                    :style="pageData.mainProduct.bgColor[2]!==''?{backgroundColor:pageData.mainProduct.bgColor[2]}:{backgroundColor:'#fff'}">
                </div>
                <div class="mini"
                    :style="pageData.mainProduct.bgColor[2]!==''?{backgroundColor:pageData.mainProduct.bgColor[2]}:{backgroundColor:'#fff'}">
                </div>
            </div>
            <div class="main" v-html="pageData.mainProduct.givePhoneInfo">
            </div>
        </div>
        <!-- 订购超时 -->
        <timeout-modal v-model="showTimeout"></timeout-modal>
    </div>
</template>
<script>
    import common from "../../common/common";
    import timeoutModal from "../../components/timeoutModal.vue";
    import tongRen from "./components/tongRen.vue";
    export default {

        mixins: [common],
        components: {
            timeoutModal,
            tongRen,
        },
        data() {
            return {
                imgUrl: process.env.VUE_APP_IMGS_URL,
                showTimeout: false,
                phone: "",
                isBuy: "未订购",
            }
        },
        created() {
            document.title = this.pageData.mainProduct.productName;
            if (this.$route.query.phone) {
                this.phone = this.$route.query.phone
            }

        },
        methods: {
            phoneFuction(e) {
                this.phone = e
            }
        }


    }
</script>
<style lang='scss'>
    .templatePush {
        // background-color: #042B85;
        color: #0d0d0d;
        min-height: 100vh;
        font-family: PingFang SC;
        width: 100vw;
        overflow-x: hidden;

        @keyframes scale {
            from {
                transform: scale(1);
            }

            to {
                transform: scale(0.8);
            }
        }


        .iframe {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 9999;
        }

        .bannerBox {
            width: 100%;
            height: auto;

            .banner {
                width: 100%;
                height: 100%;
            }
        }

        .inputBox {
            width: 603px;
            height: 91px;
            background: #FFFFFF;
            border-radius: 46px;
            margin: 18px auto 0 auto;
            box-sizing: border-box;
            padding-left: 44px;
            padding-right: 44px;

            .input {
                width: 100%;
                margin: 0;
                padding: 0;
                border: none;
                outline: none;
                height: 100%;
                font-size: 29px;

                font-family: HYQiHei;
                font-weight: bold;
                color: #B0ACAC;
                opacity: 0.7;
                line-height: 79px;
            }
        }

        .btnBox {
            width: 516px;
            height: 96px;
            margin: 30px auto 40px auto;
            border-radius: 35px;
            animation-name: scale;
            animation-duration: 0.3s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-direction: alternate-reverse;

            .btnText {
                width: 100%;
                height: 100%;
                border-radius: 48px;
                text-align: center;
                line-height: 96px;
                font-size: 50px;
                font-family: HYQiHei;
                font-weight: bold;
                // background: linear-gradient(rgb(158, 156, 149), #FBD657);
                // box-shadow: 0px 3px 6px 0px rgba(255, 255, 255, 0.64);
                // color: #F60F0B;

            }
        }

        .contentBox {
            width: 638px;
            border-radius: 20px;
            margin: 0 auto;
            margin-bottom: 68px;
            padding: 41px 35px 56px 40px;
            box-sizing: border-box;



            .roundBox {
                min-width: 400px;
                margin: 40px auto;
                display: flex;
                justify-content: center;
                align-items: center;
                line-height: 79px;
                height: 79px;


                .mini {
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;

                    margin: 0 5px;
                }

                .small {
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    margin: 0 5px;

                }

                .model {
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;

                    margin: 0 5px;
                }

                .text {
                    min-width: 200px;
                    height: 79px;
                    text-align: center;
                    font-size: 36px;
                    font-family: HYQiHei;
                    font-weight: bold;
                    line-height: 79px;
                    border-radius: 39px;
                    margin: 0 15px;
                    padding: 0 30px;
                }
            }

            .main {
                font-size: 22px;
                font-family: HYQiHei;
                font-weight: normal;
                line-height: 33px;
            }


        }

        .timeout-modal {
            padding: 60px 40px;
            font-size: 28px;
            line-height: 50px;
            text-align: center;
            color: #222222;

            .btn {
                width: 160px;
                line-height: 60px;
                margin: 50px auto 0;
                border-radius: 8px;
                background-color: #1876bc;
                color: #fff;
            }
        }

        .modal {
            box-sizing: border-box;
            position: absolute;
            left: 50%;
            top: 333px;
            transform: translateX(-50%);
            width: 530px;
            background-color: #fff;
            border-radius: 8px;

            .close {
                width: 80px;
                height: 80px;
                position: absolute;
                bottom: -130px;
                left: 50%;
                transform: translateX(-50%);
            }

            .top {
                width: 100%;
                height: 96px;
            }

            .logo {
                width: 92px;
                height: 50px;
                position: absolute;
                top: 22px;
                left: 37px;
            }
        }

    }
</style>