{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_category.css" type="text/css" />
{/block}
{block name="main"}
<div class="orico_Page_category">
	<!-- banner轮播 -->
	{notempty name="focus_image"}
	<div class="opdBanner" >
		{volist name="focus_image" id="fi"}
		<a {notempty name="fi.link" }href="{$fi.link}" {/notempty}>
			<img src="{$fi.image}" class="opdbannerImg" />
		</a>
		{/volist}
	</div>
	{/notempty}
	<!--分类/产品内容 -->
	<div class="pageMain">
		{volist name="list" id="vo"}
		<div class="cat">
			<div class="ori-pd-title">
				<div class="catname">{$vo.name}</div>
				<a class="catmore" href="{:url('product/subcategory', ['id' => $vo.id])}">
					<span class="tmore">{:lang_i18n('查看全部')}</span>
					<img src="__IMAGES__/more.png" class="catmoreImg" />
				</a>
			</div>
			{notempty name="vo.products"}
			<div class="ori-pd-list">
				{volist name="vo.products" id="pro"}
				<a class="oripditem" href="{:url('product/detail', ['id' => $pro.id])}">
					<div>
						<img src="{:thumb($pro.cover_image)}" class="prdimg prdimg-show" />
					</div>
					<div class="prdName">{$pro.name}</div>
					<div class="prddec">{$pro.spu}</div>
					{eq name="pro.is_new" value="1"}
					<div class="newcp">New</div>
					{/eq}
				</a>
				{/volist}
			</div>
			{/notempty}
		</div>
		{/volist}
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
  $(function () {
    // 显示第一张图片
    $('.opdbannerImg').eq(0).show();
    let currentIndex = 0;
    const imgCount = $('.opdbannerImg').length;
    setInterval(() => {
      // 淡出当前图片
      $('.opdbannerImg').eq(currentIndex).fadeTo(10, 0, () => {
        // 隐藏当前图片
        $('.opdbannerImg').eq(currentIndex).hide();
        // 计算下一张图片的索引
        currentIndex = (currentIndex + 1) % imgCount;
        // 显示并淡入下一张图片
        $('.opdbannerImg').eq(currentIndex).show().fadeTo(10, 1);
      });
    }, 10000);
  });
</script>
{/block}