Browse Source

feat: 更新产品页面的标签切换功能,优化内容展示逻辑

master
peijunlei 3 weeks ago
parent
commit
e8228bf19c
  1. 32
      public/themes/website/1/zh/demo/product.html

32
public/themes/website/1/zh/demo/product.html

@ -210,7 +210,7 @@
data-bs-target="#p-spec-panel-{$key}"
role="tab"
aria-controls="p-spec-panel-{$key}"
aria-selected="true"
aria-selected="{if $key==1}true{else /}false{/if}"
>
<span class="p-spec__tab-media">
<img src="{:deal_image_url($vo.url)}" width="80" height="111" alt="" />
@ -226,22 +226,28 @@
</div>
</div>
<div class="p-spec__body">
<!-- TODO...需要实现切换效果 -->
<div class="p-spec__body tab-content">
{volist name="pic_many" id="vo" key="key"}
<!-- 判断显示哪个内容 -->
{switch $key}
{case 1}{$rich_text_three|raw}{/case}
{case 2}{$rich_text_four|raw}{/case}
{case 3}{$rich_text_five|raw}{/case}
{case 4}{$rich_text_six|raw}{/case}
{case 5}{$rich_text_seven|raw}{/case}
{default /} 暂无匹配内容
{/switch}
<div
class="tab-pane fade {if $key==1}show active{/if}"
id="p-spec-panel-{$key}"
role="tabpanel"
aria-labelledby="p-spec-tab-{$key}"
tabindex="0"
>
{switch $key}
{case 1}{$rich_text_three|raw}{/case}
{case 2}{$rich_text_four|raw}{/case}
{case 3}{$rich_text_five|raw}{/case}
{case 4}{$rich_text_six|raw}{/case}
{case 5}{$rich_text_seven|raw}{/case}
{default /}暂无匹配内容
{/switch}
</div>
{/volist}
{if $total_standard_num == 0}
<!-- 仅展示第一个富文本 -->
<!-- 无型号 tabs 时仅展示第一个富文本 -->
{$rich_text_three|raw}
{/if}

Loading…
Cancel
Save