{extend name="public/base"/}
{block name="css"}
<style>
    .content {
        height: 100vh;
        background-color: aquamarine;
        background: url("__MIMAGES__/bg_login.jpg") no-repeat;
        background-size: cover;
    }

    .topBox {
        font-size: 17px;
        color: #fff;
        padding: 10px 25px;
    }

    h3 {
        margin-bottom: 5px;
    }

    .inputBox {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 85vh;
        background-color: #fff;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        padding: 30px;
        box-sizing: border-box;
    }

    .ipt {
        margin-bottom: 25px;
    }

    .ipt h4 {
        margin-bottom: 10px;
        font-size: 18px;
        color: #333;
    }

    .ipt input {
        border:none;
        border-bottom:1px solid #dedede;
        width:100%;
        padding-bottom: 10px;
        font-size: 14px;
    }

    .loginBtn {
        line-height: 43px;
        text-align: center;
        background: linear-gradient(to right, rgb(86, 104, 214), rgb(86, 104, 214));
        border-radius: 20px;
        color: #fff;
        margin-top: 25px;
        width:100%;
        border:none;
        display:block;
    }

</style>
{/block}
{block name="body"}
<div class="content">
    <div class="topBox">
        <h3>AI竞赛成绩查询</h3>
    </div>
    <div class="inputBox">
        <div class="ipt">
            <h4>考生号</h4>
            <input type="text" v-model="form.no" placeholder="请输入考生号" />
        </div>
        <div class="ipt">
            <h4>姓名</h4>
            <input type="text" v-model="form.name" placeholder="请输入姓名" />
        </div>
        <button class="loginBtn" @click="onLogin">查询成绩</button>
    </div>
</div>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.form = Vue.reactive({});

        base.onLogin = () => {
            postJson('/grade/doLogin', base.form).then(({data, code}) => {
                location.href = "{:url('grade/index')}";
            })
        };

        return base;
    }
</script>
{/block}