150 lines
6.4 KiB
HTML
150 lines
6.4 KiB
HTML
{extend name="public/base"/}
|
|
{block name="style"}
|
|
<link rel="stylesheet" href="__CSS__/topic_nas_index.css">
|
|
{/block}
|
|
{block name="main"}
|
|
<div class="oricoEGapp">
|
|
<!-- 首页 -->
|
|
<div class="oricoCN-nasindex">
|
|
<div class="narsMBpage">
|
|
<!-- 轮播 banner -->
|
|
{notempty name="focus_image"}
|
|
<div class="narsMB-banner">
|
|
<div class="swiper-container narsMBbannerSwiper">
|
|
<div class="swiper-wrapper">
|
|
{volist name="focus_image" id="fo"}
|
|
<div class="swiper-slide">
|
|
<div class="narsMB-banner-st">
|
|
<h2></h2>
|
|
<span class="narsMB-bannersm"></span>
|
|
</div>
|
|
<a href="{$fo.link}"><img src="{$fo.image}" class="narsmb-img" /></a>
|
|
</div>
|
|
{/volist}
|
|
</div>
|
|
<!-- Add Pagination -->
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
</div>
|
|
{/notempty}
|
|
<!-- 九大模块分类 -->
|
|
{notempty name="nas_category"}
|
|
{assign name="categories" value=":array_flatten($nas_category)"/}
|
|
<div class="narsmb-cate">
|
|
{assign name="categories_idx1" value=":array_shift($categories)"/}
|
|
{notempty name="categories_idx1"}
|
|
<a class="{$categories_idx1.link}">
|
|
<img src="{$categories_idx1.image}" style="width:100%" />
|
|
</a>
|
|
{/notempty}
|
|
{assign name="categories_chunk" value=":array_chunk($categories, 2)"/}
|
|
{volist name="categories_chunk" id="chunk"}
|
|
<div class="narsmbcateits">
|
|
{volist name="chunk" id="cc"}
|
|
<a class="narsmbcate-it" href="{$cc.link}">
|
|
<img src="{$cc.image}" style="width:100%" />
|
|
</a>
|
|
{/volist}
|
|
</div>
|
|
{/volist}
|
|
</div>
|
|
{/notempty}
|
|
<!-- 视频 -->
|
|
{notempty name="nas_video"}
|
|
<div class="narsmbvd">
|
|
<video class="narsmbvideo" poster="{$nas_video.image}" controls autoplay loop muted>
|
|
<source type="video/mp4" src="{$nas_video.video}">
|
|
</video>
|
|
</div>
|
|
{/notempty}
|
|
<!-- 解决方案 -->
|
|
{notempty name="nas_solution"}
|
|
<div class="narsmb-jjfa">
|
|
<span class="narsmbjjfa-title"><span style="color:#084BFA">ORICO</span>{:lang_i18n('网络存储解决方案')}</span>
|
|
<div class="swiper narsmbjjfaSwiper">
|
|
<div class="swiper-wrapper">
|
|
{volist name="nas_solution" id="so"}
|
|
<div class="swiper-slide narsmbjjfa-slide">
|
|
<div class="narsmb-jjfa-ct" {:style(['color' => $so.title_txt_color])}>{$so.title}</div>
|
|
<img src="{$so.image}" class="narsmb-jjfabgimg" />
|
|
<!-- 点击移入效果-->
|
|
<div class="narsmb-jjfa-info" style="text-align:left;white-space:pre-line;">
|
|
<div class="box">
|
|
<p {:style(['color' => $so.title_txt_color])}>{$so.title}</p>
|
|
<div {:style(['color' => $so.desc_txt_color])}>{$so.desc|raw}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/volist}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/notempty}
|
|
<!-- 微链接 -->
|
|
{notempty name="nas_software"}
|
|
<div class="narsmb-wlj">
|
|
<span class="narsmbwlj-title"><span style="color:#084BFA">NAS</span> {:lang_i18n('配套软件')}</span>
|
|
{volist name="nas_software" id="soft" offset="0" length="3"}
|
|
<div class="narsmbwltitem">
|
|
<div class="narsmbwljcp">
|
|
<img src="{$soft.image}" class="narsmbwljimg" />
|
|
</div>
|
|
<div class="narsmbwljcpinfo">
|
|
<span class="narsmbif-title" {:style(['color' => $soft.title_txt_color])}>{$soft.title}</span>
|
|
<span class="narsmbif-info" {:style(['color' => $soft.desc_txt_color])}>{$soft.desc|raw}</span>
|
|
</div>
|
|
</div>
|
|
{/volist}
|
|
{volist name="nas_software" id="soft" offset="3"}
|
|
<div class="narsmbwltitem">
|
|
<a style="height:100%;width:100%" {notempty name="soft.link"}href="{$soft.link}"{/notempty}>
|
|
<img src="{$soft.image}" style="height:100%;width:100%" />
|
|
</a>
|
|
</div>
|
|
{/volist}
|
|
</div>
|
|
{/notempty}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/block}
|
|
{block name="script"}
|
|
<script type="text/javascript">
|
|
$(document).ready(function () {
|
|
// banner轮播
|
|
var bannerswiper = new Swiper('.narsMBbannerSwiper', {
|
|
// 配置选项
|
|
loop: true,
|
|
autoplay: {
|
|
delay: 3000,
|
|
},
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
}
|
|
});
|
|
// 解决方案轮播
|
|
var swiper1 = new Swiper(".narsmbjjfaSwiper", {
|
|
slidesPerView: "auto",
|
|
spaceBetween: 6,
|
|
freeMode: true,
|
|
autoplay: 5000,
|
|
loop: true
|
|
});
|
|
// 解决方案轮播点击显示文案
|
|
var swiperSlides = document.querySelectorAll('.narsmbjjfa-slide');
|
|
// 为每个 swiper-slide 添加点击事件
|
|
swiperSlides.forEach(function (slide) {
|
|
slide.addEventListener('click', function () {
|
|
var infoElement = this.querySelector('.narsmb-jjfa-info');
|
|
if (window.getComputedStyle(infoElement).display === 'none') {
|
|
infoElement.style.display = 'flex';
|
|
swiper1.stopAutoplay()
|
|
} else {
|
|
infoElement.style.display = 'none';
|
|
swiper1.startAutoplay()
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{/block} |