{//
title_F_variants.html
Family: F
Variant index: 0..19 (与 item 的 0..19 一致)
依赖变量：
- $TpStyle.dom_prefix
- $title.primary / $title.secondary
- $strMoreUrl (可空)
- $Slot.more_text (可空，默认“更多”)
}

{switch $Slot.title_tpl.variant}

{case value="0"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v00" data-tf="F00">
    <div class="{$TpStyle.dom_prefix}-titleF-left">
        <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
        {if !empty($title.secondary)}<span class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</span>{/if}
    </div>
    {if !empty($strMoreUrl)}
    <div class="{$TpStyle.dom_prefix}-titleF-more">
        <a href="{$strMoreUrl}" >{$Slot.more_text|default='更多'}</a>
    </div>
    {/if}
</header>
{/case}

{case value="1"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v01" data-tf="F01">
    <div class="{$TpStyle.dom_prefix}-titleF-row">
        <div class="{$TpStyle.dom_prefix}-titleF-stack">
            <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
            {if !empty($title.secondary)}<p class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</p>{/if}
        </div>
        {if !empty($strMoreUrl)}
        <a class="{$TpStyle.dom_prefix}-titleF-more" href="{$strMoreUrl}"
            >{$Slot.more_text|default='更多'}</a>
        {/if}
    </div>
</header>
{/case}

{case value="2"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v02" data-tf="F02">
    <h3 class="{$TpStyle.dom_prefix}-titleF-main">
        <span class="{$TpStyle.dom_prefix}-titleF-dot" aria-hidden="true"></span>
        <span class="{$TpStyle.dom_prefix}-titleF-txt">{$title.primary}</span>
    </h3>
    <div class="{$TpStyle.dom_prefix}-titleF-meta">
        {if !empty($title.secondary)}<span class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</span>{/if}
        {if !empty($strMoreUrl)}
        <span class="{$TpStyle.dom_prefix}-titleF-more">
            <a href="{$strMoreUrl}" >{$Slot.more_text|default='更多'}</a>
        </span>
        {/if}
    </div>
</header>
{/case}

{case value="3"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v03" data-tf="F03">
    <div class="{$TpStyle.dom_prefix}-titleF-top">
        <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
        {if !empty($strMoreUrl)}
        <div class="{$TpStyle.dom_prefix}-titleF-more">
            <a href="{$strMoreUrl}"  aria-label="{$Slot.more_text|default='更多'}">»</a>
        </div>
        {/if}
    </div>
    {if !empty($title.secondary)}<div class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</div>{/if}
</header>
{/case}

{case value="4"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v04" data-tf="F04">
    <div class="{$TpStyle.dom_prefix}-titleF-grid">
        <div class="{$TpStyle.dom_prefix}-titleF-cell">
            <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
            {if !empty($title.secondary)}<small class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</small>{/if}
        </div>
        {if !empty($strMoreUrl)}
        <div class="{$TpStyle.dom_prefix}-titleF-cell {$TpStyle.dom_prefix}-titleF-cell--more">
            <a class="{$TpStyle.dom_prefix}-titleF-more" href="{$strMoreUrl}"
                >{$Slot.more_text|default='更多'}</a>
        </div>
        {/if}
    </div>
</header>
{/case}

{case value="5"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v05" data-tf="F05">
    <div class="{$TpStyle.dom_prefix}-titleF-left">
        <h3 class="{$TpStyle.dom_prefix}-titleF-main">
            <span class="{$TpStyle.dom_prefix}-titleF-mark" aria-hidden="true"></span>
            {$title.primary}
        </h3>
        {if !empty($title.secondary)}<span class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</span>{/if}
    </div>
    {if !empty($strMoreUrl)}
    <nav class="{$TpStyle.dom_prefix}-titleF-nav" aria-label="More">
        <a class="{$TpStyle.dom_prefix}-titleF-more" href="{$strMoreUrl}"
            >{$Slot.more_text|default='更多'}</a>
    </nav>
    {/if}
</header>
{/case}

{case value="6"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v06" data-tf="F06">
    <div class="{$TpStyle.dom_prefix}-titleF-line" aria-hidden="true"></div>
    <div class="{$TpStyle.dom_prefix}-titleF-body">
        <div class="{$TpStyle.dom_prefix}-titleF-text">
            <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
            {if !empty($title.secondary)}<p class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</p>{/if}
        </div>
        {if !empty($strMoreUrl)}
        <div class="{$TpStyle.dom_prefix}-titleF-cta">
            <a href="{$strMoreUrl}" >{$Slot.more_text|default='更多'}</a>
        </div>
        {/if}
    </div>
</header>
{/case}

{case value="7"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v07" data-tf="F07">
    <div class="{$TpStyle.dom_prefix}-titleF-wrap">
        <div class="{$TpStyle.dom_prefix}-titleF-head">
            <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
            {if !empty($title.secondary)}<span class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</span>{/if}
        </div>
        {if !empty($strMoreUrl)}
        <div class="{$TpStyle.dom_prefix}-titleF-tail">
            <a class="{$TpStyle.dom_prefix}-titleF-more" href="{$strMoreUrl}" >
                <span class="{$TpStyle.dom_prefix}-titleF-moreTxt">{$Slot.more_text|default='更多'}</span>
                <i class="{$TpStyle.dom_prefix}-titleF-moreIco" aria-hidden="true"></i>
            </a>
        </div>
        {/if}
    </div>
</header>
{/case}

{case value="8"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v08" data-tf="F08">
    <div class="{$TpStyle.dom_prefix}-titleF-left">
        <h3 class="{$TpStyle.dom_prefix}-titleF-main">
            {$title.primary}
            <em class="{$TpStyle.dom_prefix}-titleF-sfx" aria-hidden="true"></em>
        </h3>
        {if !empty($title.secondary)}<span class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</span>{/if}
    </div>
    {if !empty($strMoreUrl)}
    <div class="{$TpStyle.dom_prefix}-titleF-more">
        <a href="{$strMoreUrl}" >
            <span class="{$TpStyle.dom_prefix}-titleF-moreTxt">{$Slot.more_text|default='更多'}</span>
        </a>
    </div>
    {/if}
</header>
{/case}

{case value="9"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v09" data-tf="F09">
    <div class="{$TpStyle.dom_prefix}-titleF-bar">
        <div class="{$TpStyle.dom_prefix}-titleF-l">
            <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
            {if !empty($title.secondary)}<div class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</div>{/if}
        </div>
        {if !empty($strMoreUrl)}
        <div class="{$TpStyle.dom_prefix}-titleF-r">
            <a class="{$TpStyle.dom_prefix}-titleF-more" href="{$strMoreUrl}"
                >{$Slot.more_text|default='更多'}</a>
        </div>
        {/if}
    </div>
</header>
{/case}

{case value="10"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v10" data-tf="F10">
    <div class="{$TpStyle.dom_prefix}-titleF-head">
        <h3 class="{$TpStyle.dom_prefix}-titleF-main"><span aria-hidden="true">#</span>{$title.primary}</h3>
        {if !empty($strMoreUrl)}
        <a class="{$TpStyle.dom_prefix}-titleF-more" href="{$strMoreUrl}"
            >{$Slot.more_text|default='更多'}</a>
        {/if}
    </div>
    {if !empty($title.secondary)}
    <div class="{$TpStyle.dom_prefix}-titleF-foot">
        <span class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</span>
    </div>
    {/if}
</header>
{/case}

{case value="11"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v11" data-tf="F11">
    <div class="{$TpStyle.dom_prefix}-titleF-rail" aria-hidden="true"></div>
    <div class="{$TpStyle.dom_prefix}-titleF-content">
        <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
        <div class="{$TpStyle.dom_prefix}-titleF-actions">
            {if !empty($title.secondary)}<span class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</span>{/if}
            {if !empty($strMoreUrl)}
            <a class="{$TpStyle.dom_prefix}-titleF-more" href="{$strMoreUrl}"
                >{$Slot.more_text|default='更多'}</a>
            {/if}
        </div>
    </div>
</header>
{/case}

{case value="12"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v12" data-tf="F12">
    <div class="{$TpStyle.dom_prefix}-titleF-left">
        <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
    </div>
    <div class="{$TpStyle.dom_prefix}-titleF-right">
        {if !empty($title.secondary)}<span class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</span>{/if}
        {if !empty($strMoreUrl)}
        <span class="{$TpStyle.dom_prefix}-titleF-more">
            <a href="{$strMoreUrl}" >{$Slot.more_text|default='更多'}</a>
        </span>
        {/if}
    </div>
</header>
{/case}

{case value="13"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v13" data-tf="F13">
    <div class="{$TpStyle.dom_prefix}-titleF-center">
        <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
        {if !empty($title.secondary)}<span class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</span>{/if}
    </div>
    {if !empty($strMoreUrl)}
    <div class="{$TpStyle.dom_prefix}-titleF-moreWrap">
        <a class="{$TpStyle.dom_prefix}-titleF-more" href="{$strMoreUrl}"
            >{$Slot.more_text|default='更多'}</a>
    </div>
    {/if}
</header>
{/case}

{case value="14"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v14" data-tf="F14">
    <div class="{$TpStyle.dom_prefix}-titleF-inner">
        <div class="{$TpStyle.dom_prefix}-titleF-title">
            <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
            {if !empty($title.secondary)}<span class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</span>{/if}
        </div>
        {if !empty($strMoreUrl)}
        <div class="{$TpStyle.dom_prefix}-titleF-more">
            <a href="{$strMoreUrl}" >
                <span class="{$TpStyle.dom_prefix}-titleF-moreTxt">{$Slot.more_text|default='更多'}</span>
            </a>
        </div>
        {/if}
    </div>
    <div class="{$TpStyle.dom_prefix}-titleF-divider" aria-hidden="true"></div>
</header>
{/case}

{case value="15"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v15" data-tf="F15">
    <div class="{$TpStyle.dom_prefix}-titleF-left">
        <h3 class="{$TpStyle.dom_prefix}-titleF-main">
            <span class="{$TpStyle.dom_prefix}-titleF-pre" aria-hidden="true"></span>
            {$title.primary}
        </h3>
    </div>
    <div class="{$TpStyle.dom_prefix}-titleF-right">
        {if !empty($title.secondary)}<span class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</span>{/if}
        {if !empty($strMoreUrl)}
        <a class="{$TpStyle.dom_prefix}-titleF-more" href="{$strMoreUrl}"
            >{$Slot.more_text|default='更多'}</a>
        {/if}
    </div>
</header>
{/case}

{case value="16"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v16" data-tf="F16">
    <div class="{$TpStyle.dom_prefix}-titleF-hero">
        <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
        {if !empty($strMoreUrl)}
        <a class="{$TpStyle.dom_prefix}-titleF-more" href="{$strMoreUrl}" >
            <span class="{$TpStyle.dom_prefix}-titleF-moreTxt">{$Slot.more_text|default='更多'}</span>
        </a>
        {/if}
    </div>
    {if !empty($title.secondary)}
    <div class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</div>
    {/if}
</header>
{/case}

{case value="17"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v17" data-tf="F17">
    <div class="{$TpStyle.dom_prefix}-titleF-row">
        <div class="{$TpStyle.dom_prefix}-titleF-text">
            <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
            {if !empty($title.secondary)}<span class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</span>{/if}
        </div>
        {if !empty($strMoreUrl)}
        <div class="{$TpStyle.dom_prefix}-titleF-more">
            <a href="{$strMoreUrl}" >
                <span class="{$TpStyle.dom_prefix}-titleF-moreTxt">{$Slot.more_text|default='更多'}</span>
                <span class="{$TpStyle.dom_prefix}-titleF-moreArr" aria-hidden="true">→</span>
            </a>
        </div>
        {/if}
    </div>
</header>
{/case}

{case value="18"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v18" data-tf="F18">
    <!-- <div class="{$TpStyle.dom_prefix}-titleF-cap" aria-hidden="true"></div> -->
    <div class="{$TpStyle.dom_prefix}-titleF-body">
        <div class="{$TpStyle.dom_prefix}-titleF-left">
            <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
            {if !empty($title.secondary)}<small class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</small>{/if}
        </div>
        {if !empty($strMoreUrl)}
        <div class="{$TpStyle.dom_prefix}-titleF-more">
            <a href="{$strMoreUrl}" >{$Slot.more_text|default='更多'}</a>
        </div>
        {/if}
    </div>
</header>
{/case}

{case value="19"}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v19" data-tf="F19">
    <div class="{$TpStyle.dom_prefix}-titleF-a">
        <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
        {if !empty($title.secondary)}<span class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</span>{/if}
    </div>
    {if !empty($strMoreUrl)}
    <div class="{$TpStyle.dom_prefix}-titleF-b">
        <a class="{$TpStyle.dom_prefix}-titleF-more" href="{$strMoreUrl}" >
            <span class="{$TpStyle.dom_prefix}-titleF-moreTxt">{$Slot.more_text|default='更多'}</span>
            <i class="{$TpStyle.dom_prefix}-titleF-ico" aria-hidden="true"></i>
        </a>
    </div>
    {/if}
</header>
{/case}

{default /}
<header class="{$TpStyle.dom_prefix}-titleF {$TpStyle.dom_prefix}-titleF-v00" data-tf="F00">
    <div class="{$TpStyle.dom_prefix}-titleF-left">
        <h3 class="{$TpStyle.dom_prefix}-titleF-main">{$title.primary}</h3>
        {if !empty($title.secondary)}<span class="{$TpStyle.dom_prefix}-titleF-sub">{$title.secondary}</span>{/if}
    </div>
    {if !empty($strMoreUrl)}
    <div class="{$TpStyle.dom_prefix}-titleF-more">
        <a href="{$strMoreUrl}" >{$Slot.more_text|default='更多'}</a>
    </div>
    {/if}
</header>
{/default}

{/switch}