feat: Nas专题帮助中心

app/index/common.php

@@ -98,3 +98,21 @@ if (!function_exists('thumb')) {
         return mb_substr($url, 0, $idx, 'utf-8') . '_thumb' . mb_substr($url, $idx, $len - $idx, 'utf-8');
     }
 }
+
+if (!function_exists('get_path_from_img_tag'))
+{
+    /**
+     * 从img标签中获取图片路径
+     * @param string $img
+     * @return string
+     */
+    function get_path_from_img_tag(string $img): string
+    {
+        $match = preg_match('/<img[^>]+src=[\'"](.*?)[\'"][^>]+>/i', rawurldecode($img), $matches);
+        if ($match) {
+            return $matches[1];
+        }
+
+        return '';
+    }
+}

app/index/controller/TopicNas.php

@@ -3,6 +3,8 @@ declare (strict_types = 1);
 
 namespace app\index\controller;
 
+use app\index\model\ArticleCategoryModel;
+use app\index\model\ArticleModel;
 use app\index\model\SysBannerModel;
 use think\facade\View;
 
@@ -175,6 +177,41 @@ class TopicNas extends Common
      */
     public function help()
     {
+        // 获取文章分类及文章数据
+        $parent = ArticleCategoryModel::uniqueLabel('CATEGORY_681182e0a4529')->language($this->lang_id)->value('id');
+        $article_categorys = ArticleCategoryModel::with(['article' => function($query) {
+                $query->field(['id', 'title', 'category_id'])->limit(3);
+            }])
+            ->field([
+                'id',
+                'name',
+                'icon'
+            ])
+            ->language($this->lang_id)
+            ->parent($parent)
+            ->isShow(true)
+            ->select();
+        View::assign('article_categorys', $article_categorys);
+
+        $contacts = [];
+        // 获取banner数据
+        $banners = SysBannerModel::with(['items' => function ($query) {
+                $query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at']);
+            }])
+            ->uniqueLabel(['BANNER_6819754be2dc6'])
+            ->language($this->lang_id)
+            ->enabled(true)
+            ->order(['sort' => 'asc', 'id' => 'desc'])
+            ->select();
+        if (!$banners->isEmpty()) {
+            $banners_map = [];
+            foreach ($banners as $banner) {
+                $banners_map[$banner->unique_label] = $banner;
+            }
+            $contacts = data_get($banners_map, 'BANNER_6819754be2dc6')?->items->toArray();
+        }
+        View::assign('contacts', $contacts);
+
         return View::fetch('help');
     }
 
@@ -183,9 +220,49 @@ class TopicNas extends Common
      */
     public function helpDetail()
     {
+        $id = request()->get('id');
+        // 获取文章详情
+        $article = ArticleModel::bypk($id)->find();
+        View::assign('article', $article);
+
+        // 获取文章分类及文章数据
+        $parent = ArticleCategoryModel::uniqueLabel('CATEGORY_681182e0a4529')->value('id');
+        $article_categorys = ArticleCategoryModel::with(['article' => function ($query) {
+                $query->field(['id', 'title', 'category_id']);
+            }])
+            ->field([
+                'id',
+                'name',
+                'icon'
+            ])
+            ->language($this->lang_id)
+            ->parent($parent)
+            ->isShow(true)
+            ->select();
+        View::assign('article_categorys', $article_categorys);
 
         return View::fetch('help_detail');
     }
