jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

refactor: 产品详情页

Browse Source
This commit is contained in:
jsasg
2025-05-14 15:20:02 +08:00
parent 67fc583bd3
commit d203a3ad3b
2 changed files with 20 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/index/view/product/detail.html
View File

@@ -31,42 +31,37 @@
<div class="cpfl">
{volist name="product_skus" id="sku" key="idx"}
<div class="preview" id="preview{$sku.id}" {neq name="idx" value="1"}style="display:none"{/neq}>
{if condition="!empty($product.video_img) && !empty($product.video_url) && $idx == 1"}
<div class="smallImg">
<!-- 小图片预览 -->
<div id="imageMenu">
<ul class="image_list">
<li id="onlickImg"><img src="{:thumb($product.video_img)}" /></li>
</ul>
</div>
</div>
<!-- 产品视频 -->
<div class="bigImg" id="vertical">
<video poster="{$product.video_img}" controls="controls" width="100%" height="100%">
<source src="{$product.video_url}" type="video/mp4"/>
</video>
</div>
{/if}
<div class="smallImg">
<!-- 左边切换按钮 -->
<div class="scrollbutton smallImgUp disabled"></div>
<!-- 小图片预览 -->
<div id="imageMenu">
<ul class="image_list">
{if condition="!empty($product.video_img) && !empty($product.video_url) && $idx == 1"}
<!-- 产品视频 -->
<li id="onlickImg"><img src="{:thumb($product.video_img)}" data-url="{$product.video_url}" /></li>
{/if}
{volist name="sku.photo_album" id="photo"}
<li id="onlickImg"><img src="{:thumb($photo)}" /></li>
<li id="onlickImg"><img src="{:thumb($photo)}" data-url="{$photo}" /></li>
{/volist}
</ul>
</div>
<!-- 右边切换按钮 -->
<div class="scrollbutton smallImgDown"></div>
</div>
<!-- 产品大图 -->
<div class="bigImg" id="vertical">
<!-- 左边切换按钮 -->
<div class="scrollbutton smallImgUp disabled"></div>
<!-- 主图 -->
{if condition="!empty($product.video_img) && !empty($product.video_url) && $idx == 1"}
<!-- 如果有视频情况下默认先显示视频 -->
<video poster="{$product.video_img}" autoplay="autoplay" muted="muted" loop="loop" id="video" controls>
<source src="{$product.video_url}" type="video/mp4" />
</video>
{else/}
{notempty name="sku.photo_album[0]"}
<img src="{$sku.photo_album[0]}" id="midimg" />
{/notempty}
<!-- 右边切换按钮 -->
<div class="scrollbutton smallImgDown"></div>
{/if}
</div>
</div>
{/volist}
@@ -110,8 +105,8 @@
</div>
<!-- 按钮-->
<div class="buy">
{volist name="product_purchase_links" id="ppp"}
<a class="thebt bttype1" href="{$ppp.link}">{$ppp.platform_name}</a>
{volist name="product_purchase_links" id="ppp" key="k"}
<a class="thebt bttype{$k}" href="{$ppp.link}">{$ppp.platform_name}</a>
{/volist}
<a class="thebt bttype3" id="open_form_modal">{:lang('product_detail.display_form')}</a>
</div>
@@ -121,8 +116,10 @@
<div class="oriprInfo">
<div class="titleprinfo">
<a href="#detail" class="checkshow">{:lang('product_detail.detail_section_title')}</a>
{notempty name="product_related"}
<span>|</span>
<a href="#related">{:lang('product_detail.related_products')}</a></div>
{/notempty}
<!-- 富文本渲染-->
<div class="products_des" id="detail">
{$product.detail|default=''|raw}