100 lines
5.3 KiB
HTML
100 lines
5.3 KiB
HTML
<div class="page-header">
|
|
<div class="layui-container">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md12">
|
|
<div class="breadcrumb">
|
|
<span class="layui-breadcrumb">
|
|
<a href="{:url('index/index')}"><i class="layui-icon layui-icon-home"></i> 首页</a>
|
|
<a><cite>站点公告</cite></a>
|
|
</span>
|
|
</div>
|
|
<h1 class="page-title">站点公告</h1>
|
|
<p class="page-desc">系统维护、活动与版本更新等官方通知</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="news-section">
|
|
<div class="layui-container">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md12">
|
|
<div class="news-filter">
|
|
<div class="filter-title">分类筛选：</div>
|
|
<ul class="filter-list">
|
|
<li class="{eq name='type' value='0'}active{/eq}"><a href="{:url('notice/index', ['type'=>0])}">全部</a></li>
|
|
{volist name="type_list" id="t"}
|
|
<li class="{eq name='type' value='$key'}active{/eq}"><a href="{:url('notice/index', ['type'=>$key])}">{$t}</a></li>
|
|
{/volist}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="notice-list">
|
|
{volist name="items" id="vo"}
|
|
<div class="notice-row {eq name='vo.is_top' value='1'}is-top{/eq}">
|
|
<div class="notice-row-head">
|
|
<span class="notice-badge notice-type-{$vo.type}">{$vo.type_text}</span>
|
|
{eq name='vo.is_top' value='1'}<span class="top-flag">置顶</span>{/eq}
|
|
<a href="{:url('notice/read', ['id'=>$vo.id])}" class="notice-row-title">{$vo.title}</a>
|
|
</div>
|
|
<div class="notice-row-summary">{:mb_substr(strip_tags($vo.content),0,120,'utf-8')}{:strlen(strip_tags($vo.content))>120?'…':''}</div>
|
|
<div class="notice-row-meta">
|
|
<span><i class="layui-icon layui-icon-user"></i> {$vo.author|default='官方'}</span>
|
|
<span><i class="layui-icon layui-icon-date"></i> {$vo.create_at|substr=0,16}</span>
|
|
<span><i class="layui-icon layui-icon-eye"></i> {$vo.view_count|default=0}</span>
|
|
{if condition="$vo.start_time > 0 || $vo.end_time > 0"}
|
|
<span><i class="layui-icon layui-icon-time"></i>
|
|
{$vo.start_time>0?date('Y-m-d',$vo.start_time):'长期'} ~
|
|
{$vo.end_time>0?date('Y-m-d',$vo.end_time):'长期'}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/volist}
|
|
|
|
{empty name="items"}
|
|
<div class="empty-container">
|
|
<i class="layui-icon layui-icon-face-smile" style="font-size: 60px; color: #ccc;"></i>
|
|
<p>暂无公告</p>
|
|
</div>
|
|
{/empty}
|
|
</div>
|
|
|
|
{notempty name="list"}
|
|
<div class="page-pagination">
|
|
{$list->render()}
|
|
</div>
|
|
{/notempty}
|
|
</div>
|
|
<!-- 列表底部广告位 -->
|
|
{assign name="slot" value="list_bottom" /}{include file="common/adslot" /}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.notice-list { display: flex; flex-direction: column; gap: 14px; }
|
|
.notice-row { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 16px 18px; transition: box-shadow .2s; }
|
|
.notice-row:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
|
|
.notice-row.is-top { border-color: #ffe58f; background: #fffdf5; }
|
|
.notice-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
|
.notice-badge { flex: none; color: #fff; border-radius: 3px; padding: 1px 8px; font-size: 12px; background: #8c8c8c; }
|
|
.notice-type-1 { background: #1890ff; }
|
|
.notice-type-2 { background: #fa8c16; }
|
|
.notice-type-3 { background: #52c41a; }
|
|
.notice-type-4 { background: #8c8c8c; }
|
|
.top-flag { flex: none; color: #d46b08; font-size: 12px; border: 1px solid #ffd591; border-radius: 3px; padding: 0 6px; }
|
|
.notice-row-title { font-size: 16px; font-weight: 600; color: #333; text-decoration: none; }
|
|
.notice-row-title:hover { color: #1E9FFF; }
|
|
.notice-row-summary { color: #666; font-size: 14px; line-height: 1.7; margin-bottom: 10px; }
|
|
.notice-row-meta { display: flex; flex-wrap: wrap; gap: 16px; color: #999; font-size: 13px; }
|
|
.notice-row-meta span { display: inline-flex; align-items: center; gap: 3px; }
|
|
.news-filter { margin-bottom: 24px; padding: 15px 0; border-bottom: 1px solid #eee; }
|
|
.filter-title { display: inline-block; font-weight: bold; margin-right: 15px; color: #333; }
|
|
.filter-list { display: inline-block; }
|
|
.filter-list li { display: inline-block; padding: 5px 15px; margin-right: 8px; border-radius: 20px; background: #f5f5f5; }
|
|
.filter-list li.active, .filter-list li:hover { background: #1E9FFF; }
|
|
.filter-list li.active a, .filter-list li:hover a { color: #fff; }
|
|
.filter-list li a { color: #555; text-decoration: none; }
|
|
</style>
|