+
+    /**
+     * 专题-Nas帮助中心搜索
+     */
+    public function helpSearch()
+    {
+        $keywords = request()->post('keywords');
+        // 根据关键词查询文章
+        $articles = ArticleModel::field([
+                'id',
+                'title'
+            ])
+            ->withSearch(['title'], [
+                'title' => $keywords??null
+            ])
+            ->language($this->lang_id)
+            ->select();
+
+        return success('success', $articles->toArray());
+    }
     
     /**
      * 专题-Nas软件下载页

app/index/lang/en-us.php

@@ -210,5 +210,13 @@ return [
     'topic_nas_download' => [
         'cyber_tab_title'  => 'CyberData',
         'weline_tab_title' => 'Weline'
+    ],
+    'topic_nas_help' => [
+        'module_title'             => 'Quick Start Guide',
+        'search_input_placeholder' => 'What are you looking for?',
+        'article_section_title'    => 'User\' s Guide',
+        'contact_section_title'    => 'Contact US',
+        'view_more'                => 'Click to view more',
+        'content'                  => 'Content'
     ]
 ];

app/index/lang/zh-cn.php

@@ -210,5 +210,13 @@ return [
     'topic_nas_download' => [
         'cyber_tab_title'  => 'CyberData赛博云空间',
         'weline_tab_title' => 'Weline微链接'
+    ],
+    'topic_nas_help' => [
+        'module_title'             => '帮助中心',
+        'search_input_placeholder' => '请输入搜索关键字,如安装赛博云空间,影视库',
+        'article_section_title'    => '使用教程',
+        'contact_section_title'    => '联系我们',
+        'view_more'                => '查看更多',
+        'content'                  => '目录'
     ]
 ];

app/index/model/ArticleCategoryModel.php

@@ -29,6 +29,16 @@ class ArticleCategoryModel extends ArticleCategoryBaseModel
         $query->where('language_id', '=', $language);
     }
 
+    // 所属唯一标识范围查询
+    public function scopeUniqueLabel($query, $unique_label)
+    {
+        if (is_array($unique_label)) {
+            $query->where('unique_label', 'IN', $unique_label);
+            return;
+        }
+        $query->where('unique_label', '=', $unique_label);
+    }
+
     // 所属上级分类范围查询
     public function scopeParent($query, $parent)
     {

app/index/route/route.php

@@ -96,6 +96,10 @@ Route::group('topic', function() {
         Route::get('cooperation', 'TopicNas/cooperation');
         // 专题-Nas帮助中心页
         Route::get('help', 'TopicNas/help');
+        // 专题-Nas帮助中心详情页
+        Route::get('help_detail', 'TopicNas/helpDetail');
+        // 专题-Nas帮助中心搜索
+        Route::post('help_search', 'TopicNas/helpSearch');
         // 专题-Nas软件下载页
         Route::get('download', 'TopicNas/download');
     });

app/index/view/topic_nas/help.html

@@ -0,0 +1,141 @@
+{extend name="public/nas_base" /}
+{block name="style"}
+<link rel="stylesheet" href="__CSS__/topic_nas_help.css"/>
+{/block}
+{block name="main"}
+<div class="orico_Page_index">
+    <!-- 帮助中心 -->
+    <div class="narshelpCenterPc">
+        <!-- banner-搜索 -->
+        <div class="pagetopbg">
+            <img src="__IMAGES__/nas_help_banner.jpg" class="hpbgimg" />
+            <div class='nhlp-search'>
+                <input class="nhlp-ipt" id="search-input" placeholder="{:lang('topic_nas_help.search_input_placeholder')}" autocomplete="off" />
+                <img src="__IMAGES__/nas_help_search.png" class="searchimg" />
+            </div>
+            <!-- 下拉搜索框 -->
+            <div class="dropdown" id="dropdown">
+                <ul>
+                    <li>拿到产品后我该如何安装使用?</li>
+                </ul>
+            </div>
+        </div>
+        <!-- 使用教程 -->
+        {notempty name="article_categorys"}
+        <div class="nhlppart1">
+            <h1 class="helph1">{:lang('topic_nas_help.article_section_title')}</h1>
+            <div class="nhlp-row">
+                {volist name="article_categorys" id="vo" key="idx"}
+                <div class="nhlpit {gt name='idx' value='6'}nhlpit-w{/gt}">
+                    <div class="nhlptl">
+                        <img src="{$vo.icon}" class="bhlpicoimg" />{$vo.name}
+                    </div>
+                    <div class="nhlp-tx-list">
+                        {volist name="vo.article" id="va" key="index"}
+                        <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__/nas-jt.png" />
+                            </span>
+                        </a>
+                        {egt name="index" value="3"}
+                        <div class="ckgdbt">{:lang('topic_nas_help.view_more')} ></div>
+                        {/egt}
+                        {/volist}
+                    </div>
+                </div>
+                {/volist}
+            </div>
+        </div>
+        {/notempty}
+        <!-- 联系我们 -->
+        {notempty name="contacts"}
+        <div class="nhlp-lxwm">
+            <h1 class="lxwmtitle">{:lang('topic_nas_help.contact_section_title')}</h1>
+            <div class="nhlp-row">
+                {volist name="contacts" id="co" key="idx" offset="0" length="3"}
+                <a class="nhlplxwmit nhlplxwmit-w1" {notempty name="co.link"}href="{$co.link}"{/notempty} {eq name="idx" value="3"}style="margin-right: 0;"{/eq}>
+                    <img src="{$co.image}" class="lximg" />
+                    {if condition="!empty($co.desc) && str_contains($co.desc, '<img')"}
+                    <img src="{:get_path_from_img_tag($co.desc)}" class="lxewmimg">
+                    <span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
+                    {else/}
+                    <span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
+                    <span class="t2" {:style(['color'=>$co.desc_txt_color])}>{$co.desc|raw}</span>
+                    {/if}
+                </a>
+                {/volist}
+                {volist name="contacts" id="co" key="idx" offset="3"}
+                <a class="nhlplxwmit nhlplxwmit-w2" {notempty name="co.link"}href="{$co.link}"{/notempty} {eq name="idx%4" value="0"}style="margin-right: 0;"{/eq}>
+                    <img src="{$co.image}" class="lximg" />
+                    {if condition="!empty($co.desc) && str_contains($co.desc, '<img')"}
+                    <img src="{:get_path_from_img_tag($co.desc)}" class="lxewmimg">
+                    <span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
+                    {else/}
+                    <span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
+                    <span class="t2" {:style(['color'=>$co.desc_txt_color])}>{$co.desc|raw}</span>
+                    {/if}
+                </a>
+                {/volist}
+            </div>
+        </div>
+        {/notempty}
+    </div>
+</div>
+{/block}
+{block name="script"}
+<script type="text/javascript">
+    $(document).ready(function () {
+        $(document).ready(function () {
+            // 监听输入框内容变化
+            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 href="{:url(\'/index/topic/nas/help_detail\')}?id=' + v.id + '">' + v.title + '</a></li>'
+                                })
+                                html += '</ul>'
+                            }
+                            $('#dropdown').show().html(html);
+                        }
+                    })
+                }, 300);
+            })
+            $(document).on('click', function (e) {
+                var target = $(e.target);
+                if (!target.closest('.nhlp-search').length) {
+                    $('#dropdown').hide();
+                }
+            });
+            $('.nhlplxwmit:not(:first)').hover(function () {
+                // 当鼠标移入时，显示.lxewmimg 并隐藏.lximg
+                $(this).find('.lxewmimg').show();
+                $(this).find('.lximg').hide();
+            }, function () {
+                // 当鼠标移出时，隐藏.lxewmimg 并显示.lximg
+                $(this).find('.lxewmimg').hide();
+                $(this).find('.lximg').show();
+            });
+        });
+    })
+</script>
+{/block}

app/index/view/topic_nas/help_detail.html

@@ -0,0 +1,130 @@
+{extend name="public/nas_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="main"}
+<div class="orico_Page_index">
+    <div class="narshelpdetailPc">
+        <!-- top 搜索-->
+        <div class="narsssmain">
+            <div class="ml">{:lang('topic_nas_help.module_title')}/{:lang('topic_nas_help.article_section_title')}</div>
+            <div class="nars-hlp-search">
+                <input id="search-input" placeholder="{:lang('topic_nas_help.search_input_placeholder')}" autocomplete="off" />
+                <img src="__IMAGES__/nas_help_detail_search.png" class="ssimg">
+            </div>
+            <!-- 下拉搜索框 -->
+            <div class="dropdown" id="dropdown"></div>
+        </div>
+        <!-- 目录-文章详情-锚点定位--->
+        <div class="nars-help-content">
+            <!--目录 -->
+            <div class="nars-hlpdt-ml">
+                {notempty name="article_categorys"}
+                <div class="nav-tree">
+                    {volist name="article_categorys" id="ac"}
+                    <div class="category">
+                        <div class="category-title">
+                            <div class="arrow"><img src="__IMAGES__/nas-jt.png" class="arrow" /></div>
+                            <span>{$ac.name}</span>
+                        </div>
+                        <ul class="sub-list">
+                            {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 class="nars-hlpdt-mm" id="rendered-content">{$article.content|raw|default=''}</div>
+            <!--锚点定位 -->
+            <div class="nars-hlpdt-mr">
+                <div id="title-list">
+                    <h2 class="tt">{:lang('topic_nas_help.content')}</h2>
+                    <ul></ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{/block}
+{block name="script"}
+<script type="text/javascript">
+    $(document).ready(function () {
+        $('.category-title').click(function () {
+            $(this).next('.sub-list').slideToggle();
+            $(this).find('.arrow').toggleClass('rotate');
+        });
+        // 搜索
+        $(document).on('click', function (e) {
+            var target = $(e.target);
+            if (!target.closest('.nhlp-search').length) {
+                $('#dropdown').hide();
+            }
+        });
+        var timeout = null;
+        $('.nars-hlp-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 href="{:url(\'/index/topic/nas/help_detail\')}?id=' + v.id + '">' + v.title + '</a></li>'
+                            })
+                            html += '</ul>'
+                        }
+                        $('#dropdown').show().html(html);
+                    }
+                })
+            }, 300);
+        })
+        // 内容
+        // 清空标题列表
+        $("#title-list ul").empty();
+        // 提取 h1 标题
+        var h1Titles = $("#rendered-content").find("h3");
+        h1Titles.each(function (index) {
+            var title = $(this);
+            var titleText = title.text();
+            var titleId = "title-" + index;
+            title.attr("id", titleId);
+            var listItem = $("<li>");
+            var link = $("<a>", {
+                href: "#" + titleId,
+                text: titleText
+            });
+            listItem.append(link);
+            $("#title-list ul").append(listItem);
+        });
+    });
+</script>
+{/block}

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

@@ -0,0 +1,248 @@
+ .narshelpdetailPc {
+ 	display: flex;
+ 	flex-direction: column;
+ 	background: #f9f9f9;
+ }
+
+ .narshelpdetailPc .narsssmain {
+ 	width: 100%;
+ 	display: flex;
+ 	flex-direction: row;
+ 	border-top: 1px solid #ccc;
+ 	border-bottom: 1px solid #ccc;
+ 	padding: 21px 0;
+ 	top: 0;
+ 	align-items: center;
+ 	background: #fff;
+ 	z-index: 2;
+ }
+
+ .narshelpdetailPc .narsssmain .dropdown {
+ 	display: none;
+ 	position: absolute;
+ 	top: 124px;
+ 	left: 0;
+ 	width: 435px;
+ 	border-top: none;
+ 	background-color: #fff;
+ 	border-bottom-left-radius: 4px;
+ 	border-bottom-right-radius: 4px;
+ 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ 	margin: 0 auto;
+ 	right: 0;
+ 	max-height: 18.75rem;
+ 	min-height: 3.125rem;
+ 	overflow-y: auto;
+ }
+
+ .narshelpdetailPc .narsssmain .dropdown ul {
+ 	list-style-type: none;
+ 	padding: 0;
+ 	margin: 0;
+ }
+
+ .narshelpdetailPc .narsssmain .dropdown ul li {
+ 	padding: 10px;
+ 	cursor: pointer;
+ }
+
+ .narshelpdetailPc .narsssmain .dropdown ul li:hover {
+ 	background-color: #f4f4f4;
+ }
+
+ .narshelpdetailPc .narsssmain .ml {
+ 	font-size: 14px;
+ 	padding-left: 25px;
+ 	padding-top: 37px;
+ 	padding-bottom: 31px;
+ 	color: #8f9099;
+ 	position: absolute;
+ }
+
+ .narshelpdetailPc .narsssmain .nars-hlp-search {
+ 	width: 440px;
+ 	height: 42px;
+ 	border-radius: 1.3125rem;
+ 	font-size: 14px;
+ 	display: flex;
+ 	flex-direction: row;
+ 	align-items: center;
+ 	color: #8f9099;
+ 	border: 1px solid #cdcedb;
+ 	margin: 0 auto;
+ }
+
+ .narshelpdetailPc .narsssmain .nars-hlp-search .ssimg {
+ 	width: 1.6rem;
+ 	height: 1.6rem;
+ 	margin-right: 3%;
+ }
+
+ .narshelpdetailPc .narsssmain .nars-hlp-search input {
+ 	font-size: 14px;
+ 	border: none;
+ 	padding: 0 15px;
+ 	outline: none;
+ 	flex: 1;
+ 	margin-right: 2%;
+ 	margin-left: 2%;
+ }
+
+ .narshelpdetailPc .narsssmain .nars-hlp-search input::placeholder {
+ 	color: #8f9099;
+ 	text-align: center;
+ 	font-size: 14px;
+ }
+
+ .narshelpdetailPc .nars-help-content {
+ 	display: flex;
+ 	flex-direction: row;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-ml {
+ 	width: 252px;
+ 	overflow-y: auto;
+ 	border-right: 1px solid #ccc;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .nav-tree {
+ 	max-height: 800px;
+ 	overflow-y: auto;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .category {
+ 	margin-bottom: 5px;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .category-title {
+ 	display: block;
+ 	padding: 10px;
+ 	cursor: pointer;
+ 	position: relative;
+ 	display: flex;
+ 	flex-direction: row;
+ 	align-items: center;
+ 	font-size: 14px;
+ 	font-weight: bold;
+ 	margin-left: 10px;
+ 	color: #1f2635;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .arrow {
+ 	margin-right: 2px;
+ 	transform: rotate(0deg);
+ 	display: flex;
+ 	justify-content: center;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .arrow .nars-jt {
+ 	width: 16px;
+ 	height: 16px;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .rotate {
+ 	transform: rotate(45deg);
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list {
+ 	display: none;
+ 	list-style: none;
+ 	padding: 0;
+ 	margin: 0;
+ }
+
+ .narshelpdetailPc .nars-help-content .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: 12px;
+ 	color: #8f9099;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list li:first a {
+ 	padding-top: 0;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list li a:hover,
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list li a.active {
+ 	color: #1f2635;
+ 	border-bottom: 1px solid #1f2635;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-mm {
+ 	padding: 32px 150px;
+ 	max-height: 920px;
+ 	min-height: 700px;
+ 	height: auto;
+ 	flex: 1;
+ 	overflow-y: auto;
+ 	position: relative;
+ }
+
+ /*      .narshelpdetailPc .nars-help-content .nars-hlpdt-mm img{*/
+ /*	width: -webkit-fill-available;*/
+ /*}*/
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-mr {
+ 	width: 252px;
+ 	overflow-y: auto;
+ 	border-left: 1px solid #ccc;
+ 	overflow-y: auto;
+ 	display: flex;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list {
+ 	padding: 0 20px;
+ 	float: right;
+ 	max-height: 800px;
+ 	min-height: 700px;
+ 	overflow-y: auto;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list .tt {
+ 	font-size: 14px;
+ 	padding-top: 33px;
+ 	padding-bottom: 1rem;
+ 	margin: 0;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul {
+ 	list-style-type: none;
+ 	padding: 0;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul li {
+ 	margin-bottom: 23px;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul li a {
+ 	text-decoration: none;
+ 	font-size: 12px;
+ 	color: #1f2635;
+ }
+
+ .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul li a:hover {
+ 	color: #1f2635;
+ 	border-bottom: 1px solid #1f2635;
+ }
+
+ .nav-tree .category:nth-child(1) .category-title {
+ 	padding-top: 33px;
+ }
+.orico_footer .fotter{
+	margin-top: 0 !important;
+}
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ 	margin: 0;
+ 	all: revert;
+ 	/* 将所有属性设置为初始值 */
+ 	/* 或者使用 all: revert; 恢复到浏览器默认样式，但该属性兼容性不如 initial */
+ }

public/static/index/css/topic_nas_help.css

@@ -0,0 +1,286 @@
+ .narshelpCenterPc {
+ 	display: flex;
+ 	flex-direction: column;
+ 	/* 下拉搜索框样式 */
+ 	/* 下拉搜索框中的建议项样式 */
+ }
+
+ .narhelpgoimg {
+ 	display: flex;
+ 	justify-content: center;
+ }
+
+ .narshelpCenterPc .narhelpgoimg img {
+ 	width: 16px;
+ 	height: 16px;
+ }
+
+ .narshelpCenterPc .pagetopbg {
+ 	width: 100%;
+ 	position: relative;
+ 	align-items: center;
+ 	display: flex;
+ 	justify-content: center;
+ 	flex-direction: column;
+ }
+
+ .narshelpCenterPc .pagetopbg .hpbgimg {
+ 	width: 100%;
+ }
+
+ .narshelpCenterPc .pagetopbg .nhlp-search {
+ 	width: 35%;
+ 	height: 48px;
+ 	border-radius: 24px;
+ 	background: #5299e1;
+ 	flex-direction: row;
+ 	align-items: center;
+ 	display: flex;
+ 	position: absolute;
+ 	justify-content: space-between;
+ 	border: 0.0625rem solid #fff;
+ 	bottom: 15%;
+ 	cursor: pointer;
+ 	box-shadow: 2px 2px 100px #8d8d8d;
+ }
+
+ .narshelpCenterPc .pagetopbg .nhlp-search .nhlp-ipt {
+ 	border: none;
+ 	width: 86%;
+ 	height: 48px;
+ 	margin-left: 5%;
+ 	color: #fff;
+ 	background: transparent;
+ 	font-size: 1rem;
+ }
+
+ .narshelpCenterPc .pagetopbg .nhlp-search .searchimg {
+ 	width: 1.6rem;
+ 	height: 1.6rem;
+ 	margin-right: 3%;
+ }
+
+ .narshelpCenterPc .pagetopbg .nhlp-search input {
+ 	border: none;
+ 	padding: 0;
+ 	outline: none;
+ }
+
+ .narshelpCenterPc .pagetopbg .nhlp-search input::placeholder {
+ 	color: #fff;
+ 	text-align: center;
+ 	font-size: 16px;
+ }
+
+ .narshelpCenterPc .nhlppart1 {
+ 	width: 74.6%;
+ 	margin: 0 auto;
+ 	display: flex;
+ 	flex-direction: column;
+ 	justify-content: center;
+ }
+
+ .narshelpCenterPc .nhlppart1 .helph1 {
+ 	margin: 0 auto;
+ 	margin-top: 54px;
+ 	font-weight: bold;
+ 	font-size: 32px;
+ 	margin-bottom: 38px;
+ }
+
+ .narshelpCenterPc .nhlppart1 .nhlp-row {
+ 	display: flex;
+ 	flex-direction: row;
+ 	flex-wrap: wrap;
+ 	margin-bottom: 4.625rem;
+ }
+
+ .narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit {
+ 	width: 27.7%;
+ 	padding: 2.25rem;
+ 	background: #fafafa;
+ 	border-radius: 8px;
+ 	color: #202734;
+ 	font-size: 1rem;
+ 	margin-right: 12px;
+ 	margin-bottom: 12px;
+ }
+
+ .narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit .nhlptl {
+ 	display: flex;
+ 	flex-direction: row;
+ 	align-items: center;
+ 	font-size: 1.25rem;
+ 	font-weight: bold;
+ 	padding-bottom: 1.25rem;
+ }
+
+ .narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit .nhlptl .bhlpicoimg {
+ 	width: 36px;
+ 	height: 36px;
+ 	margin-right: 10px;
+ }
+
+ .narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit .nhlp-tx-list {
+ 	display: flex;
+ 	flex-direction: column;
+ }
+
+ .narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit .nhlp-tx-list .txrow {
+ 	display: flex;
+ 	flex-direction: row;
+ 	align-items: center;
+ 	margin-bottom: 1rem;
+ 	cursor: pointer;
+ }
+
+ .narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit .nhlp-tx-list .txrow .nhlp-point {
+ 	width: 0.3125rem;
+ 	height: 0.3125rem;
+ 	background: #202734;
+ 	border-radius: 0.1875rem;
+ 	margin: 0 0.625rem;
+ 	margin-left: 0.25rem;
+ }
+
+ .narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit .nhlp-tx-list .txrow .nhlpsp {
+ 	flex: 1;
+ 	color: #1f2635;
+ 	font-size: 1rem;
+ 	white-space: nowrap;
+ 	/* 不允许换行 */
+ 	overflow: hidden;
+ 	/* 超出部分隐藏 */
+ 	text-overflow: ellipsis;
+ 	/* 超出部分显示省略号 */
+ }
+
+ .narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit .nhlp-tx-list .ckgdbt {
+ 	background: #fff;
+ 	width: fit-content;
+ 	color: #bfbfc4;
+ 	font-size: 0.9375rem;
+ 	border: 0.0625rem solid #bfbfc4;
+ 	padding: 0.4375rem 1.125rem;
+ 	margin-top: 1rem;
+ 	cursor: pointer;
+ 	border-radius: 1.5rem;
+ 	display: flex;
+ 	flex-direction: row;
+ 	align-items: center;
+ }
+
+ .narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit-w {
+ 	width: 44.5%;
+ }
+
+ .narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit-w:last-child {
+ 	margin-right: 0;
+ }
+
+ .narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit:nth-child(3n) {
+ 	margin-right: 0;
+ }
+
+ .narshelpCenterPc .lxwmtitle {
+ 	margin: 0 auto;
+ 	margin-bottom: 38px;
+ 	font-weight: bold;
+ 	font-size: 32px;
+ }
+
+ .narshelpCenterPc .nhlp-lxwm {
+ 	width: 74.6%;
+ 	margin: 0 auto;
+ 	display: flex;
+ 	flex-direction: column;
+ 	justify-content: center;
+ }
+
+ .narshelpCenterPc .nhlp-lxwm .nhlp-row {
+ 	display: flex;
+ 	flex-direction: row;
+ 	align-items: center;
+ 	flex-wrap: wrap;
+ 	margin-bottom: 4.625rem;
+ }
+
+ .narshelpCenterPc .nhlp-lxwm .nhlp-row .nhlplxwmit {
+ 	background: #f9f9f9;
+ 	width: 392px;
+ 	height: 291px;
+ 	margin-bottom: 0.75rem;
+ 	display: flex;
+ 	flex-direction: column;
+ 	justify-content: center;
+ 	align-items: center;
+ 	margin-right: 12px;
+ 	border-radius: 8px;
+ 	cursor: pointer;
+ }
+
+ .narshelpCenterPc .nhlp-lxwm .nhlp-row .nhlplxwmit .lximg {
+ 	width: 4.375rem;
+ 	height: 4.375rem;
+ 	margin-bottom: 2.125rem;
+ }
+
+ .narshelpCenterPc .nhlp-lxwm .nhlp-row .nhlplxwmit .lxewmimg {
+ 	width: 6.875rem;
+ 	width: 6.875rem;
+ 	margin-bottom: 1.25rem;
+ 	display: none;
+ }
+
+ .narshelpCenterPc .nhlp-lxwm .nhlp-row .nhlplxwmit .t1 {
+ 	font-size: 1rem;
+ 	padding-bottom: 0.375rem;
+ 	color: #1f2635;
+ }
+
+ .narshelpCenterPc .nhlp-lxwm .nhlp-row .nhlplxwmit .t2 {
+ 	font-size: 0.75rem;
+ 	color: #1f2635;
+ }
+
+ .narshelpCenterPc .nhlp-lxwm .nhlp-row .nhlplxwmit-w1 {
+ 	width: 32.7%;
+ }
+
+ .narshelpCenterPc .nhlp-lxwm .nhlp-row .nhlplxwmit-w2 {
+ 	width: 24.3%;
+ }
+
+ .narshelpCenterPc .dropdown {
+ 	display: none;
+ 	position: absolute;
+ 	top: 355px;
+ 	left: 0;
+ 	width: 35%;
+ 	border: 1px solid #ccc;
+ 	border-top: none;
+ 	background-color: #fff;
+ 	border-bottom-left-radius: 4px;
+ 	border-bottom-right-radius: 4px;
+ 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ 	margin: 0 auto;
+ 	right: 0;
+ 	max-height: 18.75rem;
+ 	min-height: 3.125rem;
+ 	overflow-y: auto;
+ }
+
+ .narshelpCenterPc .dropdown ul {
+ 	list-style-type: none;
+ 	padding: 0;
+ 	margin: 0;
+ }
+
+ .narshelpCenterPc .dropdown ul li {
+ 	padding: 10px;
+ 	cursor: pointer;
+ }
+
+ .narshelpCenterPc .dropdown ul li:hover {
+ 	background-color: #f4f4f4;
+ }