{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__CSS__/product_category.css" />
{/block}
{block name="main"}
<div class="oricoEGapp">
    <!-- banner轮播图 -->
    {notempty name="focus_image"}
    <div>
        {volist name="focus_image" id="fi"}
		<a {notempty name="fi.link" }href="{$fi.link}"{/notempty}>
			<img src="{$fi.image}" style="width: 100%;margin-top: 3.5rem;"/>
		</a>
		{/volist}
    </div>
    {/notempty}
    <div class="oricoEGapp-catelists">
        <!-- 二级分类导航 -->
        <div class="first_list_category">
            <div class="scroller">
                <ul class="clearfix">
                    {volist name="list" id="vo"}
                    <li>
                        <a href="{:url('product/subcategory', ['id' => $vo.id])}">
                            <div class="category_list">
                                <p>{$vo.name}</p>
                            </div>
                        </a>
                    </li>
                    {/volist}
                </ul>
            </div>
        </div>
        <!-- 二级分类几个产品展示 -->
        {volist name="list" id="vo"}
        <div class="m_Container">
            <div class="product_list_title">
                <div class="product_title">{$vo.name}</div>
                <a href="{:url('product/subcategory', ['id' => $vo.id])}" class="view_all text_gray">
                    {:lang_i18n('查看全部')}<span class="icon-Double-Arrow"></span>
                </a>
            </div>
            <div class="product_list">
                {notempty name="vo.products"}
                <ul>
                    {volist name="vo.products" id="pro" length="4"}
                    <li class="img-responsive">
                        <a href="{:url('product/detail', ['id' => $pro.id])}">
                            <img src="{:thumb($pro.cover_image)}">
                            <span class="title">{$pro.name}</span>
                            <span class="subtitle">{$pro.spu}</span>
                        </a>
                    </li>
                    {/volist}
                </ul>
                {/notempty}
            </div>
        </div>
        {/volist}
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    // 自定义 navbarscroll 方法
    $(function() {
        let startX = 0;
        let isDragging = false;
        let currentLi;
        $('.scroller ul li').on('mousedown touchstart', function(e) {
            startX = e.type === 'touchstart' ? e.originalEvent.touches[0].clientX : e.clientX;
            isDragging = true;
            currentLi = $(this);
        });
        $(document).on('mousemove touchmove', function(e) {
            if (isDragging) {
                const currentX = e.type === 'touchmove' ? e.originalEvent.touches[0].clientX : e.clientX;
                const diffX = currentX - startX;
                if (diffX > 20) { // 设定一个最小滑动距离，这里设为20像素
                    // 右滑操作
                    $('.scroller ul li').removeClass('cur');
                    currentLi.addClass('cur');
                    // 这里可以添加更多右滑后要执行的操作，例如显示对应内容
                    isDragging = false;
                }
            }
        });
        $(document).on('mouseup touchend', function() {
            isDragging = false;
        });
    });
</script>
{/block}