<template>
    <div style=" background-image: url('./picture/hhr/01.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 150%; position:relative">
        <img src="/picture/hhr/kefu.png"  style="width: 10%;position:fixed ;right: 15px;top: 15px" @click="showPopup">
        <div style="height:40px"></div>
        <div style="background-image: url('./picture/hhr/02.png');background-repeat: no-repeat;background-position: center;background-size: 100%;width: 77%;height: 280px;margin: auto;">
        </div>
        <div v-show="newcarAll">
            <div @click="newcartouch" style="background-image: url('./picture/hhr/03.png'); width: 256px; height: 64px;margin: 20px auto; background-repeat: no-repeat;background-size: 100%;">
            </div>
            <div style="text-align: center;color: white;font-size: 14px;margin-top: -20px">（新开卡优惠+0息分期购机）</div>
            <div @click="packageUpgrade" style="background-image: url('./picture/hhr/04.png'); width: 256px; height: 64px;margin: 20px auto; background-repeat: no-repeat;background-size: 100%;"></div>
            <div @click="newcartouchB" style="background-image: url('./picture/hhr/05.png'); width: 256px; height: 64px;margin: 20px auto; background-repeat: no-repeat;background-size: 100%;"></div>
            <fieldset class="layui-elem-field"
                      style="width: 85%;margin: 0 auto;border-radius: 10px;margin-bottom: 10px;background-color: rgba(255,255,255, 0.8);">
                <legend style="text-align: center;background-color: white;border-radius: 10px;font-weight: bold;background-color: rgb(244,194,124);width: 50%;">
                    温馨提示
                </legend>
                <div style="padding: 10px 15px; font-size: 11px">
                    <div style="width: 100%;color: black;margin: 0 auto;">
                        1、下单限制：根据工信部要求，未满16周岁及其他无民事行文能力的用户，应有法定代理人代为办理线上入网。
                    </div>
                    <div style="width: 100%; color: black;  margin: 0 auto;">
                        2、异常订单：为了保障普通用户的购买需求和权益，我司有权取消异常订单。如同一用户订购两个或两个以上相同商品的订单，不予发货。
                        同一用户的定义包括但不限于以下情况：同一身份证、或同一联系号码、或同一个收件人（同名除外）、相同（雷同、邻近、虚构、乱码）的收货地址等。
                    </div>
                </div>
            </fieldset>
        </div>
        <div  v-show="newcar" >
            <div style="background-image: url('./picture/hhr/06.png'); width: 256px; height: 64px;margin: 20px auto; background-repeat: no-repeat;background-size: 100%;" @click="newPackage"></div>
            <div style="height: 250px"></div>
        </div>
        <div  v-show="newcarB">
            <div style="background-image: url('./picture/hhr/b1.png');width: 256px; height: 64px;margin: 20px auto; background-repeat: no-repeat;background-size: 100%;" @click="danKuan"></div>
            <div style="background-image: url('./picture/hhr/b2.png');width: 256px; height: 64px;margin: 20px auto; background-repeat: no-repeat;background-size: 100%;" @click="rongHe"></div>
            <div style="height: 250px"></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:"hhrCustomer",
        data(){
           return{
               newcarAll:true,
               newcar:false,
               newcarB:false,
               kefushow: false
           }
        }
        ,

        methods: {
            newcartouch(){
                this.newcar=true
                this.newcarAll=false
            },
            newcartouchB(){
                this.newcarB=true
                this.newcarAll=false
            },
            newcargoback(){
                this.newcar=false
            },
            showPopup() {
                this.kefushow = true;
            },
            newPackage(){
                this.$router.push({path: 'newPackageTips'})
            },
            danKuan(){
                this.$router.push({path: 'danKuan'})
            },
            rongHe(){
                this.$router.push({path: 'rongHe'})
            },
            packageUpgrade(){
            this.$router.push({path: 'packageUpgrade'})
            }
        }
    }

</script>

<style scoped>
</style>
