91 lines
4.5 KiB
HTML
91 lines
4.5 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="help-section">
|
|
<div class="layui-container">
|
|
<div class="layui-row layui-col-space30">
|
|
<div class="layui-col-md3">
|
|
<div class="help-sidemenu">
|
|
{volist name="categories" id="cat"}
|
|
<div class="help-sidemenu-group">
|
|
<div class="help-sidemenu-title">{$cat.name}</div>
|
|
<ul>
|
|
{volist name="cat.items" id="item"}
|
|
<li><a href="{:url('help/read', ['id'=>$item.id])}">{$item.title}</a></li>
|
|
{/volist}
|
|
</ul>
|
|
</div>
|
|
{/volist}
|
|
{empty name="categories"}
|
|
<div class="empty-container">
|
|
<i class="layui-icon layui-icon-face-smile" style="font-size: 60px; color: #ccc;"></i>
|
|
<p>暂无帮助内容</p>
|
|
</div>
|
|
{/empty}
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md9">
|
|
<div class="help-content-card">
|
|
{volist name="categories" id="cat"}
|
|
<div class="help-block">
|
|
<h2 class="help-block-title">{$cat.name}</h2>
|
|
<ul class="help-block-list">
|
|
{volist name="cat.items" id="item"}
|
|
<li>
|
|
<a href="{:url('help/read', ['id'=>$item.id])}" class="help-link">
|
|
<span class="help-link-title">{$item.title}</span>
|
|
<span class="help-link-meta"><i class="layui-icon layui-icon-eye"></i> {$item.view_count|default=0}</span>
|
|
</a>
|
|
</li>
|
|
{/volist}
|
|
</ul>
|
|
</div>
|
|
{/volist}
|
|
{empty name="categories"}
|
|
<div class="empty-container">
|
|
<i class="layui-icon layui-icon-face-smile" style="font-size: 60px; color: #ccc;"></i>
|
|
<p>暂无帮助内容</p>
|
|
</div>
|
|
{/empty}
|
|
</div>
|
|
<!-- 列表底部广告位 -->
|
|
{assign name="slot" value="list_bottom" /}{include file="common/adslot" /}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.help-sidemenu { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 12px 0; position: sticky; top: 20px; }
|
|
.help-sidemenu-group { padding: 8px 0; }
|
|
.help-sidemenu-group + .help-sidemenu-group { border-top: 1px solid #f5f5f5; }
|
|
.help-sidemenu-title { font-weight: 700; color: #333; padding: 6px 18px; font-size: 14px; }
|
|
.help-sidemenu ul { list-style: none; margin: 0; padding: 0; }
|
|
.help-sidemenu li a { display: block; padding: 6px 18px 6px 28px; color: #666; text-decoration: none; font-size: 14px; }
|
|
.help-sidemenu li a:hover { background: #f0f7ff; color: #1E9FFF; }
|
|
.help-content-card { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 24px 28px; }
|
|
.help-block + .help-block { margin-top: 26px; padding-top: 26px; border-top: 1px solid #f0f0f0; }
|
|
.help-block-title { font-size: 18px; font-weight: 700; color: #222; margin: 0 0 14px; }
|
|
.help-block-list { list-style: none; margin: 0; padding: 0; }
|
|
.help-block-list li { border-bottom: 1px solid #f5f5f5; }
|
|
.help-block-list li:last-child { border-bottom: none; }
|
|
.help-link { display: flex; align-items: center; justify-content: space-between; padding: 12px 6px; color: #444; text-decoration: none; transition: color .2s; }
|
|
.help-link:hover { color: #1E9FFF; }
|
|
.help-link-title { font-size: 15px; }
|
|
.help-link-meta { color: #999; font-size: 13px; display: inline-flex; align-items: center; gap: 3px; }
|
|
</style>
|