wangyong
/
card


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<html>
<head>
    <title>领取话卡</title></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/c/font_2056629_vzvl0jvb2q.css">
    <link rel="stylesheet" type="text/css" href="static/css/style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <style>
        .s-img{
            width: 95%;
            margin: auto;
        }
        .s-img img{
            width: 100%;
        }
              .r-li {
            width: 90%;
            margin: 2rem auto;
        }

        .r-input {
            width: 100%;
            display: flex;
            justify-content: space-between;
            line-height: 2rem;
            color: #7e7e7e;
            margin: 1rem auto;
        }

        .r-input input {
            border: none;
            height: 2rem;
            width: 70%;
        }

        .code {
            border: 1px solid #3ab7e7;
            font-size: 14px;
            padding: 1px 5px;
            box-shadow: 1px 1px 2px 1px #a9aaab;
            color: #3ab7e7;
        }

        .r-but {
            line-height: 20px;
            font-size: 14px;
            color: #fff;
            background: linear-gradient(135deg, #69e2b3, #19be6b);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 3rem;
            width: 60%;
            border-radius: 10px;
            margin: auto;
        }
        .detail{
    position: absolute;
    z-index: 99;
    background-color: #cccccc87;
    height: 100%;
    width: 100%;
    /* border-radius: 5%; */
    top: 0;
    left: 0;
    display: none;
}
.tis{
    text-align: center;
    margin: 1rem auto;
    font-size: 14px;
    color: #f33155;
}
    </style>
</head>

<body>
    <div class="s-main">
        <div class="s-img"><img src="static/images/img.jpg"/></div>
        <div class="tis"><i class="iconfont iconxiaoxi"></i>以下信息已加密保护，仅用于运营商使用！</div>
        <form action="">
            <div class="r-li">
                <div class="r-input"><span>真实姓名:</span><input type="text" name="name" value="" placeholder="请输入真实姓名" />
                </div>
                <div class="r-input"><span>身份证号:</span><input type="text" name="name" value="" placeholder="请输入身份证号" />
                </div>
                <div class="r-input"><span>联系电话:</span><input type="tel" name="name" value="" placeholder="请输入电话" /></div>
                <div class="r-input"><span>收货地址:</span><input type="" name="name" value="" placeholder="请选择地址" id="addr" /></div>
                <div class="r-input"><span>详细地址:</span><input type="" name="name" value="" placeholder="请输入详细地址" id="addrss" /></div>
                <div class="r-input" style="justify-content: unset;"><span>入网协议:</span><span><input type="radio" value=""  color="" style="height: 1rem;width: 1rem;">
                    
                 我已阅读并同意</span></div>
                 <div style="color:#3463e7;font-size:14px;line-height:1.5rem">
                    ⟪实名制信息安全责任告知书⟫，⟪关于客户个人信息收集、使用规则的公告⟫，⟪电信和互联网用户个人信息保护规定⟫
                 </div>
            </div>
            <div class="r-but">立即领取</div>
            
        </form>
    </div>


    <div class="detail" id="myDiv">
        <iframe id="mapPage" width="100%" height="100%" frameborder=0
        src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=JW6BZ-6Z5K3-WQE3R-3LCTW-Q2QM6-BZB2D&referer=myapp">
        </iframe>
</div>


</body>

</html>

 
<script>
  $('#addr').click(function(){
    $('#myDiv').show();
  });
    window.addEventListener('message', function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data;
        if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          console.log('location', loc);
          var addr=loc.poiaddress
          $('#addr').val(addr);
          $('#addrss').val(addr);
          $('#myDiv').hide();
        }
    }, false);
</script>