{extend name="public/base"/}
{block name="css"}
<style>
    .article {background:white;padding:0 10px;}
    .article h3 {padding:10px 0;margin:0;}
    .article .article-info {align-items: center;display: flex;justify-content: space-between;margin: 5px;font-size:12px;}
    .article .article-info .s-time {color:#b4b4b4;}
    .article .article-info .s-comment {background: #f5f7f9;border-radius: 5px;flex-shrink: 0;font-size: 14px;padding:5px 10px;}
    .content,.content img {max-width:100%;}
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">新闻详情</span>
    </template>
</van-nav-bar>

<div class="article">
    <header>
        <h3>{$info.title}</h3>
        <section class="article-info">
            <div class="s-author">
                <address>
                    <span>{$info.author}</span>
                </address>
                <div class="s-time">
                    <time>{$info.update_time}</time>
                </div>
            </div>
            <aside class="s-comment js-article-comment">
                <van-icon name="chat-o"></van-icon>
                <span class="js-article-commentCount">{$info.volume}</span>
            </aside>
        </section>
    </header>
    <section class="content">
        {$info.content}
    </section>
</div>

{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.onBack = () => {
            history.back();
        };

        return base;
    }
</script>
{/block}