lw_test/app/mobile/view/grade/index.html

{extend name="public/base"/}
{block name="css"}
<style>
    body {
        --van-cell-font-size: 18px;
        --van-grid-item-text-font-size: 14px;
    }
    .text-success {
        color: var(--blue);
        font-size: 24px;
        text-align: center;
        padding: 20px 0;
        background: white;
        font-weight: bold;
    }
    .text-error {
        color: var(--red);
        font-size: 24px;
        text-align: center;
        padding: 20px 0;
        background: white;
        font-weight: bold;
    }
    .score {
        font-size: 24px;
        padding-bottom: 5px;
        font-weight: bold;
        color: var(--red);
    }
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
>
    <template #title>
        <span class="text-white">成绩查询</span>
    </template>
</van-nav-bar>
<div class="text-success" v-if="grade.is_final == 1">恭喜您，进入决赛</div>
<div class="text-error" v-else>抱歉，未进入决赛</div>
<van-grid :column-num="3">
    <van-grid-item text="理论最终得分">
        <template #icon>
            <div class="score">{{grade.theory_score}}</div>
        </template>
    </van-grid-item>
    <van-grid-item text="机操最终得分">
        <template #icon>
            <div class="score">{{grade.computer_score}}</div>
        </template>
    </van-grid-item>
    <van-grid-item text="初赛最终得分">
        <template #icon>
            <div class="score">{{grade.total_score}}</div>
        </template>
    </van-grid-item>
</van-grid>
<van-cell-group inset style="margin-top:10px;">
    <van-field v-model="grade.no" label="考生号" readonly></van-field>
    <van-field v-model="grade.name" label="姓名" readonly></van-field>
    <van-field v-model="grade.company" label="单位" readonly></van-field>
    <van-field v-model="grade.rank" label="排名" readonly></van-field>
</van-cell-group>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.grade = Vue.reactive({$grade});

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