init
This commit is contained in:
36
app/index/view/tops_nas/beta.phtml
Executable file
36
app/index/view/tops_nas/beta.phtml
Executable file
@@ -0,0 +1,36 @@
|
||||
<!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/bottom2023'/}
|
||||
</body>
|
||||
</html>
|
||||
365
app/index/view/tops_nas/cooperation.phtml
Executable file
365
app/index/view/tops_nas/cooperation.phtml
Executable file
@@ -0,0 +1,365 @@
|
||||
<!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">
|
||||
.narshzhbPage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-banner {
|
||||
width: 100%;
|
||||
height: 35rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #3e3a39;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-banner .narshzhb-banner-content {
|
||||
min-width: 1200px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 12.75rem;
|
||||
margin-bottom: 4.25rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-banner .narshzhb-banner-content .t1 {
|
||||
font-size: 1.875rem;
|
||||
padding-bottom: 0.8rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-banner .narshzhb-banner-content h2 {
|
||||
font-size: 3.125rem;
|
||||
line-height: 3.75rem;
|
||||
margin-bottom: 8.6875rem;
|
||||
color: #3e3a39;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-banner .narshzhb-banner-content .narshzhb-banner-btct {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
grid-row: 11.5rem;
|
||||
color: #3e3a39;
|
||||
font-size: 1rem;
|
||||
line-height: 1.1875rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-banner .narshzhb-banner-content .narshzhb-banner-btct span {
|
||||
margin-right: 11.5rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-banner .narshzhb-banner-content .narshzhb-banner-btct span:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-topinfo {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #fafafa;
|
||||
padding-top: 8.25rem;
|
||||
padding-bottom: 8.25rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-topinfo .narshzhb-topinfo-main {
|
||||
margin: 0 auto;
|
||||
width: 75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-topinfo .narshzhb-topinfo-main .narshzhb-tif-top {
|
||||
width: 75rem;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 8.125rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-topinfo .narshzhb-topinfo-main .narshzhb-tif-top .hzcp1 {
|
||||
width: 46.875rem;
|
||||
height: 22.5rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-topinfo .narshzhb-topinfo-main .narshzhb-tif-top .narshzhb-if {
|
||||
height: 22.5rem;
|
||||
background: #fafafa;
|
||||
font-size: 0.75rem;
|
||||
color: #595757;
|
||||
/*padding-left: 5.25rem;*/
|
||||
padding: 0 2.25rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-topinfo .narshzhb-topinfo-main .narshzhb-tif-top .narshzhb-if .cttop {
|
||||
padding-top: 5.5625rem;
|
||||
line-height: 1.5rem;
|
||||
padding-bottom: 2rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-topinfo .narshzhb-topinfo-main .narshzhb-tif-top .narshzhb-if h3 {
|
||||
color: #004bfa;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-topinfo .narshzhb-tif-bottom {
|
||||
margin: 0 auto;
|
||||
width: 75rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-topinfo .narshzhb-tif-bottom .narshzhb-tif-it {
|
||||
width: 32.5%;
|
||||
height: 23.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-topinfo .narshzhb-tif-bottom .narshzhb-tif-it .ithzcp {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-topinfo .narshzhb-tif-bottom .narshzhb-tif-it .st {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 9.5rem;
|
||||
font-size: 12px;
|
||||
color: #595757;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-topinfo .narshzhb-tif-bottom .narshzhb-tif-it .st span {
|
||||
line-height: 1.5rem;
|
||||
margin: 0 2.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-topinfo .narshzhb-tif-bottom .narshzhb-tif-it:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-hzys {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-bottom: 8.25rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-hzys .hzys-title {
|
||||
font-size: 30px;
|
||||
padding-bottom: 3.5625rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-hzys .narshzhb-hzys-main {
|
||||
width: 75rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-hzys .narshzhb-hzys-main .narshzhb-hzys-it {
|
||||
width: 21.125rem;
|
||||
height: 25.8125rem;
|
||||
margin-right: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-hzys .narshzhb-hzys-main .narshzhb-hzys-it .hz-ico1 {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin: 3.75rem auto;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-hzys .narshzhb-hzys-main .narshzhb-hzys-it .lite-titel {
|
||||
font-weight: bold;
|
||||
margin: 0 auto;
|
||||
font-size: 1.25rem;
|
||||
color: #3e3a39;
|
||||
line-height: 1.5rem;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-hzys .narshzhb-hzys-main .narshzhb-hzys-it .cts {
|
||||
margin: 0 2.5rem;
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
color: #595757;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-hzys .narshzhb-hzys-main .narshzhb-hzys-it:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-qdhz {
|
||||
width: 75rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12.5rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-qdhz .hzys-title {
|
||||
font-size: 1.875rem;
|
||||
color: #3e3a39;
|
||||
line-height: 2.25rem;
|
||||
padding-bottom: 3.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-qdhz .nars-qdhz-part {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-qdhz .nars-qdhz-part .nars-qdhz-it {
|
||||
background: #fff;
|
||||
width: 24.4rem;
|
||||
height: 18.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-qdhz .nars-qdhz-part .nars-qdhz-it .qdhzico {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin-bottom: 2.625rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-qdhz .nars-qdhz-part .nars-qdhz-it .qdhzewico {
|
||||
width: 7.875rem;
|
||||
height: 7.875rem;
|
||||
margin-bottom: 2.625rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-qdhz .nars-qdhz-part .nars-qdhz-it .qdhzct {
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
color: #595757;
|
||||
line-height: 1.5625rem;
|
||||
}
|
||||
|
||||
.narshzhbPage .narshzhb-qdhz .nars-qdhz-part .nars-qdhz-it:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--合作伙伴 -->
|
||||
<div class="narshzhbPage">
|
||||
{include file='include/top-header-nas' /}
|
||||
<!--banner -->
|
||||
<div class="narshzhb-banner"
|
||||
style="background: url(/uploads/default/nas/cooperation/narshzhbbg.png);background-repeat: no-repeat;background-size: 100% 100%;">
|
||||
<div class="narshzhb-banner-content">
|
||||
<span class="t1">成为ORICO合作伙伴</span>
|
||||
<h2><strong style="color: #004BFA;">NAS</strong>合作伙伴招募</h2>
|
||||
<div class="narshzhb-banner-btct">
|
||||
<span>广告代理</span>
|
||||
<span>抖音销售</span>
|
||||
<span>代理经销合作</span>
|
||||
<span>ODM合作</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- top 介绍-->
|
||||
<div class="narshzhb-topinfo">
|
||||
<div class="narshzhb-topinfo-main">
|
||||
{if condition="count($data.image_text.banners) > 0"}
|
||||
<a class="narshzhb-tif-top" href="{$data.image_text.banners[0]['link']|default='javascript: void(0);'}">
|
||||
<img src="{$data.image_text.banners[0]['picture']|getImage}" class="hzcp1" />
|
||||
<div class="narshzhb-if">
|
||||
<div class="cttop" style="color: {$data.image_text.banners[0]['descolor']|default='#595757'}">{$data.image_text.banners[0]['desc']}</div>
|
||||
<h3 style="color: {$data.image_text.banners[0]['alt']|default='#004bfa'}">{$data.image_text.banners[0]['name']}</h3>
|
||||
</div>
|
||||
</a>
|
||||
{/if}
|
||||
{if condition="count($data.image_text.banners) > 1"}
|
||||
<div class="narshzhb-tif-bottom">
|
||||
{volist name='$data.image_text.banners' id='vo' key='key'}
|
||||
{if condition="$key > 1"}
|
||||
<a class="narshzhb-tif-it" href="{$vo.link|default='javascript:void(0);'}">
|
||||
<img src="{$vo.picture|getImage}" class="ithzcp" />
|
||||
<div class="st" style="color: {$vo.descolor|default='#595757'}"><span>{$vo.desc}</span></div>
|
||||
</a>
|
||||
{/if}
|
||||
{/volist}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 合作优势-->
|
||||
<div class="narshzhb-hzys">
|
||||
<h2 class="hzys-title">合作优势</h2>
|
||||
<div class="narshzhb-hzys-main">
|
||||
{volist name='data.advantage.banners' id='vo'}
|
||||
<div class="narshzhb-hzys-it">
|
||||
<img src="{$vo.picture|getImage}" class="hz-ico1" />
|
||||
<span class="lite-titel" style="color: {$vo.alt|default='#3e3a39'}">{$vo.name}</span>
|
||||
<span class="cts" style="color: {$vo.descolor|default='#595757'}">{$vo.desc}</span>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
<!--期待与您的合作 -->
|
||||
<div class="narshzhb-qdhz">
|
||||
<h2 class="hzys-title">期待与您的合作</h2>
|
||||
{volist name='data.expectation.banners' id='item' key='k'}
|
||||
<div class="nars-qdhz-part">
|
||||
{volist name='item' id='vo' key='key'}
|
||||
<div class="nars-qdhz-it">
|
||||
<img src="{$vo.picture|getImage}" class="{if condition='$k==1'}qdhzico{else/}qdhzewico{/if}" />
|
||||
<span class="qdhzct" style="color: {$vo.alt|default='#595757'}">{$vo.name}</span>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{include file='include/bottom2023' /}
|
||||
</body>
|
||||
</html>
|
||||
815
app/index/view/tops_nas/guide.phtml
Executable file
815
app/index/view/tops_nas/guide.phtml
Executable 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>
|
||||
275
app/index/view/tops_nas/index.phtml
Executable file
275
app/index/view/tops_nas/index.phtml
Executable file
@@ -0,0 +1,275 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
|
||||
<title>元创官网</title>
|
||||
{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">
|
||||
{volist name='data.swiper.banners' id='vo'}
|
||||
<div class="swiper-slide">
|
||||
<!--banner内容-->
|
||||
<div class="strct">
|
||||
<span class="sw-title">{$vo.name}</span>
|
||||
{if condition="!empty($vo.name)"}
|
||||
<a class="btmore" href="{$vo.link}" style="background:{$vo.btn_color|default='#004bfa'}">
|
||||
<span class="btst" style="color:{$alt|default='#ffffff'}">Click to view</span>
|
||||
<img src="__PUBLIC__/web/images/goico.png" class="goico-img" />
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
<img src="{$vo.picture|getImage}" alt="" class="narsbanner-img" />
|
||||
</div>
|
||||
{/volist}
|
||||
</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>
|
||||
<!--九大模块分类 -->
|
||||
<div class="nars-cate">
|
||||
<div class="narscatecenter">
|
||||
<!--左边三个 -->
|
||||
<div class="cate-column">
|
||||
<a class="cateit" href="{$data.product.banners[0]['link']}" style="background: url({$data.product.banners[0]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||||
<!-- <span class="pp1">-->
|
||||
<!-- <span style="color:{$data.product.banners[0]['alt']|default='#000000'}">{$data.product.banners[0]['name']}</span>-->
|
||||
<!-- {if condition="!empty($data.product.banners[0]['desc'])"}-->
|
||||
<!-- <br /><span style="color:{$data.product.banners[0]['desc_color']|default='#000000'}">{$data.product.banners[0]['desc']}</span>-->
|
||||
<!-- {/if}-->
|
||||
<!--</span>-->
|
||||
</a>
|
||||
<a class="cateit" href="{$data.product.banners[3]['link']}" style="background: url({$data.product.banners[3]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||||
<!-- <span class="pp1">-->
|
||||
<!-- <span style="color:{$data.product.banners[3]['alt']|default='#000000'}">{$data.product.banners[3]['name']}</span>-->
|
||||
<!-- {if condition="!empty($data.product.banners[3]['desc'])"}-->
|
||||
<!-- <br /><span style="color:{$data.product.banners[3]['desc_color']|default='#000000'}">{$data.product.banners[3]['desc']}</span>-->
|
||||
<!-- {/if}-->
|
||||
<!--</span>-->
|
||||
</a>
|
||||
<a class="cateit" href="{$data.product.banners[6]['link']}" style="background: url({$data.product.banners[6]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||||
<!-- <span class="pp1">-->
|
||||
<!-- <span style="color:{$data.product.banners[6]['alt']|default='#000000'}">{$data.product.banners[6]['name']}</span>-->
|
||||
<!-- {if condition="!empty($data.product.banners[6]['desc'])"}-->
|
||||
<!-- <br /><span style="color:{$data.product.banners[6]['desc_color']|default='#000000'}">{$data.product.banners[6]['desc']}</span>-->
|
||||
<!-- {/if}-->
|
||||
<!--</span>-->
|
||||
</a>
|
||||
</div>
|
||||
<!--中间三个 -->
|
||||
<div class="cate-column " style="margin: 0 0.875rem;">
|
||||
<a class="cateit cateit2 cateit2top bigcateit" href="{$data.product.banners[1]['link']}" style="background: url({$data.product.banners[1]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||||
<!--<span class="pp1" style="margin: 0 auto;margin-top: 3.0625rem; display: flex;flex-direction: column;align-items: center;">-->
|
||||
<!-- <span class="zjtitle">AI NAS</span>-->
|
||||
<!-- <span class="zjtitle-sm">智慧数据管理</span>-->
|
||||
<!--</span>-->
|
||||
</a>
|
||||
<a class="cateit cateit2 cateit2mid smallcateit" href="{$data.product.banners[4]['link']}" style="background: url({$data.product.banners[4]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||||
<!-- <span class="pp1" style="margin-top: 0;flex-direction: row;display: flex;align-items: center;justify-content: space-between;width: 85%;">-->
|
||||
<!-- <span style="color:{$data.product.banners[4]['alt']|default='#000000'};font-size:3.4375rem;">{$data.product.banners[4]['name']}</span>-->
|
||||
<!-- {if condition="!empty($data.product.banners[4]['desc'])"}-->
|
||||
<!-- <br /><span style="color:{$data.product.banners[4]['desc_color']|default='#000000'}">{$data.product.banners[4]['desc']}</span>-->
|
||||
<!-- {/if}-->
|
||||
<!--</span>-->
|
||||
</a>
|
||||
<a class="cateit cateit2 cateit2bottom" href="{$data.product.banners[7]['link']}" style="background: url({$data.product.banners[7]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||||
<!-- <span class="pp1">-->
|
||||
<!-- <span style="color:{$data.product.banners[7]['alt']|default='#000000'}">{$data.product.banners[7]['name']}</span>-->
|
||||
<!-- {if condition="!empty($data.product.banners[7]['desc'])"}-->
|
||||
<!-- <br /><span style="color:{$data.product.banners[7]['desc_color']|default='#000000'}">{$data.product.banners[7]['desc']}</span>-->
|
||||
<!-- {/if}-->
|
||||
<!--</span>-->
|
||||
</a>
|
||||
</div>
|
||||
<!--右边三个 -->
|
||||
<div class="cate-column">
|
||||
<a class="cateit" href="{$data.product.banners[2]['link']}" style="background: url({$data.product.banners[2]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||||
<!-- <span class="pp1">-->
|
||||
<!-- <span style="color:{$data.product.banners[2]['alt']|default='#000000'}">{$data.product.banners[2]['name']}</span>-->
|
||||
<!-- {if condition="!empty($data.product.banners[2]['desc'])"}-->
|
||||
<!-- <br /><span style="color:{$data.product.banners[2]['desc_color']|default='#000000'}">{$data.product.banners[2]['desc']}</span>-->
|
||||
<!-- {/if}-->
|
||||
<!--</span>-->
|
||||
</a>
|
||||
<a class="cateit" href="{$data.product.banners[5]['link']}" style="background: url({$data.product.banners[5]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||||
<!-- <span class="pp1">-->
|
||||
<!-- <span style="color:{$data.product.banners[5]['alt']|default='#000000'}">{$data.product.banners[5]['name']}</span>-->
|
||||
<!-- {if condition="!empty($data.product.banners[5]['desc'])"}-->
|
||||
<!-- <br /><span style="color:{$data.product.banners[5]['desc_color']|default='#000000'}">{$data.product.banners[5]['desc']}</span>-->
|
||||
<!-- {/if}-->
|
||||
<!--</span>-->
|
||||
</a>
|
||||
<a class="cateit" href="{$data.product.banners[8]['link']}" style="background: url({$data.product.banners[8]['picture']|getImage});background-repeat: no-repeat;background-size: 100% 100%">
|
||||
<!-- <span class="pp1">-->
|
||||
<!-- <span style="color:{$data.product.banners[8]['alt']|default='#000000'}">{$data.product.banners[8]['name']}</span>-->
|
||||
<!-- {if condition="!empty($data.product.banners[8]['desc'])"}-->
|
||||
<!-- <br /><span style="color:{$data.product.banners[8]['desc_color']|default='#000000'}">{$data.product.banners[8]['desc']}</span>-->
|
||||
<!-- {/if}-->
|
||||
<!--</span>-->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--视频-->
|
||||
<div class="narsVideo" style="height:auto">
|
||||
<div class="videoview">
|
||||
<video class="video" poster="{$data.video.banners[0]['picture']|getImage}" controls autoplay loop muted>
|
||||
<source type="video/mp4" src="{$data.video.banners[0]['video_url']}">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<!--解決方案-->
|
||||
<div class="nars-jjfa">
|
||||
<span class="jjfa-title"><span style="color:#004BFA">ORICO</span>网络存储解决方案</span>
|
||||
<div class="swiper jjfaSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name='data.plan.banners' id='vo'}
|
||||
<div class="swiper-slide">
|
||||
<img src="{$vo.picture|getImage}" class="jjfabgimg" />
|
||||
<div class="jjfa-ct">
|
||||
<span class="st" style="color:{$vo.alt|default='#000000'}">{$vo.name}</span>
|
||||
</div>
|
||||
<!-- 鼠标移入效果-->
|
||||
<div class="jjfa-info" style="text-align:left;white-space:pre-line;">
|
||||
<span style="color:#020612;font-size:1.875rem;padding-top:2.8rem;padding-bottom:1.5rem;font-weight:bold">{$vo.name}</span>
|
||||
<a href="{$vo.link}" style="color:{$vo.desc_color|default='#000'};line-height: 36px;display:flex;">
|
||||
<span>{$vo.desc}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
<!-- <div class="swiper-pagination"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!--微链接 -->
|
||||
<div class="nars-wlj">
|
||||
<span class="wlj-title"><span style="color:#004BFA">Weline </span>微链接</span>
|
||||
{volist name='data.weline.banners' id='vo'}
|
||||
<div class="wltitem">
|
||||
<div class="wljcp">
|
||||
<img src="{$vo.picture|getImage}" class="wljimg" />
|
||||
</div>
|
||||
<div class="wljcpinfo">
|
||||
<span class="if-title" style="color:{$vo.alt|default='#ffffff'}">{$vo.name}</span>
|
||||
<span class="if-info" style="color:{$vo.desc_color|default='#ffffff'};white-space:pre-line">{$vo.desc}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/volist}
|
||||
<div class="wltitem">
|
||||
<div class="wljcp">
|
||||
{if condition="!empty($data.download.banners[0]['picture'])"}
|
||||
<img src="{$data.download.banners[0]['picture']|getImage}" class="wljimg" />
|
||||
{else}
|
||||
<span class="tt">{$data.download.banners[0]['name']|default='软件多平台支持'}</span>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
<div class="wljcpinfo">
|
||||
{assign name='download_color' value="$data.download.banners[0]['alt']|default='#ffffff'"}
|
||||
{assign name='download_background' value="$data.download.banners[0]['btn_color']|default='#004cfa'"}
|
||||
<a
|
||||
class="wlj-xzbt"
|
||||
target="_blank"
|
||||
href="{$data.download.banners[0]['link']}"
|
||||
style="background-color:{$download_background};color:{$download_color};border-color:{$download_color};"
|
||||
>
|
||||
下载
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{include file='include/bottom2023'/}
|
||||
</body>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// banner轮播
|
||||
var swiper = new Swiper(".mySwiper", {
|
||||
pagination: '.swiper-pagination',
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30,
|
||||
centeredSlides: true,
|
||||
autoplay: 5000,
|
||||
autoplayDisableOnInteraction: false,
|
||||
loop: true
|
||||
})
|
||||
// 解决方案轮播
|
||||
var swiper1 = new Swiper(".jjfaSwiper", {
|
||||
slidesPerView: 5,
|
||||
spaceBetween: 12,
|
||||
freeMode: true,
|
||||
autoplay: 5000,
|
||||
loop: true,
|
||||
grabCursor: true,//鼠标光标
|
||||
})
|
||||
$('.jjfaSwiper').mouseenter(function() {
|
||||
swiper1.stopAutoplay()
|
||||
}).mouseleave(function() {
|
||||
swiper1.startAutoplay()
|
||||
});
|
||||
})
|
||||
|
||||
// 原始图片的宽高
|
||||
var originalWidth = 400;
|
||||
var originalHeight = 260;
|
||||
var originalWidth2=449
|
||||
var originalHeight2=387
|
||||
var originalWidth3=449
|
||||
var originalHeight3=136
|
||||
|
||||
// // 窗口调整大小时的处理函数
|
||||
// function adjustImage() {
|
||||
// var windowWidth = $(window).width(); // 获取当前窗口宽度
|
||||
|
||||
// // 计算新的图片宽度，这里假设最大宽度不超过窗口宽度的90%
|
||||
// var newWidth = Math.min(windowWidth * 0.9, originalWidth);
|
||||
// // 计算新的图片宽度，这里假设最大宽度不超过窗口宽度的90%
|
||||
// var newWidth2 = Math.min(windowWidth * 0.9, originalWidth2);
|
||||
// var newWidth3 = Math.min(windowWidth * 0.9, originalWidth3);
|
||||
// // 根据宽高比计算新的图片高度
|
||||
// var newHeight = (newWidth / originalWidth) * originalHeight;
|
||||
// var newHeight2 = (newWidth2 / originalWidth2) * originalHeight2;
|
||||
// var newHeight3 = (newWidth3 / originalWidth3) * originalHeight3;
|
||||
|
||||
// // 应用新的尺寸到图片
|
||||
// $('.cateit').css({
|
||||
// width: newWidth + 'px',
|
||||
// height: newHeight + 'px'
|
||||
// });
|
||||
// // 应用新的尺寸到图片
|
||||
// $('.cateit2top').css({
|
||||
// width: newWidth2 + 'px',
|
||||
// height: newHeight2 + 'px'
|
||||
// });
|
||||
// // 应用新的尺寸到图片
|
||||
// $('.cateit2mid').css({
|
||||
// width: newWidth3 + 'px',
|
||||
// height: newHeight3 + 'px'
|
||||
// });
|
||||
// $('.cateit2bottom').css({
|
||||
// width: newWidth2 + 'px',
|
||||
// height: newHeight + 'px'
|
||||
// });
|
||||
// }
|
||||
// // 初始时调用一次
|
||||
// adjustImage();
|
||||
// // 监听窗口大小变化
|
||||
// $(window).resize(adjustImage);
|
||||
</script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user