{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/topic_nas_help.css" />
{/block}
{block name="header"}
<!-- 重置header头为空 -->
{/block}
{block name="main"}
<div class="oricoEGapp">
    <div class="narshelpCenterPc-app">
        <div class="headtop">
            <a>
                <img src="__IMAGES__/logo.png" class="logoicoimg">
            </a>
            <img src="__IMAGES__/ssapp.png" class="ssicoimg">
        </div>
        <!-- banner -->
        <img src="__IMAGES__/nhlpapp-banner.webp" class="nhlpbner">
        <!-- 使用教程 -->
        {notempty name="article_categorys"}
        <h1 class="nhlpapp-title">{:lang_i18n('使用教程')}</h1>
        {volist name="article_categorys" id="vo" key="idx"}
        <div class="nhlpappit">
            <div class="nhlptl">
                <img src="{$vo.icon}" class="bhlpicoimg">{$vo.name}
            </div>
            <div class="nhlp-tx-list">
                {volist name="vo.article" id="va"}
                <a class="txrow" href="{:url('/index/topic/nas/help_detail', ['cid' => $vo.id,'id' => $va.id])}">
                    <div class="nhlp-point"></div>
                    <span class="nhlpsp">{$va.title}</span>
                    <span class="narhelpgoimg"><img src="__IMAGES__/nars-jt.png"></span>
                </a>
                {/volist}
                {if condition="count($vo.article) >= 3"}
                <a href="{:url('/index/topic/nas/help_detail', ['cid' => $vo.id, 'id' => isset($vo.article[0])?$vo.article[0]['id']:0, 'view' => 'more'])}">
                    <div class="ckgdbt">{:lang_i18n('查看更多')} <img src="__IMAGES__/nars-jt.png"></div>
                </a>
                {/if}
            </div>
        </div>
        {/volist}
        {/notempty}
        <!-- 联系我们 -->
        {notempty name="contacts"}
        <h1 class="nhlpapp-title">{:lang_i18n('联系我们')}</h1>
        <div class="nhlpapp-row">
            <div class="sec-1">
                {volist name="contacts" id="co" key="idx" offset="0" length="4"}
                <a class="nhlplxwmit" {notempty name="co.link"}href="{$co.link}"{/notempty}>
                    <img src="{$co.image}" class="lximg">
                    <span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
                    {notempty name="co.desc"}
                    <span class="t2" {:style(['color'=>$co.desc_txt_color])}>{$co.desc|raw}</span>
                    {/notempty}
                </a>
                {/volist}
            </div>
            <div class="sec-2">
                {volist name="contacts" id="co" key="idx" offset="4"}
                <a class="nhlplxwmit nhlplxwmit-w1" {notempty name="co.link"}href="{$co.link}"{/notempty}>
                    <img src="{$co.image}" class="lximg">
                    <span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}<br></span>
                </a>
                {/volist}
            </div>
        </div>
        {/notempty}
        <!-- 搜索 -->
        <div class="nhlpapp-search">
            <div class="nhlpappshtop">
                <div class="nhlpapp-shdiv">
                    <input class="nhlp-ipt" id="search-input" placeholder="{:lang_i18n('请输入搜索关键字,如安装赛博云空间,影视库')}" autocomplete="off">
                    <img src="__IMAGES__/ssapp.png" class="searchimg">
                </div>
                <span class="closetx">{:lang_i18n('取消')}</span>
            </div>
            <div class="nhlpappline"></div>
            <!-- 下拉搜索框 -->
            <div class="dropdown" id="dropdown"></div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    $(document).ready(function () {
        $('.closetx').click(function () {
            $('.nhlpapp-search').hide();
        });
        $('.ssicoimg').click(function () {
            $('.nhlpapp-search').show();
        });

        // 搜索
        var timeout = null;
        $('#search-input').on('focus input', function () {
            clearTimeout(timeout);
            var _this = this;
            timeout = setTimeout(function () {
                var keywords = $(_this).val();
                if (keywords == '') {
                    $('#dropdown').hide().html('');
                    return;
                }
                $.ajax({
                    url: "{:url('/index/topic/nas/help_search')}",
                    type: 'POST',
                    data: { keywords: keywords },
                    dataType: 'JSON',
                    success: function (r) {
                        var html = '';
                        if (r.code == 0) {
                            html = '<ul>'
                            $.each(r.data, function (k, v) {
                                html += '<li><a class="search-item" href="{:url(\'/index/topic/nas/help_detail\')}?id=' + v.id + '">' + v.title + '</a></li>'
                            })
                            html += '</ul>'
                        }
                        $('#dropdown').show().html(html);
                    }
                })
            }, 300);
        });
        $('.nhlplxwmit:not(:first)').hover(function () {
            $(this).find('.lximg').show();
        }, function () {
            $(this).find('.lximg').show();
        });
    });
</script>
{/block}