<!--
// 功能：购物商城
// 作者：启肯科技
// Q Q：328493711
// 微信：13738373177（同手机）
// 官网：http://www.qiken.com
// 说明：QKCMS-轻量级AI智能内容管理建站系统
// 版权：© 2025 温州启肯网络有限公司 保留所有权利，盗版必究
-->

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, viewport-fit=cover">
  <title>{qkcms:cat_seo_title}-{qkcms:site_name}</title>
  <meta name="keywords" content="{qkcms:cat_keywords}">
  <meta name="description" content="{qkcms:cat_description}">
  <link rel="stylesheet" href="/assets/css/ts_list.css" />
</head>

<body class="qk-list1">
  {qkcms:head.html}
  <main class="main-content2">
    
    <div class="banner-section">
      <div class="banner-carousel">
        <div class="carousel-inner">
          <div class="carousel-item active" style="background: linear-gradient(135deg, #ff5000, #ff7a33);">
            限时特惠
          </div>
          <div class="carousel-item" style="background: linear-gradient(135deg, #4CAF50, #81C784);">
            新品上市
          </div>
          <div class="carousel-item" style="background: linear-gradient(135deg, #2196F3, #64B5F6);">
            满减活动
          </div>
        </div>
        <button class="carousel-control prev" type="button" aria-label="上一张"></button>
        <button class="carousel-control next" type="button" aria-label="下一张"></button>
        <div class="carousel-indicators">
          <button class="indicator active" type="button" aria-label="第1张"></button>
          <button class="indicator" type="button" aria-label="第2张"></button>
          <button class="indicator" type="button" aria-label="第3张"></button>
        </div>
      </div>
    </div>

    <div class="container2">
      <div class="main-column1">


        <section>
          <div class="topics-content">
            <div class="topics-head">
              <div class="topics-heading">

                <h2 class="topics-title">{qkcms:cat_name}商品列表</h2>
                <p class="topics-desc">{qkcms:cat_description}</p>
              </div>
              <div class="topics-summary">
                <div class="topics-summary-item">共{qkcms:cat_posts}个商品</div>
                <div class="topics-summary-item">持续更新</div>
              </div>
            </div>
            <div id="latest" class="tab-content active">
              <div class="card-grid">
                {qkcms:goods row=12 type=new where=status=1 page=1}
                <div class="card-item fade-in">
                  <div class="card-image">
                    <a href="{goods.url}"><img src="{goods.thumbnail}" alt="{goods.title}" loading="lazy"></a>
                  </div>
                  <div class="card-content">
                    <div class="card-topline">
                      <div class="card-stat-left">
                        <div class="card-stat price">
                          <span class="icon price"></span>
                          <span>¥{goods.price}</span>
                        </div>
                        <div class="card-stat sales">
                          <span class="icon sales"></span>
                          <span>{goods.sales}</span>
                        </div>
                      </div>
                    </div>
                    <div class="card-title"><a href="{goods.url}">{goods.title}</a></div>
                  </div>
                </div>
                {/qkcms:goods}
              </div>
            </div>
          </div>
        </section>

        <section class="topics-section">
          <div class="pagination">
            {qkcms:page type=4 page=1}
            {first_page}
            {prev_page}
            {page_numbers}
            {jump_to_page}
            {next_page}
            {last_page}
            <span class="page-status">{page_status}</span>
            {/qkcms:page}
          </div>
        </section>
      </div>
    </div>
  </main>
  {qkcms:footer.html}

  <script>
    // 轮播功能
    document.addEventListener('DOMContentLoaded', function () {
      const carousel = document.querySelector('.banner-carousel');
      if (carousel) {
        const items = carousel.querySelectorAll('.carousel-item');
        const indicators = carousel.querySelectorAll('.indicator');
        const prevBtn = carousel.querySelector('.carousel-control.prev');
        const nextBtn = carousel.querySelector('.carousel-control.next');

        let currentIndex = 0;
        const itemCount = items.length;
        let autoPlayInterval;

        function updateActiveItem() {
          items.forEach((item, index) => {
            item.classList.toggle('active', index === currentIndex);
          });
          indicators.forEach((indicator, index) => {
            indicator.classList.toggle('active', index === currentIndex);
          });
        }

        function nextSlide() {
          currentIndex = (currentIndex + 1) % itemCount;
          updateActiveItem();
        }

        function prevSlide() {
          currentIndex = (currentIndex - 1 + itemCount) % itemCount;
          updateActiveItem();
        }

        function startAutoPlay() {
          if (autoPlayInterval) clearInterval(autoPlayInterval);
          autoPlayInterval = setInterval(nextSlide, 5000);
        }

        function stopAutoPlay() {
          if (autoPlayInterval) clearInterval(autoPlayInterval);
        }

        indicators.forEach((indicator, index) => {
          indicator.addEventListener('click', () => {
            currentIndex = index;
            updateActiveItem();
            stopAutoPlay();
            startAutoPlay();
          });
        });

        if (prevBtn) {
          prevBtn.addEventListener('click', () => {
            prevSlide();
            stopAutoPlay();
            startAutoPlay();
          });
        }
        if (nextBtn) {
          nextBtn.addEventListener('click', () => {
            nextSlide();
            stopAutoPlay();
            startAutoPlay();
          });
        }

        if (carousel) {
          carousel.addEventListener('mouseenter', stopAutoPlay);
          carousel.addEventListener('mouseleave', startAutoPlay);
        }

        updateActiveItem();
        startAutoPlay();
      }

      // 卡片图片悬停效果
      const cardItems = document.querySelectorAll('.card-item');
      cardItems.forEach(card => {
        const img = card.querySelector('.card-image img');
        if (img) {
          card.addEventListener('mouseenter', () => {
            img.style.transform = 'scale(1.2)';
            img.style.transition = 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
          });
          card.addEventListener('mouseleave', () => {
            img.style.transform = 'scale(1)';
            img.style.transition = 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
          });
        }
      });

      // 淡入效果
      document.querySelectorAll('.fade-in').forEach(function (el) {
        el.classList.add('visible');
      });
    });
  </script>
</body>

</html>

