feat: mobile nas主题帮助中心页

app/index/lang/en-us/mobile.php

@@ -178,4 +178,14 @@ return [
         '网络存储解决方案' => 'Network Storage Solutions',
         '配套软件' => 'Software',
     ],
+
+    // nas主题 - 帮助页
+    'topicnas/help' => [
+        '帮助中心' => 'Quick Start Guide',
+        '请输入搜索关键字,如安装赛博云空间,影视库' => 'What are you looking for?',
+        '使用教程' => 'User\' s Guide',
+        '查看更多' => 'Click to view more',
+        '联系我们' => 'Contact US',
+        '目录' => 'Content'
+    ],
 ];

app/index/view/mobile/topic_nas/help.html

@@ -0,0 +1,132 @@
+{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 href="https://www.orico.com.cn/mobile/tops_nas/index.html">
+                <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', ['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', ['id' => isset($vo.article[0])?$vo.article[0]['id']:0])}">
+                    <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">取消</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}