150 lines
6.2 KiB
HTML
150 lines
6.2 KiB
HTML
{extend name="public/nas_base" /}
|
|
{block name="style"}
|
|
<link rel="stylesheet" href="__CSS__/topic_nas_index.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper@9/swiper-bundle.min.css">
|
|
{/block}
|
|
{block name="main"}
|
|
<div class="orico_Page_index">
|
|
<!--Nas首页 -->
|
|
<div class="narsPage">
|
|
<!--banner -->
|
|
{notempty name="focus_image"}
|
|
<div class="narsIndex-banner">
|
|
<div class="swiper-container mySwiper ">
|
|
<div class="swiper-wrapper">
|
|
{volist name="focus_image" id="fo"}
|
|
<div class="swiper-slide">
|
|
<a href="{$fo.link}"><img src="{$fo.image}" alt="{$fo.title}"></a>
|
|
</div>
|
|
{/volist}
|
|
</div>
|
|
<!-- 如果需要分页器 -->
|
|
<div class="swiper-pagination"></div>
|
|
<!-- 如果需要导航按钮 -->
|
|
<div class="swiper-button-prev"></div>
|
|
<div class="swiper-button-next"></div>
|
|
</div>
|
|
</div>
|
|
{/notempty}
|
|
<!--九大模块分类 -->
|
|
{notempty name="nas_category"}
|
|
<div class="nars-cate">
|
|
<div class="narscatecenter">
|
|
{volist name="nas_category" id="category" key="idx"}
|
|
<div class="cate-column" {eq name="idx" value="2"}style="margin:0 0.875rem;"{/eq}>
|
|
{volist name="category" id="cate" key="k"}
|
|
{if condition="$idx == 2 && $k == 1"}
|
|
{assign name="class" value="cateit bigcateit" /}
|
|
{elseif condition="$idx == 2 && $k == 2" /}
|
|
{assign name="class" value="cateit smallcateit" /}
|
|
{else /}
|
|
{assign name="class" value="cateit" /}
|
|
{/if}
|
|
<a
|
|
class="{$class}"
|
|
{notempty name="cate.link"}href="{$cate.link}"{/notempty}
|
|
style="background: url({$cate.image});background-repeat: no-repeat;background-size: 100% 100%"
|
|
>
|
|
</a>
|
|
{/volist}
|
|
</div>
|
|
{/volist}
|
|
</div>
|
|
</div>
|
|
{/notempty}
|
|
<!--视频 -->
|
|
{notempty name="nas_video"}
|
|
<div class="narsVideo" style="height:auto">
|
|
<div class="videoview">
|
|
<video class="video" poster="{$nas_video.image}" controls="" autoplay="" loop="" muted="" style="max-height:50rem;z-index:9999;width: 100%;object-fit: cover;">
|
|
<source type="video/mp4" src="{$nas_video.video}">
|
|
</video>
|
|
</div>
|
|
</div>
|
|
{/notempty}
|
|
<!--解決方案-->
|
|
{notempty name="nas_solution"}
|
|
<div class="nars-jjfa">
|
|
<span class="jjfa-title"><span style="color:#004BFA;">ORICO</span> {:lang_i18n('网络存储解决方案')}</span>
|
|
<div class="swiper jjfaSwiper">
|
|
<div class="swiper-wrapper">
|
|
{volist name="nas_solution" id="so"}
|
|
<div class="swiper-slide">
|
|
<img src="{$so.image}" class="jjfabgimg" />
|
|
<div class="jjfa-ct">
|
|
<span class="st" {notempty name="so.title_txt_color"}style="color:{$so.title_txt_color};"{/notempty}>{$so.title}</span>
|
|
</div>
|
|
<!-- 鼠标移入效果-->
|
|
<div class="jjfa-info">
|
|
<span class="jjfa-sp-title" {notempty name="so.title_txt_color"}style="color:{$so.title_txt_color};"{/notempty}>{$so.title}</span>
|
|
<a href="{$so.link}" class="jjfa-a" {notempty name="so.desc_txt_color"}style="color:{$so.desc_txt_color};"{/notempty}>{$so.desc|raw}</a>
|
|
</div>
|
|
</div>
|
|
{/volist}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/notempty}
|
|
<!--微链接 -->
|
|
{notempty name="nas_software"}
|
|
<div class="nars-wlj">
|
|
<span class="wlj-title"><span style="color:#004BFA">NAS</span> {:lang_i18n('配套软件')}</span>
|
|
{volist name="nas_software" id="soft" offset="0" length="3"}
|
|
<a class="wltitem" {notempty name="soft.link"}href="{$soft.link}"{/notempty}>
|
|
<div class="wljcp">
|
|
<img src="{$soft.image}" class="wljimg" />
|
|
</div>
|
|
<div class="wljcpinfo">
|
|
<span class="if-title">{$soft.title}</span>
|
|
<span class="if-info">{$soft.desc|raw}</span>
|
|
</div>
|
|
</a>
|
|
{/volist}
|
|
{volist name="nas_software" id="soft" offset="3"}
|
|
<div class="wltitem">
|
|
<a {notempty name="soft.link"}href="{$soft.link}"{/notempty} style="height:100%;width:100%">
|
|
<img src="{$soft.image}" style="height:100%;width:100%" />
|
|
</a>
|
|
</div>
|
|
{/volist}
|
|
</div>
|
|
{/notempty}
|
|
</div>
|
|
</div>
|
|
{/block}
|
|
{block name="script"}
|
|
<script type="text/javascript" src="https://unpkg.com/swiper@9.4.1/swiper-bundle.min.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function () {
|
|
// banner轮播
|
|
var mySwiper = new Swiper('.mySwiper ', {
|
|
// 配置选项
|
|
loop: true,
|
|
autoplay: {
|
|
delay: 3000,
|
|
},
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
},
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
});
|
|
// 解决方案轮播
|
|
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()
|
|
// });
|
|
})
|
|
</script>
|
|
{/block} |