{extend name="../view/default/basetmp.htm" /}
{block name="css"}
<link rel="stylesheet" href="__INDEX__/css/royalcms.about.css">
{/block}
{block name="main"}
    {include file='../view/default/innerbanner.htm'}

    <section class="royal-category-content">
        <div class="royal-container">
            {include file='../view/default/left.htm'}
 
            <div class="royal-section-title" data-aos="fade-up" data-aos-duration="800">
                <h2 data-aos="fade-down" data-aos-delay="200">{$Cates.title}</h2>
                <p data-aos="fade-up" data-aos-delay="400">{$Cates.sname}</p>
            </div>

            <div class="royal-inner-timeline-container" data-aos="fade-in" data-aos-delay="300">
                <div class="royal-inner-timeline">
                    {volist name="ArtRes" id="v"}
                    <div class="royal-inner-timeline-item" 
                         data-aos="fade-{$i%2==0?'right':'left'}" 
                         data-aos-delay="{$i*100}" 
                         data-aos-duration="600">
                        <div class="royal-inner-timeline-year" 
                             data-aos="zoom-in" 
                             data-aos-delay="{$i*100+300}">
                            {$v.price}
                        </div>
                        <div class="royal-inner-timeline-content">
                            <h3 data-aos="fade-up" data-aos-delay="{$i*100+400}">{$v.title}</h3>
                            <p data-aos="fade-up" data-aos-delay="{$i*100+500}">{$v.stitle}</p>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>

            {include file='../view/default/pagination.htm'}
        </div>
    </section>
{/block}