fix: nas页面从pc重定向到mobile时丢失参数问题

app/admin/controller/ReceiveSync.php

@@ -222,9 +222,6 @@ class ReceiveSync extends Base
                             $record['cid'] = $category_id;
                         }
                     }
-
-                    // 不更新产品名称
-                    unset($record['name']);
                     
                     $record['updatetime'] = time();
                     $ok = $query->name('product')->where('id', '=', $mp['id'])->update($record);

app/common/controller/BaseController.php

@@ -8,7 +8,8 @@ use think\Db;
 use think\Cache;
 use think\Config;
 
-class BaseController extends Controller {
+class BaseController extends Controller
+{
 
     //当前网站ID
     protected $siteid = 32267;
@@ -20,6 +21,7 @@ class BaseController extends Controller {
     protected $controller;
     protected $action;
     protected $langid;
+    protected $country_code;
 
     public function __construct()
     {
@@ -46,10 +48,10 @@ class BaseController extends Controller {
         $this->lang = 'zh-cn';
         $this->view->assign('lang', $this->lang);
         $this->view->assign('langid', $this->langid);
-        
+
         $uuid = createGuid();
         $this->view->assign('uuid', $uuid);
-        
+
         // 该服务停用了，导致访问慢，暂时注释
         // setMomitorFeed($this->request->controller(), $uuid); 
 
@@ -77,22 +79,22 @@ class BaseController extends Controller {
         $url        = $this->request->url(true);
 
         if ($url == 'https://www.orico.com.cn/index.php')
-            return $this->redirect('https://www.orico.com.cn'); 
+            return $this->redirect('https://www.orico.com.cn');
 
-        if ($this->request->isMobile() && strpos($base_url, 'mobile') === false)
+        if ($this->request->isMobile() && strpos($base_url, 'mobile') === false) {
-        {
             $ctrl = \think\helper\Str::snake($this->controller);
             if ($ctrl == 'tops_nas') {
-                return $this->redirect(url("@mobile/$ctrl/$action"));
+                if ($this->country_code == 'US') {
+                    return $this->redirect(url("@usmobile/$ctrl/$action", $this->request->param()));
+                }
+                return $this->redirect(url("@mobile/$ctrl/$action", $this->request->param()));
             }
-            
+
-            if (strpos($domain, 'orico.cc'))
+            if (strpos($domain, 'orico.cc')) {
-            {
                 //  英文
                 if ($base_url == '/')
                     return $this->redirect($scheme . '://www.orico.cc/usmobile.html');  //  首页
-                else if ($controller == 'product')
+                else if ($controller == 'product') {
-                {
                     //  产品
                     $id = $this->request->param('id');
                     if ($action == 'catelists')
@@ -103,29 +105,21 @@ class BaseController extends Controller {
                         return $this->redirect($scheme . '://www.orico.cc/usmobile/product/detail/id/' . $id . '.html');
                     else if ($action == 'new_arrival')
                         return $this->redirect($scheme . '://www.orico.cc/usmobile/product/new_arrival.html');
-                }
+                } else if ($controller == 'article') {
-                else if ($controller == 'article')
-                {
                     //  新闻
-                    $id = $this->request->param('id'); 
+                    $id = $this->request->param('id');
-                    if ($action == 'catelists')
+                    if ($action == 'catelists') {
-                    {
                         $page = $this->request->param('page');
                         $page = isset($page) ? $page : 1;
-                    }
+                    } else if ($action == 'detail')
-                    else if ($action == 'detail')
                         return $this->redirect($scheme . '://www.orico.cc/usmobile/article/detail/id/' . $id . '.html');
-                }
+                } else if ($controller == 'group')
-                else if ($controller == 'group')
                     return $this->redirect($scheme . '://www.orico.cc/usmobile/' . $controller . '/' . $action . '.html');
-            }
+            } else {
-            else
-            {
                 //  中文
                 if ($base_url == '/')
                     return $this->redirect($scheme . '://www.orico.com.cn/mobile.html');    //  首页
-                else if ($controller == 'product')
+                else if ($controller == 'product') {
-                {
                     //  产品
                     $id = $this->request->param('id');
                     if ($action == 'catelists')
@@ -134,42 +128,35 @@ class BaseController extends Controller {
                         return $this->redirect($scheme . '://www.orico.com.cn/mobile/product/subcatelists/id/' . $id . '.html');
                     else if ($action == 'detail')
                         return $this->redirect($scheme . '://www.orico.com.cn/mobile/product/detail/id/' . $id . '.html');
-                }
+                } else if ($controller == 'article') {
-                else if ($controller == 'article')
-                {
                     //  新闻
                     $id = $this->request->param('id');
-                    
+
-                    if ($action == 'catelists')
+                    if ($action == 'catelists') {
-                    {
                         $page = $this->request->param('page');
                         $page = isset($page) ? $page : 1;
-                    }
+                    } else if ($action == 'detail')
-                    else if ($action == 'detail')
                         return $this->redirect($scheme . '://www.orico.com.cn/mobile/article/detail/id/' . $id . '.html');
-                }
+                } else if ($controller == 'group') {
-                else if ($controller == 'group'){
+
-                    
                     /*if($action == 'oricoindex'){
                         return $this->redirect($scheme . '://www.orico.com.cn/mobile');
                     }*/
                     return $this->redirect($scheme . '://www.orico.com.cn/mobile/' . $controller . '/' . $action . '.html');
                 }
-                    
-
             }
         }
-
     }
 
     //空操作
-    public function _empty() {
+    public function _empty()
-        if ($_SERVER['HTTP_HOST']=="www.orico.com.cn" && $_SERVER['HTTP_HOST']=="orico.com.cn") { 
+    {
-                    return $this->redirect("http://orico.com.cn");
+        if ($_SERVER['HTTP_HOST'] == "www.orico.com.cn" && $_SERVER['HTTP_HOST'] == "orico.com.cn") {
-        } elseif ($_SERVER['HTTP_HOST']=="www.orico.cc" || $_SERVER['HTTP_HOST']=="orico.cc") {
+            return $this->redirect("http://orico.com.cn");
-                return $this->redirect("http://orico.cc");
+        } elseif ($_SERVER['HTTP_HOST'] == "www.orico.cc" || $_SERVER['HTTP_HOST'] == "orico.cc") {
+            return $this->redirect("http://orico.cc");
         }
-       return exception(_lang_('This operation not valid'));
+        return exception(_lang_('This operation not valid'));
     }
 
     /**
@@ -178,12 +165,14 @@ class BaseController extends Controller {
      * @param  integer $id id
      * @return bool 检测结果
      */
-    protected function verify_check($code, $id = '') {
+    protected function verify_check($code, $id = '')
+    {
         $verify = new \verify\Verify();
         return $verify->check($code, $id);
     }
 
-    protected function verify_build($id = '', $cfg = []) {
+    protected function verify_build($id = '', $cfg = [])
+    {
         //$verify = new \verify\Verify((array) Config::get('captcha'));
         $config = [
             'expire' => 900, // 验证码过期时间（s）
@@ -206,7 +195,8 @@ class BaseController extends Controller {
      * @param string $name 缓存变量名
      * @return bool
      */
-    public function cacheHas($name) {
+    public function cacheHas($name)
+    {
         return Cache::has($name);
     }
 
@@ -218,7 +208,8 @@ class BaseController extends Controller {
      * @param int|null      $expire  有效时间 0为永久
      * @return boolean
      */
-    public function cacheSet($name, $value, $expire = null) {
+    public function cacheSet($name, $value, $expire = null)
+    {
         return Cache::set($name, $value, $expire);
     }
 
@@ -229,7 +220,8 @@ class BaseController extends Controller {
      * @param mixed  $default 默认值
      * @return mixed
      */
-    public function cacheGet($name, $default = false) {
+    public function cacheGet($name, $default = false)
+    {
 
         return Cache::get($name, $default);
     }
@@ -240,7 +232,8 @@ class BaseController extends Controller {
      * @param string    $name 缓存标识
      * @return boolean
      */
-    public function cacheDelete($name) {
+    public function cacheDelete($name)
+    {
         return Cache::rm($name);
     }
 
@@ -250,7 +243,8 @@ class BaseController extends Controller {
      * @param string $tag 标签名
      * @return boolean
      */
-    public function cacheClear($tag = null) {
+    public function cacheClear($tag = null)
+    {
         return Cache::clear($tag);
     }
 
@@ -260,7 +254,8 @@ class BaseController extends Controller {
      * @param string $name 缓存变量名
      * @return mixed
      */
-    public function cachePull($name) {
+    public function cachePull($name)
+    {
         return Cache::pull($name);
     }
 
@@ -272,7 +267,8 @@ class BaseController extends Controller {
      * @param int       $expire  有效时间 0为永久
      * @return mixed
      */
-    public function cacheRemember($name, $value, $expire = null) {
+    public function cacheRemember($name, $value, $expire = null)
+    {
         return Cache::remember($name, $value, $expire);
     }
 
@@ -284,7 +280,8 @@ class BaseController extends Controller {
      * @param bool          $overlay 是否覆盖
      * @return Driver
      */
-    public function cacheTag($name, $keys = null, $overlay = false) {
+    public function cacheTag($name, $keys = null, $overlay = false)
+    {
         return Cache::tag($name, $keys, $overlay);
     }
 
@@ -296,7 +293,8 @@ class BaseController extends Controller {
      * @param array      $data 返回数据
      * @return json
      */
-    public function json($code, $msg, $data=null) {
+    public function json($code, $msg, $data = null)
+    {
         $result = [
             'code'  => $code,
             'msg'   => $msg,
@@ -307,5 +305,4 @@ class BaseController extends Controller {
         echo json_encode($result);
         exit;
     }
-
 }

app/index/controller/TopsNas.php

@@ -341,7 +341,7 @@ class TopsNas extends BaseController
         $model = \think\Db::table($sub_query . ' a');
         foreach ($categorys as $key => $val) {
             if ($key == 0) continue;
-            $model->union(function($query) use($val, $limit) {
+            $model->union(function($query) use($key, $val, $limit) {
                 $query->name('article')->field([
                     'id',
                     'cid',
@@ -355,6 +355,8 @@ class TopsNas extends BaseController
                 if (!empty($limit)) {
                     $query->limit($limit);
                 }
+                // 嵌套子查询，解决union没有limit时排序问题
+                $query->table($query->buildSql() . 'a' . $key);
             });
         }
         

app/index/view/tops_nas/helper_detail.phtml

@@ -1,402 +1,452 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
+  <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>帮助中心</title>
+  <title>帮助中心</title>
-    {include file='include/head-nas' /}
+  {include file='include/head-nas' /}
-    <style>
+  <style>
-        [class*=' icon-'] {
+    [class*=' icon-'] {
-     		color: #000;
+      color: #000;
-     	 }
+    }
-        .narshelpdetailPc {
+
-          display: flex;
+    .narshelpdetailPc {
-          flex-direction: column;
+      display: flex;
-          background: #f9f9f9;
+      flex-direction: column;
-        }
+      background: #f9f9f9;
-        .narshelpdetailPc .narsssmain {
+    }
-          width: 100%;
+
-          display: flex;
+    .narshelpdetailPc .narsssmain {
-          flex-direction: row;
+      width: 100%;
-          border-top: 1px solid #ccc;
+      display: flex;
-          border-bottom: 1px solid #ccc;
+      flex-direction: row;
-          padding: 21px 0;
+      border-top: 1px solid #ccc;
-          top: 0;
+      border-bottom: 1px solid #ccc;
-          align-items: center;
+      padding: 21px 0;
-          background: #fff;
+      top: 0;
-          z-index: 2;
+      align-items: center;
-        }
+      background: #fff;
-        .narshelpdetailPc .narsssmain .dropdown {
+      z-index: 2;
-          display: none;
+    }
-          position: absolute;
+
-          top: 124px;
+    .narshelpdetailPc .narsssmain .dropdown {
-          left: 0;
+      display: none;
-          width: 435px;
+      position: absolute;
-          border-top: none;
+      top: 124px;
-          background-color: #fff;
+      left: 0;
-          border-bottom-left-radius: 4px;
+      width: 435px;
-          border-bottom-right-radius: 4px;
+      border-top: none;
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      background-color: #fff;
-          margin: 0 auto;
+      border-bottom-left-radius: 4px;
-          right: 0;
+      border-bottom-right-radius: 4px;
-          max-height: 18.75rem;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-          min-height: 3.125rem;
+      margin: 0 auto;
-          overflow-y: auto;
+      right: 0;
-        }
+      max-height: 18.75rem;
-        .narshelpdetailPc .narsssmain .dropdown ul {
+      min-height: 3.125rem;
-          list-style-type: none;
+      overflow-y: auto;
-          padding: 0;
+    }
-          margin: 0;
+
-        }
+    .narshelpdetailPc .narsssmain .dropdown ul {
-        .narshelpdetailPc .narsssmain .dropdown ul li {
+      list-style-type: none;
-          padding: 10px;
+      padding: 0;
-          cursor: pointer;
+      margin: 0;
-        }
+    }
-        .narshelpdetailPc .narsssmain .dropdown ul li:hover {
+
-          background-color: #f4f4f4;
+    .narshelpdetailPc .narsssmain .dropdown ul li {
-        }
+      padding: 10px;
-        .narshelpdetailPc .narsssmain .ml {
+      cursor: pointer;
-          font-size: 14px;
+    }
-          padding-left: 25px;
+
-          padding-top: 37px;
+    .narshelpdetailPc .narsssmain .dropdown ul li:hover {
-          padding-bottom: 31px;
+      background-color: #f4f4f4;
-          color: #8f9099;
+    }
-          position: absolute;
+
-        }
+    .narshelpdetailPc .narsssmain .ml {
-        .narshelpdetailPc .narsssmain .nars-hlp-search {
+      font-size: 14px;
-          width: 440px;
+      padding-left: 25px;
-          height: 42px;
+      padding-top: 37px;
-          border-radius: 1.3125rem;
+      padding-bottom: 31px;
-          font-size: 14px;
+      color: #8f9099;
-          display: flex;
+      position: absolute;
-          flex-direction: row;
+    }
-          align-items: center;
+
-          color: #8f9099;
+    .narshelpdetailPc .narsssmain .nars-hlp-search {
-          border: 1px solid #cdcedb;
+      width: 440px;
-          margin: 0 auto;
+      height: 42px;
-        }
+      border-radius: 1.3125rem;
-        .narshelpdetailPc .narsssmain .nars-hlp-search .ssimg {
+      font-size: 14px;
-          width: 1.6rem;
+      display: flex;
-          height: 1.6rem;
+      flex-direction: row;
-          margin-right: 3%;
+      align-items: center;
-        }
+      color: #8f9099;
-        .narshelpdetailPc .narsssmain .nars-hlp-search input {
+      border: 1px solid #cdcedb;
-          font-size: 14px;
+      margin: 0 auto;
-          border: none;
+    }
-          padding: 0 15px;
+
-          outline: none;
+    .narshelpdetailPc .narsssmain .nars-hlp-search .ssimg {
-          flex: 1;
+      width: 1.6rem;
-          margin-right: 2%;
+      height: 1.6rem;
-          margin-left: 2%;
+      margin-right: 3%;
-        }
+    }
-        .narshelpdetailPc .narsssmain .nars-hlp-search input::placeholder {
+
-          color: #8f9099;
+    .narshelpdetailPc .narsssmain .nars-hlp-search input {
-          text-align: center;
+      font-size: 14px;
-          font-size: 14px;
+      border: none;
-        }
+      padding: 0 15px;
-        .narshelpdetailPc .nars-help-content {
+      outline: none;
-          display: flex;
+      flex: 1;
-          flex-direction: row;
+      margin-right: 2%;
-        }
+      margin-left: 2%;
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-ml {
+    }
-          width: 252px;
+
-          overflow-y: auto;
+    .narshelpdetailPc .narsssmain .nars-hlp-search input::placeholder {
-          border-right: 1px solid #ccc;
+      color: #8f9099;
-        }
+      text-align: center;
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .nav-tree {
+      font-size: 14px;
-          max-height: 800px;
+    }
-          overflow-y: auto;
+
-        }
+    .narshelpdetailPc .nars-help-content {
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .category {
+      display: flex;
-          margin-bottom: 5px;
+      flex-direction: row;
-        }
+    }
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .category-title {
+
-          display: block;
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-ml {
-          padding: 10px;
+      width: 252px;
-          cursor: pointer;
+      overflow-y: auto;
-          position: relative;
+      border-right: 1px solid #ccc;
-          display: flex;
+    }
-          flex-direction: row;
+
-          align-items: center;
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .nav-tree {
-          font-size: 14px;
+      max-height: 800px;
-          font-weight: bold;
+      overflow-y: auto;
-          margin-left: 10px;
+    }
-          color: #1f2635;
+
-        }
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .category {
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .arrow {
+      margin-bottom: 5px;
-          margin-right: 2px;
+    }
-          transform: rotate(0deg);
+
-          display: flex;
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .category-title {
-          justify-content: center;
+      display: block;
-        }
+      padding: 10px;
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .arrow .nars-jt {
+      cursor: pointer;
-          width: 16px;
+      position: relative;
-          height: 16px;
+      display: flex;
-        }
+      flex-direction: row;
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .rotate {
+      align-items: center;
-          transform: rotate(45deg);
+      font-size: 14px;
-        }
+      font-weight: bold;
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list {
+      margin-left: 10px;
-          display: none;
+      color: #1f2635;
-          list-style: none;
+    }
-          padding: 0;
+
-          margin: 0;
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .arrow {
-        }
+      margin-right: 2px;
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list li a {
+      transform: rotate(0deg);
-          width: fit-content;
+      display: flex;
-          display: block;
+      justify-content: center;
-          margin: 0 10px;
+    }
-          padding-top: 22px;
+
-          text-decoration: none;
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .arrow .nars-jt {
-          color: #333;
+      width: 16px;
-          margin-left: 41px;
+      height: 16px;
-          font-size: 12px;
+    }
-          color: #8f9099;
+
-        }
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .rotate {
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list li:first a {
+      transform: rotate(45deg);
-          padding-top: 0;
+    }
-        }
+
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list li a:hover,
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list {
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list li a.active {
+      display: none;
-          color: #1f2635;
+      list-style: none;
-          border-bottom: 1px solid #1f2635;
+      padding: 0;
-        }
+      margin: 0;
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-mm {
+    }
-          padding: 32px  150px;
+
-          max-height: 920px;
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list li a {
-          min-height: 700px;
+      width: fit-content;
-          height: auto;
+      display: block;
-          flex: 1;
+      margin: 0 10px;
-          overflow-y: auto;
+      padding-top: 22px;
-          position: relative;
+      text-decoration: none;
-        }
+      color: #333;
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-mm img{
+      margin-left: 41px;
-            max-width: 100%;
+      font-size: 12px;
-        }
+      color: #8f9099;
-  /*      .narshelpdetailPc .nars-help-content .nars-hlpdt-mm img{*/
+    }
-		/*	width: -webkit-fill-available;*/
+
-		/*}*/
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list li:first a {
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-mr {
+      padding-top: 0;
-          width: 252px;
+    }
-          overflow-y: auto;
+
-          border-left: 1px solid #ccc;
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list li a:hover,
-          overflow-y: auto;
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list li a.active {
-          display: flex;
+      color: #1f2635;
-        }
+      border-bottom: 1px solid #1f2635;
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list {
+    }
-          padding: 0 20px;
+
-          float: right;
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-mm {
-          max-height: 800px;
+      padding: 32px 150px;
-          min-height: 700px;
+      max-height: 920px;
-          overflow-y: auto;
+      min-height: 700px;
-        }
+      height: auto;
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list .tt {
+      flex: 1;
-          font-size: 14px;
+      overflow-y: auto;
-          padding-top: 33px;
+      position: relative;
-          padding-bottom: 1rem;
+    }
-          margin: 0;
+
-        }
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-mm img {
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul {
+      max-width: 100%;
-          list-style-type: none;
+    }
-          padding: 0;
+
-        }
+    /*      .narshelpdetailPc .nars-help-content .nars-hlpdt-mm img{*/
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul li {
+    /*	width: -webkit-fill-available;*/
-          margin-bottom: 23px;
+    /*}*/
-        }
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-mr {
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul li a {
+      width: 252px;
-          text-decoration: none;
+      overflow-y: auto;
-          font-size: 12px;
+      border-left: 1px solid #ccc;
-          color: #1f2635;
+      overflow-y: auto;
-        }
+      display: flex;
-        .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul li a:hover {
+    }
-          color: #1f2635;
+
-          border-bottom: 1px solid #1f2635;
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list {
-        }
+      padding: 0 20px;
-        
+      float: right;
-        .nav-tree .category:nth-child(1) .category-title {
+      max-height: 800px;
-          padding-top: 33px;
+      min-height: 700px;
-        }
+      overflow-y: auto;
-        
+    }
-        /* 修改垂直滚动条 */
+
-        ::-webkit-scrollbar {
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list .tt {
-          width: 6px; /* 修改宽度 */
+      font-size: 14px;
-        }
+      padding-top: 33px;
-        
+      padding-bottom: 1rem;
-        /* 修改滚动条轨道背景色 */
+      margin: 0;
-        ::-webkit-scrollbar-track {
+    }
-          background-color: transparent;
+
-        }
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul {
-        
+      list-style-type: none;
-        /* 修改滚动条滑块颜色 */
+      padding: 0;
-        ::-webkit-scrollbar-thumb {
+    }
-          background-color: #ccc;
+
-        }
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul li {
-        
+      margin-bottom: 23px;
-        /* 修改滚动条滑块悬停时的颜色 */
+    }
-        ::-webkit-scrollbar-thumb:hover {
+
-          background-color: #D8DFE8;
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul li a {
-        }
+      text-decoration: none;
-        
+      font-size: 12px;
-        /* 修改滚动条滑块移动时的颜色 */
+      color: #1f2635;
-        ::-webkit-scrollbar-thumb:active {
+    }
-          background-color: #D8DFE8;
+
-        }
+    .narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul li a:hover {
-        
+      color: #1f2635;
-        /* 修改滚动条滑块的圆角 */
+      border-bottom: 1px solid #1f2635;
-        ::-webkit-scrollbar-thumb {
+    }
-          border-radius: 5px;
+
-        }
+    .nav-tree .category:nth-child(1) .category-title {
-        /* 整体滚动条 */
+      padding-top: 33px;
-        * {
+    }
-            scrollbar-width: thin; /* 滚动条宽度 */
+
-            scrollbar-color: #D8DBE6 transparent; /* 滚动条颜色（滑块颜色 轨道颜色） */
+    /* 修改垂直滚动条 */
-        }
+    ::-webkit-scrollbar {
-        
+      width: 6px;
-        /* 滚动条轨道 */
+      /* 修改宽度 */
-        *::-moz-scrollbar-track {
+    }
-            background-color: #f0f0f0;
+
-        }
+    /* 修改滚动条轨道背景色 */
-        
+    ::-webkit-scrollbar-track {
-        /* 滚动条滑块 */
+      background-color: transparent;
-        *::-moz-scrollbar-thumb {
+    }
-            background-color: #D8DBE6;
+
-            border-radius: 5px; /* 滑块的圆角 */
+    /* 修改滚动条滑块颜色 */
-        }
+    ::-webkit-scrollbar-thumb {
-        
+      background-color: #ccc;
-        /* 滚动条的上下箭头 */
+    }
-        *::-moz-scrollbar-button {
+
-            display: none; /* 隐藏上下箭头 */
+    /* 修改滚动条滑块悬停时的颜色 */
-        }
+    ::-webkit-scrollbar-thumb:hover {
-        
+      background-color: #D8DFE8;
-        /* 滚动条的上下箭头：向上箭头 */
+    }
-        *::-moz-scrollbar-button:vertical:decrement {
+
-            display: none;
+    /* 修改滚动条滑块移动时的颜色 */
-        }
+    ::-webkit-scrollbar-thumb:active {
-        
+      background-color: #D8DFE8;
-        /* 滚动条的上下箭头：向下箭头 */
+    }
-        *::-moz-scrollbar-button:vertical:increment {
+
-            display: none;
+    /* 修改滚动条滑块的圆角 */
-        }
+    ::-webkit-scrollbar-thumb {
-        h1, h2, h3, h4, h5, h6 {
+      border-radius: 5px;
-            margin: 0;
+    }
-            all: revert; /* 将所有属性设置为初始值 */
+
-            /* 或者使用 all: revert; 恢复到浏览器默认样式，但该属性兼容性不如 initial */
+    /* 整体滚动条 */
-        }
+    * {
-    </style>
+      scrollbar-width: thin;
+      /* 滚动条宽度 */
+      scrollbar-color: #D8DBE6 transparent;
+      /* 滚动条颜色（滑块颜色 轨道颜色） */
+    }
+
+    /* 滚动条轨道 */
+    *::-moz-scrollbar-track {
+      background-color: #f0f0f0;
+    }
+
+    /* 滚动条滑块 */
+    *::-moz-scrollbar-thumb {
+      background-color: #D8DBE6;
+      border-radius: 5px;
+      /* 滑块的圆角 */
+    }
+
+    /* 滚动条的上下箭头 */
+    *::-moz-scrollbar-button {
+      display: none;
+      /* 隐藏上下箭头 */
+    }
+
+    /* 滚动条的上下箭头：向上箭头 */
+    *::-moz-scrollbar-button:vertical:decrement {
+      display: none;
+    }
+
+    /* 滚动条的上下箭头：向下箭头 */
+    *::-moz-scrollbar-button:vertical:increment {
+      display: none;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin: 0;
+      all: revert;
+      /* 将所有属性设置为初始值 */
+      /* 或者使用 all: revert; 恢复到浏览器默认样式，但该属性兼容性不如 initial */
+    }
+  </style>
 </head>
+
 <body>
-    	<!-- 顶部导航 -->
+  <!-- 顶部导航 -->
-	    {include file='include/top-header-nas'/}
+  {include file='include/top-header-nas'/}
-        <div class="narshelpdetailPc">
+  <div class="narshelpdetailPc">
-			<!-- top 搜索-->
+    <!-- top 搜索-->
-			<div class="narsssmain">
+    <div class="narsssmain">
-				<div class="ml">帮助中心 / 使用教程</div>
+      <div class="ml">帮助中心 / 使用教程</div>
-				<div class="nars-hlp-search">
+      <div class="nars-hlp-search">
-					<input placeholder="请输入搜索关键字，如安装赛博云空间、影视库" />
+        <input placeholder="请输入搜索关键字，如安装赛博云空间、影视库" />
-					<img src="__PUBLIC__/m_web/images/nas/help/nhlp-ssico.png" class="ssimg">
+        <img src="__PUBLIC__/m_web/images/nas/help/nhlp-ssico.png" class="ssimg">
-				</div>
+      </div>
-				<!-- 下拉搜索框 -->
+      <!-- 下拉搜索框 -->
-				<div class="dropdown" id="dropdown"></div>
+      <div class="dropdown" id="dropdown"></div>
-			</div>
+    </div>
-			<!-- 目录-文章详情-锚点定位--->
+    <!-- 目录-文章详情-锚点定位--->
-			<div class="nars-help-content">
+    <div class="nars-help-content">
-				<!--目录 -->
+      <!--目录 -->
-				<div class="nars-hlpdt-ml">
+      <div class="nars-hlpdt-ml">
-					<div class="nav-tree">
+        <div class="nav-tree">
-            {volist name="categorys" id="vo"}
+          {volist name="categorys" id="vo"}
-						<div class="category">
+          <div class="category">
-							<div class="category-title">
+            <div class="category-title">
-								<div class="arrow {if condition='$cid == $vo.id'}rotate{/if}"><img src="__PUBLIC__/m_web/images/nas/help/nars-jt.png" class="arrow {if condition='$cid == $vo.id'}rotate{/if}"/></div>
+              <div class="arrow {if condition='$cid == $vo.id'}rotate{/if}"><img src="__PUBLIC__/m_web/images/nas/help/nars-jt.png" class="arrow {if condition='$cid == $vo.id'}rotate{/if}" /></div>
-								<span>{$vo.name}</span>
+              <span>{$vo.name}</span>
-							</div>
+            </div>
-							<ul class="sub-list" {if condition="$cid == $vo.id"}style="display: block;"{/if}>
+            <ul class="sub-list" {if condition="$cid == $vo.id" }style="display: block;" {/if}>
-                {volist name="vo.articles" id="va"}
+              {volist name="vo.articles" id="va"}
-								<li>
+              <li>
-                  <a href="{:url('tops_nas/helper_detail', ['id' => $va.id])}" class="{if condition='$Request.param.id == $va.id'}active{/if}" style="{if condition='$key==0'}padding-top: 6px;{/if}">{$va.name}</a>
+                <a href="{:url('tops_nas/helper_detail', ['id' => $va.id])}" class="{if condition='$Request.param.id == $va.id'}active{/if}" {if condition='$key==0' }style="padding-top: 6px;"{/if}>{$va.name}</a>
-                </li>
+              </li>
-                {/volist}
+              {/volist}
-							</ul>
+            </ul>
-						</div>
+          </div>
-            {/volist}
+          {/volist}
-					</div>
+        </div>
-				</div>
+      </div>
-				<!--文章详情 -->
+      <!--文章详情 -->
-				<div class="nars-hlpdt-mm" id="rendered-content">
+      <div class="nars-hlpdt-mm" id="rendered-content">
-					<div>{$article.content|default=''}</div>
+        <div>{$article.content|default=''}</div>
-				</div>
+      </div>
-				<!--锚点定位 -->
+      <!--锚点定位 -->
-				<div class="nars-hlpdt-mr">
+      <div class="nars-hlpdt-mr">
-					<div id="title-list">
+        <div id="title-list">
-						<h2 class="tt">目录</h2>
+          <h2 class="tt">目录</h2>
-						<ul></ul>
+          <ul></ul>
-					</div>
+        </div>
-				</div>
+      </div>
-			</div>
+    </div>
-		</div>
+  </div>
-		{include file='include/bottom2023'/}
+  {include file='include/bottom2023'/}
-		<script>
+  <script>
-			$(document).ready(function() {
+    $(document).ready(function() {
-        $('.category-title').click(function() {
+      $('.category-title').click(function() {
-					$(this).next('.sub-list').slideToggle();
+        $(this).next('.sub-list').slideToggle();
-					$(this).find('.arrow').toggleClass('rotate');
+        $(this).find('.arrow').toggleClass('rotate');
-				});
+      });
 
-			  // 搜索
+      // 搜索
-				$(document).on('click', function(e) {
+      $(document).on('click', function(e) {
-					var target = $(e.target);
+        var target = $(e.target);
-					if (!target.closest('.nhlp-search').length) {
+        if (!target.closest('.nhlp-search').length) {
-						$('#dropdown').hide();
+          $('#dropdown').hide();
-					}
+        }
-				});
+      });
 
-        var timeout = null;
+      var timeout = null;
-        $('.nars-hlp-search input').on('focus input', function() {
+      $('.nars-hlp-search input').on('focus input', function() {
-          clearTimeout(timeout);
+        clearTimeout(timeout);
-          var _this = this;
+        var _this = this;
-          timeout = setTimeout(function () {
+        timeout = setTimeout(function() {
-            var keywords = $(_this).val();
+          var keywords = $(_this).val();
-            if (keywords == '') {
+          if (keywords == '') {
-              $('#dropdown').hide().html('');
+            $('#dropdown').hide().html('');
-              return;
+            return;
-            }
+          }
-            $.ajax({
+          $.ajax({
-              url: "{:url('tops_nas/helper_search')}",
+            url: "{:url('tops_nas/helper_search')}",
-              type: 'POST',
+            type: 'POST',
-              data: {keywords: keywords},
+            data: {
-              dataType: 'JSON',
+              keywords: keywords
-              success: function(r) {
+            },
-                var html = '';
+            dataType: 'JSON',
-                if (r.code == 0) {
+            success: function(r) {
-                  html = '<ul>'
+              var html = '';
-                  $.each(r.data, function(k, v) {
+              if (r.code == 0) {
-                    html += '<li><a href="{:url(\'tops_nas/helper_detail\')}?id=' + v.id + '">' + v.name + '</a></li>'
+                html = '<ul>'
-                  })
+                $.each(r.data, function(k, v) {
-                  html += '</ul>'
+                  html += '<li><a href="{:url(\'tops_nas/helper_detail\')}?id=' + v.id + '">' + v.name + '</a></li>'
-                }
+                })
-                $('#dropdown').show().html(html);
+                html += '</ul>'
               }
-            })
+              $('#dropdown').show().html(html);
-          }, 300);
+            }
-        })
+          })
-        // 内容
+        }, 300);
-				// 清空标题列表
+      })
-				$("#title-list ul").empty();
+      // 内容
-				// 提取 h1 标题
+      // 清空标题列表
-				var h1Titles = $("#rendered-content").find("h3");
+      $("#title-list ul").empty();
-				h1Titles.each(function(index) {
+      // 提取 h1 标题
-					var title = $(this);
+      var h1Titles = $("#rendered-content").find("h3");
-					var titleText = title.text();
+      h1Titles.each(function(index) {
-					var titleId = "title-" + index;
+        var title = $(this);
-					title.attr("id", titleId);
+        var titleText = title.text();
-					var listItem = $("<li>");
+        var titleId = "title-" + index;
-					var link = $("<a>", {
+        title.attr("id", titleId);
-						href: "#" + titleId,
+        var listItem = $("<li>");
-						text: titleText
+        var link = $("<a>", {
-					});
+          href: "#" + titleId,
-					listItem.append(link);
+          text: titleText
-					$("#title-list ul").append(listItem);
+        });
-				});
+        listItem.append(link);
-			});
+        $("#title-list ul").append(listItem);
-		</script>
+      });
-	</body>
+    });
+  </script>
+</body>
+
 </html>

app/mobile/controller/TopsNas.php

@@ -294,7 +294,7 @@ class TopsNas extends BaseController
         $model = \think\Db::table($sub_query . ' a');
         foreach ($categorys as $key => $val) {
             if ($key == 0) continue;
-            $model->union(function($query) use($val, $limit) {
+            $model->union(function($query) use($key, $val, $limit) {
                 $query->name('article')->field([
                     'id',
                     'cid',
@@ -308,6 +308,8 @@ class TopsNas extends BaseController
                 if (!empty($limit)) {
                     $query->limit($limit);
                 }
+                // 嵌套子查询，解决union没有limit时排序问题
+                $query->table($query->buildSql() . 'a' . $key);
             });
         }
         

app/mobile/view/tops_nas/beta.phtml

@@ -234,7 +234,7 @@
  						</div>
 						<div class="nztbzyj">
 							<a href="https://alidocs.dingtalk.com/notable/share/form/v013M0Oz5Xz1Xv8qzeE_vQkCkLg_cMm6AQO" target="_blank">意见反馈</a>
-							<a href="https://www.orico.com.cn/index/tops_nas/helper.html" target="_blank">帮助中心</a>
+							<a href="https://www.orico.com.cn/mobile/tops_nas/helper.html" target="_blank">帮助中心</a>
 						</div>
  					</div>
  				</div>

app/mobile/view/tops_nas/download.phtml

@@ -120,6 +120,12 @@
 				width: 50%;
 				height: 50%;
 			}
+			.narswljshow .nDtopIt2 .nDitImg .yy_name{
+ 		    font-size: 1.1rem;
+ 		    padding-bottom: 10px;
+ 		    padding-top:5px;
+ 		    font-weight: bold;
+ 		}
  		</style>
 	</head>
 

app/us/controller/BaseController.php

@@ -175,6 +175,47 @@ class BaseController extends Controller {
         return $tree;
     }
 
+    protected function buildTree($data, $pid = 0)
+    {
+        $tree = [];
+        foreach ($data as $val) {
+            if ($val['pid'] == $pid) {
+                $children = $this->buildTree($data, $val['id']);
+                if (!empty($children)) {
+                    $val['items'] = $children;
+                }
+                $tree[] = $val;
+            }
+        }
+
+        return $tree;
+    }
+
+    /**
+     * nasNavigation 获取并组装nas专题页的top导航和footer
+     */
+    protected function nasNavigation()
+    {
+        $navs = Loader::model('Navigation')->field([
+            'id',
+            'pid',
+            'name',
+            'url',
+            'value',
+            'data_type',
+            'is_new_window_open',
+        ])
+            ->where('stat', '=', 0)
+            ->where('nav_type', '=', 'tops_nas_header')
+            ->where('country_code', '=', $this->country_code)
+            ->order('sort')
+            ->select();
+
+        $navs_array = collection($navs)->toArray();
+        $header     = $this->NavDataDealWith($navs_array);
+        $this->assign('nav_header', $this->buildTree($header));
+    }
+
     //导航初始化
     private function navInit(){
         // 读取缓存数据

app/us/controller/TopsNas.php

@@ -1,16 +1,277 @@
 <?php
 namespace app\us\controller;
 
+use think\Loader;
 
 class TopsNas extends BaseController
 {
     public function _initialize()
     {
         parent::_initialize();
+        parent::nasNavigation();
     }
 
+    /**
+     * 获取特定banner
+     */
+    private function getBanners($typeids)
+    {
+        $banners = Loader::model("Banner")->alias('b')->field([
+                'b.id',
+                'b.typeid',
+                'bt.name'        => 'typename',
+                'bt.description' => 'typedesc',
+                'b.name',
+                'b.categoryid',
+                'b.url',
+                'b.picture',
+                'b.alt',
+                'b.style',
+                'b.description'  => 'desc',
+                'b.descolor',
+                'b.btncolor',
+                'b.videourl',
+            ])
+            ->join('banner_type bt', 'bt.stat= 0 and bt.id=b.typeid')
+            ->where('b.stat', '=', 0)
+            ->where('b.typeid', 'in', $typeids)
+            ->order(['sort' => 'asc', 'id' => 'asc'])
+            ->select();
+
+        $chucks = [];
+        foreach ($banners as $val) {
+            if (empty($chucks['typeid_' . $val['typeid']])) {
+                $chucks['typeid_' . $val['typeid']]['id']      = $val['typeid'];
+                $chucks['typeid_' . $val['typeid']]['name']    = $val['typename'];
+                $chucks['typeid_' . $val['typeid']]['desc']    = $val['typedesc'];
+                $chucks['typeid_' . $val['typeid']]['banners'] = [];
+            }
+
+            $link = $val['url'];
+            if (empty($val['url']) && !empty($val['categoryid'])) {
+                $link = url_rewrite('productsub', ['id' => $val['categoryid']]);
+            }
+            $chucks['typeid_' . $val['typeid']]['banners'][] = [
+                'id'         => $val['id'],
+                'name'       => $val['name'],
+                'link'       => $link,
+                'picture'    => $val['picture'],
+                'alt'        => $val['alt'],
+                'style'      => $val['style'],
+                'desc'       => $val['desc'],
+                'desc_color' => $val['descolor'],
+                'btn_color'  => $val['btncolor'],
+                'video_url'  => $val['videourl'],
+            ];
+        }
+
+        return $chucks;
+    }
+
+    /**
+     * getCategoryTree 获取特定文章分类树
+     */
+    private function getCategoryTree($cid)
+    {
+        // 设备
+        $category = Loader::model('ArticleCategory')
+            ->field([
+                'id',
+                'pid',
+                'name',
+                'picture'
+            ])
+            ->where('isshow', '=', 1)
+            ->where(function($query) use($cid) {
+                $query->where('id', '=', $cid)->WhereOr('pid', '=', $cid);
+            })
+            ->where('country_code', '=', $this->country_code)
+            ->order(['sort' => 'asc'])
+            ->select();
+
+        $category_array = collection($category)->toArray();
+        $category_tree  = $this->buildTree($category_array, $cid);
+        return $category_tree;
+    }
+
+    // 根据分类获取文章
+    private function getArticleByCategory($categorys, $limit = null)
+    {
+        if (!is_array($categorys)) {
+            throw new \Exception('请确认分类正确');
+        }
+        if (empty($categorys)) {
+            return [];
+        }
+
+        $sub_query = Loader::model('Article')
+            ->field([
+                'id',
+                'cid',
+                'name',
+                'sort'
+            ])
+            ->where('stat', '=', 0)
+            ->where('cid', '=', $categorys[0]['id'])
+            ->where('country_code', '=', $this->country_code)
+            ->order(['sort' => 'asc', 'id' => 'desc']);
+        if (!empty($limit)) {
+            $sub_query = $sub_query->limit($limit);
+        }
+        $sub_query = $sub_query->buildSql();
+
+        $model = \think\Db::table($sub_query . ' a');
+        foreach ($categorys as $key => $val) {
+            if ($key == 0) continue;
+            $model->union(function ($query) use ($key, $val, $limit) {
+                $query->name('article')->field([
+                        'id',
+                        'cid',
+                        'name',
+                        'sort'
+                    ])
+                    ->where('stat', '=', 0)
+                    ->where('cid', '=', $val['id'])
+                    ->where('country_code', '=', $this->country_code)
+                    ->order(['sort' => 'asc', 'id' => 'desc']);
+                if (!empty($limit)) {
+                    $query->limit($limit);
+                }
+                // 嵌套子查询，解决union没有limit时排序问题
+                $query->table($query->buildSql() . 'a' . $key);
+            });
+        }
+
+        $map = [];
+        $data = $data = $model->select();
+        foreach ($data as $key => $val) {
+            $map['cid_' . $val['cid']][] = $val;
+        }
+        return $map;
+    }
+
+    // 帮助中心
+    public function helper()
+    {
+        // 获取分类
+        $categorys = $this->getCategoryTree(77);
+        // 获取文章
+        $articles = $this->getArticleByCategory($categorys, 3);
+        // 组装数据
+        foreach ($categorys as $key => &$val) {
+            if (!isset($val['articles'])) {
+                $val['articles'] = [];
+            }
+            if (isset($articles['cid_' . $val['id']])) {
+                $items = $articles['cid_' . $val['id']];
+                foreach ($items as $k => $v) {
+                    $val['articles'][] = [
+                        'id' => $v['id'],
+                        'name' => $v['name']
+                    ];
+                }
+            }
+        }
+        unset($val);
+        $this->assign('categorys', $categorys);
+
+        // 获取banner
+        $banners = $this->getBanners(128);
+        if (!empty($banners)) {
+            $banners = $banners['typeid_128']['banners'];
+        }
+        $this->assign('banners', $banners);
+        $this->assign('banners_size', count($banners));
+
+        return $this->fetch();
+    }
+
+    // 搜索帮助文章
+    public function helper_search()
+    {
+        $base_category = 77;
+        $keywords = request()->param('keywords');
+        $articles = Loader::model('Article')
+            ->field([
+                'id',
+                'name',
+                'sort',
+            ])
+            ->where('stat', '=', 0)
+            ->where('country_code', '=', $this->country_code)
+            ->where('cid', 'in', function ($query) use ($base_category) {
+                $query->name('article_category')
+                    ->field(['id'])
+                    ->where('id', '=', $base_category)
+                    ->whereOr('pid', '=', $base_category);
+            })
+            ->where(function ($query) use ($keywords) {
+                if (!empty($keywords)) {
+                    $query->where('name', 'like', '%' . $keywords . '%');
+                }
+            })
+            ->order(['sort' => 'asc', 'id' => 'desc'])
+            ->select();
+
+        return json([
+            'code'    => 0,
+            'message' => '获取成功',
+            'data'    => $articles
+        ]);
+    }
+
+    // 帮助中心文章详细
+    public function helper_detail()
+    {
+        $id = request()->param('id');
+        $article = Loader::model('Article')->where('id', '=', $id)->find();
+
+        if (request()->isAjax()) {
+            return json([
+                'code'    => 0,
+                'message' => '获取成功',
+                'data'    => $article
+            ]);
+        } else {
+            // 获取分类
+            $categorys = $this->getCategoryTree(77);
+            // 获取文章
+            $articles = $this->getArticleByCategory($categorys);
+            // 组装数据
+            foreach ($categorys as $key => &$val) {
+                if (!isset($val['articles'])) {
+                    $val['articles'] = [];
+                }
+                if (isset($articles['cid_' . $val['id']])) {
+                    $items = $articles['cid_' . $val['id']];
+                    foreach ($items as $k => $v) {
+                        $val['articles'][] = [
+                            'id' => $v['id'],
+                            'name' => $v['name']
+                        ];
+                    }
+                }
+            }
+            unset($val);
+            $this->assign('categorys', $categorys);
+            $this->assign('article', $article);
+            $this->assign('cid', request()->param('cid', $article->cid));
+        }
+
+        return $this->fetch();
+    }
+
+    // 下载
     public function download()
     {
+        $downloads = [];
+        // 获取banner
+        $banners = $this->getBanners([129]);
+        if (!empty($banners)) {
+            $downloads = $banners['typeid_129']['banners'];
+        }
+        $this->assign('downloads', $downloads);
+
         return $this->fetch();
     }
 

app/us/view/include/bottom2023.phtml

@@ -0,0 +1,202 @@
+<section class="footer_layer">
+        <footer id="shopify-section-sections--19206105334060__footer" class="shopify-section shopify-section-group-footer-group shopify-section--footer">
+        	<style>
+        		@media screen and (min-width: 1000px) {
+                #shopify-section-sections--19206105334060__footer {--footer-block-list-gap: var(--spacing-10);--footer-block-list-justify-content: space-between;
+                }
+              }
+            </style>
+        	<div class="footer">
+        		 <a href="?ref=footer" class="Footer_anker_icon__arGut" rel="noopener noreferrer">
+    		        <img class="Footer_icon_orico" src="__PUBLIC__/weben/images/indeximg/logo11.png" style="height:50px;">
+    		    </a>
+        		<div class="container">
+        			<div class="footer__wrapper">
+        				<div class="footer__block-list empty:hidden">
+        					<?php if ($productCategory): ?>
+        					<div class="footer__block footer__block--menu">
+        						<p class="bold">Product</p>
+        						<ul class="v-stack gap-3" role="list">
+        						    <?php foreach ($productCategory as $k => $pc): if ($k > 8) break; ?>
+        							<li>
+        								<a href="__ORICOROOT__<?php echo url_rewrite('product', ['id' => $pc['id']]); ?>" class="inline-block link-faded break-all"><?php echo $pc['name']; ?></a>
+        							</li>
+        							<?php endforeach; ?>
+
+        						</ul>
+        					</div>
+        					<?php endif; ?>
+
+        					<?php if ($nav_footer): ?>
+        					<?php foreach ($nav_footer as $kf => $footer):  
+        					    if($kf < 3):
+        					?>
+        					<div class="footer__block footer__block--menu">
+        						<p class="bold"><?php echo $footer['name']; ?></p>
+        						<?php if ($footer['items']): ?>
+        						<ul class="v-stack gap-3" role="list">
+        						    <?php foreach ($footer['items'] as $ki => $itm): 
+                          			           if(strpos($itm['url'], 'http://') !== false || strpos($itm['url'], 'https://') !== false) {
+                        			               $link = $itm['url'];
+                        			           }
+                        			           else{
+                        			                $link = '__ORICOROOT__/'.$itm['url'];
+                        			               
+                        			           }         						    
+        						    ?>
+        							<li>
+
+                        				    <a href="<?php echo  $link; ?>"  <?php if($itm['is_new_window_open']){echo "target='_blank'";} ?>  class="inline-block link-faded break-all"><?php echo $itm['name']; ?></a>
+                        						    
+        							
+        							</li>
+        							<?php endforeach; ?>
+        						
+        						</ul>
+        						<?php endif; ?>
+        					</div>
+        					<?php endif; ?>
+        					<?php endforeach; ?>
+        					<?php endif; ?>
+
+                  
+        					<div class="footer__block footer__block--menu">
+        						<p class="bold">Contact</p>
+        						<ul class="v-stack gap-3" role="list">
+        							<li>
+        								<span class="inline-block link-faded break-all">Technical Support: <a href="mailto:<?php echo $website_email;?>" ><?php echo $website_email;?></a></span>
+        							</li>
+        							<li>
+        								<span class="inline-block link-faded break-all">Business: <a href="mailto:oversea-bu@orico.com.cn" >oversea-bu@orico.com.cn</a></span>
+        							</li>
+        							<li>
+        								<span class="inline-block link-faded break-all">ODM/OEM Service: odmmarket@orico.com.cn</span>
+        							</li>
+        							<li>
+        								<span class="inline-block link-faded break-all">Monday-Friday,9a.m.-6p.m.GMT+8</span>
+        							</li>
+        						</ul>
+        					</div>
+        					
+        				</div>
+        				<div class="footer__aside empty:hidden">
+        				  
+        					<div class="footer__aside-top">
+        						<ul class="social-media " role="list">
+        							<li>
+        								<a href="https://www.facebook.com/ORICOTECHNOLOGY/" class="tap-area" target="_blank" rel="noopener" aria-label="Follow on Facebook">
+        									<svg role="presentation" focusable="false" width="27" height="27" class="icon icon-facebook" viewBox="0 0 24 24">
+        										<path fill-rule="evenodd" clip-rule="evenodd" d="M10.183 21.85v-8.868H7.2V9.526h2.983V6.982a4.17 4.17 0 0 1 4.44-4.572 22.33 22.33 0 0 1 2.667.144v3.084h-1.83a1.44 1.44 0 0 0-1.713 1.68v2.208h3.423l-.447 3.456h-2.97v8.868h-3.57Z" fill="currentColor"></path>
+        									</svg>
+        								</a>
+        							</li>
+        							<li>
+        								<a href="https://twitter.com/ORICO_Official" class="tap-area" target="_blank" rel="noopener" aria-label="Follow on Twitter">
+        									<svg role="presentation" focusable="false" width="27" height="27" class="icon icon-twitter" viewBox="0 0 24 24">
+        										<path fill-rule="evenodd" clip-rule="evenodd" d="M15.414 4.96c1.506-.024 2.307.479 3.072 1.117.65-.05 1.495-.383 1.992-.614l.484-.242c-.285.702-.67 1.253-1.262 1.67-.131.093-.262.218-.426.277v.009c.843-.008 1.539-.357 2.2-.546v.01a5.934 5.934 0 0 1-1.318 1.384l-.607.442c.01.817-.014 1.598-.18 2.285-.971 3.995-3.544 6.707-7.616 7.868-1.462.418-3.825.59-5.5.208-.83-.188-1.581-.402-2.285-.684a9.54 9.54 0 0 1-1.1-.519l-.342-.19c.378.01.82.105 1.243.043.382-.056.757-.042 1.11-.113.879-.176 1.66-.41 2.332-.77.326-.175.82-.38 1.053-.632a3.59 3.59 0 0 1-1.157-.19c-1.258-.407-1.99-1.154-2.466-2.277.381.038 1.479.129 1.735-.07-.48-.023-.94-.278-1.27-.467-1.012-.58-1.837-1.551-1.83-3.047l.398.173c.254.098.512.15.815.208.128.024.384.093.531.043h-.019c-.195-.208-.514-.347-.71-.571-.65-.739-1.258-1.875-.873-3.229.097-.343.252-.646.417-.926l.019.009c.076.144.244.25.35.372.332.376.741.714 1.158 1.013 1.42 1.016 2.698 1.64 4.75 2.103.522.117 1.124.207 1.746.208-.175-.466-.119-1.22.019-1.67.346-1.134 1.097-1.952 2.2-2.39.263-.105.556-.18.863-.242l.474-.052Z" fill="currentColor"></path>
+        									</svg>
+        								</a>
+        							</li>
+        							<li>
+        								<a href="https://www.instagram.com/orico_technology/" class="tap-area" target="_blank" rel="noopener" aria-label="Follow on Instagram">
+        									<svg role="presentation" focusable="false" width="27" height="27" class="icon icon-instagram" viewBox="0 0 24 24">
+        										<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.4c-2.607 0-2.934.011-3.958.058-1.022.046-1.72.209-2.33.446a4.705 4.705 0 0 0-1.7 1.107 4.706 4.706 0 0 0-1.108 1.7c-.237.611-.4 1.31-.446 2.331C2.41 9.066 2.4 9.392 2.4 12c0 2.607.011 2.934.058 3.958.046 1.022.209 1.72.446 2.33a4.706 4.706 0 0 0 1.107 1.7c.534.535 1.07.863 1.7 1.108.611.237 1.309.4 2.33.446 1.025.047 1.352.058 3.959.058s2.934-.011 3.958-.058c1.022-.046 1.72-.209 2.33-.446a4.706 4.706 0 0 0 1.7-1.107 4.706 4.706 0 0 0 1.108-1.7c.237-.611.4-1.31.446-2.33.047-1.025.058-1.352.058-3.959s-.011-2.934-.058-3.958c-.047-1.022-.209-1.72-.446-2.33a4.706 4.706 0 0 0-1.107-1.7 4.705 4.705 0 0 0-1.7-1.108c-.611-.237-1.31-.4-2.331-.446C14.934 2.41 14.608 2.4 12 2.4Zm0 1.73c2.563 0 2.867.01 3.88.056.935.042 1.443.199 1.782.33.448.174.768.382 1.104.718.336.336.544.656.718 1.104.131.338.287.847.33 1.783.046 1.012.056 1.316.056 3.879 0 2.563-.01 2.867-.056 3.88-.043.935-.199 1.444-.33 1.782a2.974 2.974 0 0 1-.719 1.104 2.974 2.974 0 0 1-1.103.718c-.339.131-.847.288-1.783.33-1.012.046-1.316.056-3.88.056-2.563 0-2.866-.01-3.878-.056-.936-.042-1.445-.199-1.783-.33a2.974 2.974 0 0 1-1.104-.718 2.974 2.974 0 0 1-.718-1.104c-.131-.338-.288-.847-.33-1.783-.047-1.012-.056-1.316-.056-3.879 0-2.563.01-2.867.056-3.88.042-.935.199-1.443.33-1.782.174-.448.382-.768.718-1.104a2.974 2.974 0 0 1 1.104-.718c.338-.131.847-.288 1.783-.33C9.133 4.14 9.437 4.13 12 4.13Zm0 11.07a3.2 3.2 0 1 1 0-6.4 3.2 3.2 0 0 1 0 6.4Zm0-8.13a4.93 4.93 0 1 0 0 9.86 4.93 4.93 0 0 0 0-9.86Zm6.276-.194a1.152 1.152 0 1 1-2.304 0 1.152 1.152 0 0 1 2.304 0Z" fill="currentColor"></path>
+        									</svg>
+        								</a>
+        							</li>
+        							<li>
+        								<a href="https://www.youtube.com/@OricoTechs" class="tap-area" target="_blank" rel="noopener" aria-label="Follow on YouTube">
+        									<svg role="presentation" focusable="false" width="27" height="27" class="icon icon-youtube" viewBox="0 0 24 24">
+        										<path fill-rule="evenodd" clip-rule="evenodd" d="M20.44 5.243c.929.244 1.66.963 1.909 1.876.451 1.654.451 5.106.451 5.106s0 3.452-.451 5.106a2.681 2.681 0 0 1-1.91 1.876c-1.684.443-8.439.443-8.439.443s-6.754 0-8.439-.443a2.682 2.682 0 0 1-1.91-1.876c-.45-1.654-.45-5.106-.45-5.106s0-3.452.45-5.106a2.681 2.681 0 0 1 1.91-1.876c1.685-.443 8.44-.443 8.44-.443s6.754 0 8.438.443Zm-5.004 6.982L9.792 15.36V9.091l5.646 3.134Z" fill="currentColor"></path>
+        									</svg>
+        								</a>
+        							</li>
+        						</ul>
+        					</div>
+        					<div class="copyright">Copyright©2018-2028 ORICO Technologies Co.,Ltd</div>
+        				</div>
+        			</div>
+        		</div>
+        	</div>
+        
+        </footer>
+</section>
+
+<script>
+
+    var RequestUrl = {
+        track: "/api/TrackProducer/records",                 //行为跟踪
+        exit_page: '/api/TrackProducer/etime',    //离开时间
+    };
+    
+    var stime = new Date();
+    var uuid = "<?php echo $uuid;?>"; 
+    
+    var userAgent = navigator.userAgent;
+    var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+    var isTablet = /iPad|Android/i.test(userAgent);
+    var isDesktop = !isMobile && !isTablet;
+    var isDerive = "";
+    var forum = "<?php echo $controller;?>";    
+        
+    if (isMobile) {
+            // 手机设备逻辑
+            isDerive = "H5";
+    } else if (isTablet) {
+            // 平板设备逻辑
+            isDerive = "Tablet";
+    } else {
+            // 桌面设备逻辑
+            isDerive = "PC";
+    }    
+        
+    //页面跳转之前执行事情 onbeforeunload, 页面隐藏时候执行事情 onpagehide
+    window.onbeforeunload = function() {
+        var etime = new Date();
+        var ms = (etime.getTime() / 1000) - (stime.getTime() / 1000);
+        var img = new Image();
+        img.src = RequestUrl.exit_page + '?uuid=' + uuid + '&dt=' + ms+ '&forum=' + forum;
+    }    
+
+
+    function handleGlobalEvent(event) {
+        const eventType = event.type; // 获取事件类型，例如 "click", "copy" 等
+        const target = event.target; // 获取触发事件的元素
+        let actionType = "";
+
+        const elementType = target.tagName; // 获取元素的标签名，例如 "BUTTON", "DIV" 等
+        const elementId = target.id; // 获取元素的 ID 属性
+        const elementText = target.innerText; // 获取元素的文本内容
+
+        // 执行埋点操作，例如发送数据到埋点服务
+        trackEvent(actionType, eventType, target, elementText);
+    }
+
+    function trackEvent(actionType, eventType, target,elementText) {
+        // 在这里实现埋点逻辑，例如发送请求到服务器，或者调用埋点代码
+        //console.log(`埋点：动作类型 - ` + actionType + `，事件类型 - ` + eventType);
+        //console.log("触发元素:", target);
+        $.ajax({
+            type: "POST",
+            url: RequestUrl.track,
+            data: {
+                //ip: getip(),
+                'url': window.location.href,
+                'refer': document.referrer,
+                'user_agent': userAgent,
+                'content': elementText,
+                'drive': isDerive,
+                'forum': forum,
+                'event_type': eventType
+            },
+            dataType: "json",
+            success: function (data, status, xhr) {
+
+            }
+        });
+    }
+
+    document.addEventListener("click", handleGlobalEvent);
+    document.addEventListener("copy", handleGlobalEvent);
+    
+</script>

app/us/view/include/top-header-nas.phtml

@@ -2,33 +2,15 @@
     <div class="headcenter">
         <img
             class="logico"
-            style="cursor:pointer;"
+            style="cursor:pointer;width: 13rem;height: 2.8rem;"
-            src="__PUBLIC__/web/images/logo_nas.png"
+            src="__PUBLIC__/web/images/newlogo_nas.png" />
-            onclick="location.href='{:url(\'TopsNas/index\')}'"
-        />
         <nav class="headnav">
-            <!-- {volist name="nav_header" id="vo"}
-                <div class="navitem">
-                    <a href="{$vo.url}" {if condition="$vo.is_new_window_open"}target="_blank"{/if}>{$vo.name}</a>
-                    {if condition="!empty($vo.items)"}
-                    <img src="/frontend/weben/images/indeximg/black-down.png" class="downimg" alt="">
-                    <ul class="children">
-                        {volist name="vo.items" id="it"}
-                        <li>
-                            <a href="{$it.url}" {if condition="$it.is_new_window_open"}target="_blank"{/if}>{$it.name}</a>
-                        </li>
-                        {/volist}
-                    </ul>
-                    {/if}
-                </div>
-            {/volist} -->
             {volist name="nav_header" id="vo"}
-                <a
+            <a
-                    class="navitem"
+                class="navitem"
-                    href="{$vo.url}" {if condition="$vo.is_new_window_open"}target="_blank"{/if}
+                href="{$vo.url}" {if condition="$vo.is_new_window_open" }target="_blank" {/if}>
-                >
+                {$vo.name}
-                    {$vo.name}
+            </a>
-                </a>
             {/volist}
         </nav>
     </div>
@@ -36,8 +18,9 @@
 <script type="text/javascript">
     document.querySelectorAll('.navitem').forEach(function(it) {
         it.classList.remove('hover')
-        if (location.pathname.endsWith(it.getAttribute('href'))) {
+        var attr = it.getAttribute('href')
+        if (location.href == attr || location.pathname.endsWith(attr)) {
             it.classList.add('hover')
         }
     })
-</script>
+</script>

app/us/view/tops_nas/download.phtml

@@ -1,36 +1,167 @@
  <!DOCTYPE html>
  <html>
- 	<head>
- 		<meta charset="utf-8" />
- 		<meta name="viewport" content="width=device-width, initial-scale=1">
- 		<title>元创官网</title>
- 		<link rel="stylesheet" href="__PUBLIC__/web/css/swiper-3.4.2.min.css" />
- 		<link rel="stylesheet" type="text/css" href="__PUBLIC__/web/css/nas.css" />
- 		{include file='include/head-nas'/}
-    </head>
- 	<body>
- 		<div class="narsPage">
- 			<!--顶部导航-->
- 			<!--{#include file='include/top-header-nas'/}-->
- 			<!--banner -->
- 			<div class="narsIndex-banner">
- 				<div class="swiper-container mySwiper">
- 					<div class="swiper-wrapper">
-						
-						<div class="swiper-slide">
- 							<!-- banner内容-->
- 							<img src="/uploads/nas/pc-beta.png" alt="" class="narsbanner-img" />
- 						</div>
-					
- 					<!-- Add Pagination -->
- 					<div class="swiper-pagination"></div>
- 					<!-- Add Arrows -->
- 				<!--	<div class="swiper-button-next swiper-button-white"></div>
- 					<div class="swiper-button-prev swiper-button-white"></div>-->
- 				</div>
- 			</div>
- 		</div>
 
- 	{include file='include/bottom'/}
+ <head>
- 	</body>
+ 	<meta charset="utf-8" />
- </html>
+ 	<meta name="viewport" content="width=device-width, initial-scale=1">
+ 	<title>元创官网</title>
+ 	<link rel="stylesheet" href="__PUBLIC__/web/css/swiper-3.4.2.min.css" />
+ 	<link rel="stylesheet" type="text/css" href="__PUBLIC__/web/css/nas.css" />
+ 	{include file='include/head-nas'/}
+ 	<style type="text/css">
+    	.narsPage-head .headcenter {
+            width: 75rem !important;
+        }
+ 		.narsDowloadPc {
+ 			width: 100%;
+ 			height: 100vh;
+ 			background: #F5F5F5;
+ 			position: relative;
+ 			display: flex;
+ 			flex-direction: column;
+ 			overflow-y: auto;
+ 		}
+
+ 		.narsDowloadPc .narsDtabs {
+ 			display: flex;
+ 			flex-direction: row;
+ 			justify-content: center;
+ 			margin-top: 70px;
+ 			margin-bottom: 30px;
+ 		}
+
+ 		.narsDowloadPc .narsDtabs .narsDtabIt {
+ 			color: #001717;
+ 			font-size: 24px;
+ 			height: 52px;
+ 			line-height: 52px;
+ 			width: 300px;
+ 			background: #fff;
+ 			text-align: center;
+ 			border-radius: 28px;
+ 			cursor: pointer;
+ 		}
+
+ 		.narsDowloadPc .narsDtabs .narsDtabIt:first-child {
+ 			margin-right: 60px;
+ 		}
+
+ 		.narsDowloadPc .narsDtabs .narsDtabIt_active {
+ 			color: #fff;
+ 			background: #004CFA;
+ 		}
+
+ 		.narsDowloadPc .narsDmainConten {
+ 			width: 1200px;
+ 			height: 409px;
+ 			background: #fff;
+ 			margin-bottom: 10px;
+ 		}
+
+ 		.narsDowloadPc .nDtopCtMian {
+ 			width: 1200px;
+ 			margin: 0 auto;
+ 			height: auto;
+ 		}
+
+ 		.narsDowloadPc .nDtopCtMian .nDtopIt {
+ 			width: 1200px;
+ 			height: 409px;
+ 			background: #fff;
+ 			margin-bottom: 10px;
+ 		}
+
+ 		.narsDowloadPc .nDtopCtMian .nDtopIt .tpimg {
+ 			width: 100%;
+ 			height: 100%;
+ 		}
+
+ 		.narsDowloadPc .nDtopCtMian .nDtopIt .tpimg {
+ 			width: 100%;
+ 			height: 100%;
+ 		}
+
+ 		.narsDowloadPc .nDtopCtMian .nDtopIt2 {
+ 			width: 1200px;
+ 			height: 230px;
+ 			display: flex;
+ 			flex-direction: row;
+ 			justify-content: space-between;
+ 		}
+
+ 		.narsDowloadPc .nDtopCtMian .nDtopIt2 .nDitImg {
+ 			width: 231px;
+ 			height: 230px;
+ 			background: #fff;
+ 			display: flex;
+ 			justify-content: center;
+ 			align-items: center;
+ 			cursor: pointer;
+ 		}
+
+ 		.narsDowloadPc .nDtopCtMian .nDtopIt2 .nDitImg img {
+ 			width: 70px;
+ 			height: 70px;
+ 		}
+
+ 		.narswljshow .nDtopIt2 .nDitImg {
+ 			width: 291px !important;
+ 			display: flex;
+ 			flex-direction: column;
+ 		}
+ 		.narswljshow .nDtopIt2 .nDitImg .dwbt {
+ 		    padding: 6px 38px;
+            background: #A1A7BF;
+            border-radius: 20px;
+            color: #fff;
+            margin-top: 10px;
+            font-size: 16px;
+            cursor: pointer;
+ 		}
+ 		.narswljshow .nDtopIt2 .nDitImg .dwbtactive {
+            background: #004CFA;
+ 		}
+ 		.narswljshow .nDtopIt2 .nDitImg .yy_name{
+ 		    font-size: 18px;
+ 		    padding-bottom: 10px;
+ 		    padding-top:5px;
+ 		    font-weight: bold;
+ 		}
+ 	</style>
+ </head>
+
+ <body>
+ 	<div class="narsDowloadPc">
+ 		<!--顶部导航-->
+ 		{include file='include/top-header-nas'/}
+ 		<div class="narsDtabs"></div>
+ 		<!-- 微链接-->
+ 		<div class="nDtopCtMian narswljshow">
+ 			<div class="nDtopIt">
+ 				<img src="/frontend/web/images/download_focus_pc_us.png" class="tpimg" />
+ 			</div>
+ 			{if condition="!empty($downloads)"}
+ 			<div class="nDtopIt2">
+ 				{volist name="downloads" id="vo"}
+ 				<a href="{$vo.link}" download="{$vo.desc}">
+ 					<div class="nDitImg"><img src="{$vo.picture}" />
+ 					    <div class="yy_name">{$vo.name}</div>
+ 					    <div class="dwbt">Download</div>
+ 					</div>
+ 				</a>
+ 				{/volist}
+ 			</div>
+ 			{/if}
+ 		</div>
+ 	</div>
+ 	{include file='include/bottom2023'/}
+ </body>
+ <script>
+   $(document).ready(function() {
+        $('.dwbt').click(function() {
+            $('.dwbt').removeClass('dwbtactive');
+            $(this).addClass('dwbtactive');
+        });
+    });
+ </script>
+ </html>

app/us/view/tops_nas/helper.phtml

@@ -0,0 +1,555 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>帮助中心</title>
+    {include file='include/head-nas' /}
+    <style>
+        .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 .searchimghelp {
+            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: 32.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: 49.4%;
+        }
+
+        .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%;*/
+            flex: 1;
+        }
+
+        .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;
+        }
+
+        .narshelpCenterPc .dropdown ul li a {
+            display: block;
+        }
+
+        /* 修改垂直滚动条 */
+        ::-webkit-scrollbar {
+            width: 6px;
+            /* 修改宽度 */
+        }
+
+        /* 修改滚动条轨道背景色 */
+        ::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+
+        /* 修改滚动条滑块颜色 */
+        ::-webkit-scrollbar-thumb {
+            background-color: #ccc;
+        }
+
+        /* 修改滚动条滑块悬停时的颜色 */
+        ::-webkit-scrollbar-thumb:hover {
+            background-color: #D8DFE8;
+        }
+
+        /* 修改滚动条滑块移动时的颜色 */
+        ::-webkit-scrollbar-thumb:active {
+            background-color: #D8DFE8;
+        }
+
+        /* 修改滚动条滑块的圆角 */
+        ::-webkit-scrollbar-thumb {
+            border-radius: 5px;
+        }
+
+        /* 整体滚动条 */
+        * {
+            scrollbar-width: thin;
+            /* 滚动条宽度 */
+            scrollbar-color: #D8DBE6 transparent;
+            /* 滚动条颜色（滑块颜色 轨道颜色） */
+        }
+
+        /* 滚动条轨道 */
+        *::-moz-scrollbar-track {
+            background-color: #f0f0f0;
+        }
+
+        /* 滚动条滑块 */
+        *::-moz-scrollbar-thumb {
+            background-color: #D8DBE6;
+            border-radius: 5px;
+            /* 滑块的圆角 */
+        }
+
+        /* 滚动条的上下箭头 */
+        *::-moz-scrollbar-button {
+            display: none;
+            /* 隐藏上下箭头 */
+        }
+
+        /* 滚动条的上下箭头：向上箭头 */
+        *::-moz-scrollbar-button:vertical:decrement {
+            display: none;
+        }
+
+        /* 滚动条的上下箭头：向下箭头 */
+        *::-moz-scrollbar-button:vertical:increment {
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="narshelpCenterPc">
+        <!-- 顶部导航 -->
+        {include file='include/top-header-nas'/}
+        <!-- banner-搜索-->
+        <div class="pagetopbg">
+            <img src="__PUBLIC__/m_web/images/nas/help/banner.jpg" class="hpbgimg" />
+            <div class='nhlp-search'>
+                <input class="nhlp-ipt" id="search-input" placeholder="What are you looking for?" />
+                <img src="__PUBLIC__/m_web/images/nas/help/nars-help-search.png" class="searchimghelp" />
+            </div>
+            <!-- 下拉搜索框 -->
+            <div class="dropdown" id="dropdown"></div>
+        </div>
+        <!-- 使用教程-->
+        <div class="nhlppart1">
+            <h1 class="helph1">User's Guide</h1>
+            <div class="nhlp-row">
+                {if condition="!empty($categorys)"}
+                {volist name="categorys" id="vo"}
+                <div class="nhlpit {if condition='$key==6 || $key==7'}nhlpit-w{/if}">
+                    <div class="nhlptl">
+                        <img src="{$vo.picture}" class="bhlpicoimg" />{$vo.name}
+                    </div>
+                    <div class="nhlp-tx-list">
+                        {volist name="vo.articles" id="va"}
+                        <a class="txrow" href="{:url('tops_nas/helper_detail', ['id'=>$va.id])}">
+                            <div class="nhlp-point"></div>
+                            <span class="nhlpsp">{$va.name}</span>
+                            <span class="narhelpgoimg">
+                                <img src="__PUBLIC__/m_web/images/nas/help/nars-jt.png" />
+                            </span>
+                        </a>
+                        {/volist}
+                        {if condition="count($vo.articles) >= 3"}
+                        <a class="ckgdbt" href="{:url('tops_nas/helper_detail', ['cid'=>$vo.id, 'id'=>isset($vo.articles[0])?$vo.articles[0]['id']:0])}">Click to view more
+                            <span class="narhelpgoimg">
+                                <img src="__PUBLIC__/m_web/images/nas/help/nars-jt.png" />
+                            </span>
+                        </a>
+                        {/if}
+                    </div>
+                </div>
+                {/volist}
+                {/if}
+            </div>
+        </div>
+        <!-- 联系我们-->
+        <div class="nhlp-lxwm">
+            <h1 class=" helph1 lxwmtitle">Contact US</h1>
+            <div class="nhlp-row">
+                {if condition="$banners_size > 0"}
+                {notempty name="banners[0]['link']"}
+                <a href="{$banners[0]['link']}" class="nhlplxwmit nhlplxwmit-w1" target="_blank">
+                {else/}
+                <a href="javascript:void(0);" class="nhlplxwmit nhlplxwmit-w1" target="_blank">
+                {/notempty}
+                    <img src="__PUBLIC__/web/images/nas/help/nas_helper_facebook.png" class="lximg" />
+                    {if condition="!empty($banners[0]['picture']) && $banners[0]['picture'] != '/uploads/nopic.jpg'"}
+                    <img src="{$banners[0]['picture']}" class="lxewmimg">
+                    {/if}
+                    <span class="t1">{$banners[0]['name']}</span>
+                    <span class="t2">{$banners[0]['desc']}</span>
+                </a>
+                {/if}
+                {if condition="$banners_size > 1"}
+                {notempty name="banners[1]['link']"}
+                <a href="{$banners[1]['link']}" class="nhlplxwmit nhlplxwmit-w1" target="_blank">
+                {else/}
+                <a href="javascript:void(0);" class="nhlplxwmit nhlplxwmit-w1" target="_blank">
+                {/notempty}
+                    <img src="__PUBLIC__/web/images/nas/help/nas_helper_instagram.png" class="lximg" />
+                    {if condition="!empty($banners[1]['picture']) && $banners[1]['picture'] != '/uploads/nopic.jpg'"}
+                    <img src="{$banners[1]['picture']}" class="lxewmimg">
+                    {/if}
+                    <span class="t1">{$banners[1]['name']}</span>
+                    <span class="t2">{$banners[1]['desc']}</span>
+                </a>
+                {/if}
+                {if condition="$banners_size > 2"}
+                {notempty name="banners[2]['link']"}
+                <a href="{$banners[2]['link']}" class="nhlplxwmit nhlplxwmit-w1" style="margin-right: 0;" target="_blank">
+                {else/}
+                <a href="javascript:void(0);" class="nhlplxwmit nhlplxwmit-w1" style="margin-right: 0;" target="_blank">
+                {/notempty}
+                    <img src="__PUBLIC__/web/images/nas/help/nas_helper_youtobe.png" class="lximg" />
+                    {if condition="!empty($banners[2]['picture']) && $banners[2]['picture'] != '/uploads/nopic.jpg'"}
+                    <img src="{$banners[2]['picture']}" class="lxewmimg">
+                    {/if}
+                    <span class="t1">{$banners[2]['name']}</span>
+                    <span class="t2">{$banners[2]['desc']}</span>
+                </a>
+                {/if}
+                {if condition="$banners_size > 3"}
+                {notempty name="banners[3]['link']"}
+                <a href="{$banners[3]['link']}" class="nhlplxwmit nhlplxwmit-w2" target="_blank">
+                {else/}
+                <a href="javascript:void(0);" class="nhlplxwmit nhlplxwmit-w2" target="_blank">
+                {/notempty}
+                    <img src="__PUBLIC__/web/images/nas/help/nas_helper_twitter.png" class="lximg" />
+                    {if condition="!empty($banners[3]['picture']) && $banners[3]['picture'] != '/uploads/nopic.jpg'"}
+                    <img src="{$banners[3]['picture']}" class="lxewmimg">
+                    {/if}
+                    <span class="t1">{$banners[3]['name']}</span>
+                    <span class="t2">{$banners[3]['desc']}</span>
+                </a>
+                {/if}
+                {if condition="$banners_size > 4"}
+                {notempty name="banners[4]['link']"}
+                <a href="{$banners[4]['link']}" class="nhlplxwmit nhlplxwmit-w2" style="margin-right: 0;" target="_blank">
+                {else/}
+                <a href="javascript:void(0);" class="nhlplxwmit nhlplxwmit-w2" style="margin-right: 0;" target="_blank">
+                {/notempty}
+                    <img src="__PUBLIC__/web/images/nas/help/nas_helper_tiktok.png" class="lximg" />
+                    {if condition="!empty($banners[4]['picture']) && $banners[4]['picture'] != '/uploads/nopic.jpg'"}
+                    <img src="{$banners[4]['picture']}" class="lxewmimg">
+                    {/if}
+                    <span class="t1">{$banners[4]['name']}</span>
+                    <span class="t2">{$banners[4]['desc']}</span>
+                </a>
+                {/if}
+            </div>
+        </div>
+    </div>
+    {include file='include/bottom2023'/}
+</body>
+<script>
+    $(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('tops_nas/helper_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(\'tops_nas/helper_detail\')}?id=' + v.id + '">' + v.name + '</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').hover(function() {
+            if ($(this).find('.lxewmimg').length == 0) {
+                return false;
+            }
+            // 当鼠标移入时，显示.lxewmimg 并隐藏.lximg
+            $(this).find('.lxewmimg').show();
+            $(this).find('.lximg').hide();
+        }, function() {
+            if ($(this).find('.lxewmimg').length == 0) {
+                return false;
+            }
+            // 当鼠标移出时，隐藏.lxewmimg 并显示.lximg
+            $(this).find('.lxewmimg').hide();
+            $(this).find('.lximg').show();
+        });
+    });
+</script>
+
+</html>

app/us/view/tops_nas/helper_detail.phtml

@@ -0,0 +1,452 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>帮助中心</title>
+  {include file='include/head-nas' /}
+  <style>
+    [class*=' icon-'] {
+      color: #000;
+    }
+
+    .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 {
+      max-width: 100%;
+    }
+
+    /*      .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;
+    }
+
+    /* 修改垂直滚动条 */
+    ::-webkit-scrollbar {
+      width: 6px;
+      /* 修改宽度 */
+    }
+
+    /* 修改滚动条轨道背景色 */
+    ::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    /* 修改滚动条滑块颜色 */
+    ::-webkit-scrollbar-thumb {
+      background-color: #ccc;
+    }
+
+    /* 修改滚动条滑块悬停时的颜色 */
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: #D8DFE8;
+    }
+
+    /* 修改滚动条滑块移动时的颜色 */
+    ::-webkit-scrollbar-thumb:active {
+      background-color: #D8DFE8;
+    }
+
+    /* 修改滚动条滑块的圆角 */
+    ::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+    }
+
+    /* 整体滚动条 */
+    * {
+      scrollbar-width: thin;
+      /* 滚动条宽度 */
+      scrollbar-color: #D8DBE6 transparent;
+      /* 滚动条颜色（滑块颜色 轨道颜色） */
+    }
+
+    /* 滚动条轨道 */
+    *::-moz-scrollbar-track {
+      background-color: #f0f0f0;
+    }
+
+    /* 滚动条滑块 */
+    *::-moz-scrollbar-thumb {
+      background-color: #D8DBE6;
+      border-radius: 5px;
+      /* 滑块的圆角 */
+    }
+
+    /* 滚动条的上下箭头 */
+    *::-moz-scrollbar-button {
+      display: none;
+      /* 隐藏上下箭头 */
+    }
+
+    /* 滚动条的上下箭头：向上箭头 */
+    *::-moz-scrollbar-button:vertical:decrement {
+      display: none;
+    }
+
+    /* 滚动条的上下箭头：向下箭头 */
+    *::-moz-scrollbar-button:vertical:increment {
+      display: none;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin: 0;
+      all: revert;
+      /* 将所有属性设置为初始值 */
+      /* 或者使用 all: revert; 恢复到浏览器默认样式，但该属性兼容性不如 initial */
+    }
+  </style>
+</head>
+
+<body>
+  <!-- 顶部导航 -->
+  {include file='include/top-header-nas'/}
+  <div class="narshelpdetailPc">
+    <!-- top 搜索-->
+    <div class="narsssmain">
+      <div class="ml">Quick Start Guide</div>
+      <div class="nars-hlp-search">
+        <input placeholder="What are you looking for?" />
+        <img src="__PUBLIC__/m_web/images/nas/help/nhlp-ssico.png" class="ssimg">
+      </div>
+      <!-- 下拉搜索框 -->
+      <div class="dropdown" id="dropdown"></div>
+    </div>
+    <!-- 目录-文章详情-锚点定位--->
+    <div class="nars-help-content">
+      <!--目录 -->
+      <div class="nars-hlpdt-ml">
+        <div class="nav-tree">
+          {volist name="categorys" id="vo"}
+          <div class="category">
+            <div class="category-title">
+              <div class="arrow {if condition='$cid == $vo.id'}rotate{/if}"><img src="__PUBLIC__/m_web/images/nas/help/nars-jt.png" class="arrow {if condition='$cid == $vo.id'}rotate{/if}" /></div>
+              <span>{$vo.name}</span>
+            </div>
+            <ul class="sub-list" {if condition="$cid == $vo.id" }style="display: block;" {/if}>
+              {volist name="vo.articles" id="va"}
+              <li>
+                <a href="{:url('tops_nas/helper_detail', ['id' => $va.id])}" class="{if condition='$Request.param.id == $va.id'}active{/if}" {if condition='$key==0' }style="padding-top: 6px;" {/if}>{$va.name}</a>
+              </li>
+              {/volist}
+            </ul>
+          </div>
+          {/volist}
+        </div>
+      </div>
+      <!--文章详情 -->
+      <div class="nars-hlpdt-mm" id="rendered-content">
+        <div>{$article.content|default=''}</div>
+      </div>
+      <!--锚点定位 -->
+      <div class="nars-hlpdt-mr">
+        <div id="title-list">
+          <h2 class="tt">Content</h2>
+          <ul></ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  {include file='include/bottom2023'/}
+  <script>
+    $(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('tops_nas/helper_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(\'tops_nas/helper_detail\')}?id=' + v.id + '">' + v.name + '</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>
+</body>
+
+</html>

app/usmobile/controller/BaseController.php

@@ -15,6 +15,9 @@ class BaseController extends Controller {
     //当前用户
     protected $customer_id = 0;
 
+    // 当前国家编码
+    protected $country_code = 'US';
+
     public function __construct() {
         parent::__construct();
     }
@@ -71,6 +74,47 @@ class BaseController extends Controller {
         $this->view->assign('allCategoryList', $this->categoryList);
     }
 
+    protected function buildTree($data, $pid = 0)
+    {
+        $tree = [];
+        foreach ($data as $val) {
+            if ($val['pid'] == $pid) {
+                $children = $this->buildTree($data, $val['id']);
+                if (!empty($children)) {
+                    $val['items'] = $children;
+                }
+                $tree[] = $val;
+            }
+        }
+
+        return $tree;
+    }
+
+    /**
+     * nasNavigation 获取并组装nas专题页的top导航和footer
+     */
+    protected function nasNavigation()
+    {
+        $navs = Loader::model('Navigation')->field([
+            'id',
+            'pid',
+            'name',
+            'url',
+            'value',
+            'data_type',
+            'is_new_window_open',
+        ])
+            ->where('stat', '=', 0)
+            ->where('nav_type', '=', 'tops_nas_header')
+            ->where('country_code', '=', $this->country_code)
+            ->order('sort')
+            ->select();
+
+        $navs_array = collection($navs)->toArray();
+        $header     = $this->NavDataDealWith($navs_array);
+        $this->assign('nav_header', $this->buildTree($header));
+    }
+
     //导航初始化
     private function navInit(){
         // 读取缓存数据

app/usmobile/controller/TopsNas.php

@@ -1,16 +1,266 @@
 <?php
 namespace app\usmobile\controller;
 
+use think\Loader;
 
 class TopsNas extends BaseController
 {
     public function _initialize()
     {
         parent::_initialize();
+        parent::nasNavigation();
+    }
+
+    // 获取指定banner
+    private function getBanners($typeids)
+    {
+        $banners = Loader::model("Banner")->alias('b')->field([
+                'b.id',
+                'b.typeid',
+                'bt.name'        => 'typename',
+                'bt.description' => 'typedesc',
+                'b.name',
+                'b.categoryid',
+                'b.url',
+                'b.picture',
+                'b.alt',
+                'b.style',
+                'b.description'  => 'desc',
+                'b.descolor',
+                'b.btncolor',
+                'b.videourl',
+            ])
+            ->join('banner_type bt', 'bt.stat= 0 and bt.id=b.typeid')
+            ->where('b.stat', '=', 0)
+            ->where('b.typeid', 'in', $typeids)
+            ->order(['sort' => 'asc', 'id' => 'asc'])
+            ->select();
+
+        $chucks = [];
+        foreach ($banners as $val) {
+            if (empty($chucks['typeid_' . $val['typeid']])) {
+                $chucks['typeid_' . $val['typeid']]['id']      = $val['typeid'];
+                $chucks['typeid_' . $val['typeid']]['name']    = $val['typename'];
+                $chucks['typeid_' . $val['typeid']]['desc']    = $val['typedesc'];
+                $chucks['typeid_' . $val['typeid']]['banners'] = [];
+            }
+
+            $link = $val['url'];
+            if (empty($val['url']) && !empty($val['categoryid'])) {
+                $link = url_rewrite('productsub', ['id' => $val['categoryid']]);
+            }
+            $chucks['typeid_' . $val['typeid']]['banners'][] = [
+                'id'         => $val['id'],
+                'name'       => $val['name'],
+                'link'       => $link,
+                'picture'    => $val['picture'],
+                'alt'        => $val['alt'],
+                'style'      => $val['style'],
+                'desc'       => $val['desc'],
+                'desc_color' => $val['descolor'],
+                'btn_color'  => $val['btncolor'],
+                'video_url'  => $val['videourl'],
+            ];
+        }
+
+        return $chucks;
+    }
+
+    public function helper()
+    {
+        // 获取分类
+        $categorys = $this->getCategoryTree(77);
+        // 获取文章
+        $articles = $this->getArticleByCategory($categorys, 3);
+        // 组装数据
+        foreach ($categorys as $key => &$val) {
+            if (!isset($val['articles'])) {
+                $val['articles'] = [];
+            }
+            if (isset($articles['cid_' . $val['id']])) {
+                $items = $articles['cid_' . $val['id']];
+                foreach ($items as $k => $v) {
+                    $val['articles'][] = [
+                        'id' => $v['id'],
+                        'name' => $v['name']
+                    ];
+                }
+            }
+        }
+        unset($val);
+        $this->assign('categorys', $categorys);
+
+        $banners = $this->getBanners(128);
+        if (!empty($banners)) {
+            $banners = $banners['typeid_128']['banners'];
+        }
+        $this->assign('banners', $banners);
+        $this->assign('banners_size', count($banners));
+
+        return $this->fetch();
+    }
+
+    public function helper_search()
+    {
+        $base_category = 77;
+        $keywords = request()->param('keywords');
+        $articles = Loader::model('Article')
+            ->field([
+                'id',
+                'name',
+                'sort',
+            ])
+            ->where('stat', '=', 0)
+            ->where('country_code', '=', $this->country_code)
+            ->where('cid', 'in', function ($query) use ($base_category) {
+                $query->name('article_category')
+                    ->field(['id'])
+                    ->where('id', '=', $base_category)
+                    ->whereOr('pid', '=', $base_category);
+            })
+            ->where(function ($query) use ($keywords) {
+                if (!empty($keywords)) {
+                    $query->where('name', 'like', '%' . $keywords . '%');
+                }
+            })
+            ->order(['sort' => 'asc', 'id' => 'desc'])
+            ->select();
+
+        return json([
+            'code'    => 0,
+            'message' => '获取成功',
+            'data'    => $articles
+        ]);
+    }
+
+    /**
+     * getCategoryTree 获取特定文章分类树
+     */
+    private function getCategoryTree($cid = 36)
+    {
+        // 设备
+        $category = Loader::model('ArticleCategory')
+            ->field([
+                'id',
+                'pid',
+                'name',
+                'picture'
+            ])
+            ->where('isshow', '=', 1)
+            ->where('country_code', '=', $this->country_code)
+            ->order(['sort' => 'asc'])
+            ->select();
+        $category_array = collection($category)->toArray();
+        $category_tree  = $this->buildTree($category_array, $cid);
+        return $category_tree;
+    }
+
+    // 根据分类获取文章
+    private function getArticleByCategory($categorys, $limit = null)
+    {
+        if (!is_array($categorys)) {
+            throw new \Exception('请确认分类正确');
+        }
+        if (empty($categorys)) {
+            return [];
+        }
+
+        $sub_query = Loader::model('Article')
+            ->field([
+                'id',
+                'cid',
+                'name',
+                'sort'
+            ])
+            ->where('stat', '=', 0)
+            ->where('cid', '=', $categorys[0]['id'])
+            ->where('country_code', '=', $this->country_code)
+            ->order(['sort' => 'asc', 'id' => 'desc']);
+        if (!empty($limit)) {
+            $sub_query = $sub_query->limit($limit);
+        }
+        $sub_query = $sub_query->buildSql();
+
+        $model = \think\Db::table($sub_query . ' a');
+        foreach ($categorys as $key => $val) {
+            if ($key == 0) continue;
+            $model->union(function ($query) use ($key, $val, $limit) {
+                $query->name('article')->field([
+                    'id',
+                    'cid',
+                    'name',
+                    'sort'
+                ])
+                    ->where('stat', '=', 0)
+                    ->where('cid', '=', $val['id'])
+                    ->where('country_code', '=', $this->country_code)
+                    ->order(['sort' => 'asc', 'id' => 'desc']);
+                if (!empty($limit)) {
+                    $query->limit($limit);
+                }
+                // 嵌套子查询，解决union没有limit时排序问题
+                $query->table($query->buildSql() . 'a' . $key);
+            });
+        }
+
+        $map = [];
+        $data = $data = $model->select();
+        foreach ($data as $key => $val) {
+            $map['cid_' . $val['cid']][] = $val;
+        }
+        return $map;
+    }
+
+    public function helper_detail()
+    {
+        $id = request()->param('id');
+        $article = Loader::model('Article')->where('id', '=', $id)->find();
+
+        if (request()->isAjax()) {
+            return json([
+                'code'    => 0,
+                'message' => '获取成功',
+                'data'    => $article
+            ]);
+        } else {
+            // 获取分类
+            $categorys = $this->getCategoryTree(77);
+            // 获取文章
+            $articles = $this->getArticleByCategory($categorys,);
+            // 组装数据
+            foreach ($categorys as $key => &$val) {
+                if (!isset($val['articles'])) {
+                    $val['articles'] = [];
+                }
+                if (isset($articles['cid_' . $val['id']])) {
+                    $items = $articles['cid_' . $val['id']];
+                    foreach ($items as $k => $v) {
+                        $val['articles'][] = [
+                            'id' => $v['id'],
+                            'name' => $v['name']
+                        ];
+                    }
+                }
+            }
+            unset($val);
+            $this->assign('categorys', $categorys);
+            $this->assign('article', $article);
+            $this->assign('cid', request()->param('cid'));
+        }
+
+        return $this->fetch();
     }
 
     public function download()
     {
+        $downloads = [];
+        // 获取banner
+        $banners = $this->getBanners([129]);
+        if (!empty($banners)) {
+            $downloads = $banners['typeid_129']['banners'];
+        }
+        $this->assign('downloads', $downloads);
+        
         return $this->fetch();
     }
 

app/usmobile/view/include/top_nas.phtml

@@ -0,0 +1,174 @@
+<div class="header">
+    <div class="m_Container clearfix">
+        <div class="left">
+            <span class="icon-logo cursor_p">
+                <a href="javascript:void(0);">
+                    <img src="__PUBLIC__/m_weben/images/logo.png" />
+                </a>
+            </span>
+        </div>
+        <div class="right img-responsive cursor_p">
+            <span class="cursor_p spn1">
+                <i class="icon-menu-svg"></i>
+            </span>
+            <span class="icon-keyword cursor_p del-button del-btn">
+                <i class="icon-search-svg"></i>
+            </span>
+            <span class="cursor_p mask-up">
+                <i class="icon-lag-svg"></i>
+            </span>
+        </div>
+    </div>
+    <div class="menu" style="display: none;">
+        {volist name="nav_header" id="vo"}
+        <dl>
+            <dt class="cursor_p">
+                {if condition="empty($vo.items)"}
+                <a href="{$vo.url}">{$vo.name}</a>
+                {else /}
+                <p>{$vo.name}</p><i class="rotate icon-arrow"></i>
+                {/if}
+            </dt>
+            {if condition="!empty($vo.items)"}
+                {volist name="vo.items" id="it"}
+                <dd>
+                    <a class="cursor_p" href="{$it.url}">{$it.name}</a>
+                </dd>
+                {/volist}
+            {/if}
+        </dl>
+        {/volist}
+    </div>
+</div>
+
+<!--搜索弹框-->
+<div class="marsk-container" style="display: none;">
+    <div class="popup-quick">
+        <div class="ac-close float_r "><img src="__PUBLIC__/m_weben/images/close.png"></div>
+        <div class="search-in">
+            <input type="text" placeholder="产品 USB 2.0..." id="search-input1">
+            <button id="search-btnput" class="search-button">搜索</button>
+            <div class="title-text">
+                <p><a href="#">搜索历史</a></p>
+                <?php $history_list = getBannerList(90, 5);?>
+                {volist name="history_list" id="vo"}
+                <p><a href="{$vo.url}">{$vo.name}</a></p>
+                {/volist}
+            </div>
+        </div>
+    </div>
+</div>
+<!--弹出框-->
+<script>
+    $(function(){
+        navHeader();
+        $(window).scroll(function () {
+            navHeader();
+        })
+        function navHeader() {
+            if ($(window).scrollTop() > 0) {
+                $(".header").addClass("m_nav");
+            } else {
+                $(".header").removeClass("m_nav");
+            }
+        }
+    });
+
+    /*menu菜单*/
+    $(function() {
+        $(".spn1").click(function() {
+            $(this).toggleClass("icon-close");
+            $(".menu").slideToggle(800);
+            $(".m-Country").hide();
+        });
+    });
+
+    /*字体大小变化*/
+    /* 长宽占位 rem算法, 根据root的rem来计算各元素相对rem, 默认html 320/20 = 16px */
+    /* 长宽占位 rem算法, 根据root的rem来计算各元素相对rem, 默认html 320/20 = 16px */
+    function placeholderPic() {
+        var w = document.documentElement.offsetWidth;
+        if (w > 750) {
+            document.documentElement.style.fontSize = 750 / 20 + 'px';
+        } else {
+            document.documentElement.style.fontSize = w / 20 + 'px';
+        }
+    }
+    placeholderPic();
+    window.onresize = function() {
+        placeholderPic();
+    }
+
+    /*头部*/
+    $(function() {
+        $(".menu dl dt").click(function() {
+            $(this).nextAll().slideToggle(500);
+            $(this).children("i").toggleClass("rotate");
+        })
+    })
+
+    /*搜索弹框*/
+    $(function() {
+        $('.del-button').click(function() {
+            $(".marsk-container").show();
+        });
+    });
+    /*弹出框关闭*/
+    $(function() {
+        $('.ac-close').click(function() {
+            $(".marsk-container").hide();
+        });
+    });
+
+    /************搜索****************/
+    $(function() {
+        var search_input = $("#search-input1");
+        $(search_input).on("keyup", function(e) {
+            $("#search-input1").keyup(function(event) {
+                if (event && event.keyCode === 13) {
+                    var keywords = $("#search-input1").val();
+                    var href = "/mobile<?php echo url('/search'); ?>?skeyword=" +
+                        encodeURIComponent(keywords);
+                    location.href = href;
+                    $("#modal").hide();
+                }
+            });
+        });
+
+        $("#search-btnput").bind("click", function(event) {
+            var skeyword = $("#search-input1").val();
+            if (skeyword) {
+                var href = "<?php echo url('/mobile/search'); ?>?skeyword=" + encodeURIComponent(skeyword);
+                location.href = href;
+            } else {
+                var href = "<?php echo url('/mobile/search'); ?>";
+                location.href = href;
+            }
+        });
+    });
+</script>
+<style>
+
+    .search-in input {
+        width: 72% !important;
+        height: 2.8rem;
+        background: #ffffff;
+        border: 1px solid #d6d6d6;
+        opacity: 1;
+        border-radius: 20px;
+        padding: 0 1rem;
+    }
+    .search-button {
+        border: none;
+        font-size: 0.9rem;
+        color: #fff;
+        position: absolute;
+        right: 15px;
+        top: 12.2rem;
+        cursor: pointer;
+        background: #0060ff;
+        height: 2.5rem;
+        border-radius: 20px;
+        padding: 0 1rem;
+    }
+</style>

app/usmobile/view/tops_nas/download.phtml

@@ -1,270 +1,186 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<title>元创官网</title>
-		<style type="text/css">
-			.header {
-				color: #fff;
-			}
-		</style>
-        {include file='include/head-nas'/}
-		<style type="text/css">
-			.narsMBpage {
-				width: 100%;
-				height: 100%;
-				display: flex;
-				flex-direction: column;
-				position: relative;
-				overflow-x: hidden;
-			}
 
-			.narsMBpage .narsMB-banner {
+<head>
-				width: 100%;
+	<meta charset="utf-8" />
-			}
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>元创官网</title>
+	{include file='include/head-nas'/}
+	<style type="text/css">
+		.icon-menu-svg,
+		.icon-search-svg,
+		.icon-lag-svg {
+			color: #000 !important;
+		}
 
-			.narsMBpage .narsmb-img {
+		.header {
-				max-width: 100%;
+			color: #fff;
-				height: auto;
+		}
-				display: block;
-			}
 
-			.narsMBpage .narsmb-cate {
+		.narsDowloadPc {
-				margin-top: 2.8125rem;
+			/*height: 100vh;*/
-				margin: 0 0.4375rem;
+			background: #F5F5F5;
-				display: flex;
+			/*position: relative;*/
-				flex-direction: column;
+			display: flex;
-			}
+			flex-direction: column;
+			overflow-y: auto;
+		}
 
-			.narsMBpage .narsmb-cate .narsmbcatetop,
+		.narsDowloadPc .narsDtabs {
-			.narsMBpage .narsmb-cate .narsmbcate-it {
+			margin: 0 1.25rem;
-				background: #e0e2e6;
+			margin-top: 1rem;
-				color: #000;
+			display: flex;
-				border-radius: 0.3125rem;
+			flex-direction: row;
-				height: 5.8125rem;
+			justify-content: center;
-				width: 100%;
+			height: 2.625rem;
-				line-height: 1rem;
+		}
-				font-size: 0.75rem;
-				font-weight: bold;
-				margin-top: 2.8125rem;
-				display: flex;
-				align-items: center;
-			}
 
-			.narsMBpage .narsmb-cate .narsmbcateits {
+		.narsDowloadPc .narsDtabs .narsDtabIt {
-				height: 5.8125rem;
+			color: #001717;
-				display: flex;
+			font-size: 1rem;
-				flex-direction: row;
+			height: 2.625rem;
-				justify-content: space-between;
+			line-height: 2.625rem;
-				margin-bottom: 0.4375rem;
+			width: 25rem;
-			}
+			background: #fff;
+			text-align: center;
+			border-radius: 28px;
+			cursor: pointer;
+		}
 
-			.narsMBpage .narsmb-cate .narsmbcateits .narsmbcate-it {
+		.narsDowloadPc .narsDtabs .narsDtabIt:first-child {
-				width: 49%;
+			margin-right: 0.9375rem;
-				margin-top: 0.4375rem;
+		}
-			}
 
-			.narsMBpage .narsmb-cate .narsmbcate-sp {
+		.narsDowloadPc .narsDtabs .narsDtabIt_active {
-				margin: 0 1.25rem;
+			color: #fff;
-			}
+			background: #004CFA;
+		}
 
-			.narsMBpage .narsmbvd {
+		.narsDowloadPc .narsDmainConten {
-				width: 100%;
+			margin: 0 1.25rem;
-				height: 14.5625rem;
+			background: #fff;
-				margin-top: 2.5rem;
+			margin-bottom: 10px;
-			}
+			position: relative;
+		}
 
-			.narsMBpage .narsmbvd .narsmbvideo {
+		.narsDowloadPc .nDtopCtMian {
-				height: 100%;
+			padding-top: 1.25rem;
-				width: 100%;
+			position: relative;
-				object-fit: fill;
+			overflow: hideen;
-			}
+			margin: 0 1.25rem;
+			height: auto;
+		}
 
-			.narsMBpage .narsmb-jjfa {
+		.narsDowloadPc .nDtopCtMian .nDtopIt {
-				width: 100%;
+			width: 100%;
-				display: flex;
+			background: #fff;
-				flex-direction: column;
+			margin-bottom: 10px;
-			}
+			box-sizing: border-box;
+		}
 
-			.narsMBpage .narsmb-jjfa .narsmbjjfa-title {
+		.narsDowloadPc .nDtopCtMian .nDtopIt .tpimg {
-				text-align: center;
+			width: 100%;
-				font-size: 1.6875rem;
+			height: 100%;
-				font-weight: bold;
+		}
-				padding-top: 2.0625rem;
-				padding-bottom: 1.3125rem;
-			}
 
-			.narsMBpage .narsmb-jjfa .narsmbjjfaSwiper {
+		.narsDowloadPc .nDtopCtMian .nDtopIt .tpimg {
-				margin-left: 0.4375rem;
+			width: 100%;
-			}
+			height: 100%;
+		}
 
-			.narsMBpage .narsmb-jjfa .narsmbjjfa-slide {
+		.narsDowloadPc .nDtopCtMian .nDtopIt2 {
-				width: 10rem;
+			display: flex;
-				height: 18.375rem;
+			flex-direction: row;
-				border-radius: 0.125rem;
+			flex-wrap: wrap;
-				position: relative;
+			justify-content: space-between;
-			}
+		}
 
-			.narsMBpage .narsmb-jjfa .narsmbjjfa-slide .narsmb-jjfa-ct {
+		.narsDowloadPc .nDtopCtMian .nDtopIt2 .nDitImg {
-				color: #000;
+			width: 48.5%;
-				margin: 0 1.25rem;
+			background: #fff;
-				font-size: 1rem;
+			display: flex;
-				font-weight: bold;
+			justify-content: center;
-				margin-top: 1.875rem;
+			align-items: center;
-				line-height: 1.5625rem;
+			cursor: pointer;
-			}
+			margin-bottom: 0.625rem;
+			display: flex;
+			flex-direction: column;
+		}
 
-			.narsMBpage .narsmb-jjfa .narsmbjjfa-slide .narsmb-jjfa-info {
+		.narsDowloadPc .nDtopCtMian .nDtopIt2 .nDitImg img {
-				background: #131b28;
+			width: 3.25rem;
-				position: absolute;
+			height: 3.25rem;
-				top: 0;
+			padding: 1.25rem;
-				height: 18.375rem;
+			padding-bottom: 0.5rem;
-				padding: 0 1.3rem;
+		}
-				display: none;
-				flex-direction: column;
-				justify-content: center;
-				border-radius: 0.125rem;
-				z-index: 11;
-				overflow-y: hidden;
-				color: #fff;
-			}
 
-			.narsMBpage .narsmb-jjfa .narsmbjjfa-slide .narsmb-jjfa-info .narsmbjjfatt {
+		.narssbshow .nrowimg {
-				width: 100%;
+			width: 100%;
-				font-weight: bold;
+			background: #fff;
-				text-align: center;
+			display: flex;
-				font-size: 0.875rem;
+			justify-content: center;
-				margin-bottom: 1.6875rem;
-			}
 
-			.narsMBpage .narsmb-jjfa .narsmbjjfa-slide .narsmb-jjfa-info .narsmbjjfa-txt {
+		}
-				font-size: 0.75rem;
-				line-height: 1rem;
-				text-indent: 2em;
-			}
 
-			.narsMBpage .narsmb-jjfa .narsmb-jjfabgimg {
+		.narssbshow .nrowimg img {
-				width: 9.9375rem;
+			width: 50%;
-				height: 18.375rem;
+			height: 50%;
-				position: absolute;
+		}
-				top: 0;
+		.narswljshow .nDtopIt2 .nDitImg .dwbt {
-				z-index: -1;
+ 		    padding: 0.5rem 1.8rem;
-			}
+            background: #A1A7BF;
+            border-radius: 1.85rem;
+            color: #fff;
+            font-size: 0.85rem;
+            cursor: pointer;
+            margin-bottom: 14%;
+ 		}
+ 		.narswljshow .nDtopIt2 .nDitImg .dwbtactive {
+            background: #004CFA;
+ 		}
+ 		.narswljshow .nDtopIt2 .nDitImg .yy_name{
+ 		    font-size: 1rem;
+ 		    padding-bottom: 10px;
+ 		    padding-top:5px;
+ 		    color: #000;
+ 		    font-weight: bold;
+ 		}
+	</style>
+</head>
 
-			.narsmb-wlj {
+<body>
-				width: 100%;
+	{include file='include/top_nas'/}
-				display: flex;
+	<div class="narsDowloadPc">
-				flex-direction: column;
+		<div class="narsDtabs"></div>
-			}
+		<!-- 微链接-->
-
+		<div class="nDtopCtMian narswljshow">
-			.narsmb-wlj .narsmbwlj-title {
+			<div class="nDtopIt">
-				text-align: center;
+				<img src="/frontend/m_web/images/download_focus_mobile_us.png" class="tpimg" />
-				font-size: 1.6875rem;
-				font-weight: bold;
-				padding-top: 2.0625rem;
-				padding-bottom: 1.3125rem;
-			}
-
-			.narsmb-wlj .narsmbwltitem {
-				margin: 0 0.4375rem;
-				height: 9.0625rem;
-				background: #131b28;
-				display: flex;
-				flex-direction: row;
-				justify-content: space-between;
-				margin-bottom: 0.5rem;
-			}
-
-			.narsmb-wlj .narsmbwltitem .narsmbwljcp {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-				justify-content: center;
-				height: inherit;
-			}
-
-			.narsmb-wlj .narsmbwltitem .narsmbwljcp .narsmbtt {
-				font-size: 1.0625rem;
-				font-weight: bold;
-				color: #fff;
-				width: 35.5rem;
-				text-align: center;
-				margin-left: 35%;
-			}
-
-			.narsmb-wlj .narsmbwltitem .narsmbwljcp .narsmbwljimg {
-				height: inherit;
-			}
-
-			.narsmb-wlj .narsmbwltitem .narsmbwljcpinfo {
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				align-items: center;
-				color: #fff;
-				flex: 1;
-				margin: 0 1.25rem;
-			}
-
-			.narsmb-wlj .narsmbwltitem .narsmbwljcpinfo .narsmbif-title {
-				font-weight: bold;
-				font-size: 1.0625rem;
-				padding-bottom: 1rem;
-			}
-
-			.narsmb-wlj .narsmbwltitem .narsmbwljcpinfo .narsmbif-info {
-				font-size: 0.625rem;
-				line-height: 1rem;
-				text-align: center;
-			}
-
-			.narsmb-wlj .narsmbwltitem .narsmbwljcpinfo .narsmbwlj-xzbt {
-				width: 7.25rem;
-				height: 2.1875rem;
-				border-radius: 3.25rem;
-				line-height: 2.1875rem;
-				border: 1px solid #ffffff;
-				font-size: 0.875rem;
-				text-align: center;
-				cursor: pointer;
-				margin: 0 1.25rem;
-			}
-
-			.narsmb-wlj .narsmbwltitem .narsmbwljcpinfo .narsmbtt {
-				font-size: 1.0625rem;
-				font-weight: bold;
-				color: #fff;
-				text-align: center;
-			}
-
-			.narsMBbannerSwiper {
-				padding-top: 0px;
-			}
-
-		</style>
-	</head>
-
-	<body>
-		<!--{#include file='include/top_nas'/}-->
-		<!--nars 手机 -->
-		<div class="narsMBpage">
-			<!--轮播 banner-->
-			<div class="narsMB-banner">
-				<div class="swiper-container narsMBbannerSwiper">
-					<div class="swiper-wrapper">
-						
-						<div class="swiper-slide">
-							<img src="/uploads/nas/mobile-beta.png" alt="" class="narsmb-img" />
-						</div>
-						
-					</div>
-				</div>
 			</div>
-
+			{if condition="!empty($downloads)"}
-
+			<div class="nDtopIt2" style="margin-bottom: 25px;">
-			{include file='include/bottom'/}
+				{volist name="downloads" id="vo"}
+				<a class="nDitImg" href="{$vo.link}" download="{$vo.desc}">
+					<div class="nDitImg">
+					    <img src="{$vo.picture}" />
+					    <div class="yy_name">{$vo.name}</div>
+					    <div class="dwbt">Download</div>
+					</div>
+				</a>
+				{/volist}
+			</div>
+			{/if}
 		</div>
-	</body>
+		{include file='include/bottom'/}
-
+	</div>
-</html>
+</body>
+ <script>
+   $(document).ready(function() {
+        $('.dwbt').click(function() {
+            console.log(111)
+            $('.dwbt').removeClass('dwbtactive');
+            $(this).addClass('dwbtactive');
+        });
+    });
+ </script>
+</html>

app/usmobile/view/tops_nas/helper.phtml

@@ -0,0 +1,425 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>帮助中心</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {include file='include/head-nas' /}
+    <style>
+        .icon-menu-svg,
+        .icon-search-svg,
+        .icon-lag-svg {
+            color: #000 !important;
+        }
+
+        .narshelpCenterPc-app {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-search {
+            position: fixed;
+            z-index: 2;
+            top: 0;
+            height: 100vh;
+            display: flex;
+            width: 100%;
+            background: #fff;
+            flex-direction: column;
+            display: none;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-search .nhlpappshtop {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-search .nhlpappshtop .closetx {
+            font-size: 14px;
+            margin-right: 8%;
+        }
+
+        .narshelpCenterPc-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;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-search .nhlpapp-shdiv input {
+            font-size: 0.8125rem;
+            padding: 0 20px;
+            flex: 1;
+            border: none;
+            margin-left: 2px;
+            outline: none;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-search .nhlpapp-shdiv input::placeholder {
+            color: #8f9099;
+            font-size: 14px;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-search .nhlpapp-shdiv .searchimg {
+            width: 1.25rem;
+            height: 1.25rem;
+            margin-left: 1%;
+            margin-right: 5%;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-search .dropdown {
+            height: 90vh;
+            overflow-y: auto;
+            margin: 1.25rem;
+        }
+
+        .narshelpCenterPc-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;
+            /* 超出部分用省略号表示 */
+        }
+
+        .narshelpCenterPc-app .nhlpapp-search .dropdown li a {
+            display: block;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-search .dropdown .search-item {
+            color: #202734;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-search .nhlpappline {
+            width: 100%;
+            height: 1px;
+            background: #cdcedb;
+        }
+
+        .narshelpCenterPc-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;
+        }
+
+        .narshelpCenterPc-app .headtop .logoicoimg {
+            width: 42%;
+            margin-left: 1rem;
+        }
+
+        .narshelpCenterPc-app .headtop .ssicoimg {
+            width: 1.875rem;
+            height: 1.875rem;
+            margin-right: 1.875rem;
+        }
+
+        .narshelpCenterPc-app .nhlpbner {
+            width: 100%;
+            margin-top: 4.75rem;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-title {
+            margin: 0 auto;
+            text-align: center;
+            font-size: 1.5rem;
+            margin: 2rem 0;
+        }
+
+        .narshelpCenterPc-app .nhlpappit {
+            margin: 0 auto;
+            padding: 1.875rem;
+            background: #fafafa;
+            border-radius: 1rem;
+            color: #202734;
+            font-size: 1rem;
+            margin-bottom: 1.25rem;
+            width: 74%;
+        }
+
+        .narshelpCenterPc-app .nhlpappit .nhlptl {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            font-size: 1.5rem;
+            font-weight: bold;
+            padding-bottom: 1.25rem;
+        }
+
+        .narshelpCenterPc-app .nhlpappit .nhlptl .bhlpicoimg {
+            width: 36px;
+            height: 36px;
+            margin-right: 10px;
+        }
+
+        .narshelpCenterPc-app .nhlpappit .nhlp-tx-list {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .narshelpCenterPc-app .nhlpappit .nhlp-tx-list .txrow {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            margin-bottom: 1rem;
+            cursor: pointer;
+        }
+
+        .narshelpCenterPc-app .nhlpappit .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-app .nhlpappit .nhlp-tx-list .txrow .nhlpsp {
+            flex: 1;
+            color: #1f2635;
+            font-size: 1rem;
+        }
+
+        .narshelpCenterPc-app .nhlpappit .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-app .nhlpapp-row {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            width: 90%;
+            margin: 0 auto;
+            flex-wrap: wrap;
+            margin-bottom: 80px;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-row .nhlplxwmit {
+            width: 48.3%;
+            padding: 1.5rem 0;
+            background: #f9f9f9;
+            margin-bottom: 0.75rem;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            border-radius: 1rem;
+            cursor: pointer;
+            margin-right: 0.75rem;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-row .nhlplxwmit .lximg {
+            width: 2.5rem;
+            height: 2.5rem;
+            margin-bottom: 0.75rem;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-row .nhlplxwmit .lxewmimg {
+            width: 4rem;
+            width: 4rem;
+            margin-bottom: 1.25rem;
+            display: none;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-row .nhlplxwmit .t1 {
+            text-align: center;
+            font-size: 0.875rem;
+            padding-bottom: 0.375rem;
+            color: #1f2635;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-row .nhlplxwmit .t2 {
+            font-size: 0.75rem;
+            color: #1f2635;
+        }
+
+        .narshelpCenterPc-app .nhlpapp-row .nhlplxwmit-w1 {
+            width: 31%;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="narshelpCenterPc-app">
+        <div class="headtop">
+            <a href="javascript:void(0);">
+                <img src="__PUBLIC__/m_web/images/nas/help/newlogo.png" class="logoicoimg" />
+            </a>
+            <img src="__PUBLIC__/m_web/images/nas/help/sousuo.png" class="ssicoimg" />
+        </div>
+        <img src="__PUBLIC__/m_web/images/nas/help/nhlpapp-banner.png" class="nhlpbner" />
+        <h1 class="nhlpapp-title">User's Guide</h1>
+        {volist name="categorys" id="vo"}
+        <div class="nhlpappit">
+            <div class="nhlptl">
+                <img src="{$vo.picture}" class="bhlpicoimg" />{$vo.name}
+            </div>
+            <div class="nhlp-tx-list">
+                {volist name="vo.articles" id="va"}
+                <a class="txrow" href="{:url('tops_nas/helper_detail', ['id'=>$va.id])}">
+                    <div class="nhlp-point"></div>
+                    <span class="nhlpsp">{$va.name}</span>
+                    <span class="narhelpgoimg"><img src="__PUBLIC__/m_web/images/nas/help/nhlp-jt.png" /></span>
+                </a>
+                {/volist}
+                {if condition="count($vo.articles) >= 3"}
+                <a href="{:url('tops_nas/helper_detail', ['cid'=>$vo.id, 'id'=>isset($vo.articles[0])?$vo.articles[0]['id']:0])}">
+                    <div class="ckgdbt">Click to view more <img src="__PUBLIC__/m_web/images/nas/help/nhlp-jt.png" /></div>
+                </a>
+                {/if}
+            </div>
+        </div>
+        {/volist}
+        <h1 class="nhlpapp-title">Contact US</h1>
+        <div class="nhlpapp-row">
+            {if condition="$banners_size > 0"}
+            {if condition="!empty($banners[0]['link'])"}
+            <a href="{$banners[0]['link']}" class="nhlplxwmit">
+            {else/}
+            <a href="javascript:void(0);" class="nhlplxwmit">
+            {/if}
+                <img src="__PUBLIC__/web/images/nas/help/nas_helper_facebook.png" class="lximg" />
+                <span class="t1">{$banners[0]['name']}</span>
+                <span class="t2">{$banners[0]['desc']}</span>
+            </a>
+            {/if}
+            {if condition="$banners_size > 1"}
+            {if condition="!empty($banners[1]['link'])"}
+            <a href="{$banners[1]['link']}" class="nhlplxwmit" style="margin-right: 0;">
+            {else/}
+            <a href="javascript:void(0);" class="nhlplxwmit" style="margin-right: 0;">
+            {/if}
+                <img src="__PUBLIC__/web/images/nas/help/nas_helper_instagram.png" class="lximg" />
+                <span class="t1">{$banners[1]['name']}</span>
+                <span class="t2">{$banners[1]['desc']}</span>
+            </a>
+            {/if}
+            {if condition="$banners_size > 2"}
+            {if condition="!empty($banners[2]['link'])"}
+            <a href="{$banners[2]['link']}" class="nhlplxwmit nhlplxwmit-w1">
+            {else/}
+            <a href="javascript:void(0);" class="nhlplxwmit nhlplxwmit-w1">
+            {/if}
+                <img src="__PUBLIC__/web/images/nas/help/nas_helper_youtobe.png" class="lximg" />
+                <span class="t1">{$banners[2]['name']}<br />{$banners[2]['desc']}</span>
+            </a>
+            {/if}
+            {if condition="$banners_size > 3"}
+            {if condition="!empty($banners[3]['link'])"}
+            <a href="{$banners[3]['link']}" class="nhlplxwmit nhlplxwmit-w1">
+            {else/}
+            <a href="javascript:void(0);" class="nhlplxwmit nhlplxwmit-w1">
+                {/if}
+                <img src="__PUBLIC__/web/images/nas/help/nas_helper_twitter.png" class="lximg" />
+                <span class="t1">{$banners[3]['name']}<br />{$banners[3]['desc']}</span>
+            </a>
+            {/if}
+            {if condition="$banners_size > 4"}
+            {if condition="!empty($banners[4]['link'])"}
+            <a href="{$banners[4]['link']}" class="nhlplxwmit nhlplxwmit-w1" style="margin-right: 0;">
+            {else/}
+            <a href="javascript:void(0);" class="nhlplxwmit nhlplxwmit-w1" style="margin-right: 0;">
+                {/if}
+                <img src="__PUBLIC__/web/images/nas/help/nas_helper_tiktok.png" class="lximg" />
+                <span class="t1">{$banners[4]['name']}<br />{$banners[4]['desc']}</span>
+            </a>
+            {/if}
+        </div>
+        <!--搜索-->
+        <div class="nhlpapp-search">
+            <div class="nhlpappshtop">
+                <div class='nhlpapp-shdiv'>
+                    <input class="nhlp-ipt" id="search-input" placeholder="What are you looking for?" />
+                    <img src="__PUBLIC__/m_web/images/nas/help/ssapp.png" class="searchimg" />
+                </div>
+                <span class="closetx">Cancel</span>
+            </div>
+            <div class="nhlpappline"></div>
+            <!-- 下拉搜索框 -->
+            <div class="dropdown" id="dropdown"></div>
+        </div>
+        {include file="include/bottom" /}
+    </div>
+</body>
+<script>
+    $(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('tops_nas/helper_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(\'tops_nas/helper_detail\')}?id=' + v.id + '">' + v.name + '</a></li>'
+                            })
+                            html += '</ul>'
+                        }
+                        $('#dropdown').show().html(html);
+                    }
+                })
+            }, 300);
+        });
+        $('.nhlplxwmit:not(:first)').hover(function() {
+            $(this).find('.lximg').show();
+        }, function() {
+            $(this).find('.lximg').show();
+        });
+    });
+</script>
+
+</html>

app/usmobile/view/tops_nas/helper_detail.phtml

@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>帮助中心</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {include file='include/head-nas' /}
+    <style>
+        .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: 42%;
+            margin-left: 1rem;
+        }
+
+        .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: 10.5vh;
+        }
+
+        .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: 90.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(45deg);
+        }
+
+        .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;
+        }
+        h1,h2,h3,h4{
+            white-space:normal;
+            word-break:break-all;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="narshelpCenterdetail-app">
+        <div class="headtop">
+            <a href="javascript:void(0);"><img src="__PUBLIC__/m_web/images/nas/help/newlogo.png" class="logoicoimg" /></a>
+            <div style="display:flex">
+                <img src="__PUBLIC__/m_web/images/nas/help/fenlei.png" class="ssicoimg" id="flico" />
+                <img src="__PUBLIC__/m_web/images/nas/help/sousuo.png" class="ssicoimg" id="ssico" style="margin-right:32px" />
+            </div>
+        </div>
+        <div id="rendered-content" class="nhlp-app-content">{$article.content|default=''}</div>
+        <!--搜索-->
+        <div class="nhlpapp-search">
+            <div class="nhlpappshtop">
+                <div class='nhlpapp-shdiv'>
+                    <input class="nhlp-ipt" id="search-input" placeholder="What are you looking for?" />
+                    <img src="__PUBLIC__/m_web/images/nas/help/ssapp.png" class="searchimg" />
+                </div>
+                <span class="closetx">cancel</span>
+            </div>
+            <div class="nhlpappline"></div>
+            <!-- 下拉搜索框 -->
+            <div class="dropdown" id="dropdown"></div>
+        </div>
+        <!-- 分类文章目录 -->
+        <div class="nhlpapp-pagescate" {if condition="!empty($cid)" }style="display:block;" {/if}>
+            <div class="nars-hlpdt-ml">
+                <div class="nav-tree">
+                    {volist name="categorys" id="vo"}
+                    <div class="categoryhelp">
+                        <div class="categoryhelp-title">
+                            <div class="arrow"><img src="__PUBLIC__/m_web/images/nas/help/nars-jt.png" class="arrow" /></div>
+                            <span>{$vo.name}</span>
+                        </div>
+                        <ul class="sub-list" {if condition="$cid == $vo.id" }style="display:block;" {/if}>
+                            {volist name="vo.articles" id="va"}
+                            <li>
+                                {if condition="$key == 0"}
+                                <a href="{:url('tops_nas/helper_detail', ['id'=>$va.id])}" style="padding-top: 6px;">{$va.name}</a>
+                                {else/}
+                                <a href="{:url('tops_nas/helper_detail', ['id'=>$va.id])}">{$va.name}</a>
+                                {/if}
+                            </li>
+                            {/volist}
+                        </ul>
+                    </div>
+                    {/volist}
+                </div>
+            </div>
+        </div>
+        {include file="include/bottom" /}
+    </div>
+</body>
+<script>
+    $(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('tops_nas/helper_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(\'tops_nas/helper_detail\')}?id=' + v.id + '">' + v.name + '</a></li>'
+                            })
+                            html += '</ul>'
+                        }
+                        $('#dropdown').show().html(html);
+                    }
+                })
+            }, 300);
+        });
+    });
+</script>
+</html>

public/frontend/web/css/nas.css

@@ -67,8 +67,8 @@ a {
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: space-between;
+    /*justify-content: space-between;*/
-    width: 75rem;
+    width: 82rem;
     margin: 0 auto;
 }