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