{include file="common/header"}
<link rel="stylesheet" type="text/css"
      href="{$css}/static/css/certificate.css?{$www.version}"/>
<section
        class="globalBanner {$banner['position']?'centered':'leftSide'} {$banner['theme']|default='white'}">
    <div class="comp_container comp_container_auto comp_container_100"
    >
        <div class="pagebanner-relative">
            <div class="pagebanner center-content">
                <div class="pagebanner-text ">
                    {if $banner.title}
                    <h1 class="pagebanner-title ">{$banner.title}</h1>
                    {/if}
                    {if $banner.describe}
                    <p class="pagebanner-description">{$banner.describe}</p>
                    {/if}
                    {if $banner.button}
                    <div class="pagebanner-button">
                        {foreach $banner.button as $key => $vo}
                        {if $vo.name}
                        <a href="{$vo.url|default=$www.ContactUs}"
                           target="_blank"
                           class="Button fancy-button bg-gradient"><span>{$vo.name}</span></a>
                        {/if}
                        {/foreach}
                    </div>
                    {/if}
                </div>
            </div>
        </div>
    </div>
</section>
<main class="et-main">
    {present name="permit" value="许可证书"}
    {if $permit.hidden}
    <section class="et-slide" style="--certificate:{$permit.line}">
        <div class="comp_container comp_container_auto overflow_tab">
            <div class="licenseCertificate">
                <div class="currency-title">
                    <h2 class="currency-title-a">{$permit.title}</h2>
                    <p class="currency-title-a-content">{$permit.description}</p>
                </div>
                <div class="certificateshow-tabs  {if $permit.count >1}shadow{/if}">
                    {if $permit.count >1}
                    <ul class="certificateshow-tab-titles">
                        {foreach $permit.list as $key =>$vo}
                        <li class="certificateshow-tab-title {if !$key}active{/if}">
                            {$vo.name}
                        </li>
                        {/foreach}
                    </ul>
                    {/if}
                    {foreach $permit.list as $key => $vo}
                    <div class="certificateshow-tab-content {if !$key}active{/if}">
                        {present name="vo.children" }
                        <div class="certificateshow-tab-item">
                            {foreach $vo.children as $po}
                            <div class="certificateshow-item-content"    data-src="{$po.images}"
                                 data-sub-html="<h4>{$po.name}</h4><p>{$po.describe}</p>">
                                <img class="certificateshow-item-image"
                                     src="{$po.images}"
                                     alt="{$po.name}">
                                <h3 class="certificateshow-item-name">
                                    {$po.name}</h3>
                            </div>
                            {/foreach}
                        </div>
                        {/present}
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
    </section>
    {/if}
    {/present}

    {present name="glory" value="荣誉证书"}
    {if $glory.hidden}
    <section class="et-slide" style="--certificate:{$glory.line}">
        <div class="comp_container comp_container_auto overflow_tab">
            <div class="honorcertificate">
                <div class="currency-title flex-end">
                    <h2 class="currency-title-a">{$glory.title}</h2>
                    <p class="currency-title-a-content">{$glory.description}</p>
                </div>
                <div class="certificateshow-tabs  {if $permit.count >1}shadow{/if}">
                    {if $glory.count >1}
                    <ul class="certificateshow-tab-titles">
                        {foreach $glory.list as $key =>$vo}
                        <li class="certificateshow-tab-title {if !$key}active{/if}">
                            {$vo.name}
                        </li>
                        {/foreach}
                    </ul>
                    {/if}
                    {foreach $glory.list as $key => $vo}
                    <div class="certificateshow-tab-content {if !$key}active{/if}">
                        {present name="vo.children" }
                        <div class="certificateshow-tab-item">
                            {foreach $vo.children as $po}
                            <div class="certificateshow-item-content" data-src="{$po.images}"
                                 data-sub-html="<h4>{$po.name}</h4><p>{$po.describe}</p>">
                                <img class="certificateshow-item-image"
                                     src="{$po.images}"
                                     alt="{$po.name}">
                                <h3 class="certificateshow-item-name">
                                    {$po.name}</h3>
                            </div>
                            {/foreach}
                        </div>
                        {/present}
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
    </section>
    {/if}
    {/present}
    {present name="environment" value="公司环境"}
    {if $environment.hidden}
    <section class="et-slide" style="--certificate:{$environment.line}">
        <div class="comp_container comp_container_auto overflow_tab">
            <div class="companyEnvironment">
                <div class="currency-title">
                    <h2 class="currency-title-a">{$environment.title}</h2>
                    <p class="currency-title-a-content">{$environment.description}</p>
                </div>
                <div class="certificateshow-tabs  {if $permit.count >1}shadow{/if}">
                    {if $environment.count >1}
                    <ul class="certificateshow-tab-titles">
                        {foreach $environment.list as $key =>$vo}
                        <li class="certificateshow-tab-title {if !$key}active{/if}">
                            {$vo.name}
                        </li>
                        {/foreach}
                    </ul>
                    {/if}
                    {foreach $environment.list as $key => $vo}
                    <div class="certificateshow-tab-content {if !$key}active{/if}">
                        {present name="vo.children" }
                        <div class="certificateshow-tab-item">
                            {foreach $vo.children as $po}
                            <div class="certificateshow-item-content" data-src="{$po.images}"
                                 data-sub-html="<h4>{$po.name}</h4><p>{$po.describe}</p>">
                                <img class="certificateshow-item-image"
                                     src="{$po.images}"
                                     alt="{$po.name}">
                                <h3 class="certificateshow-item-name">
                                    {$po.name}</h3>
                            </div>
                            {/foreach}
                        </div>
                        {/present}
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
    </section>
    {/if}
    {/present}
</main>
<script>
    $(document).ready(function () {
        $('.certificateshow-tab-title').click(function () {
            var $thisTabTitle = $(this);
            var index = $thisTabTitle.index();
            var $parentTabsContainer = $thisTabTitle.closest('.certificateshow-tabs');

            $parentTabsContainer.find('.certificateshow-tab-title').removeClass('active');
            $thisTabTitle.addClass('active');

            $parentTabsContainer.find('.certificateshow-tab-content').removeClass('active');
            $parentTabsContainer.find('.certificateshow-tab-content').eq(index).addClass('active');
        });

        //图片查看器
        initializeLightGallery('.licenseCertificate','.certificateshow-item-content');
        initializeLightGallery('.honorcertificate','.certificateshow-item-content');
        initializeLightGallery('.companyEnvironment','.certificateshow-item-content');
    });
</script>
{include file="common/footer"}