{layout name="layout" /}

<!-- slide -->
<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});">
        {php}
            $bannerLink = 'javascript:;';
            if(!empty($banner['url'])) {
                $bannerLink = $banner['url'];
            }
        {/php}
        <a href="{$bannerLink}" class="center-center banner-slide-link">
            <div class="w-1500">
                <div class="pull-left">
                    <p>{:nl2br($banner.title ?? '')}</p>
                    <i>{:nl2br($banner.description ?? '')}</i>
                </div>
            </div>
        </a>
        </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">
	<!-- products -->
    <div class="home-box1 w-100">
        <div class="w-1500">
            <div class="all-title-box1 w-100"><span>{$productsCenter['title'] ?? '产品中心'}</span>
                <p>{$productsCenter['description'] ?? 'product center'}</p></div>
            <div class="center-block w-100">
                {if isset($products) && count($products) > 0}
                <ul>
                    {foreach $products 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['description']}</p>
                            </div>
                            <div class="box2">
                                <a href="{:url('article/index', ['category_id'=>$product['id']])}">了解详情+</a>
                                <i>{:str_pad($idx + 1, 2, '0', STR_PAD_LEFT)}</i>
                            </div>
                        </div>
                    </li>
                    {/foreach}
                </ul>
                {/if}
            </div>
        </div>
    </div>
	<!-- marketing -->
    <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>{:nl2br($blocks['marketing_describe']['value'] ?? '')}</p></div>
                {php}
                    $marketingLink = url('page/index', ['category_id'=>$marketingCId]);
                    if(isset($blocks['marketing_background']['link']) && !empty($blocks['marketing_background']['link'])) {
                        $marketingLink = $blocks['marketing_background']['link'];
                    }
                {/php}
                <a href="{$marketingLink ?? 'javascript:;'}">了解详情++</a>
            </div>
        </div>
    </div>
	<!-- news -->
    <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 title="{$news['title']|raw}">{$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>