feat: mobile nas主题帮助中心详情页

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

@@ -183,9 +183,20 @@ return [
     'topicnas/help' => [
         '帮助中心' => 'Quick Start Guide',
         '请输入搜索关键字,如安装赛博云空间,影视库' => 'What are you looking for?',
+        '取消' => 'Cancel',
         '使用教程' => 'User\' s Guide',
         '查看更多' => 'Click to view more',
         '联系我们' => 'Contact US',
         '目录' => 'Content'
     ],
+
+    // nas主题 - 帮助详情页
+    'topicnas/helpdetail' => [
+        '帮助中心' => 'Quick Start Guide',
+        '请输入搜索关键字,如安装赛博云空间,影视库' => 'What are you looking for?',
+        '取消' => 'Cancel',
+        '使用教程' => 'User\' s Guide',
+        '联系我们' => 'Contact US',
+        '目录' => 'Content'
+    ],
 ];

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

@@ -0,0 +1,143 @@
+{extend name="public/base" /}
+{block name="title"}
+{notempty name="article.seo_title"}<title>{$article.seo_title}</title>{else /}{__BLOCK__}{/notempty}
+{/block}
+{block name="seo"}
+{notempty name="article.seo_keywords"}
+<meta name="keywords" content="{$article.seo_keywords}" />
+<meta name="description" content="{$article.seo_desc}" />
+{else /}
+{__BLOCK__}
+{/notempty}
+{/block}
+{block name="style"}
+<link rel="stylesheet" href="__CSS__/topic_nas_help-detail.css" />
+{/block}
+{block name="header"}
+<!-- 重置header头为空 -->
+{/block}
+{block name="main"}
+<div class="oricoEGapp">
+    <div class="narshelpCenterdetail-app">
+        <div class="headtop">
+            <a href="https://www.orico.com.cn/mobile/tops_nas/index.html">
+                <img src="__IMAGES__/logo.png" class="logoicoimg">
+            </a>
+            <div style="display: flex;">
+                <img src="__IMAGES__/fenlei.png" class="ssicoimg" id="flico">
+                <img src="__IMAGES__/sousuo.png" class="ssicoimg" id="ssico" style="margin-right:32px">
+            </div>
+        </div>
+        <!-- 文章内容 -->
+        <div id="rendered-content" class="nhlp-app-content">
+            {$article.content|raw|default=''}
+        </div>
+        <!-- 搜索 -->
+        <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 class="nhlpapp-pagescate" style="display: none;">
+            <div class="nars-hlpdt-ml">
+                {notempty name="article_categorys"}
+                <div class="nav-tree">
+                    {volist name="article_categorys" id="ac" key="idx"}
+                    <div class="categoryhelp">
+                        <div class="categoryhelp-title">
+                            <div>
+                                <img src="__IMAGES__/nars-jt.png" class="arrow {if condition='$ac.id == $Request.get.cid'}rotate{/if}">
+                            </div>
+                            <span>{$ac.name}</span>
+                        </div>
+                        <ul class="sub-list" {if condition='$ac.id == $Request.get.cid'}style="display: block;"{/if}>
+                            {volist name="ac.article" id="ar"}
+                            <li>
+                                <a href="{:url('/index/topic/nas/help_detail', ['id' => $ar.id])}" style="padding-top: 6px;">
+                                    {$ar.title}
+                                </a>
+                            </li>
+                            {/volist}
+                        </ul>
+                    </div>
+                    {/volist}
+                </div>
+                {/notempty}
+            </div>
+        </div>
+    </div>
+</div>
+{/block}
+{block name="script"}
+<script type="text/javascript">
+    $(document).ready(function () {
+        // 点击顶部分类图标
+        $('#flico').click(function () {
+            $('.nhlpapp-pagescate').toggle();
+            // 检查分类菜单是否显示
+            if ($('.nhlpapp-pagescate').is(':visible')) {
+                // 如果分类菜单显示，则隐藏文章内容
+                $('#rendered-content').hide();
+                $('.footer').hide()
+            } else {
+                // 如果分类菜单隐藏，则显示文章内容
+                $('#rendered-content').show();
+                $('.footer').show()
+            }
+        });
+        // 点击分类的交互
+        $('.categoryhelp-title').click(function () {
+            $(this).next('.sub-list').slideToggle();
+            $(this).find('.arrow').toggleClass('rotate');
+        });
+        // 点击顶部搜索图标-点击取消关闭
+        $('#ssico').click(function () {
+            $('.nhlpapp-pagescate').hide();
+            $('.nhlpapp-search').show();
+        });
+        $('.closetx').click(function () {
+            $('.nhlpapp-search').hide();
+        });
+        // 搜索
+        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);
+        });
+    });
+</script>
+{/block}

public/static/index/mobile/css/topic_nas_help-detail.css

