{layout name="layout" /}

<div class="banner-box w-100">
    <div class="swiper-container">
        <div class="swiper-wrapper">
        {if isset($slides) && count($slides) > 0}
        {foreach $slides as $banner}
        <div class="swiper-slide center-center" style="background-image: url({$banner.src});">
            <div class="w-1500">
                <div class="pull-left">
                    <p>{:nl2br($banner.title ?? '')}</p>
                    <i>{:nl2br($banner.description ?? '')}</i>
                </div>
            </div>
        </div>
        {/foreach}
        {/if}
        </div>
        <div class="swiper-page"><div class="w-1500"><div class="swiper-pagination"></div></div></div>
    </div>
</div>
<div class="all-center-box">
    <div class="home-box1 w-100">
        <div class="w-1500">
            <div class="all-title-box1 w-100"><span>{$products['category']['title'] ?? '产品中心'}</span><p>{$products['category']['description'] ?? 'product center'}</p></div>
            <div class="center-block w-100">
                {if isset($products) && count($products['items']) > 0}
                <ul>
                    {foreach $products['items'] as $idx => $product}
                    <li {if $idx == 0}class="active"{/if}>
                        <div class="box-info" style="background-image: url({$product['src']});">
                            <div class="box1">
                                <span>{$product['title']}</span>
                                <p>{$product['summary']|raw}</p>
                            </div>
                            <div class="box2">
                                <a href="{:url('article/detail', ['id'=>$product['id']])}">了解详情+</a>
                                <i>{:str_pad($idx + 1, 2, '0', STR_PAD_LEFT)}</i>
                            </div>
                        </div>
                    </li>
                    {/foreach}
                </ul>
                {/if}
            </div>
        </div>
    </div>
    <div class="home-box2 w-100" style="background-image: url({$blocks['marketing_background']['value'] ?? ''});">
        <div class="w-1500">
            <div class="pull-left column-between">
                <div class="all-title-box1 w-100"><span>{$blocks['marketing_name']['value'] ?? ''}</span><p>{$blocks['marketing_describe']['value'] ?? ''}</p></div>
                <a href="{:url('article/index', ['category_id'=>$marketingCId])}">了解详情++</a>
            </div>
        </div>
    </div>
    <div class="home-box3 w-100">
        <div class="w-1200">
            <div class="top-box w-100"><div class="between-bottom"><span>{$newsCenter['title'] ?? '新闻动态'}</span><i>{$newsCenter['description'] ?? ''}</i></div></div>
            <div class="lower-box w-100">
                {if isset($newsList) && count($newsList) > 0}
                {foreach $newsList as $newsCate}
                <ul>
                    <p>{$newsCate.title ?? ''}</p>
                    {if isset($newsCate['items']) && count($newsCate['items']) > 0}
                    {foreach $newsCate['items'] as $news}
                        <li>
                            <a href="{:url('article/detail', ['id'=>$news['id']])}">
                                <span>{$news['title']|raw}</span>
                                <i>{$news['create_time']|date='Y-m-d'}</i>
                            </a>
                        </li>
                    {/foreach}
                    {/if}
                </ul>
                {/foreach}
                {/if}
            </div>
        </div>
    </div>
</div>


<script>
    var swiper = new Swiper('.banner-box .swiper-container', {
        loop: true,
        speed: 1000,
        autoplay: {
            delay: 6000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.banner-box .swiper-button-next',
            prevEl: '.banner-box .swiper-button-prev',
        },
        pagination :{
            el: '.banner-box .swiper-pagination',
            clickable :true,
        },
        on:{
            init: function(){

            },
            transitionEnd: function(){
                $('.banner-box .swiper-container .swiper-slide .w-1500').eq(this.activeIndex).addClass('active')
            },
            transitionStart: function(){
                $('.banner-box .swiper-container .swiper-slide .w-1500').removeClass('active')
            },
        }
    });
</script>
<script>
    layui.use(['layer', 'form', 'element'], function(){
      var layer = layui.layer,form = layui.form,element = layui.element;
    });
</script>