<template>
    <div class="tel-sec" :style="`background-color:${bgc}`">

        <div class="tel-btn" :style="`background-color:${btnColor}`">
            <p>一对一在线咨询</p>
        </div>
        <div class="line"></div>
        <ul :style="`color:${btnColor}`">
            <li class="saveTel"><i></i>留电</li>
            <li class="phone">
                <a :style="`color:${btnColor}`">
                    <i></i>电话咨询
                </a>
            </li>
            <li class="qrcode"><i></i>查看二维码</li>
        </ul>
        <div class="tel-bot">
            <div class="edite-code">
                <div class="code-title">
                    <p class="title">本资料提供的所有文字、图片、视频数据仅供参考，</p>
                    <p class="sub-title">最终以政府批准文件及双方签订的买卖合同为准</p>
                </div>
            </div>
        </div>
    </div>
</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'
const parsed = queryString.parse(location.search);
const code = parsed.code || null;
    export default {
        props:{
          bgc:{//背景色
              type:String,
              default:'#B1C096'
          },
          btnColor:{//IM按钮底色和‘留点/电话咨询/查看二维码’文字颜色
              type:String,
              default:'#5f8a61'
          }
        }
    }
</script>

<style lang="scss" scoped>
    *{
        margin: 0;
        padding: 0;
        border: none;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    .tel-sec{
        padding:60px 60px 20px 20px;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        .tel-btn{
            margin: 0 auto;
            width: 422px;
            line-height: 90px;
            border-radius: 45px;
            font-size: 36px;
            color: #fff;
            background: url("http://skyforest.static.elab-plus.com/temp/chat.png") no-repeat 45px center/42px 41px;
            padding-left: 110px;
        }
        .line{
            opacity: 0.32;
            border: 1px solid #1C1C1C;
            height: 1px;
            margin-top: 38px;
        }
        ul{
            display: flex;
            margin-top: 30px;
            align-items: center;
            justify-content: center;
            li{
                font-family: PingFangSC-Regular;
                font-size: 24px;
                text-align: center;
                line-height: 30px;
                margin: 0 30px;
                a{
                    text-decoration: none;
                }
            }
            li i{
                display: block;
                margin: 0 auto;
                width: 70px;
                height: 70px;
                margin-bottom: 10px;
            }
            .saveTel i{
                background: url("http://skyforest.static.elab-plus.com/temp/liudian2.png") no-repeat top center/70px 70px;
            }
            .phone i{
                background: url("http://skyforest.static.elab-plus.com/temp/tel.png") no-repeat top center/70px 70px;
            }
            .qrcode i{
                background: url("http://skyforest.static.elab-plus.com/temp/code.png") no-repeat top center/70px 70px;
            }
        }
        .saveTelContain{
            padding: 33px 20px 20px 20px;
            width: 630px;
            height: 230px;
            background: url("http://skyforest.static.elab-plus.com/temp/input box.png") no-repeat center center/100% 100%;
            .tel-sec1{
                display: flex;
                input{
                    width: 420px;
                    height: 80px;
                    line-height: 80px;
                    border-radius: 8px;
                    font-family: PingFangSC-Medium;
                    font-size: 30px;
                    /*color: #FFFFFF;*/
                    text-align: justify;
                    background: transparent;
                    padding-left: 30px;
                }

                input::placeholder{
                    width: 420px;
                    height: 80px;
                    line-height: 80px;
                    border-radius: 8px;
                    font-family: PingFangSC-Medium;
                    font-size: 30px;
                    color: #FFFFFF;
                    text-align: justify;
                }
                div{
                    width: 165px;
                    height: 80px;
                    font-family: PingFangSC-Semibold;
                    font-size: 28px;
                    color: #333333;
                    text-align: center;
                    line-height: 80px;
                }
            }

            .verify{
                margin-top: 15px;
            }
        }
        .tel-bot{
            margin-top: 75px;
            p{
                ont-family: PingFangSC-Regular;
                font-size: 24px;
                color: #666666;
                text-align: center;
            }
        }
    }
</style>
