{extend name="public/base"/}
{block name="style"}
<link rel="stylesheet" href="__CSS__/aboutus_mileage.css">
{/block}
{block name="main"}
<div class="oricoEGapp">
    <!--公司里程 -->
    <div class="oricoCnLc">
        <div class="margin-top-60"></div>
        <div class="m_ach">
            <div class="img-responsive ">
                <img src="__IMAGES__/achievement.jpg">
            </div>
            <div class="title">{:lang_i18n('ORICO荣耀')}</div>
            <div class="list-num clearfix">
                {notempty name="achievement"}
                <ul>
                    {volist name="achievement" id="ac"}
                    <li>
                        <h4 {:style(['color' => $ac['desc_txt_color']])}>{$ac.desc|raw}</h4>
                        <p {:style(['color' => $ac['title_txt_color']])}>{$ac.title}</p>
                    </li>
                    {/volist}
                </ul>
                {/notempty}
            </div>
        </div>
        {notempty name="events"}
        <div class="m_ach-b">
            <div class="title">{:lang_i18n('品牌里程')}</div>
        </div>
        <div class="contain">
            <!-- 导航 -->
            <div class="nav">
                <div class="swiper-container gallery-thumbs">
                    <div class="swiper-wrapper">
                        {volist name="events" id="ev"}
                        <div class="swiper-slide" {:style(['color' => $ev['title_txt_color']])}>{$ev.title}</div>
                        {/volist}
                    </div>
                    <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                </div>
                <!-- 切换按钮 -->
                <div class="swiper-button-next swiper-button-white" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false">
                    <img src="__IMAGES__/ach-right.webp">
                </div>
                <div class="swiper-button-prev swiper-button-white swiper-button-disabled" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="true">
                    <img src="__IMAGES__/ach-left.webp">
                </div>
            </div>
            <!-- 内容 -->
            <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                    {volist name="events" id="ev" key="k"}
                    <div class="swiper-slide info">
                        <h5 {:style(['color' => $ev['title_txt_color']])}>{$ev.title}</h5>
                        <p {:style(['color' => $ev['desc_txt_color']])}>{$ev.desc|raw}</p>
                    </div>
                    {/volist}
                </div>
                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
            </div>
        </div>
        {/notempty}
        {notempty name="development"}
        <div class="m_ch">
            <div class="m_ach-b">
                <div class="chtitle">{:lang_i18n('品牌活动')}</div>
            </div>
            {volist name="development" id="de"}
            <div class="ach-bg">
                <div class="img-responsive ">
                    <img src="{$de.image}">
                </div>
                <div class="m_ch-title  text_left margin-top-50">
                    <img src="__IMAGES__/ach-icon.png">{$de.title}
                </div>
                <div class="m_ch-con text_gray  text_left line-height-40 margin-top-40">{$de.desc|raw}</div>
            </div>
            {/volist}
        </div>
        {/notempty}
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: 5,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true
    })
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        thumbs: {
            swiper: galleryThumbs
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        }
    })
</script>
{/block}