<template>
    <div class="div-bg">
        <div style="display: flex; ">
            <img src="/picture/hhr/kefu.png" style="width: 10%;position:fixed ;right: 15px;top: 15px"
                 @click="showPopup">
        </div>
        <div class="div-pkg-card-top">
            <div class="div-pkg-cards">
                <div class="div-pkg-card">
                    <div class="div-pkg-fee">
                        <img src="/picture/hhr/pkg-fee-tag.png" height="36px" style="margin-top: -5px;">
                        <div class="div-pkg-fee-font">
                            10元/月
                        </div>
                    </div>
                    <img class="pkg-logo" src="/picture/hhr/xueshengzhenglog.png">
                    <div class="pkg-explain">10元/月</div>
                    <div class="div-pkg-btns">
                        <div id="btn-details"><a href="/gdtel-xyzx-hhr/customer/index.do?id=11519&amp;cardId=49">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                        </div>
                        <div class="btns-split">&nbsp;</div>
                        <div id="btn-dopay"><a href="/gdtel-xyzx-hhr/customer/create.do?id=11519&amp;cardId=49">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="div-pkg-cards">
                <div class="div-pkg-card">
                    <div class="div-pkg-fee">
                        <img src="/picture/hhr/pkg-fee-tag.png" height="36px" style="margin-top: -5px;">
                        <div class="div-pkg-fee-font">
                            28元/月
                        </div>
                    </div>
                    <img class="pkg-logo" src="/picture/hhr/heiniuka.png">
                    <div class="pkg-explain">30G国内+40G定向大流量</div>
                    <div class="div-pkg-btns">
                        <div id="btn-details"><a href="/gdtel-xyzx-hhr/customer/index.do?id=11519&amp;cardId=49">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                        </div>
                        <div class="btns-split">&nbsp;</div>
                        <div id="btn-dopay"><a href="/gdtel-xyzx-hhr/customer/create.do?id=11519&amp;cardId=49">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="div-pkg-cards">
                <div class="div-pkg-card">
                    <div class="div-pkg-fee">
                        <img src="/picture/hhr/pkg-fee-tag.png" height="36px" style="margin-top: -5px;">
                        <div class="div-pkg-fee-font">
                            28元/月
                        </div>
                    </div>
                    <img class="pkg-logo" src="/picture/hhr/heiniuka.png">
                    <div class="pkg-explain">30G国内+40G定向大流量</div>
                    <div class="div-pkg-btns">
                        <div id="btn-details"><a href="/gdtel-xyzx-hhr/customer/index.do?id=11519&amp;cardId=49">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                        </div>
                        <div class="btns-split">&nbsp;</div>
                        <div id="btn-dopay"><a href="/gdtel-xyzx-hhr/customer/create.do?id=11519&amp;cardId=49">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="kefushow">
            <van-popup  v-model="kefushow" style="width: 90%;height: 45%; display: flex; align-items: center;justify-content: center;">
                <div style="border: 1px solid #e2e2e2;width: 92%;height: 90%;position: fixed;display: flex; align-items: center;justify-content: center;">
                    <div style="font-size: 20px; color: black;text-align: center;position: fixed;top: 3px">您的专属客服</div>
                    <img src="/picture/hhr/service-qrcode.jpg" style="width:55%;" >
                </div>
            </van-popup>
        </div>
    </div>

</template>

<script>
    export default {
        name: "chooseCard",
        data(){
            return{
                kefushow:false
            }
        },
        methods:{
            showPopup(){
                this.kefushow=true
            },
        }
    }
</script>

<style scoped>
    .div-bg {
        background-image: url(/picture/hhr/01.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        width: 100%;
        height: 100%;
        border: 0;
        overflow-y: scroll;
    }
    .div-pkg-cards {
        position: relative;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    #btn-dopay {
        width: 49.5%;
        float: right;
        height: 100%;
        text-align: center;
        background-image: url(/picture/hhr/btn_choosecard_dopay.png);
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center;
    }
    .btns-split {
        width: 1px;
        float: left;
        background-color: rgb(110, 126, 190);
        height: 100%;
    }
    #btn-details {
        width: 49.5%;
        float: left;
        height: 100%;
        text-align: center;
        border-top: 1px;
        background-image: url(/picture/hhr/btn_choosecard_details.png);
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center;
    }
    .div-pkg-btns {
        position: absolute;
        width: 80%;
        height: 50px;
        line-height: 50px;
        bottom: 0;
        border-color: rgb(110, 126, 190);
        border-style: solid;
        border-top-width: 1px;
        border-left-width: 0;
        border-right-width: 0;
        border-bottom-width: 0;
    }
    .pkg-explain {
        float: left;
        padding: 10px;
        width: 60%;
        font-size: 16px;
        color: black;
    }
    .pkg-logo {
        width: 128px;
        max-height: 50px;
        margin: 10px;
        float: left;
    }
    .div-pkg-card-top {
        margin-top: 20%;
    }

    .div-pkg-card {
        width: 80%;
        height: 180px;
        margin: auto;
        margin-top: 30px;
        border-radius: 10px;
        background-color: rgb(191, 220, 252);
        box-shadow: #4962bd 10px 10px;
        background-image: url(/picture/hhr/sim-bg.png);
        background-repeat: no-repeat;
        background-size: 90px;
        background-position: 90% 50%;
    }

    .div-pkg-fee-font {
        background-color: rgb(248, 204, 70);
        display: inline-block;
        line-height: 36px;
        height: 100%;
        font-size: 18px;
        font-weight: bold;
        color: black;
    }

    .div-pkg-fee {
        float: right;
        margin-top: 20px;
        padding-right: 0;
        height: 36px;
    }
</style>
