feat: Nas专题帮助中心
This commit is contained in:
@@ -98,3 +98,21 @@ if (!function_exists('thumb')) {
|
||||
return mb_substr($url, 0, $idx, 'utf-8') . '_thumb' . mb_substr($url, $idx, $len - $idx, 'utf-8');
|
||||
}
|
||||
}
|
||||
|
||||
if (!function_exists('get_path_from_img_tag'))
|
||||
{
|
||||
/**
|
||||
* 从img标签中获取图片路径
|
||||
* @param string $img
|
||||
* @return string
|
||||
*/
|
||||
function get_path_from_img_tag(string $img): string
|
||||
{
|
||||
$match = preg_match('/<img[^>]+src=[\'"](.*?)[\'"][^>]+>/i', rawurldecode($img), $matches);
|
||||
if ($match) {
|
||||
return $matches[1];
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,8 @@ declare (strict_types = 1);
|
||||
|
||||
namespace app\index\controller;
|
||||
|
||||
use app\index\model\ArticleCategoryModel;
|
||||
use app\index\model\ArticleModel;
|
||||
use app\index\model\SysBannerModel;
|
||||
use think\facade\View;
|
||||
|
||||
@@ -175,6 +177,41 @@ class TopicNas extends Common
|
||||
*/
|
||||
public function help()
|
||||
{
|
||||
// 获取文章分类及文章数据
|
||||
$parent = ArticleCategoryModel::uniqueLabel('CATEGORY_681182e0a4529')->language($this->lang_id)->value('id');
|
||||
$article_categorys = ArticleCategoryModel::with(['article' => function($query) {
|
||||
$query->field(['id', 'title', 'category_id'])->limit(3);
|
||||
}])
|
||||
->field([
|
||||
'id',
|
||||
'name',
|
||||
'icon'
|
||||
])
|
||||
->language($this->lang_id)
|
||||
->parent($parent)
|
||||
->isShow(true)
|
||||
->select();
|
||||
View::assign('article_categorys', $article_categorys);
|
||||
|
||||
$contacts = [];
|
||||
// 获取banner数据
|
||||
$banners = SysBannerModel::with(['items' => function ($query) {
|
||||
$query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at']);
|
||||
}])
|
||||
->uniqueLabel(['BANNER_6819754be2dc6'])
|
||||
->language($this->lang_id)
|
||||
->enabled(true)
|
||||
->order(['sort' => 'asc', 'id' => 'desc'])
|
||||
->select();
|
||||
if (!$banners->isEmpty()) {
|
||||
$banners_map = [];
|
||||
foreach ($banners as $banner) {
|
||||
$banners_map[$banner->unique_label] = $banner;
|
||||
}
|
||||
$contacts = data_get($banners_map, 'BANNER_6819754be2dc6')?->items->toArray();
|
||||
}
|
||||
View::assign('contacts', $contacts);
|
||||
|
||||
return View::fetch('help');
|
||||
}
|
||||
|
||||
@@ -183,10 +220,50 @@ class TopicNas extends Common
|
||||
*/
|
||||
public function helpDetail()
|
||||
{
|
||||
$id = request()->get('id');
|
||||
// 获取文章详情
|
||||
$article = ArticleModel::bypk($id)->find();
|
||||
View::assign('article', $article);
|
||||
|
||||
// 获取文章分类及文章数据
|
||||
$parent = ArticleCategoryModel::uniqueLabel('CATEGORY_681182e0a4529')->value('id');
|
||||
$article_categorys = ArticleCategoryModel::with(['article' => function ($query) {
|
||||
$query->field(['id', 'title', 'category_id']);
|
||||
}])
|
||||
->field([
|
||||
'id',
|
||||
'name',
|
||||
'icon'
|
||||
])
|
||||
->language($this->lang_id)
|
||||
->parent($parent)
|
||||
->isShow(true)
|
||||
->select();
|
||||
View::assign('article_categorys', $article_categorys);
|
||||
|
||||
return View::fetch('help_detail');
|
||||
}
|
||||
|
||||
/**
|
||||
* 专题-Nas帮助中心搜索
|
||||
*/
|
||||
public function helpSearch()
|
||||
{
|
||||
$keywords = request()->post('keywords');
|
||||
// 根据关键词查询文章
|
||||
$articles = ArticleModel::field([
|
||||
'id',
|
||||
'title'
|
||||
])
|
||||
->withSearch(['title'], [
|
||||
'title' => $keywords??null
|
||||
])
|
||||
->language($this->lang_id)
|
||||
->select();
|
||||
|
||||
return success('success', $articles->toArray());
|
||||
}
|
||||
|
||||
/**
|
||||
* 专题-Nas软件下载页
|
||||
*/
|
||||
|
||||
@@ -210,5 +210,13 @@ return [
|
||||
'topic_nas_download' => [
|
||||
'cyber_tab_title' => 'CyberData',
|
||||
'weline_tab_title' => 'Weline'
|
||||
],
|
||||
'topic_nas_help' => [
|
||||
'module_title' => 'Quick Start Guide',
|
||||
'search_input_placeholder' => 'What are you looking for?',
|
||||
'article_section_title' => 'User\' s Guide',
|
||||
'contact_section_title' => 'Contact US',
|
||||
'view_more' => 'Click to view more',
|
||||
'content' => 'Content'
|
||||
]
|
||||
];
|
||||
@@ -210,5 +210,13 @@ return [
|
||||
'topic_nas_download' => [
|
||||
'cyber_tab_title' => 'CyberData赛博云空间',
|
||||
'weline_tab_title' => 'Weline微链接'
|
||||
],
|
||||
'topic_nas_help' => [
|
||||
'module_title' => '帮助中心',
|
||||
'search_input_placeholder' => '请输入搜索关键字,如安装赛博云空间,影视库',
|
||||
'article_section_title' => '使用教程',
|
||||
'contact_section_title' => '联系我们',
|
||||
'view_more' => '查看更多',
|
||||
'content' => '目录'
|
||||
]
|
||||
];
|
||||
@@ -29,6 +29,16 @@ class ArticleCategoryModel extends ArticleCategoryBaseModel
|
||||
$query->where('language_id', '=', $language);
|
||||
}
|
||||
|
||||
// 所属唯一标识范围查询
|
||||
public function scopeUniqueLabel($query, $unique_label)
|
||||
{
|
||||
if (is_array($unique_label)) {
|
||||
$query->where('unique_label', 'IN', $unique_label);
|
||||
return;
|
||||
}
|
||||
$query->where('unique_label', '=', $unique_label);
|
||||
}
|
||||
|
||||
// 所属上级分类范围查询
|
||||
public function scopeParent($query, $parent)
|
||||
{
|
||||
|
||||
@@ -96,6 +96,10 @@ Route::group('topic', function() {
|
||||
Route::get('cooperation', 'TopicNas/cooperation');
|
||||
// 专题-Nas帮助中心页
|
||||
Route::get('help', 'TopicNas/help');
|
||||
// 专题-Nas帮助中心详情页
|
||||
Route::get('help_detail', 'TopicNas/helpDetail');
|
||||
// 专题-Nas帮助中心搜索
|
||||
Route::post('help_search', 'TopicNas/helpSearch');
|
||||
// 专题-Nas软件下载页
|
||||
Route::get('download', 'TopicNas/download');
|
||||
});
|
||||
|
||||
141
app/index/view/topic_nas/help.html
Normal file
141
app/index/view/topic_nas/help.html
Normal file
@@ -0,0 +1,141 @@
|
||||
{extend name="public/nas_base" /}
|
||||
{block name="style"}
|
||||
<link rel="stylesheet" href="__CSS__/topic_nas_help.css"/>
|
||||
{/block}
|
||||
{block name="main"}
|
||||
<div class="orico_Page_index">
|
||||
<!-- 帮助中心 -->
|
||||
<div class="narshelpCenterPc">
|
||||
<!-- banner-搜索 -->
|
||||
<div class="pagetopbg">
|
||||
<img src="__IMAGES__/nas_help_banner.jpg" class="hpbgimg" />
|
||||
<div class='nhlp-search'>
|
||||
<input class="nhlp-ipt" id="search-input" placeholder="{:lang('topic_nas_help.search_input_placeholder')}" autocomplete="off" />
|
||||
<img src="__IMAGES__/nas_help_search.png" class="searchimg" />
|
||||
</div>
|
||||
<!-- 下拉搜索框 -->
|
||||
<div class="dropdown" id="dropdown">
|
||||
<ul>
|
||||
<li>拿到产品后我该如何安装使用?</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 使用教程 -->
|
||||
{notempty name="article_categorys"}
|
||||
<div class="nhlppart1">
|
||||
<h1 class="helph1">{:lang('topic_nas_help.article_section_title')}</h1>
|
||||
<div class="nhlp-row">
|
||||
{volist name="article_categorys" id="vo" key="idx"}
|
||||
<div class="nhlpit {gt name='idx' value='6'}nhlpit-w{/gt}">
|
||||
<div class="nhlptl">
|
||||
<img src="{$vo.icon}" class="bhlpicoimg" />{$vo.name}
|
||||
</div>
|
||||
<div class="nhlp-tx-list">
|
||||
{volist name="vo.article" id="va" key="index"}
|
||||
<a class="txrow" href="{:url('/index/topic/nas/help_detail', ['id' => $va.id])}">
|
||||
<div class="nhlp-point"></div>
|
||||
<span class="nhlpsp">{$va.title}</span>
|
||||
<span class="narhelpgoimg">
|
||||
<img src="__IMAGES__/nas-jt.png" />
|
||||
</span>
|
||||
</a>
|
||||
{egt name="index" value="3"}
|
||||
<div class="ckgdbt">{:lang('topic_nas_help.view_more')} ></div>
|
||||
{/egt}
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 联系我们 -->
|
||||
{notempty name="contacts"}
|
||||
<div class="nhlp-lxwm">
|
||||
<h1 class="lxwmtitle">{:lang('topic_nas_help.contact_section_title')}</h1>
|
||||
<div class="nhlp-row">
|
||||
{volist name="contacts" id="co" key="idx" offset="0" length="3"}
|
||||
<a class="nhlplxwmit nhlplxwmit-w1" {notempty name="co.link"}href="{$co.link}"{/notempty} {eq name="idx" value="3"}style="margin-right: 0;"{/eq}>
|
||||
<img src="{$co.image}" class="lximg" />
|
||||
{if condition="!empty($co.desc) && str_contains($co.desc, '<img')"}
|
||||
<img src="{:get_path_from_img_tag($co.desc)}" class="lxewmimg">
|
||||
<span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
|
||||
{else/}
|
||||
<span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
|
||||
<span class="t2" {:style(['color'=>$co.desc_txt_color])}>{$co.desc|raw}</span>
|
||||
{/if}
|
||||
</a>
|
||||
{/volist}
|
||||
{volist name="contacts" id="co" key="idx" offset="3"}
|
||||
<a class="nhlplxwmit nhlplxwmit-w2" {notempty name="co.link"}href="{$co.link}"{/notempty} {eq name="idx%4" value="0"}style="margin-right: 0;"{/eq}>
|
||||
<img src="{$co.image}" class="lximg" />
|
||||
{if condition="!empty($co.desc) && str_contains($co.desc, '<img')"}
|
||||
<img src="{:get_path_from_img_tag($co.desc)}" class="lxewmimg">
|
||||
<span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
|
||||
{else/}
|
||||
<span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
|
||||
<span class="t2" {:style(['color'=>$co.desc_txt_color])}>{$co.desc|raw}</span>
|
||||
{/if}
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
{block name="script"}
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$(document).ready(function () {
|
||||
// 监听输入框内容变化
|
||||
var timeout = null;
|
||||
$('#search-input').on('focus input', function () {
|
||||
clearTimeout(timeout);
|
||||
var _this = this;
|
||||
timeout = setTimeout(function () {
|
||||
var keywords = $(_this).val();
|
||||
if (keywords == '') {
|
||||
$('#dropdown').hide().html('');
|
||||
return;
|
||||
}
|
||||
$.ajax({
|
||||
url: "{:url('/index/topic/nas/help_search')}",
|
||||
type: 'POST',
|
||||
data: {
|
||||
keywords: keywords
|
||||
},
|
||||
dataType: 'JSON',
|
||||
success: function (r) {
|
||||
var html = '';
|
||||
if (r.code == 0) {
|
||||
html = '<ul>'
|
||||
$.each(r.data, function (k, v) {
|
||||
html += '<li><a href="{:url(\'/index/topic/nas/help_detail\')}?id=' + v.id + '">' + v.title + '</a></li>'
|
||||
})
|
||||
html += '</ul>'
|
||||
}
|
||||
$('#dropdown').show().html(html);
|
||||
}
|
||||
})
|
||||
}, 300);
|
||||
})
|
||||
$(document).on('click', function (e) {
|
||||
var target = $(e.target);
|
||||
if (!target.closest('.nhlp-search').length) {
|
||||
$('#dropdown').hide();
|
||||
}
|
||||
});
|
||||
$('.nhlplxwmit:not(:first)').hover(function () {
|
||||
// 当鼠标移入时，显示.lxewmimg 并隐藏.lximg
|
||||
$(this).find('.lxewmimg').show();
|
||||
$(this).find('.lximg').hide();
|
||||
}, function () {
|
||||
// 当鼠标移出时，隐藏.lxewmimg 并显示.lximg
|
||||
$(this).find('.lxewmimg').hide();
|
||||
$(this).find('.lximg').show();
|
||||
});
|
||||
});
|
||||
})
|
||||
</script>
|
||||
{/block}
|
||||
130
app/index/view/topic_nas/help_detail.html
Normal file
130
app/index/view/topic_nas/help_detail.html
Normal file
@@ -0,0 +1,130 @@
|
||||
{extend name="public/nas_base" /}
|
||||
{block name="title"}
|
||||
{notempty name="article.seo_title"}<title>{$article.seo_title}</title>{else /}{__BLOCK__}{/notempty}
|
||||
{/block}
|
||||
{block name="seo"}
|
||||
{notempty name="article.seo_keywords"}
|
||||
<meta name="keywords" content="{$article.seo_keywords}" />
|
||||
<meta name="description" content="{$article.seo_desc}" />
|
||||
{else /}
|
||||
{__BLOCK__}
|
||||
{/notempty}
|
||||
{/block}
|
||||
{block name="style"}
|
||||
<link rel="stylesheet" href="__CSS__/topic_nas_help-detail.css"/>
|
||||
{/block}
|
||||
{block name="main"}
|
||||
<div class="orico_Page_index">
|
||||
<div class="narshelpdetailPc">
|
||||
<!-- top 搜索-->
|
||||
<div class="narsssmain">
|
||||
<div class="ml">{:lang('topic_nas_help.module_title')}/{:lang('topic_nas_help.article_section_title')}</div>
|
||||
<div class="nars-hlp-search">
|
||||
<input id="search-input" placeholder="{:lang('topic_nas_help.search_input_placeholder')}" autocomplete="off" />
|
||||
<img src="__IMAGES__/nas_help_detail_search.png" class="ssimg">
|
||||
</div>
|
||||
<!-- 下拉搜索框 -->
|
||||
<div class="dropdown" id="dropdown"></div>
|
||||
</div>
|
||||
<!-- 目录-文章详情-锚点定位--->
|
||||
<div class="nars-help-content">
|
||||
<!--目录 -->
|
||||
<div class="nars-hlpdt-ml">
|
||||
{notempty name="article_categorys"}
|
||||
<div class="nav-tree">
|
||||
{volist name="article_categorys" id="ac"}
|
||||
<div class="category">
|
||||
<div class="category-title">
|
||||
<div class="arrow"><img src="__IMAGES__/nas-jt.png" class="arrow" /></div>
|
||||
<span>{$ac.name}</span>
|
||||
</div>
|
||||
<ul class="sub-list">
|
||||
{volist name="ac.article" id="ar"}
|
||||
<li><a href="{:url('/index/topic/nas/help_detail', ['id' => $ar.id])}" style="padding-top: 6px;">{$ar.title}</a></li>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
</div>
|
||||
<!--文章详情 -->
|
||||
<div class="nars-hlpdt-mm" id="rendered-content">{$article.content|raw|default=''}</div>
|
||||
<!--锚点定位 -->
|
||||
<div class="nars-hlpdt-mr">
|
||||
<div id="title-list">
|
||||
<h2 class="tt">{:lang('topic_nas_help.content')}</h2>
|
||||
<ul></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
{block name="script"}
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$('.category-title').click(function () {
|
||||
$(this).next('.sub-list').slideToggle();
|
||||
$(this).find('.arrow').toggleClass('rotate');
|
||||
});
|
||||
// 搜索
|
||||
$(document).on('click', function (e) {
|
||||
var target = $(e.target);
|
||||
if (!target.closest('.nhlp-search').length) {
|
||||
$('#dropdown').hide();
|
||||
}
|
||||
});
|
||||
var timeout = null;
|
||||
$('.nars-hlp-search input').on('focus input', function () {
|
||||
clearTimeout(timeout);
|
||||
var _this = this;
|
||||
timeout = setTimeout(function () {
|
||||
var keywords = $(_this).val();
|
||||
if (keywords == '') {
|
||||
$('#dropdown').hide().html('');
|
||||
return;
|
||||
}
|
||||
$.ajax({
|
||||
url: "{:url('/index/topic/nas/help_search')}",
|
||||
type: 'POST',
|
||||
data: {
|
||||
keywords: keywords
|
||||
},
|
||||
dataType: 'JSON',
|
||||
success: function (r) {
|
||||
var html = '';
|
||||
if (r.code == 0) {
|
||||
html = '<ul>'
|
||||
$.each(r.data, function (k, v) {
|
||||
html +=
|
||||
'<li><a href="{:url(\'/index/topic/nas/help_detail\')}?id=' + v.id + '">' + v.title + '</a></li>'
|
||||
})
|
||||
html += '</ul>'
|
||||
}
|
||||
$('#dropdown').show().html(html);
|
||||
}
|
||||
})
|
||||
}, 300);
|
||||
})
|
||||
// 内容
|
||||
// 清空标题列表
|
||||
$("#title-list ul").empty();
|
||||
// 提取 h1 标题
|
||||
var h1Titles = $("#rendered-content").find("h3");
|
||||
h1Titles.each(function (index) {
|
||||
var title = $(this);
|
||||
var titleText = title.text();
|
||||
var titleId = "title-" + index;
|
||||
title.attr("id", titleId);
|
||||
var listItem = $("<li>");
|
||||
var link = $("<a>", {
|
||||
href: "#" + titleId,
|
||||
text: titleText
|
||||
});
|
||||
listItem.append(link);
|
||||
$("#title-list ul").append(listItem);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{/block}
|
||||
248
public/static/index/css/topic_nas_help-detail.css
Executable file
248
public/static/index/css/topic_nas_help-detail.css
Executable file
@@ -0,0 +1,248 @@
|
||||
.narshelpdetailPc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .narsssmain {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 21px 0;
|
||||
top: 0;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .narsssmain .dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 124px;
|
||||
left: 0;
|
||||
width: 435px;
|
||||
border-top: none;
|
||||
background-color: #fff;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
margin: 0 auto;
|
||||
right: 0;
|
||||
max-height: 18.75rem;
|
||||
min-height: 3.125rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .narsssmain .dropdown ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .narsssmain .dropdown ul li {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .narsssmain .dropdown ul li:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .narsssmain .ml {
|
||||
font-size: 14px;
|
||||
padding-left: 25px;
|
||||
padding-top: 37px;
|
||||
padding-bottom: 31px;
|
||||
color: #8f9099;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .narsssmain .nars-hlp-search {
|
||||
width: 440px;
|
||||
height: 42px;
|
||||
border-radius: 1.3125rem;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: #8f9099;
|
||||
border: 1px solid #cdcedb;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .narsssmain .nars-hlp-search .ssimg {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .narsssmain .nars-hlp-search input {
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
padding: 0 15px;
|
||||
outline: none;
|
||||
flex: 1;
|
||||
margin-right: 2%;
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .narsssmain .nars-hlp-search input::placeholder {
|
||||
color: #8f9099;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml {
|
||||
width: 252px;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .nav-tree {
|
||||
max-height: 800px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .category {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .category-title {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
color: #1f2635;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .arrow {
|
||||
margin-right: 2px;
|
||||
transform: rotate(0deg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .arrow .nars-jt {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .rotate {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list {
|
||||
display: none;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list li a {
|
||||
width: fit-content;
|
||||
display: block;
|
||||
margin: 0 10px;
|
||||
padding-top: 22px;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
margin-left: 41px;
|
||||
font-size: 12px;
|
||||
color: #8f9099;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list li:first a {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list li a:hover,
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-ml .sub-list li a.active {
|
||||
color: #1f2635;
|
||||
border-bottom: 1px solid #1f2635;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-mm {
|
||||
padding: 32px 150px;
|
||||
max-height: 920px;
|
||||
min-height: 700px;
|
||||
height: auto;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* .narshelpdetailPc .nars-help-content .nars-hlpdt-mm img{*/
|
||||
/* width: -webkit-fill-available;*/
|
||||
/*}*/
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-mr {
|
||||
width: 252px;
|
||||
overflow-y: auto;
|
||||
border-left: 1px solid #ccc;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list {
|
||||
padding: 0 20px;
|
||||
float: right;
|
||||
max-height: 800px;
|
||||
min-height: 700px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list .tt {
|
||||
font-size: 14px;
|
||||
padding-top: 33px;
|
||||
padding-bottom: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul li {
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul li a {
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #1f2635;
|
||||
}
|
||||
|
||||
.narshelpdetailPc .nars-help-content .nars-hlpdt-mr #title-list ul li a:hover {
|
||||
color: #1f2635;
|
||||
border-bottom: 1px solid #1f2635;
|
||||
}
|
||||
|
||||
.nav-tree .category:nth-child(1) .category-title {
|
||||
padding-top: 33px;
|
||||
}
|
||||
.orico_footer .fotter{
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
all: revert;
|
||||
/* 将所有属性设置为初始值 */
|
||||
/* 或者使用 all: revert; 恢复到浏览器默认样式，但该属性兼容性不如 initial */
|
||||
}
|
||||
286
public/static/index/css/topic_nas_help.css
Executable file
286
public/static/index/css/topic_nas_help.css
Executable file
@@ -0,0 +1,286 @@
|
||||
.narshelpCenterPc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 下拉搜索框样式 */
|
||||
/* 下拉搜索框中的建议项样式 */
|
||||
}
|
||||
|
||||
.narhelpgoimg {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .narhelpgoimg img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .pagetopbg {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .pagetopbg .hpbgimg {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .pagetopbg .nhlp-search {
|
||||
width: 35%;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
background: #5299e1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
justify-content: space-between;
|
||||
border: 0.0625rem solid #fff;
|
||||
bottom: 15%;
|
||||
cursor: pointer;
|
||||
box-shadow: 2px 2px 100px #8d8d8d;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .pagetopbg .nhlp-search .nhlp-ipt {
|
||||
border: none;
|
||||
width: 86%;
|
||||
height: 48px;
|
||||
margin-left: 5%;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .pagetopbg .nhlp-search .searchimg {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .pagetopbg .nhlp-search input {
|
||||
border: none;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .pagetopbg .nhlp-search input::placeholder {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlppart1 {
|
||||
width: 74.6%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlppart1 .helph1 {
|
||||
margin: 0 auto;
|
||||
margin-top: 54px;
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlppart1 .nhlp-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 4.625rem;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit {
|
||||
width: 27.7%;
|
||||
padding: 2.25rem;
|
||||
background: #fafafa;
|
||||
border-radius: 8px;
|
||||
color: #202734;
|
||||
font-size: 1rem;
|
||||
margin-right: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit .nhlptl {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit .nhlptl .bhlpicoimg {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit .nhlp-tx-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit .nhlp-tx-list .txrow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit .nhlp-tx-list .txrow .nhlp-point {
|
||||
width: 0.3125rem;
|
||||
height: 0.3125rem;
|
||||
background: #202734;
|
||||
border-radius: 0.1875rem;
|
||||
margin: 0 0.625rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit .nhlp-tx-list .txrow .nhlpsp {
|
||||
flex: 1;
|
||||
color: #1f2635;
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
/* 不允许换行 */
|
||||
overflow: hidden;
|
||||
/* 超出部分隐藏 */
|
||||
text-overflow: ellipsis;
|
||||
/* 超出部分显示省略号 */
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit .nhlp-tx-list .ckgdbt {
|
||||
background: #fff;
|
||||
width: fit-content;
|
||||
color: #bfbfc4;
|
||||
font-size: 0.9375rem;
|
||||
border: 0.0625rem solid #bfbfc4;
|
||||
padding: 0.4375rem 1.125rem;
|
||||
margin-top: 1rem;
|
||||
cursor: pointer;
|
||||
border-radius: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit-w {
|
||||
width: 44.5%;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit-w:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlppart1 .nhlp-row .nhlpit:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .lxwmtitle {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 38px;
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlp-lxwm {
|
||||
width: 74.6%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlp-lxwm .nhlp-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 4.625rem;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlp-lxwm .nhlp-row .nhlplxwmit {
|
||||
background: #f9f9f9;
|
||||
width: 392px;
|
||||
height: 291px;
|
||||
margin-bottom: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlp-lxwm .nhlp-row .nhlplxwmit .lximg {
|
||||
width: 4.375rem;
|
||||
height: 4.375rem;
|
||||
margin-bottom: 2.125rem;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlp-lxwm .nhlp-row .nhlplxwmit .lxewmimg {
|
||||
width: 6.875rem;
|
||||
width: 6.875rem;
|
||||
margin-bottom: 1.25rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlp-lxwm .nhlp-row .nhlplxwmit .t1 {
|
||||
font-size: 1rem;
|
||||
padding-bottom: 0.375rem;
|
||||
color: #1f2635;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlp-lxwm .nhlp-row .nhlplxwmit .t2 {
|
||||
font-size: 0.75rem;
|
||||
color: #1f2635;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlp-lxwm .nhlp-row .nhlplxwmit-w1 {
|
||||
width: 32.7%;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .nhlp-lxwm .nhlp-row .nhlplxwmit-w2 {
|
||||
width: 24.3%;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 355px;
|
||||
left: 0;
|
||||
width: 35%;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
background-color: #fff;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
margin: 0 auto;
|
||||
right: 0;
|
||||
max-height: 18.75rem;
|
||||
min-height: 3.125rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .dropdown ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .dropdown ul li {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.narshelpCenterPc .dropdown ul li:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
BIN
public/static/index/images/nas-jt.png
Executable file
BIN
public/static/index/images/nas-jt.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 244 B |
BIN
public/static/index/images/nas_help_banner.jpg
Executable file
BIN
public/static/index/images/nas_help_banner.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
BIN
public/static/index/images/nas_help_detail_search.png
Executable file
BIN
public/static/index/images/nas_help_detail_search.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 769 B |
BIN
public/static/index/images/nas_help_search.png
Executable file
BIN
public/static/index/images/nas_help_search.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 817 B |
Reference in New Issue
Block a user