This commit is contained in:
2024-10-29 14:04:59 +08:00
commit 48bf3e6f33
2839 changed files with 762707 additions and 0 deletions

View File

@@ -0,0 +1,815 @@
<!DOCTYPE html>
<html>
<head>
<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">
/* 滚动条宽度 */
::-webkit-scrollbar {
width: 4px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 2px;
}
/* 滚动条滑块在滚动时 */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
/* 特定元素的滚动条样式(例如,类名为 .scrollable 的 div */
.scrollable::-webkit-scrollbar {
width: 5px;
}
.scrollable::-webkit-scrollbar-thumb {
background: #007bff;
}
.scrollable::-webkit-scrollbar-track {
background: #f8f9fa;
}
input:focus {
outline: none;
}
.narsjswdPag {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
overflow-y: auto;
background: #f5f5f5;
}
.narsjswdPag .nars-jswd-search {
width: 100%;
height: 22.5rem;
background-repeat: no-repeat;
background-image: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
}
.narsjswdPag .nars-jswd-search .narsjswd-searchdiv {
margin: 0 20.3125rem;
padding: 1.25rem 2rem;
width: 75rem;
background: #fff;
border-radius: 2rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.narsjswdPag .nars-jswd-search .narsjswd-searchdiv .nars-jswd-search-inpt {
font-size: 1rem;
border: none;
flex: 1;
}
.narsjswdPag .nars-jswd-search .narsjswd-searchdiv .narsjswd-searchico {
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
}
.narsjswdPag .narsjswd-content {
display: flex;
flex-direction: row;
justify-content: space-between;
justify-content: center;
margin-top: 3rem;
margin-bottom: 2rem;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left {
width: 17.5rem;
height: 58.5625rem;
background: #fff;
margin-right: 1.5rem;
border-radius: 0.375rem;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left .jswdleft-ct {
padding: 1rem;
display: flex;
flex-direction: column;
height: 58.5625rem;
/*overflow: hidden;*/
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 {
width: 15.5rem;
min-height: 3rem;
/*overflow: hidden;*/
overflow-y: auto;
border: 1px solid #e8e8e9;
border-bottom: none;
cursor: pointer;
margin-bottom: 0.625rem;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .thetitle {
width: 100%;
height: 3rem;
display: flex;
flex-direction: row;
justify-content: space-between;
color: #262626;
font-size: 1rem;
align-items: center;
border-bottom: 1px solid #e8e8e9;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .thetitle .title {
margin-left: 1.5rem;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .thetitle .narsjswd-upico {
width: 0.875rem;
height: 0.875rem;
margin-right: 0.875rem;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 {
min-height: 3rem;
border-bottom: 1px solid #e8e8e9;
padding-left: 1rem;
padding-right: 1rem;
display: none;
flex-direction: column;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 .jswdleft-nav2-ct {
width: 100%;
height: auto;
cursor: pointer;
border-bottom: 1px solid #e8e8e9;
padding: 1rem 0;
display: flex;
flex-direction: column;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 .jswdleft-nav2-ct .nav2-ctmain {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 .jswdleft-nav2-ct .nav2-ctmain .thenav2title {
display: flex;
flex-direction: row;
align-items: center;
font-size: 0.875rem;
color: #262626;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 .jswdleft-nav2-ct .nav2-ctmain .narsjswd-openico {
width: 0.75rem;
height: 0.75rem;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 .jswdleft-nav2-ct .narsjswdleft-nav-3 {
padding: 0 1.5rem;
display: none;
flex-direction: column;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 .jswdleft-nav2-ct .narsjswdleft-nav-3 .jswdleft-nav3-item {
display: flex;
flex-direction: row;
align-items: center;
font-size: 0.875rem;
color: #717171;
padding-top: 0.875rem;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 .jswdleft-nav2-ct:last-child {
border-bottom: none;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .jswdnav-checkbox {
width: 1rem;
height: 1rem;
border-radius: 2px 2px 2px 2px;
border: 1px solid #9f9f9f;
margin-right: 0.5rem;
margin-left: 0.5rem;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1:last-child {
border-bottom: 1px solid #e8e8e9;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-right {
width: 71rem;
min-height: 48.5625rem;
border-radius: 0.375rem;
background: #fff;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdInfo {
margin: 2.8125rem 3rem;
color: #333335;
font-size: 1rem;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdInfo .jswdtitle {
font-size: 1.5rem;
/*border-bottom: 1px solid #E6E6E6;*/
line-height: 3.125rem;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdInfo .jswd-content {
padding-bottom: 1.5rem;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdInfo p {
line-height: 1.75rem;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist {
height: 100%;
overflow-y: auto;
margin: 1.8125rem 2.5rem;
display: flex;
flex-direction: column;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item {
width: 100%;
display: flex;
flex-direction: column;
padding-bottom: 1.5625rem;
border-bottom: 1px solid #E6E6E6;
margin-bottom: 1.5rem;
cursor: pointer;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item .jswditem-title {
font-size: 1.125rem;
line-height: 1.75rem;
padding-bottom: 0.5rem;
color: #1d1d1f;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item .jswditem-dec {
width: 100%;
color: #333335;
font-size: 0.875rem;
line-height: 1.375rem;
padding-bottom: 1.5625rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item .jswditem-tags {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item .jswditem-tags .jswdtag {
border-radius: 2px;
border: 1px solid #00C5DD;
font-size: 0.75rem;
padding: 0.3125rem 0.625rem;
margin-right: 0.5rem;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item .jswditem-tags .jswd-tp1 {
color: #00C5DD;
border: 1px solid #00C5DD;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item .jswditem-tags .jswd-tp2 {
color: #056EFC;
border: 1px solid #056EFC;
}
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item .jswditem-tags .jswd-tp3 {
color: #01A3FC;
border: 1px solid #01A3FC;
}
.narsjswdPag .naersjswd-fy {
display: flex;
justify-content: center;
height: 2rem;
align-items: center;
flex-direction: row;
margin-top: 2rem;
margin-bottom: 10rem;
}
.narsjswdPag .naersjswd-fy .jsed-left-bt {
width: 1.875rem;
height: 1.875rem;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.narsjswdPag .naersjswd-fy .jsed-left-bt .narsfy-ico {
width: 0.4375rem;
height: 0.75rem;
}
.narsjswdPag .naersjswd-fy .jswd-nums {
margin: 0 0.625rem;
width: auto;
height: 1.875rem;
display: flex;
flex-direction: row;
}
.narsjswdPag .naersjswd-fy .jswd-nums .jswdnumit {
cursor: pointer;
width: 1.875rem;
height: 1.875rem;
background: #fff;
color: #6E6E73;
font-size: 0.875rem;
display: flex;
justify-content: center;
align-items: center;
margin-right: 0.625rem;
}
.narsjswdPag .naersjswd-fy .jswd-nums .jswdnumit:last-child {
margin-right: 0;
}
.narsjswdPag .naersjswd-fy .jswd-nums .jswdnumit-active {
background: #004BFA;
color: #fff;
}
.narsjswdPag .naersjswd-fy .swdfy-jump {
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
color: #6E6E73;
font-size: 0.875rem;
margin-left: 2rem;
}
.narsjswdPag .naersjswd-fy .swdfy-jump .jumpinput {
width: 2.5rem;
height: 1.875rem;
background: #fff;
padding: 0 0.625rem;
margin: 0 8px;
text-align: center;
border: none;
}
.empty-data {
width: 5rem;
margin-bottom: 15px;
}
</style>
</head>
<body>
<!-- 顶部导航 -->
{include file='include/top-header-nas'/}
<!-- 技术文档-->
<div class="narsjswdPag">
<!--顶部搜索 -->
<div class="nars-jswd-search"
style="background: url(__PUBLIC__/web/images/nas/guide/nars-jswd-bg.png);background-repeat: no-repeat;background-size: 100%">
<div class="narsjswd-searchdiv">
<input class="nars-jswd-search-inpt" name="keywords" autocomplete="off" placeholder="搜索帮助" />
<img src="__PUBLIC__/web/images/nas/guide/narsjswd-searchico.png" class="narsjswd-searchico" />
</div>
</div>
<!--页面内容(左边下拉菜单 右边内容)-->
<div class="narsjswd-content">
<!-- 下拉菜单 -->
<div class="narsjswd-ct-left">
<div class="jswdleft-ct">
<!--一级菜单-->
<div class="narsjswdleft-nav-1" style="max-height: 346px;">
<div class="thetitle themodel">
<span class="title">型号</span>
<img src="__PUBLIC__/web/images/nas/guide/narsjswd-upico.png" class="narsjswd-upico" />
</div>
<!-- 二级菜单 -->
<div class="narsjswdleft-nav-2">
{volist name='product_series' id='vo'}
<div class="jswdleft-nav2-ct">
<div class="nav2-ctmain">
<div class="thenav2title">
<input type="checkbox" class="jswdnav-checkbox" name="series" autocomplete="off" value="{$vo.id}"/>
<span>{$vo.name}</span>
</div>
</div>
</div>
{/volist}
</div>
</div>
<!--一级菜单-->
<div class="narsjswdleft-nav-1" style="max-height: 346px;">
<div class="thetitle">
<span class="title">设备</span>
<img src="__PUBLIC__/web/images/nas/guide/narsjswd-upico.png" class="narsjswd-upico" />
</div>
<!-- 二级菜单 -->
<div class="narsjswdleft-nav-2" style="display:block;">
{volist name='category' id='vo' key="key"}
<div class="jswdleft-nav2-ct">
<div class="nav2-ctmain">
<div class="thenav2title">
<input type="checkbox" class="jswdnav-checkbox" name="device" autocomplete="off" data-index="{$key-1}" value="{$vo.id}" {if condition="$vo.id == 38"}checked{/if}/>
<span>{$vo.name}</span>
</div>
</div>
</div>
{/volist}
</div>
</div>
<!--一级菜单-->
<div class="narsjswdleft-nav-1" >
<div class="thetitle">
<span class="title">分类</span>
<img src="__PUBLIC__/web/images/nas/guide/narsjswd-upico.png" class="narsjswd-upico" />
</div>
<!--二级菜单-->
<div class="narsjswdleft-nav-2 category-nav" style="display:block;">
<!--二级菜单子级-->
{if condition='!empty($category[0]) && !empty($category[0]["items"])'}
{volist name='category[0]["items"]' id='vo'}
<div class="jswdleft-nav2-ct">
<div class="nav2-ctmain">
<div class="thenav2title">
<input type="checkbox" class="jswdnav-checkbox" name="category" autocomplete="off" value="{$vo.id}">
<span>{$vo.name}</span>
</div>
{if condition="!empty($vo.items)"}
<img src="__PUBLIC__/web/images/nas/guide/narsjswd-closeico.png" class="narsjswd-openico" />
{/if}
</div>
<!-- 三级菜单-->
<div class="narsjswdleft-nav-3">
{if condition='!empty($vo["items"])'}
{volist name='vo["items"]' id='it'}
<div class="jswdleft-nav3-item">
<input type="checkbox" class="jswdnav-checkbox" name="category" autocomplete="off" value="{$it.id}">
<span>{$it.name}</span>
</div>
{/volist}
{/if}
</div>
</div>
{/volist}
{/if}
</div>
</div>
</div>
</div>
<!-- 右边内容-->
<div class="narsjswd-ct-right">
<!-- 文章详情(如果要显示,就隐藏分页--把display:none 改为 block 或者jq自己设置隐藏) -->
<div class="narsjswdInfo" style="display: none;">
<div style="display:flex;flex-direction:row;justify-content:space-between;border-bottom: 1px solid #E6E6E6; margin-bottom: 1.5rem;padding-bottom: 0.625rem;">
<h2 class="jswdtitle"></h2>
<span class="back" style="font-size:14px;color:#ccc;cursor: pointer;">返回</span>
</div>
<div class="jswdcontent"></div>
</div>
<!-- 列表 -->
<div class="narsjswdlist">
{volist name='article' id='vo' key='key'}
<div class="narsjswdlist-item">
<h3 class="jswditem-title">{$vo.name}</h3>
<span class="jswditem-dec">{$vo.description}</span>
<div class="jswditem-tags">
{volist name='vo.product_series' id="series" key="k"}
<?php $t = $key % 3;?>
<div class="jswdtag jswd-tp{$t == 0 ? 3 : $t}">{$series}</div>
{/volist}
</div>
</div>
{/volist}
</div>
</div>
</div>
<!--分页 -->
<div class="naersjswd-fy"></div>
</div>
{include file='include/bottom2023'/}
</body>
<script type="text/javascript">
$(function () {
function buildPrevElements($this) {
var prev = $('<a href="javascript:void(0);" class="jsed-left-bt prev-page"></a>')
if ($this.options.current_page == 1) {
prev.append('<img src="__PUBLIC__/web/images/nas/guide/narsfyleft-disabled.png" class="narsfy-ico" />')
} else {
prev.append('<img src="__PUBLIC__/web/images/nas/guide/narsfyleft.png" class="narsfy-ico" />')
}
prev.unbind('click.prev').bind('click.prev', function () {
if ($this.options.current_page > 1) {
$this.options.current_page -= 1
$this.options.paginate($this.options.current_page)
}
})
return prev
}
function buildNextElements($this) {
var next = $('<a href="javascript:void(0);" class="jsed-left-bt next-page"></a>')
if ($this.options.current_page == $this.options.total_page) {
next.append('<img src="__PUBLIC__/web/images/nas/guide/narsfyright-disabled.png" class="narsfy-ico" />')
} else {
next.append('<img src="__PUBLIC__/web/images/nas/guide/narsfyright.png" class="narsfy-ico" />')
}
next.unbind('click.next').bind('click.next', function () {
if ($this.options.current_page < $this.options.total_page) {
$this.options.current_page += 1
$this.options.paginate($this.options.current_page)
}
})
return next
}
function buildLinksElements($this) {
var side = 3
var $window = side * 2
var getLinks = function (start, end) {
var links = $('<div></div>')
for (var page = start; page <= end; page++) {
var link = $('<a href="javascript:void(0);" class="jswdnumit">' + page + '</a>')
link.removeClass('jswdnumit-active')
if ($this.options.current_page == page) {
link.addClass('jswdnumit-active')
}
links.append(link)
}
return links.children()
}
var getDots = function () {
return $('<a href="javascript:void(0)" class="jswdnumit">...</a>')
}
var linkWrap = $('<div class="jswd-nums"></div')
if ($this.options.total_page < $window + 6) {
linkWrap.append(getLinks(1, $this.options.total_page))
} else if ($this.options.current_page <= $window) {
linkWrap.append(getLinks(1, $window + 2))
linkWrap.append(getDots())
linkWrap.append(getLinks($this.options.total_page - 1, $this.options.total_page))
} else if ($this.options.current_page > ($this.options.total_page - $window)) {
linkWrap.append(getLinks(1, 2))
linkWrap.append(getDots())
linkWrap.append(getLinks($this.options.total_page - ($window + 2), $this.options.total_page))
} else {
linkWrap.append(getLinks(1, 2))
linkWrap.append(getDots())
linkWrap.append(getLinks($this.options.current_page - side, $this.options.current_page + side))
linkWrap.append(getDots())
linkWrap.append(getLinks($this.options.total_page - 1, $this.options.total_page))
}
linkWrap.find('a').unbind('click.link').bind('click.link', function (event) {
var text = $(event.currentTarget).text()
if (text != '...') {
var page = parseInt(text)
if ($this.options.current_page != page) {
$this.options.current_page = page
$this.options.paginate($this.options.current_page)
}
}
})
return linkWrap
}
function buildCustomJumpForm($this) {
var jump = $('<div class="swdfy-jump">'
+ '<span>跳转</span>'
+ '<input class="jumpinput" type="text" value="' + $this.options.current_page + '" />'
+ '<span>页</span>'
+ '</div>'
)
jump.find('input.jumpinput').unbind('change.jump').bind('change.jump', function (event) {
var page = parseInt($(event.currentTarget).val())
if (Number.isNaN(page) || page == 0) {
page = 1
}
if (page > $this.options.total_page) {
page = $this.options.total_page
}
if ($this.options.current_page != page) {
$this.options.current_page = page
$this.options.paginate($this.options.current_page)
}
$(event.currentTarget).val($this.options.current_page)
})
return jump
}
$.fn.extend({
options: {
current_page: 1,
total_page: 1,
paginate: function (page) { }
},
paginator: function (options) {
var $this = $(this)
$this.options = {
current_page: options.current_page,
total_page: options.total_page,
paginate: function (page) {
options.paginate(page)
$this.data('page', page)
$this.find('a.prev-page').replaceWith(buildPrevElements($this))
$this.find('a.next-page').replaceWith(buildNextElements($this))
$this.find('div.jswd-nums').replaceWith(buildLinksElements($this))
}
}
$this.empty()
if ($this.options.total_page > 1) {
$this.append(buildPrevElements($this))
$this.append(buildLinksElements($this))
$this.append(buildNextElements($this))
$this.append(buildCustomJumpForm($this))
}
}
})
})
</script>
<script type="text/javascript">
$(document).ready(function() {
// 隐藏所有二级和三级菜单
//$('.narsjswdleft-nav-2, .narsjswdleft-nav-3').hide();
// 绑定一级菜单的点击事件
$('.narsjswdleft-nav-1 .themodel').click(function() {
// 收起所有其他一级菜单下的二级和三级菜单
/*$('.narsjswdleft-nav-1').not($(this).parent()).each(function() {
$(this).find('.narsjswdleft-nav-2, .narsjswdleft-nav-3').slideUp('slow');
});*/
// 切换当前一级菜单下的二级菜单的显示状态
$(this).next('.narsjswdleft-nav-2').slideToggle('slow');
});
// 绑定二级菜单的点击事件
$('.jswdleft-nav2-ct .nav2-ctmain').click(function() {
// 收起所有其他一级菜单下的二级和三级菜单
$('.jswdleft-nav2-ct').not($(this).parent()).each(function() {
$(this).find('.narsjswdleft-nav-3').slideUp('slow');
});
// 切换当前一级菜单下的二级菜单的显示状态
$(this).next('.narsjswdleft-nav-2').slideToggle('slow');
// 切换当前二级菜单下的三级菜单的显示状态
$(this).parent().find('.narsjswdleft-nav-3').slideToggle('slow');
});
// 阻止点击三级菜单时触发二级菜单的点击事件(如果需要的话)
/*$('.narsjswdleft-nav-3').click(function(e) {
e.stopPropagation();
});*/
// 返回列表
$('.narsjswdInfo .back').click(function() {
$('.naersjswd-fy').show()
$('.narsjswdlist').show()
$('.narsjswdInfo').hide()
})
// 查看文章详细
var articles = {$article|json_encode};
$('.narsjswd-ct-right').delegate('.narsjswdlist .narsjswdlist-item', 'click', function() {
var index = $(this).index()
if (articles.length > 0) {
$('.narsjswdInfo .jswdtitle').html(articles[index].name)
$('.narsjswdInfo .jswdcontent').html(articles[index].content)
// 显示文章详细,隐藏列表与分布栏
$('.naersjswd-fy').hide()
$('.narsjswdlist').hide()
$('.narsjswdInfo').show()
}
})
// 搜索
$('.nars-jswd-search-inpt').keyup(function(event){
if (event.originalEvent.keyCode == 13) {
// 显示列表与分布栏,隐藏文章详细
$('.naersjswd-fy').show()
$('.narsjswdlist').show()
$('.narsjswdInfo').hide()
// 加载列表数据
loadArticleData({
series: $('[name="series"]:checked').val(),
device: $('[name="device"]:checked').val(),
category: $('[name="category"]:checked').val(),
keywords: $(this).val(),
page: 1
}, true)
}
})
// 文章分页
$('.naersjswd-fy').paginator($.extend({}, {$page|json_encode}, {
paginate: function(page) {
loadArticleData({
series: $('[name="series"]:checked').val(),
device: $('[name="device"]:checked').val(),
category: $('[name="category"]:checked').val(),
page: page
})
}
}))
// 分类选择
$('div.jswdleft-ct').delegate('input', 'change', function(event) {
var target = $(event.currentTarget)
target.get(0).checked = !!target.get(0).checked
$('div.jswdleft-ct').find('input[name="' + target.attr('name') + '"]').each(function(i, el) {
if (target.get(0) != el) {
$(el).get(0).checked = false
}
})
if (target.attr('name') == 'device') {
var category = $('<div class="narsjswdleft-nav-2 category-nav" style="display:block;"></div>')
$.each(({$category|json_encode})[target.data('index')]['items'], function(i, it) {
var lv2 = $('<div class="jswdleft-nav2-ct"></div>')
var lv2Wrap = $('<div class="nav2-ctmain">'
+ '<div class="thenav2title">'
+ '<input type="checkbox" class="jswdnav-checkbox" name="category" autocomplete="off" value="' + it.id + '">'
+ '<span>' + it.name + '</span>'
+ '</div>'
+'</div>')
if (it.items && it.items.length > 0) {
lv2Wrap.append($('<img src="__PUBLIC__/web/images/nas/guide/narsjswd-closeico.png" class="narsjswd-openico" />'))
}
lv2.append(lv2Wrap)
if (it.items && it.items.length > 0) {
var lv3 = $('<div class="narsjswdleft-nav-3"></div>')
$.each(it.items, function(k, v) {
lv3.append($('<div class="jswdleft-nav3-item">'
+ '<input type="checkbox" class="jswdnav-checkbox" name="category" autocomplete="off" value="' + v.id + '">'
+ '<span>' + v.name + '</span>'
+'</div>'))
})
lv2.append(lv3)
}
category.append(lv2)
})
$('div.narsjswdleft-nav-2.category-nav').replaceWith(category)
}
// 显示列表与分布栏,隐藏文章详细
$('.naersjswd-fy').show()
$('.narsjswdlist').show()
$('.narsjswdInfo').hide()
// 加载列表数据
loadArticleData({
series: $('[name="series"]:checked').val(),
device: $('[name="device"]:checked').val(),
category: $('[name="category"]:checked').val(),
page: 1
}, true)
})
function loadArticleData(data, rebuildPaginator) {
$.ajax({
url: '{:url("index/tops_nas/guide")}',
type: 'GET',
data: data,
dataType: 'JSON',
async: true,
beforeSend: function() {
$('div.narsjswdlist').empty()
$('div.narsjswdlist').html('<div style="text-align: center; padding-top: 10rem;">正在加载中......</div>')
},
success: function(r) {
if (r.code == 0) {
articles = r.data.article
var list = $('<div class="narsjswdlist"></div>')
if (r.data.page.total_size == 0) {
list.append($(
'<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;with:100%;height:100%"><img class="empty-data" src="__PUBLIC__/web/images/nas/guide/narspc-zwsj.png" /><span style="font-size:16px;color:#cdcdcd">暂无数据</span></div>'
))
} else {
for (var i=0; i<r.data.article.length; i++) {
var item = $('<div class="narsjswdlist-item">'
+ '<h3 class="jswditem-title">' + r.data.article[i].name + '</h3>'
+ '<span class="jswditem-dec">' + r.data.article[i].description + '</span>'
+ '<div class="jswditem-tags"></div>'
+'</div>')
var series = r.data.article[i].product_series
if (series.length > 0) {
for (var k=0; k<series.length; k++) {
var t = (k+1)%3;
item.find('div.jswditem-tags').append($('<div class="jswdtag jswd-tp' + (t == 0 ? 3 : t) + '">' + series[k] + '</div>'))
}
}
list.append(item)
}
}
$('div.narsjswdlist').replaceWith(list)
if (rebuildPaginator) {
$('.naersjswd-fy').paginator({
current_page: r.data.page.current_page,
total_page: r.data.page.total_page,
paginate: function(page) {
loadArticleData({
series: $('[name="series"]:checked').val(),
device: $('[name="device"]:checked').val(),
category: $('[name="category"]:checked').val(),
page: page
})
}
})
}
}
}
})
}
});
</script>
</html>