{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}