@@ -0,0 +1,216 @@
+.icon-menu-svg,
+.icon-search-svg,
+.icon-lag-svg {
+    color: #000 !important;
+}
+
+.narshelpCenterdetail-app {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.narshelpCenterdetail-app .headtop {
+    width: 100%;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    display: flex;
+    position: fixed;
+    top: 0;
+    display: flex;
+    padding: 1.25rem 0;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    background: #fff;
+}
+
+.narshelpCenterdetail-app .headtop .logoicoimg {
+    width: auto;
+    margin-left: 1.875rem;
+}
+
+.narshelpCenterdetail-app .headtop .ssicoimg {
+    width: 1.875rem;
+    height: 1.875rem;
+    margin-right: 15px;
+}
+
+.narshelpCenterdetail-app .nhlp-app-content {
+    margin: 1.25rem;
+    height: 100%;
+    margin-top: 9.2vh;
+}
+
+.narshelpCenterdetail-app #rendered-content img {
+    max-width: 100%;
+}
+
+.narshelpCenterdetail-app .nhlpapp-search {
+    position: fixed;
+    z-index: 2;
+    top: 0;
+    height: 100vh;
+    display: flex;
+    width: 100%;
+    background: #fff;
+    flex-direction: column;
+    display: none;
+}
+
+.narshelpCenterdetail-app .nhlpapp-search .nhlpappshtop {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.narshelpCenterdetail-app .nhlpapp-search .nhlpappshtop .closetx {
+    font-size: 16px;
+    margin-right: 8%;
+}
+
+.narshelpCenterdetail-app .nhlpapp-search .nhlpapp-shdiv {
+    margin: 1rem 20px;
+    height: 2.5rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border: 1px solid #cdcedb;
+    border-radius: 1.5625rem;
+    flex: 1;
+}
+
+.narshelpCenterdetail-app .nhlpapp-search .nhlpapp-shdiv input {
+    font-size: 16px;
+    padding: 0 20px;
+    flex: 1;
+    border: none;
+    margin-left: 2px;
+    outline: none;
+}
+
+.narshelpCenterdetail-app .nhlpapp-search .nhlpapp-shdiv input::placeholder {
+    color: #8f9099;
+    font-size: 14px;
+}
+
+.narshelpCenterdetail-app .nhlpapp-search .nhlpapp-shdiv .searchimg {
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-left: 1%;
+    margin-right: 5%;
+}
+
+.narshelpCenterdetail-app .nhlpapp-search .dropdown {
+    height: 90vh;
+    overflow-y: auto;
+    margin: 1.25rem;
+}
+
+.narshelpCenterdetail-app .nhlpapp-search .dropdown li {
+    margin-bottom: 0.75rem;
+    font-size: 0.9rem;
+    font-weight: 400;
+    width: 100%;
+    white-space: nowrap;
+    /* 禁止文本换行 */
+    overflow: hidden;
+    /* 隐藏超出容器的内容 */
+    text-overflow: ellipsis;
+    /* 超出部分用省略号表示 */
+}
+
+.narshelpCenterdetail-app .nhlpapp-search .dropdown .search-item {
+    color: #202734;
+}
+
+.narshelpCenterdetail-app .nhlpapp-search .nhlpappline {
+    width: 100%;
+    height: 1px;
+    background: #cdcedb;
+}
+
+.narshelpCenterdetail-app .nhlpapp-pagescate {
+    position: absolute;
+    margin-top: 8.7vh;
+    height: 92.3vh;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    display: none;
+    background: #fff;
+    overflow-y: auto;
+}
+
+.narshelpCenterdetail-app .nhlpapp-pagescate .nars-hlpdt-ml {
+    overflow-y: auto;
+    margin: 0 0.625rem;
+}
+
+.narshelpCenterdetail-app .nhlpapp-pagescate .nars-hlpdt-ml .nav-tree {
+    overflow-y: auto;
+}
+
+.narshelpCenterdetail-app .nhlpapp-pagescate .nars-hlpdt-ml .categoryhelp {
+    margin-bottom: 5px;
+}
+
+.narshelpCenterdetail-app .nhlpapp-pagescate .nars-hlpdt-ml .categoryhelp-title {
+    display: block;
+    padding: 10px;
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 1rem;
+    font-weight: bold;
+    margin-left: 10px;
+    color: #1f2635;
+}
+
+.narshelpCenterdetail-app .nhlpapp-pagescate .nars-hlpdt-ml .arrow {
+    margin-right: 0.125rem;
+    transform: rotate(0deg);
+    display: flex;
+    justify-content: center;
+}
+
+.narshelpCenterdetail-app .nhlpapp-pagescate .nars-hlpdt-ml .arrow .nars-jt {
+    width: 16px;
+    height: 16px;
+}
+
+.narshelpCenterdetail-app .nhlpapp-pagescate .nars-hlpdt-ml .rotate {
+    transform: rotate(90deg);
+}
+
+.narshelpCenterdetail-app .nhlpapp-pagescate .nars-hlpdt-ml .sub-list {
+    display: none;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.narshelpCenterdetail-app .nhlpapp-pagescate .nars-hlpdt-ml .sub-list li a {
+    width: fit-content;
+    display: block;
+    margin: 0 10px;
+    padding-top: 22px;
+    text-decoration: none;
+    color: #333;
+    margin-left: 41px;
+    font-size: 0.875rem;
+    color: #8f9099;
+}
+
+.narshelpCenterdetail-app .nhlpapp-pagescate .nars-hlpdt-ml .sub-list li:first a {
+    padding-top: 0;
+}
+
+.narshelpCenterdetail-app .nhlpapp-pagescate .nars-hlpdt-ml .sub-list li a:hover {
+    color: #1f2635;
+    border-bottom: 1px solid #1f2635;
+}