{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/achievement.css" />
{/block}
{block name="main"}
<div class="orico_Page_achievement">
    <div class="achievementMain">
        <img src="__IMAGES__/Achievement.png" class="acvImg" />
        <div class="achInfo">
            <div class="title">{:lang('aboutus_mileage.achievement')}</div>
            {notempty name="achievement"}
            <div class="achNums">
                {volist name="achievement" id="ac"}
                <div class="achive_shuju">
                    <div class="title1" {notempty name="ac.desc_txt_color"}style="color:{$ac.desc_txt_color};"{/notempty}>{$ac.desc|raw}</div>
                    <div class="subtitle1" {notempty name="ac.title_txt_color"}style="color:{$ac.title_txt_color};"{/notempty}>{$ac.title}</div>
                </div>
                {/volist}
            </div>
            {/notempty}
        </div>
        <div class="achTimes">
            {notempty name="events"}
            <div class="timecontent">
                <div class="title">{:lang('aboutus_mileage.events')}</div>
                <div class="timelist">
                    <div class="timeline-time">
                        <ul class="event_year">
                            {volist name="events" id="ev" key="k"}
                            <li {eq name="k" value="1"}class="current"{/eq}>
                                <label for="{$ev.title}" {notempty name="ev.title_txt_color"}style="color:{$ev.title_txt_color};"{/notempty}>{$ev.title}</label>
                            </li>
                            {/volist}
                        </ul>
                    </div>
                    <div class="timeline-con">
                        <div class="con_event_list">
                            <ul class="event_list">
                                {volist name="events" id="ev" key="k"}
                                <div style="overflow: hidden; color: black;">
                                    <h3 
                                        id="{$ev.title}" 
                                        {eq name="k" value="1"}class="backgroundimg"{/eq} 
                                        {notempty name="ev.title_txt_color"}style="color:{$ev.title_txt_color};"{/notempty}
                                        >
                                        {$ev.title}
                                    </h3>
                                    <li {notempty name="ev.desc_txt_color"}style="color:{$ev.desctxt_color};"{/notempty}>{$ev.desc|raw}</li>
                                </div>
                                {/volist}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            {/notempty}
        </div>
        <div class="tech">
            {notempty name="development"}
            <div class="techcontent">
                <div class="title">{:lang('aboutus_mileage.development')}</div>
                {volist name="development" id="de"}
                <div class="techcon ">
                    <div class="text">
                        <img src="__IMAGES__/lichengbei.png">
                        <div class="year" {notempty name="de.title_txt_color"}style="color:{$de.title_txt_color};"{/notempty}>{$de.title}</div>
                        <div class="context" {notempty name="de.desc_txt_color"}style="color:{$de.desctxt_color};"{/notempty}>{$de.desc|raw}</div>
                    </div>
                    <div class="tech-img">
                        <img src="{$de.image}" />
                    </div>
                </div>
                {/volist}
            </div>
            {/notempty}
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    $(function() {
        $('label').click(function() {
            $('.event_year>li').removeClass('current');
            $(this).parent('li').addClass('current');
            var year = $(this).attr('for');
            $('#' + year).parent().prevAll('div').slideUp(800);
            $('#' + year).parent().slideDown(800).nextAll('div').slideDown(800);
            $('#' + year).parent().css('color', "red").nextAll('div').css('color', "black")
            // 			
            $("h3").removeClass('backgroundimg')
            $('#' + year).addClass('backgroundimg')
        });
    });
</script>
{/block}