{extend name="public/base"/}
{block name="css"}
<style>

</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
>
    <template #title>
        <span class="text-white">首页</span>
    </template>
</van-nav-bar>

<van-swipe :autoplay="3000" indicator-color="white">
    {volist name="slide" id="item"}
    <van-swipe-item>
        <van-image src="{$item.image}" @click="toUrl('{$item.url}')"></van-image>
    </van-swipe-item>
    {/volist}
</van-swipe>

<van-grid :border="false">
    {volist name="navigation" id="item"}
    <van-grid-item url="{$item.url}" icon="{$item.image}" text="{$item.title}"></van-grid-item>
    {/volist}
</van-grid>

<article-list :list="list"></article-list>

<van-tabbar v-model="active" :placeholder="true">
    <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="description" url="{:url('article/index')}">文章</van-tabbar-item>
    <van-tabbar-item icon="user-circle-o" url="{:url('my/index')}">我的</van-tabbar-item>
</van-tabbar>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.active = 0;
        base.list = Vue.reactive({$article});
        base.toUrl = (url) => {
            if (url) {
                location.href = url;
            }
        };

        return base;
    }
</script>
{/block}
{block name="vue"}
<script src="__COMPONENTS__/articleList.js"></script>
{/block}