{extend name="layout:home" /}
{block name="container"}
<style>
    table{
        margin:20px 50px;
        font-size: 13px;
    }
    /*.accountinfo_title table{*/
    /*margin-left: 150px;*/
    /*}*/
    table td{
        height: 50px;
        line-height: 50px;
    }
    .td_name{
        width: 120px;
    }
    .td_info{
        width: 450px;
    }
    .td_update{
        width: 100px;
        color: dodgerblue;
    }
    .tanchu{
        top:30px;
        left: 20%;
        width: 400px;
        height: 320px;
        position: absolute;
        border: 1px grey solid;
        border-radius: 3px;
        background-color: white;
        display: none;
    }
    .tanchu div{
        margin:30px auto;
        text-align: center;
        border-radius: 2px;
        line-height: 30px;
    }

</style>
<div class="layui-tab layui-tab-card">
    <div class="tanchu" id="update_email">
        <div style="margin-top: 20px;">遇到问题</div>
        <div style="font-size: 11px;">您正在为{$Think.session.user_email}修改登陆邮箱，请选择一种身份验证方式</div>
        <div style="border: 1px grey solid;width:240px;height: 30px;">
            <span>通过邮验证</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><a href="">立即验证</a></span>
        </div>
        <div style="border: 1px grey solid;width:240px;height: 30px;">
            <span>通手机验证</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><a href="">立即验证</a></span>
        </div>
        <div style="width:60px;height: 30px;line-height:30px;background-color: dodgerblue;color: white;border-radius: 2px;" id="email_off">关闭</div>
    </div>
    <div class="tanchu" id="update_pwd">
        <div style="margin-top: 20px;">遇到问题</div>
        <div style="font-size: 11px;">您正在为{$Think.session.user_email}修改登陆密码，请选择一种身份验证方式</div>
        <div style="border: 1px grey solid;width:240px;height: 30px;">
            <span>通过邮验证</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><a href="">立即验证</a></span>
        </div>
        <div style="border: 1px grey solid;width:240px;height: 30px;">
            <span>通手机验证</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><a href="">立即验证</a></span>
        </div>
        <div style="width:60px;height: 30px;line-height:30px;background-color: dodgerblue;color: white;border-radius: 2px;" id="pwd_off">关闭</div>
    </div>
    <div class="tanchu" id="update_phone">
        <div style="margin-top: 20px;">遇到问题</div>
        <div style="font-size: 11px;">您正在为{$Think.session.user_email}修改电话号码，请选择一种身份验证方式</div>
        <div style="border: 1px grey solid;width:240px;height: 30px;">
            <span>通过邮验证</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><a href="">立即验证</a></span>
        </div>
        <div style="border: 1px grey solid;width:240px;height: 30px;">
            <span>通手机验证</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><a href="">立即验证</a></span>
        </div>
        <div style="width:60px;height: 30px;line-height:30px;background-color: dodgerblue;color: white;border-radius: 2px;" id="phone_off">关闭</div>
    </div>
    <div class="updatepwd">
        <form method="post">
            <div>
                <table>
                    <tr>
                        <td class="td_name">登陆邮箱</td>
                        <td class="td_info">您的登陆邮箱：{$Think.session.user_email}</td>
                        <td class="td_update" id="email">更改</td>
                    </tr>
                    <tr>
                        <td class="td_name">登陆密码</td>
                        <td class="td_info">互联网账户存在被盗风险，建议您定期更改密码，以确保账户安全。</td>
                        <td class="td_update" id="pwd">更改</td>
                    </tr>
                    <tr>
                        <td class="td_name">电话号码</td>
                        <td class="td_info">您已绑定手机：+ (86)&nbsp&nbsp{$user['user_phone']}</td>
                        <td class="td_update" id="phone">更改</td>
                    </tr>
                </table>

            </div>
        </form>
    </div>
</div>
<script>
    $("#email").click(function(){
        document.getElementById("update_email").style.display = "block";
    });
    $("#email_off").click(function(){
        document.getElementById("update_email").style.display = "none";
    });
    $("#pwd").click(function(){
        document.getElementById("update_pwd").style.display = "block";
    });
    $("#pwd_off").click(function(){
        document.getElementById("update_pwd").style.display = "none";
    });
    $("#phone").click(function(){
        document.getElementById("update_phone").style.display = "block";
    });
    $("#phone_off").click(function(){
        document.getElementById("update_phone").style.display = "none";
    });
</script>
<script type="text/javascript">
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#creatTime' //指定元素
        });
        laydate.render({
            elem:'#timeRang',
            range:true,
            format: 'yyyy/MM/dd',
            done: function(value, date){
                /* 时间选择完成后的回调 */
            }
        })
    });
</script>
{/block}