{extend name='api/view/main'}

{block name='content'}
<div class="header"><span>{:date('H:i')}</span></div>
<div class="container">
    {notempty name='news.articles'} {foreach $news.articles as $k => $v} {if $k < 1}
    <a href="{:url('wechat/api.view/item')}?id={$v.id}" data-lazy-src="{$v.local_url}" class="item">
        {if $v.title}<span>{$v.title}</span>{/if}
    </a>
    {else}
    <div class="hr-line-dashed"></div>
    <a href="{:url('wechat/api.view/item')}?id={$v.id}" class='other'>
        <span>{$v.title}</span><span data-lazy-src="{$v.local_url}"></span>
    </a>
    {/if} {/foreach} {else}
    <div class="info"><h3>404</h3> 访问资源不存在哦！</div>
    {/notempty}
</div>
<script>
    document.querySelectorAll('[data-lazy-src]').forEach(function (elem) {
        elem.style.backgroundImage = 'url(' + elem.dataset.lazySrc + ')';
    });
</script>
{/block}

{block name='style'}
<style>
    html {
        width: 100%;
        height: 100%;
        display: block;
        background: #f0f0f0;
    }

    .header {
        margin-top: 15px;
        text-align: center
    }

    .header span {
        padding: 1px 5px;
        font-size: 12px;
        line-height: 12px;
        background: #aaa;
        box-shadow: 0 0 1px #666
    }

    .container {
        width: 90%;
        display: block;
        margin: 5vw auto;
        position: relative;
        border-radius: 5px;
        background: white;
        box-shadow: 0 0 2px rgba(0, 0, 0, .5);
    }

    .container a.item {
        height: 50vw;
        display: block;
        position: relative;
        background: no-repeat center center;
        background-size: cover;
    }

    .container a.item:first-child {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .container a.item:last-child, .container a.item:last-child span {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .container a span {
        left: -1px;
        right: -1px;
        bottom: 0;
        color: #fff;
        padding: 2vw;
        font-size: 2vw;
        max-height: 5em;
        overflow: hidden;
        position: absolute;
        line-height: 2em;
        white-space: nowrap;
        text-overflow: ellipsis;
        background: rgba(0, 0, 0, .7);
    }

    .container a.other {
        height: 15vw;
        display: block;
        padding: 1vw 2vw;
        position: relative
    }

    .container a.other span:first-child {
        color: #333;
        float: left;
        width: 60vw;
        height: 10vw;
        overflow: hidden;
        max-height: none;
        position: relative;
        background: 0 0;
        text-overflow: ellipsis
    }

    .container a.other span:last-child {
        width: 16vw;
        height: 10vw;
        float: right;
        max-height: none;
        position: relative;
        background-size: cover;
        background-position: center center
    }

    .info {
        color: #666;
        padding: 2rem;
        font-size: .5rem;
        text-align: center;
        letter-spacing: 1px
    }

    .info h3 {
        color: #333;
        font-size: 5vw;
        margin-bottom: 1rem
    }

    .hr-line-dashed {
        color: #fff;
        height: 1px;
        margin: 3px 0;
        border-top: 1px dashed #e7eaec
    }

    .hr-line-dashed:last-child {
        display: none
    }
</style>

{/block}