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;
        }
        .no-image {width:100%;}
        .ad {display:flex;justify-content:center;align-items:center}
        .ad .ad-text {margin-left:5px;color:#666;}
    </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>

    <van-swipe style="height: 30px;background:white;" vertical :autoplay="3000" v-if="select.length > 0">
        <van-swipe-item class="ad" v-for="(p, index) in select" :key="index">
            <van-icon name="volume-o" color="#FF589B"></van-icon>
            <span class="ad-text">恭喜{{p.name1}}和{{p.name2}}配对成功</span>
        </van-swipe-item>
        <template #indicator>
            <div class="custom-indicator"></div>
        </template>
    </van-swipe>

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

    <!--推荐嘉宾-->
    <div style="padding-top:20px;">
        <div class="index_title">智能推荐</div>
    </div>
    <div class="grid_list index_people">
        <div class="masonry">
            <div class="item" v-for="(item) in 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>
                    </a>
                </div>
            </div>
        </div>
        <div class="van-list__finished-text" v-if="list.length == 0">
            <!--<div class="van-list__finished-text">暂无推荐，请到缘分大厅寻找缘分</div>-->
            <img class="no-image" src="__TMPL__/public/assets/images/no_user.png">
        </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,
                    list: {$list},
                    select: {$select},
                    unread_num: {$unread_num},
                };
            },
            methods: {
                tabbarChange() {
                    return false;
                },
            },
        });
    </script>
</block>