love/public/themes/simpleboot3/portal/index.html

<extend name="public@base"/>
<block name="css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/index.css?v=1">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/userwall.css">
    <style>
        #app {
            padding-bottom: 50px;
        }
        .masonry {
            padding-top:0;
        }
    </style>
</block>
<block name="body">

    <!--轮播图-->
    <van-nav-bar class="bg-pink">
        <template #title>
            <span style="color:white;">首页</span>
        </template>
    </van-nav-bar>
    <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
            <van-image width="100%" :src="image.image"></van-image>
        </van-swipe-item>
    </van-swipe>

    <div class="split-block"></div>

    <!--推荐嘉宾-->
    <div style="padding-top:20px;">
        <div class="index_title">推荐嘉宾</div>
    </div>
    <div class="index_cursor">
        <span :class="tab === 0 ? 'cur' : ''" @click="tab = 0">优质女嘉宾</span>
        <span :class="tab === 1 ? 'cur' : ''" @click="tab = 1">优质男嘉宾</span>
    </div>
    <div class="grid_list index_people" v-show="tab === 0">
        <div class="masonry">
            <div class="item" v-for="(item) in woman_list">
                <div class="item__content">
                    <a :href="'{:url('love/userwall/detail')}?id=' + item.id">
                        <div class="box">
                            <img class="image"
                                 :src="item.main_image_thumb ? item.main_image_thumb : '__TMPL__/public/assets/images/userwall/no_image_thumb.png'"/>
                            <div class="info">
                                <h3 class="user_name">
                                        <span class="inline_block">
                                            <van-icon
                                                    :class="[item.sex == 1 ? 'icon-xingbie-nan text-blue' : 'icon-xingbie-nv text-pink','iconfont']"></van-icon>
                                            {{item.username}}
                                        </span>
                                </h3>
                                <div class="describe">
                                    {{item.age}}岁
                                    · {{item.education}}
                                    · {{item.high}}CM
                                </div>
                                <div class="detail">
                                    {{item.signature}}
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="van-list__finished-text" v-if="woman_list.length == 0">没有更多了</div>
        <div class="clear"></div>
    </div>
    <div class="grid_list index_people" v-show="tab === 1">
        <div class="masonry">
            <div class="item" v-for="(item) in man_list">
                <div class="item__content">
                    <a :href="'{:url('love/userwall/detail')}?id=' + item.id">
                        <div class="box">
                            <img class="image"
                                 :src="item.main_image_thumb ? item.main_image_thumb : '__TMPL__/public/assets/images/userwall/no_image_thumb.png'"/>
                            <div class="info">
                                <h3 class="user_name">
                                        <span class="inline_block">
                                            <van-icon
                                                    :class="[item.sex == 1 ? 'icon-xingbie-nan text-blue' : 'icon-xingbie-nv text-pink','iconfont']"></van-icon>
                                            {{item.username}}
                                        </span>
                                </h3>
                                <div class="describe">
                                    {{item.age}}岁
                                    · {{item.education}}
                                    · {{item.high}}CM
                                </div>
                                <div class="detail">
                                    {{item.signature}}
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="van-list__finished-text" v-if="man_list.length == 0">没有更多了</div>
        <div class="clear"></div>
    </div>

    <van-tabbar v-model="active" active-color="#FF589B" :before-change="tabbarChange">
        <van-tabbar-item url="{:url('portal/index/index')}">
            <span>首页</span>
            <template #icon>
                <van-icon name="home-o" size="25px"></van-icon>
            </template>
        </van-tabbar-item>
        <van-tabbar-item url="{:url('love/userwall/index')}">
            <span>缘份</span>
            <template #icon>
                <van-icon name="like-o" size="25px"></van-icon>
            </template>
        </van-tabbar-item>
        <van-tabbar-item url="{:url('love/active/index')}">
            <span>活动</span>
            <template #icon>
                <van-icon name="apps-o" size="25px"></van-icon>
            </template>
        </van-tabbar-item>
        <van-tabbar-item url="{:url('love/message/index')}" :badge="unread_num ? unread_num : ''">
            <span>消息</span>
            <template #icon>
                <van-icon name="comment-o" size="25px"></van-icon>
            </template>
        </van-tabbar-item>
        <van-tabbar-item url="{:url('love/my/index')}">
            <span>我的</span>
            <template #icon>
                <van-icon name="contact" size="25px"></van-icon>
            </template>
        </van-tabbar-item>
    </van-tabbar>
</block>
<block name="script">
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    images: {$images},
                    active: 0,
                    tab: 0,
                    man_list: {$man_list},
                    woman_list: {$woman_list},
                    unread_num: {$unread_num},
                };
            },
            methods: {
                tabbarChange() {
                    return false;
                },
            },
        });
    </script>
</block>