{include file="app/index/view/public/header"}

<!-- PC幻灯banner：值得买精选上方 -->
{if !empty($banners)}
<div class="pc_slider w-full mb-20 of-hidden pos-rel" style="border-radius:16px ; box-shadow:0 8px 30px rgba(0,0,0,0.08)">
  {foreach $banners as $k=>$banner}
    <input type="radio" name="pc-slider" id="pc-slide-<?php echo $k+1; ?>" class="d-none"{if $k==0} checked{/if}>
  {/foreach}
  <div class="slides w-full pos-rel of-hidden" style="height:0 ; padding-bottom:33.33%">
    <div class="slide-track w-full h-full pos-abs d-flex" style="top:0 ; left:0 ; align-items:center ; transition:transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94) ; transform:translateX(0)">
      {foreach $banners as $k=>$banner}
        <div class="slide w-full h-full pos-rel of-hidden" style="flex-shrink:0">
          <a href="{$banner['link']}" target="_blank" rel="noopener" class="d-block w-full h-full pos-rel">
            <img src="{$banner['pic']}" alt="{$banner['title']}" loading="lazy" class="w-full h-full d-block" style="object-fit:cover ; transition:filter 0.3s ease">
          </a>
        </div>
      {/foreach}
    </div>
  </div>
  <div class="controls pos-abs d-flex" style="top:50% ; left:0 ; right:0 ; transform:translateY(-50%) ; justify-content:space-between ; pointer-events:none ; z-index:10">
    <label for="pc-slide-{if count($banners)>1}{count($banners)}{else}1{/if}" class="prev cur-pointer w-50 h-50 d-flex" style="pointer-events:auto ; align-items:center ; justify-content:center ; background:rgba(0,0,0,0.2) ; color:#fff ; border-radius:50% ; margin-left:20px ; transition:all 0.3s ease ; opacity:0.7">‹</label>
    <label for="pc-slide-2" class="next cur-pointer w-50 h-50 d-flex" style="pointer-events:auto ; align-items:center ; justify-content:center ; background:rgba(0,0,0,0.2) ; color:#fff ; border-radius:50% ; margin-right:20px ; transition:all 0.3s ease ; opacity:0.7">›</label>
  </div>
  <div class="dots pos-abs d-flex" style="bottom:20px ; left:0 ; right:0 ; justify-content:center ; gap:10px ; pointer-events:none ; z-index:10">
    {foreach $banners as $k=>$banner}
      <label for="pc-slide-<?php echo $k+1; ?>" class="w-12 h-12 cur-pointer d-block" style="border-radius:50% ; background:rgba(255,255,255,0.6) ; pointer-events:auto ; transition:all 0.3s ease ; border:2px solid transparent"></label>
    {/foreach}
  </div>
  <style>
    .pc_slider input:nth-of-type(1):checked ~ .slide-track { transform: translateX(0%); }
    .pc_slider input:nth-of-type(2):checked ~ .slide-track { transform: translateX(-100%); }
    .pc_slider input:nth-of-type(3):checked ~ .slide-track { transform: translateX(-200%); }
    .pc_slider input:nth-of-type(4):checked ~ .slide-track { transform: translateX(-300%); }
    .pc_slider input:nth-of-type(5):checked ~ .slide-track { transform: translateX(-400%); }
    .pc_slider input:nth-of-type(6):checked ~ .slide-track { transform: translateX(-500%); }
    .pc_slider input:nth-of-type(7):checked ~ .slide-track { transform: translateX(-600%); }
    .pc_slider input:nth-of-type(8):checked ~ .slide-track { transform: translateX(-700%); }
    .pc_slider input:nth-of-type(9):checked ~ .slide-track { transform: translateX(-800%); }
    .pc_slider input:nth-of-type(10):checked ~ .slide-track { transform: translateX(-900%); }
    .pc_slider input:nth-of-type(1):checked ~ .dots label:nth-child(1),
    .pc_slider input:nth-of-type(2):checked ~ .dots label:nth-child(2),
    .pc_slider input:nth-of-type(3):checked ~ .dots label:nth-child(3),
    .pc_slider input:nth-of-type(4):checked ~ .dots label:nth-child(4),
    .pc_slider input:nth-of-type(5):checked ~ .dots label:nth-child(5),
    .pc_slider input:nth-of-type(6):checked ~ .dots label:nth-child(6),
    .pc_slider input:nth-of-type(7):checked ~ .dots label:nth-child(7),
    .pc_slider input:nth-of-type(8):checked ~ .dots label:nth-child(8),
    .pc_slider input:nth-of-type(9):checked ~ .dots label:nth-child(9),
    .pc_slider input:nth-of-type(10):checked ~ .dots label:nth-child(10) {
      background: #fff;
      border: 2px solid #1677CB;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    .pc_slider input:nth-of-type(1):checked ~ .controls label:nth-child(1),
    .pc_slider input:nth-of-type(2):checked ~ .controls label:nth-child(2),
    .pc_slider input:nth-of-type(3):checked ~ .controls label:nth-child(3),
    .pc_slider input:nth-of-type(4):checked ~ .controls label:nth-child(4),
    .pc_slider input:nth-of-type(5):checked ~ .controls label:nth-child(5),
    .pc_slider input:nth-of-type(6):checked ~ .controls label:nth-child(6),
    .pc_slider input:nth-of-type(7):checked ~ .controls label:nth-child(7),
    .pc_slider input:nth-of-type(8):checked ~ .controls label:nth-child(8),
    .pc_slider input:nth-of-type(9):checked ~ .controls label:nth-child(9),
    .pc_slider input:nth-of-type(10):checked ~ .controls label:nth-child(10) {
      opacity: 1;
      background: rgba(22,119,203,0.4);
    }
    .slide-track:hover img {
      filter: brightness(0.95);
    }
    @media (max-width: 768px) {
      .pc_slider {
        border-radius: 10px;
        margin-bottom: 15px;
      }
      .slide-track {
        padding-bottom: 45%;
      }
      .controls {
        gap: 10px;
      }
      .controls label {
        width: 40px;
        height: 40px;
        margin: 0 10px;
        font-size: 20px;
      }
      .dots {
        bottom: 12px;
        gap: 8px;
      }
      .dots label {
        width: 10px;
        height: 10px;
      }
    }
    @media (max-width: 480px) {
      .slide-track {
        padding-bottom: 50%;
      }
      .controls label {
        width: 36px;
        height: 36px;
        margin: 0 8px;
        font-size: 18px;
      }
    }
    label.prev, label.next {
      font-size: 28px;
      font-weight: 600;
      backdrop-filter: blur(4px);
      border: 2px solid rgba(255,255,255,0.2);
      -webkit-backdrop-filter: blur(4px);
    }
  </style>
  <script>
    // 自动播放逻辑（纯JS，无依赖）
    // radio 数量与 banner 数量一致（pc-slide-1..pc-slide-N），逐个轮换
    (function() {
      var slider = document.querySelector('.pc_slider');
      if (!slider) return;
      var radios = slider.querySelectorAll('input[name="pc-slider"]');
      var total = radios.length;
      if (total < 2) return;   // 仅 1 张时无需轮换
      var idx = 0;
      var interval = null;
      function go() {
        idx = (idx + 1) % total;
        radios[idx].checked = true;
      }
      function start() { if (!interval) interval = setInterval(go, 5000); }
      function stop() { if (interval) { clearInterval(interval); interval = null; } }
      start();
      slider.addEventListener('mouseenter', stop);
      slider.addEventListener('mouseleave', start);
      // 手动切换后同步序号，避免自动轮换错位
      for (var i = 0; i < radios.length; i++) {
        (function(r, i) {
          r.addEventListener('change', function() { if (r.checked) idx = i; });
        })(radios[i], i);
      }
    })();
  </script>
</div>
{/if}
<div class="blog-hotbar">
  <span class="blog-hotbar-label">值得买精选</span>
  <div class="blog-hotbar-list">
    <span class="blog-hotbar-item"><b>🔥</b>每日精选</span>
    <span class="blog-hotbar-item"><b>💎</b>品质好物</span>
    <span class="blog-hotbar-item"><b>⚡</b>限时特惠</span>
  </div>
</div>

{if isset($minute) && count($minute) > 0}
<div class="container mb-20">
  <div class="blog-hotbar" style="background:linear-gradient(90deg,#1a1a2e 0%,#16213e 100%);border-radius:16px;">
    <span class="blog-hotbar-label" style="background:rgba(255,255,255,0.15);color:#fff;">实时热榜</span>
    <div class="blog-hotbar-list">
      {foreach $minute as $k=>$hotItem}
      <span class="blog-hotbar-item" style="{if $k < 3}color:#ff6b6b;font-weight:600;{else}color:rgba(255,255,255,0.8);{/if}">
        <b style="background:{if $k == 0}#ff6b6b{elseif $k == 1}#ffa500{elseif $k == 2}#ffd700{else}rgba(255,255,255,0.2){/if};color:{if $k < 3}#fff{else}rgba(255,255,255,0.8){/if};padding:1px 6px;border-radius:4px;font-size:11px;margin-right:6px;">{$n}</b>{$hotItem['title']}
      </span>
      {/foreach}
    </div>
  </div>
</div>
{/if}

<div class="row">
  <div class="column-big">
    {foreach $page['list'] as $vo}
    <article class="shadow-theme post of-hidden" style="border-radius:16px ; border:1px solid rgba(0,0,0,0.06) ; transition:all 0.3s ease ; transform:translateY(0)">
      {if $vo['mainPic']}
      <a class="post-cover" href="{url($route='index/index/view/id=<id>', $params=array('id'=>$vo['id']))}" class="pos-rel of-hidden">
        <img src="{$vo['mainPic']}" alt="{$vo['title']}" loading="lazy" style="transition:transform 0.4s ease;">
        <div class="pos-abs" style="bottom:0 ; left:0 ; right:0 ; height:40% ; background:linear-gradient(transparent, rgba(0,0,0,0.3))"></div>
      </a>
      {/if}
      <div class="card-padding" style="padding:20px;">
        <div class="card-tags mb-12">
          {if $vo['featured']}
          <span class="card-tag" style="background:linear-gradient(135deg,#ff9a00,#ff6a00);color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;margin-right:6px;">
            ⭐ 推荐
          </span>
          {/if}
          {if $vo['cateId']}
          <span class="card-tag" style="background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;">
            <a href="{url($route='index/index/index/nav=<nav>', $params=array('nav'=>$vo['cateId']))}" style="color:inherit;text-decoration:none;">{$vo['cateName']}</a>
          </span>
          {/if}
        </div>
        <h3 class="card-title mb-10">
          <a class="post-title" href="{url($route='index/index/view/id=<id>', $params=array('id'=>$vo['id']))}" style="font-size:17px;font-weight:700;line-height:1.5;">{$vo['title']}</a>
        </h3>
        <div class="post-content" style="color:var(--lightColor,#8a8a8a);font-size:14px;line-height:1.7;margin-bottom:14px;">{mb_substr(strip_tags($vo['dec']),0,100,'UTF-8')}...</div>
        <div class="info-row d-flex" style="align-items:center ; justify-content:space-between">
          <div class="log-info d-flex" style="align-items:center ; gap:10px">
            <span class="post-avatar w-32 h-32 d-flex" style="border-radius:50% ; background:linear-gradient(135deg,#667eea,#764ba2) ; color:#fff ; align-items:center ; justify-content:center ; font-size:14px ; font-weight:600">{mb_substr($vo['author'] ?: '小',0,1,'UTF-8')}</span>
            {if $vo['author']}<span style="color:var(--lightColor,#555);font-size:13px;">{htmlspecialchars($vo['author'])}</span>{else}<span style="color:var(--lightColor,#555);font-size:13px;">值得买小编</span>{/if}
            <span class="dot" style="color:var(--borderColor,#ddd);">·</span>
            <time style="color:var(--lightColor,#8a8a8a);font-size:13px;">{obj('api/Api')->mdate($vo['date'])}</time>
            <span class="dot" style="color:var(--borderColor,#ddd);">·</span>
            <span class="view-count d-flex" style="align-items:center ; gap:4px ; color:var(--lightColor,#8a8a8a) ; font-size:13px">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
              {$vo['view']}
            </span>
          </div>
          <div class="post-actions d-flex" style="gap:8px">
            <a class="btn btn-detail" href="{url($route='index/index/view/id=<id>', $params=array('id'=>$vo['id']))}" style="padding:8px 16px;background:var(--surfaceHover,#f7f8fa);color:var(--aColor,#555);border:none;border-radius:8px;font-size:13px;font-weight:500;transition:all 0.2s;">查看详情</a>
            {if $vo['goodsId']}
            <a class="btn btn-buy" href="{url('index/redirect/jump', array('platform'=>($vo['platform'] ?: 'tb'), 'id'=>$vo['goodsId']))}" target="_blank" rel="nofollow" style="padding:8px 16px;background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;transition:all 0.2s;">去购买</a>
            {/if}
          </div>
        </div>
      </div>
    </article>
    {/foreach}

    <div class="pagination" style="margin-top:24px;">{$page['page']}</div>
  </div>
  {include file="app/index/view/public/sidebar"}
</div>

{include file="app/index/view/public/footer"}