<link href="{$template_shop_path}/visual/modules/content/shopping-right-list/css/style.css" rel="stylesheet">

<div class="shopping-right-list shopping-right-list-$_id">
    <div class="shopping-right-list-title">
        <h4>{lang('look_and_see')}</h4>
    </div>
    <div class="shop-show-right-pic-list">
        <div class="swiper-container swiper-shop-show-right">
            <div class="swiper-wrapper">
                {loop archive($_catid,$_typeid,$_spid,$_area,$_length,$_ordertype,$_limit,$_image,$_attr1,$_son,$_wheretype,$_tpl,$_intro_len,$_istop) $archive}
                <div class="swiper-slide">
                    <div class="shop-show-right-pic-list-img">
                        <a title="{$archive['stitle']}" href="{$archive['url']}" target="_blank">
                            <img alt="{$archive['stitle']}" src="{$archive['thumb']}" cmseasy-id="{$archive['aid']}" cmseasy-table="archive" cmseasy-field="thumb" class="cmseasyeditimg lazy" />
                        </a>
                        <p>
                            <a href="">
                                                <span class=" cmseasyedit" cmseasy-id="unit" cmseasy-table="lang" cmseasy-field="template">
                                                {lang('unit')}
                                                </span>
                                {$archive['attr2']}
                            </a>
                        </p>
                    </div>
                </div>
                {/loop}
            </div>
        </div>
        <div class="swiper-shop-show-right-next"><span class="glyphicon glyphicon-chevron-up"></span></div>
        <div class="swiper-shop-show-right-prev"><span class="glyphicon glyphicon-chevron-down"></span></div>
    </div>
</div>

<style type="text/css">
    .shopping-right-list-$_id {
        background:$_background-color;
        border-color:$_background-border-color;
    }
    .shopping-right-list-$_id:hover {
        background:$_background-hover-color;
        border-color:$_background-border-hover-color;
    }

    .shopping-right-list-$_id:after {
        background: $_list-border-color;
    }
    .shopping-right-list-$_id .shopping-right-list-title h4:before,
    .shopping-right-list-$_id .shopping-right-list-title h4:after {
        border-top:1px dotted $_list-border-color;
    }
    .shopping-right-list-$_id .shopping-right-list-title h4 {
        font-size:$_title-size;
        color:$_title-color;
    }
    .shopping-right-list-$_id .shopping-right-list-title h4:hover {
        color:$_title-hover-color;
    }
    .shopping-right-list-$_id .shop-show-right-pic-list-img p a {
        font-size:$_price-size;
        color:$_price-color;
    }
    .shopping-right-list-$_id .shop-show-right-pic-list-img:hover p a {
        color:$_price-hover-color;
    }
    .shopping-right-list-$_id .swiper-shop-show-right-next span,
    .shopping-right-list-$_id .swiper-shop-show-right-prev span{
        font-size:$_btn-size;
        color:$_btn-text-color;
        border-color:$_btn-border-color;
        border-radius: $_btn-border-radius;
        background:$_btn-background-color;
    }
    .shopping-right-list-$_id .swiper-shop-show-right-next:hover span,
    .shopping-right-list-$_id .swiper-shop-show-right-prev:hover span{
        color:$_btn-text-hover-color;
        border-color:$_btn-border-hover-color;
        border-radius: $_btn-border-hover-radius;
        background:$_btn-background-hover-color;
    }
</style>
<script type="text/javascript" src="{$template_shop_path}/visual/modules/content/shopping-right-list/js/shopping-right-list.js"></script>