love/public/themes/simpleboot3/matchmaker/my/statistics.html

<extend name="public/base"/>
<block name="css">
    <style>
        .van-nav-bar--fixed {z-index:100;}
        .van-nav-bar .van-icon,.van-nav-bar__text {color:white;}
        .van-step--horizontal .van-step__title {font-size:16px;}
        .van-step--horizontal .van-step__icon {font-size:16px;}
        .van-step__circle {width:10px;height:10px;}

        .lw-item {background:white;}
        .margin-top-10 {margin-top:10px;}
        .lw-item h3 {padding:5px 10px;}
        .grid-title {padding-top:5px;color:#666;font-size:14px;}
        .grid-num {color:var(--pink);font-size:20px;}
    </style>
</block>
<block name="body">
    <van-nav-bar
            class="bg-pink"
            left-text="返回"
            left-arrow
            @click-left="onBack"
            fixed="true"
    >
        <template #title>
            <span style="color:white;">统计</span>
        </template>
    </van-nav-bar>
    <div style="width:100%;height:46px;"></div>

    <div class="lw-item">
        <h3>状态</h3>
        <van-grid :column-num="5">
            <van-grid-item>
                <template #icon>
                    <p class="grid-num">{$status_1}</p>
                </template>
                <template #text>
                    <p class="grid-title">待审核</p>
                </template>
            </van-grid-item>
            <van-grid-item>
                <template #icon>
                    <p class="grid-num">{$status_2}</p>
                </template>
                <template #text>
                    <p class="grid-title">审核通过</p>
                </template>
            </van-grid-item>
            <van-grid-item>
                <template #icon>
                    <p class="grid-num">{$status_3}</p>
                </template>
                <template #text>
                    <p class="grid-title">不通过</p>
                </template>
            </van-grid-item>
            <van-grid-item>
                <template #icon>
                    <p class="grid-num">{$status_4}</p>
                </template>
                <template #text>
                    <p class="grid-title">热恋</p>
                </template>
            </van-grid-item>
            <van-grid-item>
                <template #icon>
                    <p class="grid-num">{$status_5}</p>
                </template>
                <template #text>
                    <p class="grid-title">已婚</p>
                </template>
            </van-grid-item>
        </van-grid>
    </div>

    <div class="lw-item margin-top-10">
        <h3>性别</h3>
        <van-grid :column-num="3">
            <van-grid-item>
                <template #icon>
                    <p class="grid-num">{$total}</p>
                </template>
                <template #text>
                    <p class="grid-title">总人数</p>
                </template>
            </van-grid-item>
            <van-grid-item>
                <template #icon>
                    <p class="grid-num">{$sex_man}</p>
                </template>
                <template #text>
                    <p class="grid-title">男性</p>
                </template>
            </van-grid-item>
            <van-grid-item>
                <template #icon>
                    <p class="grid-num">{$sex_woman}</p>
                </template>
                <template #text>
                    <p class="grid-title">女性</p>
                </template>
            </van-grid-item>
        </van-grid>
    </div>

    <div class="lw-item margin-top-10">
        <h3>学历</h3>
        <van-grid>
            <van-grid-item>
                <template #icon>
                    <p class="grid-num">{$education_bkyx}</p>
                </template>
                <template #text>
                    <p class="grid-title">本科以下</p>
                </template>
            </van-grid-item>
            <van-grid-item>
                <template #icon>
                    <p class="grid-num">{$education_bk}</p>
                </template>
                <template #text>
                    <p class="grid-title">本科</p>
                </template>
            </van-grid-item>
            <van-grid-item>
                <template #icon>
                    <p class="grid-num">{$education_ss}</p>
                </template>
                <template #text>
                    <p class="grid-title">硕士</p>
                </template>
            </van-grid-item>
            <van-grid-item>
                <template #icon>
                    <p class="grid-num">{$education_bs}</p>
                </template>
                <template #text>
                    <p class="grid-title">博士</p>
                </template>
            </van-grid-item>
        </van-grid>
    </div>

    <div class="lw-item margin-top-10">
        <h3>婚姻状况</h3>
        <van-grid :column-num="3">
            <van-grid-item>
                <template #icon>
                    <p class="grid-num">{$marry_wh}</p>
                </template>
                <template #text>
                    <p class="grid-title">未婚</p>
                </template>
            </van-grid-item>
            <van-grid-item>
                <template #icon>
                    <p class="grid-num">{$marry_lh}</p>
                </template>
                <template #text>
                    <p class="grid-title">离婚</p>
                </template>
            </van-grid-item>
            <van-grid-item>
                <template #icon>
                    <p class="grid-num">{$marry_so}</p>
                </template>
                <template #text>
                    <p class="grid-title">丧偶</p>
                </template>
            </van-grid-item>
        </van-grid>
    </div>

</block>
<block name="script">
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                };
            },
            methods: {
                onBack() {
                    history.back();
                },
            },
        });
    </script>
</block>