<template>
    <div style="background-image: url('./picture/hhr/01.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 150%; position:relative">
        <div style="height:70px"></div>
        <img src="/picture/hhr/kefu.png"  style="width: 10%;position:fixed ;right: 15px;top: 15px" @click="showPopup">
        <div  style="background: white;" >
            <div style="padding-top:20px">
                <van-divider :style="{ borderColor: '#1989fa', padding: '0 16px' }">
                    <div style="font-size: 22px"> 福利方案</div>
                </van-divider>
            </div>
            <div style="text-align: center;height:100%;margin: 10px 10px 10px 10px;background-color: rgba(128, 128, 128, 0.09);background:#adadad">
                <div style=" border-bottom:2px solid  green;font-size: 22px">
                    <van-row>
                        <van-col span="8"></van-col>
                        <van-col span="8">原套餐<br>(daiding)</van-col>
                        <van-col span="8">新套餐<br>(daiding)</van-col>
                    </van-row>
                </div>
                <div style=" border-bottom:2px solid  green;font-size: 22px">
                    <van-row>
                        <van-col span="8">月租</van-col>
                        <van-col span="8">{{package}}</van-col>
                        <van-col span="8">(daiding)</van-col>
                    </van-row>
                </div>
                <div style=" border-bottom:2px solid  green;font-size: 22px">
                    <van-row>
                        <van-col span="8">套餐</van-col>
                        <van-col span="8">(daiding)</van-col>
                        <van-col span="8">(daiding)</van-col>
                    </van-row>
                </div>
                <div style=" border-bottom:2px solid  green;font-size: 22px">
                    <van-row>
                        <van-col span="8">语音</van-col>
                        <van-col span="8">(daiding)</van-col>
                        <van-col span="8">(daiding)</van-col>
                    </van-row>
                </div>
                <div style=" border-bottom:2px solid  green;font-size: 22px">
                    <div style="margin: 10px 10px 10px 10px;">
                        <van-checkbox v-model="checked" shape="square">复选框</van-checkbox>
                    </div>

                </div>
            </div>
        </div>
        <div style="font-size: 28px;text-align: center;background: white;position:fixed ;bottom: 0px;width: 100%" class="van-hairline--surround">

            <div style="width: 90%;margin-left: 5%;margin: 20px 5% 20px 5%;">
                <van-button  round block type="info" native-type="submit" @click="selectPackage">马上办理</van-button>
            </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>
    import {selectPackage,sendVerificationCode} from "@/api/app/package"
    import Vue from 'vue';
    import {Field} from 'vant';

    export default {
        name: "packageUpgrade",
        package:'',
        data() {
            return {
                phone: '',
                kefushow: false,
            };
        },
        methods: {
            selectPackage() {

            },
            showPopup() {
                if(this.kefushow == true){
                    this.kefushow = false
                }else {
                    this.kefushow = true
                }
            },
        }
    }
</script>

<style scoped>

</style>
