blackteay/ThinkAdmin
1
0
Fork 0
mirror of https://gitee.com/zoujingli/ThinkAdmin.git synced 2025-04-06 03:58:04 +08:00
Code Issues Projects Releases Wiki Activity

Update news.html

Browse Source
This commit is contained in:
Anyon 2020-11-20 11:35:10 +08:00
parent e8410cb277
commit 09653ee4e5
1 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/wechat/view/api/view/news.html
View File

@ -4,20 +4,23 @@
<div class="header"><span>{:date('H:i')}</span></div> <div class="header"><span>{:date('H:i')}</span></div>
<div class="container"> <div class="container">
{notempty name='news.articles'} {foreach $news.articles as $k => $v} {if $k < 1} {notempty name='news.articles'} {foreach $news.articles as $k => $v} {if $k < 1}
<a href="{:url('wechat/api.view/item')}?id={$v.id}" style='background-image:url("{$v.local_url}")'> <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} {if $v.title}<span>{$v.title}</span>{/if}
</a> </a>
<div class="hr-line-dashed"></div>
{else} {else}
<a href="{:url('wechat/api.view/item')}?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> <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} {/if} {/foreach} {else}
<div class="info"><h3>404</h3> 访问资源不存在哦！</div> <div class="info"><h3>404</h3> 访问资源不存在哦！</div>
{/notempty} {/notempty}
</div> </div>
<script>
document.querySelectorAll('[data-lazy-src]').forEach(function (elem) {
elem.style.backgroundImage = 'url(' + elem.dataset.lazySrc + ')';
});
</script>
{/block} {/block}
{block name='style'} {block name='style'}
@ -32,25 +35,34 @@
font-size: 12px; font-size: 12px;
line-height: 12px; line-height: 12px;
background: #aaa; background: #aaa;
box-shadow: 0 0 3px #666 box-shadow: 0 0 1px #666
} }
.container { .container {
width: 90%; width: 90%;
display: block; display: block;
margin: 5vw auto; margin: 5vw auto;
overflow: hidden;
position: relative; position: relative;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 3px #333; box-shadow: 0 0 2px #333;
} }
.container a { .container a.item {
height: 50vw; height: 50vw;
display: block; display: block;
position: relative; position: relative;
background: no-repeat center center; background: no-repeat center center;
background-size: cover 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 { .container a span {
@ -65,7 +77,6 @@
position: absolute; position: absolute;
line-height: 2em; line-height: 2em;
white-space: nowrap; white-space: nowrap;
margin: 0 -1px 0 -1px;
text-overflow: ellipsis; text-overflow: ellipsis;
background: rgba(0, 0, 0, .7); background: rgba(0, 0, 0, .7);
} }
@ -99,12 +110,6 @@
background-position: center center background-position: center center
} }
.info h3 {
color: #333;
font-size: 5vw;
margin-bottom: 1rem
}
.info { .info {
color: #666; color: #666;
padding: 2rem; padding: 2rem;
@ -113,6 +118,12 @@
letter-spacing: 1px letter-spacing: 1px
} }
.info h3 {
color: #333;
font-size: 5vw;
margin-bottom: 1rem
}
.hr-line-dashed { .hr-line-dashed {
color: #fff; color: #fff;
height: 1px; height: 1px;