{extend name='api/review/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.review/view')}?id={$v.id}" style='background-image:url("{$v.local_url}")'>
        {if $v.title}<span>{$v.title}</span>{/if}
    </a>
    <div class="hr-line-dashed"></div>
    {else}
    <a href="{:url('wechat/api.review/view')}?id={$v.id}" class='other'>
        <span>{$v.title}</span>
        <span style='background-image:url("{$v.local_url}");'></span>
    </a>
    <div class="hr-line-dashed"></div>
    {/if} {/foreach} {else}
    <div class="info"><h3>404</h3> 访问资源不存在哦！</div>
    {/notempty}
</div>
{/block}

{block name='style'}
<style>
    .header {
        margin-top: 15px;
        text-align: center
    }

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

    .container {
        width: 90%;
        display: block;
        margin: 5vw auto;
        overflow: hidden;
        position: relative;
        border-radius: 5px;
        box-shadow: 0 0 3px #333;
    }

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

    .container a span {
        left: 0;
        right: 0;
        bottom: 0;
        color: #fff;
        padding: 2vw;
        font-size: 2vw;
        max-height: 5em;
        overflow: hidden;
        position: absolute;
        line-height: 1.5em;
        white-space: nowrap;
        margin: 0 -1px 0 -1px;
        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 h3 {
        color: #333;
        font-size: 5vw;
        margin-bottom: 1rem
    }

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

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

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

{/block}