<extend name="public@base"/>
<block name="css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/userwall.css">
    <style>
        .number {width: 30px;height: 30px;line-height: 30px;font-size: 20px;border-radius: 50%;color: white;margin-left: 20px;}
    </style>
</block>
<block name="body">
    <van-nav-bar
            left-text="返回"
            left-arrow
            @click-left="onBack">
        <template #title>
            <span>排行榜</span>
        </template>
    </van-nav-bar>

    <van-tabs v-model="active">
        <van-tab title="最嘉女嘉宾"></van-tab>
        <van-tab title="最嘉男嘉宾"></van-tab>
    </van-tabs>

    <div v-for="(item,key) in list[active]">
        <dl class="pr15 bg_f mb10 pr pl100 pr pt15 pb10 cursor" style="height:60px;">
            <dt class="pa lt pl15 pt15">
                <p class="t_center ws fz12 number" :style="{background:active == 0 ? '#FF589B' : '#0081ff'}">{{key+1}}</p>
            </dt>
            <a :href="'{:url('love/Userwall/detail')}?id=' + item.id">
                <dd class="pl40 pr">
                        <span class="inline_block img_30 br oh pa lt">
                          <img class="ob_c br50"
                               :src="item.avatar ? item.avatar : '__TMPL__/public/assets/images/userwall/no_image_thumb.png'" />
                        </span>
                    <h3 class="fz16">
                        <van-icon
                                :class="[item.sex == 1 ? 'icon-xingbie-nan text-blue' : 'icon-xingbie-nv text-pink','iconfont']"></van-icon>
                        {{item.username}}
                    </h3>
                    <p class="fz14 mt10">
                        {{item.age}}岁
                        ▪ {{item.education}}
                        ▪ {{item.high}}CM
                        ▪ <span style="color:red;">人气{{item.invite_num}}</span>
                    </p>
                </dd>
            </a>
            <div class="clear"></div>
        </dl>
    </div>
</block>
<block name="script">
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    active: 0,
                    list: [{$list1},{$list2}],
                };
            },
            methods: {
                onBack() {
                    history.back();
                },
            },
        });
    </script>
</block>