{extend name="web/official_common/mobile/base" /}

{block name="content"}
<!-- 纳海川移动端文章详情页 开始 -->
<div class="nhc-mobile-wrap" style="padding: 16px; background: var(--bg-primary);">
    
    <!-- 移动端面包屑导航 -->
    <div style="font-size: 12px; color: var(--text-muted); margin-bottom: 16px; display: flex; align-items: center; gap: 6px;">
        <a href="/" style="color: var(--text-secondary);">首页</a>
        <span>&gt;</span>
        <a href="{:addon_url('official/web.official_journalism/list',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid')])}" style="color: var(--primary);">{:ze($category,'name')}</a>
        <span>&gt;</span>
        <span>正文</span>
    </div>

    <!-- 文章卡片主体 -->
    <article style="background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 20px; box-shadow: var(--shadow-subtle);">
        
        <header style="border-bottom: 1px solid var(--border-color); padding-bottom: 16px; margin-bottom: 20px;">
            <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 10px;">
                <span class="nhc-seal" style="font-size: 10px; padding: 1px 5px;">技术分享</span>
                <span style="font-size: 11px; padding: 1px 6px; background: var(--primary-light); color: var(--primary); border-radius: 2px;">{:ze($category,'name')}</span>
            </div>
            <h1 style="font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1.4; margin: 0 0 12px 0;">
                {$data['title']}
            </h1>
            <div style="display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-muted);">
                <span>{:date('Y-m-d H:i', $data['createtime'])}</span>
                <span>浏览 {$data['click']} 次</span>
                {if !empty($data['source'])}
                <span>来源: {$data['source']}</span>
                {/if}
            </div>
        </header>

        {if !empty($data['subheading'])}
        <div style="background: #F8FAFC; border-left: 3px solid var(--primary); padding: 12px 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;">
            {$data['subheading']}
        </div>
        {/if}

        <!-- 正文排版 -->
        <div class="nhc-article-body" style="font-size: 15px; line-height: 1.75;">
            {$data['content']|htmlspecialchars_decode}
        </div>

        <!-- 移动端文末服务说明 -->
        <div style="margin-top: 32px; padding: 16px; background: #F8FAFC; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-secondary); line-height: 1.6;">
            <strong>服务说明：</strong>贵阳纳海川科技有限公司专注于企业软件定制与源码交付服务，支持私有化部署与长期技术维护。
        </div>

        <!-- 移动端上一篇/下一篇自然导流 -->
        <div class="info_previous_next_wrap" style="margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--border-color); display: flex; flex-direction: column; gap: 10px;">
            <div class="Previous" style="font-size: 13px;">
                <span style="color: var(--text-muted);">上一篇：</span>
                {if empty($before)}
                <span style="color: #94A3B8;">{:__l('index','There no data')}</span>
                {else/}
                <a href="{:addon_url('official/web.official_journalism/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$before['id']])}" style="color: var(--primary);">{$before['title']}</a>
                {/if}
            </div>
            <div class="Next" style="font-size: 13px;">
                <span style="color: var(--text-muted);">下一篇：</span>
                {if empty($after)}
                <span style="color: #94A3B8;">{:__l('index','There no data')}</span>
                {else/}
                <a href="{:addon_url('official/web.official_journalism/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$after['id']])}" style="color: var(--primary);">{$after['title']}</a>
                {/if}
            </div>
        </div>

    </article>

</div>
<!-- 纳海川移动端文章详情页 结束 -->
{/block}