<extend name="public@base"/>
<block name="css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/userwall.css">
    <style>
        body {background:white;}
        #app {padding-bottom:50px;}
        .box .title {font-size: 16px;font-weight: 900;line-height: 50px;padding: 0 16px;}
        .box .content{display:flex;padding:0 16px;}
        .box .content .img {width: 40%;height: 96px;margin-right: 8px;border-radius: 2px;}
        .box .content .desc {width: 60%;}
        .box .content .text-content {font-size: 14px;color: #888;height: 72px;overflow: hidden;line-height: 1.6;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
    </style>
</block>
<block name="body">
    <van-nav-bar class="bg-pink" fixed>
        <template #title>
            <span style="color:white;">活动列表</span>
        </template>
    </van-nav-bar>

    <div style="padding-top:46px;">
        <div class="box" @click="toDetail(item.id)" v-for="item in list">
            <div class="title">{{ item.title }}</div>
            <div class="content">
                <img class="img" :src="item.main_image ? item.main_image : '__TMPL__/public/assets/images/userwall/no_image_thumb.png'" />
                <div class="desc">
                    <div class="text-content">{{ item.describe }}</div>
                    <div>
                        <van-tag type="primary" style="float:right;">{{item.start_time}} 至 {{item.end_time}}</van-tag>
                    </div>
                </div>
            </div>
        </div>
        <div class="van-list__finished-text">没有更多了</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 {
                    list: {$list},
                    active:2,
                    unread_num: {$unread_num},
                };
            },
            methods: {
                tabbarChange() {
                    return false;
                },
                toDetail(id) {
                    location.href = "{:url('detail')}?id="+id;
                },
            },
        });
    </script>
</block>