{jv:include file='header.html' /}
<link rel="stylesheet" href="/Template/default/mobile/skin/css/mall.css?v=6">

<section class="page-hero-dark">
  <div class="container page-hero-inner">
    <div>
      <span class="page-hero-badge">MALL</span>
      <h1 class="page-hero-title">{jv:lang name='mall_title' /}</h1>
      <p class="page-hero-sub">{jv:lang name='mall_slogan' /}</p>
    </div>
    <div class="page-hero-stats">
      <div class="ph-stat"><b>200+</b><span>{jv:lang name='stat_countries' /}</span></div>
      <div class="ph-stat"><b>17</b><span>{jv:lang name='stat_lang_support' /}</span></div>
      <div class="ph-stat"><b>24/7</b><span>{jv:lang name='stat_service' /}</span></div>
      <div class="ph-stat"><b>500+</b><span>{jv:lang name='stat_modules' /}</span></div>
    </div>
  </div>
</section>

<nav class="crumb crumb-dark" aria-label="{jv:lang name='main_nav' /}">
  <div class="container">
    <a href="{jv:url}">{jv:lang name='home' /}</a><span class="sep">/</span><span class="cur">{jv:lang name='mall_home_title' /}</span>
  </div>
</nav>

<div class="container">
  <div class="page-layout">
    <main class="page-main">

      <div class="filter-bar">
        <span class="filter-label">{jv:lang name='filter_label' /}</span>
        <div class="filter-tabs">
          <a class="active" href="{jv:mall_home_url}">{jv:lang name='all' /}</a>
          {jv:mallcat}
          <a href="{jv:mall_cat_url}">{jv:mall_cat_name}</a>
          {/jv:mallcat}
        </div>
      </div>

      <div class="sort-bar">
        <div class="sort-links">
          <a class="active" href="{jv:mall_home_url}">{jv:lang name='sort_newest' /}</a>
        </div>
        <span>{jv:lang name='mall_featured_products' /}</span>
      </div>

      <div class="mall-grid">
      {jv:malllist}
      <article class="card card-v mall-card">
        <a href="{jv:mall_url}">
          <span class="mall-product-imgbox">
            {jv:if condition='(is_featured==1)'}<span class="mall-badge mall-badge-featured">首页推荐</span>{/jv:if}
            <img class="card-img mall-product-img-default" src="{jv:litpic}" alt="{jv:title}">
            <img class="card-img mall-product-img-hover" src="{jv:mall_hover_img}" alt="{jv:title}">
          </span>
        </a>
        <div class="card-body">
          <h3 class="card-title"><a href="{jv:mall_url}">{jv:title}</a></h3>
          {jv:if condition="subtitle != ''"}
          <p class="card-desc">{jv:subtitle}</p>
          {/jv:if}
          <div class="card-foot">
            <span class="price-row"><b>{jv:lang name='mall_currency' /}{jv:mall_price}</b></span>
          </div>
        </div>
      </article>
      {/jv:malllist}
      </div>

      {jv:mall_pagination}

    </main>

    <aside class="page-aside">
      <div class="side-card">
        <h3 class="side-title">{jv:lang name='mall_categories' /}</h3>
        <ul class="side-list">
          {jv:mallcat}
          <li><a href="{jv:mall_cat_url}">{jv:mall_cat_name}</a></li>
          {/jv:mallcat}
        </ul>
      </div>

      <div class="side-card">
        <h3 class="side-title">{jv:lang name='mall_featured_products' /}</h3>
        <ul class="side-list">
          {jv:mallproductlist num="5"}
          <li><span class="rank r{jv:autoindex}">{jv:autoindex}</span><a href="{jv:arcurl}">{jv:title}</a></li>
          {/jv:mallproductlist}
        </ul>
      </div>

      <div class="side-ad">
        <h4>{jv:lang name='mall_center' /}</h4>
        <p>{jv:lang name='mall_slogan' /}</p>
        <a class="btn btn-primary" href="{jv:mall_home_url}">{jv:lang name='view_more' /}</a>
      </div>
    </aside>
  </div>
</div>

{jv:include file='footer.html' /}