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

<style>
.article-grid{display:grid;grid-template-columns:repeat(2,1fr)!important;gap:14px!important;}
.card-vt{display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:14px!important;padding:14px!important;overflow:hidden!important;}
.card-thumb-wrap{display:block!important;width:120px!important;height:120px!important;flex-shrink:0!important;overflow:hidden!important;border-radius:8px!important;}
.card-thumb{width:120px!important;height:120px!important;object-fit:cover!important;display:block!important;}
.card-body{display:flex!important;flex-direction:column!important;min-width:0!important;padding:0!important;flex:1!important;}
.card-title{font-size:14px!important;font-weight:600!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.card-desc{font-size:12px!important;color:#999!important;line-height:1.5!important;margin-top:6px!important;display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
.card-meta{display:flex!important;align-items:center!important;gap:8px!important;margin-top:auto!important;padding-top:8px!important;}
.price-badge{margin-left:auto!important;}
@media (max-width:640px){
.article-grid{grid-template-columns:1fr!important;}
.card-thumb-wrap{width:100px!important;height:100px!important;}
.card-thumb{width:100px!important;height:100px!important;}
.card-title{font-size:15px!important;}
.card-desc{font-size:12.5px!important;-webkit-line-clamp:2!important;}
}
</style>
<section class="hero-new">
  <div class="container hero-new-inner">
    <div class="hero-new-text">
      <span class="hero-badge">{jv:lang name='hero_badge' /}</span>
      <h1 class="hero-title-hero">{jv:lang name='hero_title' /}</h1>
      <p class="hero-sub-hero">{jv:lang name='hero_subtitle' /}</p>
      <div class="hero-btns">
        <a class="btn btn-primary btn-lg" href="{jv:url}list/39.html">{jv:lang name='hero_cta_try' /}</a>
        <a class="btn btn-ghost-light" href="#features">{jv:lang name='hero_cta_more' /}</a>
      </div>
      <div class="hero-langs">
        {jv:language}<a class="hero-lang-chip" href="{jv:language_url}" title="{jv:name} [{jv:code}]"><img src="/Template/default/mobile/skin/images/flags/{jv:code}.svg" alt="">{jv:name}</a>{/jv:language}
      </div>
    </div>
    <div class="hero-new-map">
      <div class="hero-map-bg" role="img" aria-label="{jv:lang name='hero_map_alt' /}"></div>
      <div class="map-stat">
        <div><b>17</b><span>{jv:lang name='stat_lang_support' /}</span></div>
        <div><b>200+</b><span>{jv:lang name='stat_countries' /}</span></div>
        <div><b>500+</b><span>{jv:lang name='stat_modules' /}</span></div>
        <div><b>24/7</b><span>{jv:lang name='stat_service' /}</span></div>
      </div>
    </div>
  </div>
</section>

<main class="content" id="features">
  <div class="container">

    <div class="content-row row-2col">

      <section class="block" id="articles">
        <div class="block-head">
          <h2 class="block-title">{jv:lang name='block_paid_articles' /}</h2>
          <div class="mall-cat-nav">
            {jv:typelist type="son" typeid="39"}
            <a href="{jv:url}list/{jv:id}.html">{jv:name}</a>
            {/jv:typelist}
          </div>
          <a class="block-more" href="{jv:url}list/39.html">{jv:lang name='view_more' /}<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a>
        </div>
        <div class="article-grid">
        {jv:artlist typeid="39" loop="8" orderby="new"}
        <article class="card card-vt">
          <a href="{jv:arcurl}" class="card-thumb-wrap">
            <img class="card-thumb" src="{jv:litpic}" alt="{jv:title}">
          </a>
          <div class="card-body">
            <h3 class="card-title"><a href="{jv:arcurl}">{jv:title|text_overflow='20',###}</a></h3>
            <p class="card-desc">{jv:description|text_overflow='50',###}</p>
            <div class="card-meta">
              <span class="meta-date">
                <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
                {jv:add_time|MyDate='Y-m-d',###}
              </span>
              {jv:if condition='(price==0)'}
              <span class="price-badge price-badge-free">{jv:lang name='forum_free' /}</span>
              {jv:else /}
              <span class="price-badge">{jv:lang name='mall_currency' /}{jv:price}</span>
              {/jv:if}
            </div>
          </div>
        </article>
        {/jv:artlist}
        </div>
      </section>

      <section class="block" id="qa">
        <div class="block-head">
          <h2 class="block-title">{jv:lang name='block_latest_qa' /}</h2>
          <a class="block-more" href="{jv:url}list/31.html">{jv:lang name='view_more' /}<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a>
        </div>
        <div class="qa-tabs">
          <button class="qa-tab qa-tab-active" data-qa-tab="solved">{jv:lang name='qa_status_solved' /}</button>
          <button class="qa-tab" data-qa-tab="waiting">{jv:lang name='qa_waiting_answer' /}</button>
          <button class="qa-tab" data-qa-tab="bounty">{jv:lang name='qa_bounty_tag' /}</button>
        </div>
        <div class="qa-panel qa-panel-active" data-qa-panel="solved">
          <ul class="list-qa">
          {jv:qanewlist num="12" status="solved"}
            <li class="qa-item">
              <span class="qa-avatar" title="{jv:lang name='username' /}: {jv:author}">
                {jv:if condition='(avatar!="")'}
                <img src="{jv:avatar}" alt="">
                {jv:else /}
                <svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6v1H4z"/></svg>
                {/jv:if}
              </span>
              <span class="qa-time">[{jv:add_time|MyDate='m-d H:i',###}]</span>
              <a class="qa-q" href="{jv:arcurl}">{jv:title}</a>
              <span class="qa-reply">
                <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16v11H9l-5 4V5z"/></svg>
                {jv:answer_count}
              </span>
            </li>
          {/jv:qanewlist}
          </ul>
        </div>
        <div class="qa-panel" data-qa-panel="waiting">
          <ul class="list-qa">
          {jv:qanewlist num="12" status="waiting"}
            <li class="qa-item">
              <span class="qa-avatar" title="{jv:lang name='username' /}: {jv:author}">
                {jv:if condition='(avatar!="")'}
                <img src="{jv:avatar}" alt="">
                {jv:else /}
                <svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6v1H4z"/></svg>
                {/jv:if}
              </span>
              <span class="qa-time">[{jv:add_time|MyDate='m-d H:i',###}]</span>
              <a class="qa-q" href="{jv:arcurl}">{jv:title}</a>
              <span class="qa-reply">
                <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16v11H9l-5 4V5z"/></svg>
                {jv:answer_count}
              </span>
            </li>
          {/jv:qanewlist}
          </ul>
        </div>
        <div class="qa-panel" data-qa-panel="bounty">
          <ul class="list-qa">
          {jv:qanewlist num="12" status="bounty"}
            <li class="qa-item">
              <span class="qa-avatar" title="{jv:lang name='username' /}: {jv:author}">
                {jv:if condition='(avatar!="")'}
                <img src="{jv:avatar}" alt="">
                {jv:else /}
                <svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6v1H4z"/></svg>
                {/jv:if}
              </span>
              <span class="qa-time">[{jv:add_time|MyDate='m-d H:i',###}]</span>
              <a class="qa-q" href="{jv:arcurl}">{jv:title}</a>
              <span class="qa-reply">
                <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16v11H9l-5 4V5z"/></svg>
                {jv:answer_count}
              </span>
            </li>
          {/jv:qanewlist}
          </ul>
        </div>
      </section>

    </div>

    <div class="content-row">
      <section class="block" id="mall">
        <div class="block-head">
          <h2 class="block-title">{jv:lang name='block_mall_picks' /}</h2>
          <div class="mall-cat-nav">
            {jv:mallcat}
            <a href="{jv:mall_cat_url}">{jv:name}</a>
            {/jv:mallcat}
          </div>
          <a class="block-more" href="{jv:url}mall">{jv:lang name='view_more' /}<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a>
        </div>
        <div class="mall-grid">
        {jv:mallproductlist num="4"}
        <a class="card card-v mall-card" href="{jv:arcurl}">
          <span class="mall-product-imgbox">
            <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>
          <div class="card-body">
            <div class="mall-card-head">
              <h3 class="card-title">{jv:title}</h3>
              <span class="mall-card-price"><span class="price-symbol">{jv:lang name='mall_currency' /}</span>{jv:price}</span>
            </div>
            <p class="mall-card-desc">{jv:subtitle}</p>
            <div class="mall-card-foot">
              <span class="mall-card-tag">热销</span>
              <span class="mall-card-buy">立即购买</span>
            </div>
          </div>
        </a>
        {/jv:mallproductlist}
        </div>
      </section>
    </div>

    <div class="content-row row-2col">

      <section class="block" id="forum">
        <div class="block-head">
          <h2 class="block-title">{jv:lang name='block_forum_hot' /}</h2>
          <a class="block-more" href="{jv:url}forum">{jv:lang name='view_more' /}<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a>
        </div>
        <div class="forum-table-wrap">
        <div class="forum-thead">
          <span class="forum-col-title">{jv:lang name='forum_topic' /}</span>
          <span class="forum-col-author">{jv:lang name='forum_author' /}</span>
          <span class="forum-col-replies">{jv:lang name='forum_reply_view' /}</span>
          <span class="forum-col-last">{jv:lang name='forum_last_reply' /}</span>
        </div>
        <ul class="list-forum">
        {jv:forumlist num="13" orderby="new"}
          <li class="forum-item">
            <a class="forum-title" href="{jv:arcurl}">{jv:title}{jv:if condition='(is_digest==1)'}<span class="ft-tag ft-tag-digest">[{jv:lang name='forum_essence' /}]</span>{/jv:if}</a>
            <span class="forum-col-author">
              <span class="forum-avatar" title="{jv:lang name='username' /}: {jv:author}">
                {jv:if condition='(author_avatar!="")'}
                <img src="{jv:author_avatar}" alt="">
                {jv:else /}
                <svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6v1H4z"/></svg>
                {/jv:if}
              </span>
              <span class="forum-cell-time">[{jv:add_time|MyDate='m-d H:i',###}]</span>
            </span>
            <span class="forum-col-replies">
              <strong>{jv:reply_count}</strong><span class="forum-sep">/</span>{jv:arcclick}
            </span>
            <span class="forum-col-last">
              <span class="forum-avatar" title="{jv:lang name='username' /}: {jv:last_replier}">
                {jv:if condition='(last_replier_avatar!="")'}
                <img src="{jv:last_replier_avatar}" alt="">
                {jv:else /}
                <svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6v1H4z"/></svg>
                {/jv:if}
              </span>
              <span class="forum-cell-time">[{jv:last_reply_time|MyDate='m-d H:i',###}]</span>
            </span>
          </li>
        {/jv:forumlist}
        </ul>
        </div>
      </section>

      <section class="block" id="downloads">
        <div class="block-head">
          <h2 class="block-title">{jv:lang name='block_hot_downloads' /}</h2>
          <a class="block-more" href="{jv:url}list/35.html">{jv:lang name='view_more' /}<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a>
        </div>
        <div class="download-grid">
        {jv:artlist typeid="35" loop="4" orderby="new"}
        <a class="card card-v" href="{jv:arcurl}">
          <img class="card-img" src="{jv:litpic}" alt="{jv:title}">
          <div class="card-body">
            <h3 class="card-title">{jv:title}</h3>
            <div class="card-foot">
              <span class="dl-price">{jv:lang name='mall_currency' /}{jv:price}</span>
              <span class="dl-date">{jv:add_time|MyDate='Y-m-d',###}</span>
            </div>
          </div>
        </a>
        {/jv:artlist}
        </div>
      </section>

    </div>

  </div>
</main>

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