lw_test/app/mobile/view/grade_party/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;
    }
    .score {
        font-size: 40px;
        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">党务竞赛成绩</div>
<van-grid :column-num="1">
    <van-grid-item text="总得分">
        <template #icon>
            <div class="score">{{grade.score}}</div>
        </template>
    </van-grid-item>
</van-grid>
<van-cell-group inset style="margin-top:10px;">
    <van-field v-model="grade.name" label="姓名" readonly></van-field>
    <van-field v-model="grade.mobile" 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}