{layout name="layout"}
<!-- banner -->
<div class="page-banner w-100" style="background-image: url({:getImgSrc($topCategory, '__IMG__/page_ban1.jpg')});">
    <div class="info">
        <div class="w-1200">
            <strong>{$topCategory.title}</strong>
            <p>{:nl2br($topCategory.description ?? '')}</p>
        </div>
    </div>
</div>
<!--  Company  -->
<div class="all-center-box">
    <div class="about-box1 w-100 center-center" id="about1">
        <div class="w-1200 disFlex">
            <div class="pull-left"><img class="imgH" src="{$blocks['company']['img']['value'] ?? ''}" ></div>
            <div class="pull-right">
                <div class="all-title-box2 w-100"><span>{$blocks['company']['title']['value'] ?? ''}</span><p>{$blocks['company']['subtitle']['value'] ?? ''}</p></div>
                <div class="box-info w-100">{:nl2br($blocks['company']['description']['value'] ?? '')}</div>
            </div>
        </div>
    </div>
    <!--  Honors  -->
    
    <div class="about-box2 w-100" id="about2">
        <div class="w-1200">
            <div class="top-box w-100 between-center">
                <div class="all-title-box2"><span>{$blocks['honor']['title']['value'] ?? ''}</span><p>{$blocks['honor']['subtitle']['value'] ?? ''}</p></div>
                <div class="fr">
                {if isset($honors) && count($honors) > 0}
                    {foreach $honors as $k => $honor}
                    <span {if $k == 0}class="active"{/if}>{$honor.title}</span>
                    {/foreach}
                {/if}
                </div>
            </div>
            {if isset($honors) && count($honors) > 0}
            {foreach $honors as $k => $honor}
            <div class="lower-box w-100">
                <div class="div-pc w-100">
                    <div class="pull-left">
                        <ul>
                        {foreach $honor.items as $item}
                            <li><img src="{:getImgSrc($item, '__IMG__/default_bg.png')}"></li>
                        {/foreach}
                        </ul>
                    </div>
                    <div class="pull-right">
                        <ul>
                        {foreach $honor.items as $item}
                            <li title="{$item.title}">{$item.title}</li>
                        {/foreach}
                        </ul>
                    </div>
                </div>
                <div class="div-phone w-100">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                        {foreach $honor.items as $item}
                            <div class="swiper-slide"><span><img src="{:getImgSrc($item, '__IMG__/default_bg.png')}" onclick="tanchuImg(this)"></span><p>{$item.title}</p></div>
                        {/foreach}
                        </div>
                    </div>
                </div>
            </div>
            {/foreach}
            {/if}
        </div>
    </div>
    <div class="honor-tc">
        <div class="center-center">
            <i onclick="$('.honor-tc').fadeOut();"></i>
            <img src="" >
        </div>
    </div>
    <script type="text/javascript">
        var swiper = new Swiper('.about-box2 .div-phone .swiper-container', {
            loop:true,
            autoHeight: true,
            autoplay:true
        });
        $('.about-box2 .top-box .fr span').click(function(){
            swiper.update()
        })
        function tanchuImg(obj){
            var imgsrc = $(obj).attr('src')
            $('.honor-tc').find('img').attr('src',imgsrc);
            $('.honor-tc').fadeIn();
        }
    </script>
    <!--  Structure  -->
    <div id="about3" class="w-100"> 
        <div class="about-box3 w-100" >
            <div class="w-1200">
                <div class="all-title-box2"><span>{$blocks['structure']['title']['value'] ?? ''}</span><p>{$blocks['structure']['subtitle']['value'] ?? ''}</p></div>
                <div class="box-info w-100">
                    <img src="{$blocks['structure']['img']['value'] ?? ''}" >
                </div>
            </div>
        </div>
    </div>

    <!--  History  -->
    <div class="about-box4 w-100" id="about4">
        <div class="w-1200">
            <div class="all-title-box2"><span>{$blocks['history']['title']['value'] ?? ''}</span><p>{$blocks['history']['subtitle']['value'] ?? ''}</p></div>
            <div class="top-box w-100">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                    {if isset($historyList) && count($historyList) > 0}
                        {foreach $historyList as $history}
                        <div class="swiper-slide"><p><span>{$history.title}</span><em>&nbsp;&nbsp;/&nbsp;&nbsp;年</em></p><i></i></div>
                        {/foreach}
                    {/if}
                    </div>
                </div>
            </div>
            <div class="lower-box w-100">
                {if isset($historyList) && count($historyList) > 0}
                {foreach $historyList as $history}
                <div class="center-block w-100">
                    {foreach $history['info'] as $k => $info}
                    <p class="lower-box-item">{if $k > 0}<hr />{/if}{:nl2br($info['title'] ?? '')}</p>
                    {/foreach}
                </div>
                {/foreach}
                {/if}
            </div>
            <div class="swiper-btn">
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <span>点击前后翻看</span>
            </div>
        </div>
    </div>
    <div class="about-box5 w-100" id="about5">
        <div class="w-1200">
            <div class="video-box w-100">
                <i style="background-image: url({$blocks['video']['video']['img'] ?? ''});"></i>
                <video src="{$blocks['video']['video']['value'] ?? ''}" controls playsinline="isiPhoneShowPlaysinline" x5-video-player-type="h5-page" t7-video-player-type="inline" webkit-playsinline="isiPhoneShowPlaysinline" x-webkit-airplay="" preload="none"></video>
            </div>
        </div>
    </div>
</div>

<script>
    var initialSlide = 0;
    if($('.about-box4 .lower-box .center-block').length > 1){
        initialSlide = 1
    }
    var swiper = new Swiper('.about-box4 .swiper-container', {
        loop:true,
        initialSlide:initialSlide,
        slidesPerView: 3,
        spaceBetween: 0,
        centeredSlides : true,
        slideToClickedSlide: true,
        speed: 1000,
        autoplay: {
            delay: 6000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.about-box4 .swiper-button-next',
            prevEl: '.about-box4 .swiper-button-prev',
        },
        on:{
            init: function(){
                $('.about-box4 .lower-box .center-block').hide().eq(initialSlide).show()
            },
            transitionEnd: function(){
            },
            transitionStart: function(){
                $('.about-box4 .lower-box .center-block').hide().eq(this.realIndex).fadeIn()
            },
        },
        breakpoints: {
            1280: {  //当屏幕宽度大于等于1280
                slidesPerView: 3,
            }
        }
    });
</script>