{extend name="base" /}
{block name="style"}
<style>
    img.code{
        width:116px;
        border:#ccc solid 1px;
        height:30px;
        position:absolute;
        top:-5px;
        right:0;
    }
</style>
{/block}
{block name="main"}

<div class="wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="login-bg">
                <div class="login-overlay"></div>
                <div class="login-left">
                    <img src="/static/admin/assets/images/logo.png" alt="Logo">
                    <p>欢迎使用个人码支付平台，适合个人用户使用可以用于软件销售平台API接口对接等</p>
                    <a href="https://www.yc88.net/" class="btn btn-primary">加入我们</a>
                </div><!--login-left-->
            </div><!--login-bg-->

            <div class="login-form">
                <form class="form" action="login" method="post">
                    <div class="login-form-body">
                        <div class="form-gp">
                            <label for="username">登录账号</label>
                            <input type="text" name="username" id="username">
                            <i class="ti-email"></i>
                        </div>
                        <div class="form-gp">
                            <label for="userpass">登录密码</label>
                            <input type="password" name="userpass" id="userpass">
                            <i class="ti-lock"></i>
                        </div>


                                <div class="form-gp">
                                    <label for="usercode">验证码</label>
                                    <input type="text" name="usercode" id="usercode">
                                    <img id="code" class="code" src="{:captcha_src()}" alt="captcha" onclick="javascript:this.src=this.src+'?time='+Math.random()"/>
                                </div>


                        <div class="submit-btn-area">
                            <button id="form_submit" type="submit" class="btn btn-primary">登录 <i
                                    class="ti-arrow-right"></i></button>

                        </div>

                    </div>
                </form>
            </div><!--login-form-->

        </div><!--row-->
    </div><!--container-fluid-->
</div><!--wrapper-->
{/block}
{block name='script'}
<script>

    $(function(){

        $('.form-gp input').on('focus', function() {
            $(this).parent('.form-gp').addClass('focused');
        });
        $('.form-gp input').on('focusout', function() {
            if ($(this).val().length === 0) {
                $(this).parent('.form-gp').removeClass('focused');
            }
        });

        $("#code").on('click',function(){
            $(this).prop('src',$(this).attr('src'));
        });
    });

    $f.ajaxSubmitCallback = function (data) {
        if (data.code == 0) {
            $alert.success("登录成功").then(function(result){
                console.log(result) ;
                location.href = data.data;
            });
        }
    }
</script>
{/block}